How To Create A Google Site Tutorial

Google Sites is an easy, yet surprisingly powerful, tool for building sophisticated websites.

Sites is easy to use (it's actually a wiki) but can also be highly customized. Site are ideal for class websites, group projects, student eportfolios, and much more. In this session we will build a site from scratch, create a menu structure, add a couple of pages, and include a range of digital resources on each page.

By the end of the session you will have a working knowledge of what Sites can do and an understanding of how you can customize them for a variety of uses.

Pre - Planning your Site

Before you get started with Sites, it helps to be clear about what a Site is, and how one is typically structured.

A Site usually has a home page that serves as an introduction to the site, and a brief description of what it's all about. This introduces your visitors to the Site.

Below that, Sites have pages that contain content. These will usually be structured around themes or topics. A Site can have an unlimited number of pages, although if there are many pages it is usually better to build subpages, ie add more pages grouped below a topic page.

Some of the elements common to all the pages in the Site include...

TheHeader section appears at the top of each page and can contain text, graphics or both.
TheNavigation Menu contains links to all the pages in the site, or at least the main sections. Navigation menus can behorizontal across the top of the page, or in avertical menu on the left or right of the page.
TheFooter area is at the bottom of each page and usually contains copyright and contact information.
TheContent area on each page is where you find all the actual good stuff. The content area stretches from the header to the footer, and can contain text, images, video, links, and so on. On a Google Site, the content area can be in a number oflayout styles, with columns or other sections.

Before you start building a website in Sites, it helps to sketch out a rough map of the proposed Site (don't worry, it will change as you go along, but starting with an idea of where you're heading really helps!)

If you want to include a graphic Header on your Site, you'll need to make it in a program like Photoshop or Pixlr Editor. The header can be any size, but should try to match the width of your site. (As a rough guide, the header on this page is 960x135 pixels). Your header graphic should be approximately 40 pixels narrower than the width of your Site. (This Site is 1000 pixels wide)

Should you use Templates and Themes?

The easiest way to start building a Site is to use one of the prebuilt templates and just change the page content to your own.

However, I recommend you do NOT use templates to get started. Although the templates might look fancy, they can bereally hard to untangle if you want to modify anything. Plus, starting to build a Site from scratch gives you a far better idea of how they actually work.

Themes, on the other hand, are great for younger students or if you just want to put a site together quickly and aren't too concerned about the look and feel of it. I think it's much better to start with a really simple template and then add your own flair to it, but that's just my own personal preference.

Let's create a Site

Click theCreate button
Choose theBlank Template
Name your site. You'll notice it creates the url based on the name but you can override that if you wish (Note that the name must be unique in your domain)
Unfold theThemes section, and choose a theme you like (I like to start with Simple, but it's up to you)
Unfold theMore Options section, and enter a short description about your Site.
Type thecaptcha code
Click theCreate button at the top of the page

Setting Privacy options

Depending on the settings in your Apps dashboard, the whole world can see potentially your site. Until you're ready to make it public you may want to set it to private.

More >Sharing and Permissions
Change thePublic on the Web option to your preferred choice.

Edit your Site Layout

To set the basic options for your site, you need to make a few choices about how the Pages, Header, Footer and Nav will look.

More >Edit Site Layout
From the options bar that appears, make your choices...
To change the settings for a section of the page, click the relevant area in the preview below.ie, to include a Footer, you'd turn on the Footer in the options bar, and then click in the Footer area to make the changes you want.
ClickClose

Tip1 : The layout bar can seem to be a bit buggy at times, but the trick is to make sure you allow enough time for the changes to take hold, and for the graphics to be uploaded, before you click the Close button.

Tip 2: You could turn on both horizontal AND vertical (sidebar) navigation. But unless you have a good reason to do so, just choose one or the other. The main difference is that Sidebars can be created automatically for you (in alphabetical order, which is not always what you want) or manually created. Horizontal Navs must always be created manually.

Adding a Header

The most obvious way to customize your site is with a custom header - a graphical banner with the name of your site, that goes across the top of all pages in your site. Having a header is a fairly traditional approach to designing site pages, but is a great place to start if you're new to this. You may want to get more adventurous later as you master the way Sites work.

In this example, the site is set to be 1000 pixels wide. There is about a 20 pixel padding space on either side, so the ideal graphic header size is 960 pixels wide.

If you know how to use an image editor like Photoshop or Pixlr Editor, feel free to put together your own graphic header. Just make it 960 pixels wide and around 200pixels tall. The width should be exact, the height can be whatever you like.

To help you get started, here are a few pre-made headers you can use to play with. Just download to your computer and then upload into your Site.

Just a little more fine tuning!

Before we start adding content, there's just a couple more choices to make...

More >Manage Site
If you've used a Header image you may want to turn off the text in the header.Untick theShow site name at top of pages option
If you'd like to include aSearch box so visitors can search your Site, configure this using theConfigure Search button
If you think your Site may be viewed on mobile devices, tick theAutomatically adjust site to mobile phones option. (This doesn't perfect, but it's worth turning on anyway. With the right theme, it can work quite well.)
UnderAccess settings, choose who should be able to seeSite activity andRevision history.
If you haveGoogle Analytics, you can also set that up on this page
ClickSave.

Let's make some pages!

Whew, that's been a lot of work and we haven't even started adding pages yet! But it's worth getting things set up in the beginning, as it really streamlines the work down the track and helps you focus on great content. Trust me!

To make a page on your site, click theNew page button

In the options that appear, Name your page (the url path will be automatically created, but you can override it if you wish)

In theSelect a template to use section, you can choose from Web Page, Announcements, File Cabinet or List. In most cases, (at least until you start to get your head around Sites) you'll probably want to just chooseWeb Page.

In theSelect a location option, yourtop level pages (the ones that form the main menu) should be placed at thetop level

Click theCreate button. You've just created your first page.

Add 3 or 4 more pages to your site by repeating this step.

Tip: When you create a page it opens in edit mode. If you aren't ready to work on it right now, just click the save button to close it. You can easily come back and add content to the page later.

Adjusting your Navigation

By default, the pages you add to your Site will automatically appear in the Navigation bar. When you're starting out with Sites, this is a really handy thing as your nav bars are just made for you without any effort from you. It's nice and easy, but the pages appear in the nav bar in alphabetical order by default which might not be what you want.

Eventually you will want to start manually managing the Navigation Bar layout.

More >Edit site layout
Click on the navigation area
Untick theAutomatically organise my navigation option
In the dialog that appears, click the Add page option to choose from all the pages in the Site
Click OK to add the page to the list. Note, you may have to scroll down to find the OK button!
Keep adding your desired pages to the list
Use the up, down, left, right arrows to reorder and structure you navigation menu
You can also add links to external websites by using the Add URL option
Untick Sitemap if you don't want one
Click the Close button when you're done

Adding content to your pages

Now that you have your site nicely structured, it's time to add content to all those blank pages! I can't tell you what you should add - it's your site! But there are a few guidelines you should be aware of...

Webpages should be structured around the use ofHeading Styles. You'll find these in the Format menu.Basically you use Heading 2 for your major headings, Heading 3 for the next level down, and so on. Your body text should be formatted as Normal Paragraph Text. Again, trust me on this! This also helps to create aTable of Contents (like the one at the top of this page)

Google Sites webpages are not good at creating fancy sophisticated page layout.Keep it simple!If you try to be too fussy about page layout, and you treat a Sites page as though it was an InDesign document, you are in for a world of pain! Once more, trust me on this.

YouCAN choose from a limited range of page layout designs. ChooseLayout from the main menu to change the layout for the current page. In general, simple is better.

TheInsert menu reveals a whole bunch of interesting options for adding rich media content to your pages! From here you can insert images, charts, maps, videos and much, much more! Each of these media types has different options, depending on what it is, but they are generally pretty straightforward. Remember though, you are basically adding content to the page working from top to bottom. Don't get all hung up on trying to make the layout pixel-perfect. Remember that your site will be viewed on anything from a 27 inch iMac screen to a 4 inch mobile phone screen. Trying to micromanage page layout will just end in frustration. Sites pages are simple. Don't fight it.

The Table menu lets you insert tables on your pages, but use them sparingly. See the paragraph above. Seriously.

Customise your Look and Feel

This part is fun. Once you have some content on the pages, you can customise the colour schemes, fonts and other attributes of your Site. This is where you give your Site some character and make it look uniquely yours.

More >Manage Site >Colors and Fonts
From the list on the left (keep scrolling! It's long!) choose a category and click on an item you want to customise
Make your choices from the options on the right. Choosing Custom offers the most choices
In this example,Page background colorwas the item, and acustom green was the choice. You can see the change reflected in the preview below the options.
Work your way through the list, making changes to whatever you wish. There are lots of choices you could make. You can change default fonts here too, and if you've used paragraph styles, it should all display nicely on your pages. If you've made customised font changes directly on the pages themselves you could end up in a real mess!
Again, showing a bit of restraint and sticking to the "less is more" principle works wonders.

Publish your work

Don't forget to make your Site visible to the world (or just your domain, or just individual people... you choose) once you are ready to "go live" with the Site.

More >Sharing and permissions
Set your permissions
Save the change

But wait, there's more!

There certainly is more. Sites is an amazingly flexible and powerful tool that can produce some fabulously cool looking websites. Students can create ePortfolio sites, teachers can make class websites, schools can produce event websites, and so much more. Once you get the hang of how they work, you can very quickly put together a professional looking site for special events, special projects, school committees, volunteer groups...they have a million and one uses around a school!

This session was designed to be an introduction to Sites. Just the basics. If you want to know more, just Google it. Hopefully you can see the power of what Sites offers and also why developing good work habits with web design pays off.

If you've managed to work through this tutorial, well done! You're well on your way to becoming a sites guru.

A few more resources...

Here's just a couple of links from some of my GCT and AppsCT colleagues. They might help you take your sites to the next level!

Official Google Sites Support Page
Google Apps for Edu Certified Trainer, Sites notes
Google Sites Crib Sheet

Here's a slideshow with a few examples of Google Sites that don't necessarily look like Google Sites.