I resisted making my classroom website on Sites for a while as I have created websites for over ten years with HTML using programs like Notepad, Frontpage, and Dreamweaver. But, after some new updates to the Google Sites interface, I am more than happy to use it.
Before we proceed there are some pros and cons to using Google Sites where it might be better to use a HTML editor.
When you need to use a CSS template, customized code, or host from your own domain, then you will want to use a program like Dreamweaver. (If you would like a free and open source alternative to Dreamweaver, I recommend Kompozer).
If however, you need the ability to manage your website from any computer and want one that is relatively easy to set up then Google Sites is your best choice.
To find Sites, it is in the upper left with all of your other apps like Calendar and Docs. If you are not using Google Apps for schools and have just signed up for an individual account then you will need to click the more button.
Click create a new site and follow the instructions then click create site.
While there are certainly more ins and outs to it, many of us just want a good looking website that can share information. If that is you, then here are your 5 essentials for creating a Google Site.
Essential #1 Creating an Editing a Page
Now that you have created a "site" you need to create the individual pages that make up that site. In the upper left you should see a button that says Create Page.
There are 4 different types of pages and while some may be useful to you, the majority of sites are made up of Web Pages so make sure that is what is selected.
Name the page, make it something useful and easy to remember like "Syllabus" or "Links".
Below that you can decide where the page should reside. Think of your site as a tree branching out from its trunk. The trunk is the Home Page. This is your main page where people will first come to.
- Top level: This will place the page at the same level as your Home Page.
- The next option is to place the page under another page. For example I have a project page on the Top level and then the individual projects are on separate pages under the Projects page.
- You also have the option of choosing another location to put the pages under.
Keep in mind that all of the pages can link to each other regardless of how your organize your pages. How you organize your site is up to you and can be changed later.
Now you can edit the page you just created.
You will find it is similar to WYSIWIG (What You See Is What You Get) Editing in Dreamweaver, it is also similar to writing in Google Docs. One of the biggest updates to Google Sites was the large number of new items you can now insert into your page.
Use this space to insert pictures, links to other websites or pages, Google Calendars, Google Docs, video, or simply text. Whatever you labeled this page to be (e.g. Biography, Essays, Links) this is the place to put it. Take a look at the other options like Format, Table, and Layout for more options to customize this page.
Once you are done, click Save in the upper right of the page.
Congratulations, you have created your page and are ready for the next step.
Essential #2 Attachments
From the previous step, you are already aware of how to insert Google Documents, Calendars, Video, and the other options from the Insert menu when editing a page.
Note: If you use a Google Document, Presentation, or otherwise make sure you have the permissions set to share with everyone or those specifically you wish to.
If you have other types of attachments you wish to add to your website, it is quite simple. Once you have saved your page scroll to the bottom of it to where it says Attachments and Comments.
Click on the plus sign next to the word Attachments and then click on Upload. Choose the file you wish to upload to the page and click Open.
Continue this process for all of the attachments for that page and you are done.
Essential #3 Maintaining Your Website
Once you have created a few pages and uploaded a few files, you have a website. It is now about maintaining your site with updates, adding, and deleting.
Click on More Actions to access a few different options.
Some of the more important options are:
- Subscribe to Page Settings: If you are not the only one who will be editing the page (group project, grant proposal) then you will receive an email whenever the page is changed.
- Page Settings: Allows you to change the name of the page and change permissions.
- Move page: If you would like to change the hierarchy of your site.
- Save a page template: This will make this page the default page and all subsequent pages will look the same.
- Subscribe to site changes: Same as page subscription but for the entire site.
- Manage Site: Contains more options which we will review next.
- Share this site: This will send an email to those you wish to directly inform about your site.
Essential #4 Creating a Site Layout, Navigation, Sidebar, and more
You have created beautiful pages but unless they are linked together, no one will be able to find them. Additionally, there are other items of information you might always want to show your visitors (e.g. email address, links to important sites).
Click on the More Actions button and then on the Manage Site button on the drop down menu. The choices of greatest importance are:
- Attachments: Change, move, delete, or rename your uploaded files.
- General Site Settings: Useful to add your personalization.
- Sharing: Modify the settings on who can view your website.
- Site Appearance is where all of the personalization of how your site looks occurs.
Site Layout: Here is where you can fine tune the site. It is also where the sidebar can be found. The sidebar should look like the picture on the right. From here, click on Add a sidebar item found at the bottom of the sidebar. The two most important are:
- Navigation: This is how your viewers will navigate through the site. Click edit to reorder the pages.
- Text: Write a bio, an email address, or even insert HTML code for widgets like those found on social networking sites.
- Google has a great tutorial on making the most of your sidebar.
Essential #5 Colors and Fonts, Themes
This last section is the most subjective and will require your personal design choices.
The last two options on the Site Appearance section will allow you to select fonts, link colors, themes, etc. I would suggest you avoid immediately choosing your favorite color and think about the purpose of the site. How a professional site looks will be completely different to one of family members sharing pictures and stories.
Once you get the hang of these 5 essentials. You will have a great looking site where you can share information with the world. As a last note, go to your site and click on all of the links to make sure they work, check every page and get someone else's opinion about your choice of theme, colors, design and otherwise.
If you have any questions, comments, or feedback. Leave it in the comments or send me a message by email (phil at brokenairplane.com) or twitter (brokenairplane).
This tutorial was the result of a request so you can be confident that BrokenAirplane.com is committed to helping you use technology in the classroom and in the 21st century. New topics and tutorial suggestions are always appreciated.