Once you have a basic Google Site up and running, you can add content in lots of interesting ways. From embedding docs, maps, and video, to creating automated lists and feeds within the site, to integrating external resources such as Google Drive and Google Groups, there is a lot you can do to build a really functional, easy to navigate Site. This session will look at all the different things you can do to build content on your site, and even adding custom domains, etc.
This session is a follow-on from Part 1, but if you have used Sites before would still be useful even if you missed that session.
Either way, it will be really handy for you to have a partly built Site so you can play along in this workshop. It should have a navigation structure defined and a handful of pages to play with.
Play along! Here is a template you can use for this workshop. It contains blank pages for all the different page types and embeddable gadgets and objects for you to play with.
If you've done Part 1 of this workshop, you should already know this, but just in case, here's a reminder about the Colors, Themes and Fonts dialog in Sites. In here you can specify the look of just about every component of the site. (for anyone that knows a little about building websites using more traditional tools, this section is where the CSS is defined)
Go to the Action Menu > Manage Site > Themes, Colours and Fonts, and work through the settings to make the site looks how you want it to look. Start on the left and choose the general section you wish to define, then from the middle panel choose the specific sub-component you want to define, then in the righthand panel set the specific parameter for that item.
In the example below, a change is being made to Colour of the level 2 Header in the Content Area (that's the section of the page that displays the actual page content).
The advantage of defining changes in the styles panel like this is that if you decide to change a component you only need to make that change in one place once to affect the entire site. This is particularly the case with text... you definitely should not make page by page font changes to text! So, for example, if you wanted to increase the size of the font across your Site, you'd do it in the customisation settings once, and not on each page individually.
There are a LOT of options in here so it's worth spending some time experimenting with what's possible. It's also worth noting that the overall theme you choose (Simple in the example above) will impact of the way the options apply. Different base themes will apply the customisations in different ways. Play!
You can improve the visual look of your Site by coming up with a consistent and well balanced colour scheme. To do this try using a sampling tool to pick up a dominant colour from your main graphics. There are a number of good Chrome extensions for this, such as ColorZilla (http://goo.gl/6zI1g) which adds a button to Chrome that lets you pick up a colour with a virtual eyedropper tool and get its Hex Code number.
Once you know the hex colour for your main colour, try using a tool like Adobe Kuler (http://kuler.adobe.com/) or Color Scheme Designer (http://colorschemedesigner.com/) to generate a full colour palette. Both these tools use the science of colour theory to come up with colour combinations that work well together, so even if you don't have an artistic streak, you can still use colour like a boss!
Kuler can even come up with a palette based on a photo or image, so you get a palette that matches your artwork perfectly. Sweet!
Once you know the hex codes of the colours you want, go back into Sites, go to Actions Menu > Manage Site > Themes, Colours and Fonts and use those hex codes to fine tune your colour scheme. Just paste your chosen hex code number into the field below the colour picker dialog...
As you create your pages you'll obviously need to add content to them other than just plain text. In edit mode, click the Insert menu for a range of things you can add to your page, grouped into three main sections...
Gadgets are insertable active blocks that do stuff on your page. They contain code that can insert dynamic content into your pages. To make sense of the first three options you need to know that when you create a new page in your site you can create different page types...
These different page types come with gadgets that can surface their content elsewhere on the site. You can also customise the look of these gadget blocks in the Colours and Fonts section called Content Area Gadgets.
The last column offers ways to embed pretty much any content created with other Google tools. This area had had some improvements recently so there's lots to explore.
Note that many of these gadgets offer the choice of putting a border around them (or not), having a title displayed (or not), and various sizing options. I usually prefer to not include borders and title because I think it fits visually into the page design better, but sometimes you might want them if they suit your Site. Experiment with the options and see what you like!
This is a really cool way to add another form of visual navigation to your site by creating an image map with Google Drawings.
Adding Image Maps
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.
By default, your site has a URL like https://sites.google.com/site/betchaboysummit/, but you can set it up with a web address such ashttp://www.summitstuff.com instead. Makes it easier for people to remember, and looks more like a "real" website.
A domain can be bought for about $10, and connecting it to your Google Site is not very hard to do. Here's how...
Connecting a domain to your site
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!
Also, check out this article from GCT Chad Griffiths about how he made this interesting looking site.