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...
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!)
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 be really 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.
Log into your Google account and go to http://sites.google.com
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.
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.
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.
Header images are graphics that sit at the top of every page in your site. They can be any size you like, but if you make them almost the width of your site then they can act as a site banner. (A better approach to adding a site banner is done through the customisation settings, but is fiddlier... more on that later!)
In this example, the site width is set at 1000 pixels wide. Creating a banner by using a header image adds a 20 pixel padding space on either side, so if you want to use a header image as a near-fullwidth banner, the ideal image 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 any height you like (somewhere between 100 and 250 pixels tall would probably be best). The width should be exact, the height can be whatever you like.
Before we start adding content, there's just a couple more choices to make...
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 the New 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 the Select 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 choose Web Page.
In the Select a location option, your top level pages (the ones that form the main menu) should be placed at the top level
Click the Create 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.
Tip: You can also create your own page tempates.
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.
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 of Heading 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 a Table of Contents (like the one at the top of this page)
Google Sites webpages are not meant for 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! Trust me on this.
You CAN choose from a limited range of page layout designs. Choose Layout from the main menu to change the layout for the current page. In general, simple is better.
The Insert 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.
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.Again, trust me on this.
The Table menu lets you insert tables on your pages, but I suggest you use them sparingly if at all. See the advice in the paragraph above. Seriously.
We will delve more deeply into these options for adding content to Site pages in Designing Google Sites: Part 2
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.
Hope to see you in the second part of this workshop, Designing Google Sites Part 2