Victoria County CAP Sites Association presents:

The Easy Step Guide to

Web Design
Using Google Sites

Building Stronger Communities Through Technology

Course Contents

Overview
Lesson 1: Website Setup
Lesson 2: Design and Organization
Lesson 3: Adding and Modifying Content
Appendix

Each lesson includes a list of suggested practice tasks.

Web Design using Google Sites

Overview
Designing your first website can be daunting and
confusing, but Google has made it easy by providing
us with Google Sites (sites.google.com).
This manual teaches you step by step, how to set up
your website using Google Sites, design and
organize your site layout and menu structure, create
web pages, add a variety of content to your pages,
and modify existing content.
Google Sites is simple and very user friendly. If you
can navigate a web browser, you can design
websites with Google Sites. Let's show you how.

Web Design using Google Sites

Who should use Google Sites?

Google Sites is very user friendly, and simple to
understand. It is suitable for beginners.
The simple Google Sites interface limits its capability for
free html coding. Google Sites is restrictive in some ways,
and is thus not the best tool for experts, although still very
useful, particularly for company intranets and group sites.
Anyone interested in Web Design will likely find Google
Sites a very convenient application.

Web Design using Google Sites

Course Goals
1. Successfully set up a website on Google Sites
2. Understand very basic website design concepts
3. Know different types of web page content
4. Understand web page editing tools

Web Design using Google Sites

Lesson 1
Website Setup

Requirements
o

Computer with internet access

Web browser

Google account:
https://www.google.com/accounts/NewAccount

Log in at sites.google.com with your Google Account.

Requirements change slightly when using Google Apps:

see Appendix

Website Setup

Create a new site

1. Log in to Google Sites at sites.google.com.
2. Click on "Create new site".
3. Enter site name.
4. Enter site URL. Note: you cannot change this URL later!
5. Optionally, enter site category and description.
6. Pick your site theme (layout).
7. Click on "Create site".

Website Setup

You just created a website

Your first empty website is now created. Congratulations!

Note the 4 buttons on top of your website: Create new page,

Edit page, More actions, Site settings. You can only see these
if you are logged in.
Website Setup

10

The Google Sites Menu

Create new page
o You can create 5 different types of
pages.
o Covered in Lesson 2.

Edit page
o This where you add and modify the
content of pages.
o Covered in Lesson 3.

Website Setup

11

The Google Sites Menu (continued)

More actions
o 8 specific actions that are
important for the organization
and accessibility of your site.
o Covered in Lesson 2.

Site settings
o 3 areas that modify site-wide
settings
o Covered in Lesson 1.

Website Setup

12

Site Settings: Sharing

You can share a site with
specific users or with the
world.
For a public website
checkmark "Anyone in the
world may view this site".
You can also invite specific
people by email address as
owners, collaborators, or
viewers.

Website Setup

13

Site Settings: Sharing

Owners can:
o
o
o
o

Invite other owners, collaborators, or viewers

Change site name, themes, and layout
Delete the site
Do everything a collaborator can do

Collaborators can:
o
o
o
o

Create, edit, delete, and move pages

Add attachments and comments
Add/remove pages to the sidebar navigation
Subscribe to site and page changes

Viewers can:
o

Only view pages

Website Setup

14

Site Settings: Other Stuff

In "Other Stuff" you can modify these settings:

site name, category, and description

landing page (which is usually the home page)
enable/disable statistics (if you use Google Analytics)
enable/disable metatag verification (if you use Google
Webmaster Tools)
language for site emails
You can also delete the site here. Think twice before you
press the delete button.

Website Setup

15

Site Settings: Appearance

The Appearance area is divided into 3 tabs:
1. Site Elements
2. Colors and Fonts
3. Themes
Note:
After making changes here you must click on "Save changes".

Website Setup

17

Site Settings: Site Elements

In Site Elements you can
change:
Site layout
Site logo
Sidebar items
Sidebar items:
1. Navigation menu
2. Simple text
3. Recent site activity
4. My recent site activity
5. Countdown to a certain
point in time

Website Setup

18

Site Settings: Site Elements > Site Layout

If you click on "Change site layout" you can make the
following changes:

Site width
Header yes/no
Header height
Sidebar yes/no
Sidebar left/right
Sidebar width

Website Setup

19

Site Settings: Site Elements > Site Logo

You have 3 choices for
the website logo:
Domain default
(which is set up in
Google Apps)
Upload a custom
logo from your
computer
No logo

Website Setup

20

Site Settings: Colors and Fonts

Here you have control over:
Fonts
Colors
Background images

Website Setup

21

Site Settings: Themes

A theme is a color template for your website.

There are 23 themes to choose from.
o

Click on the "Preview" button below a theme to see how

your site would look like in that theme.

If you have decided on a theme, make sure that it is

selected, and click on "Save changes".

Website Setup

22

Suggestions for practice

1. Sign in at sites.google.com with your Google Apps or
your Google account, and create your first empty site.
2. Change the sharing settings, so that everybody in the
world can view your site.
3. Change the site logo to a logo of your choice.
4. Change the page font color to hot pink.
5. Change the site theme to "Wintermint".
6. Delete the "Recent Site Activity" sidebar item.
7. Add a new "Countdown" sidebar item, so that it counts
down to your upcoming birthday.

Website Setup

24

Lesson 2
Design and Organization

Page Types
In Google Sites, you can create 5 different types of pages:

Web Page

Dashboard

Announcements

File Cabinet

List

Design and Organization

26

What is a Web Page?

A web page is an unstructured page where you can enter
text, images, tables, and embed spreadsheets, presentations,
videos, and more.
The Web Page has standard formatting controls like bold,
italic, underline, font control, text color, and text highlighting.
You can create bulleted lists, numbered lists, and easily link
to other pages in your site.
You can attach documents from your hard drive to the bottom
of the page, and allow other site collaborators to comment on
your pages.

Design and Organization

27

What is a Dashboard?
A Dashboard page is a two column webpage with four
placeholder gadgets to make it easy to get started creating an
overview of information.
Gadgets are boxes of web content that can contain:
o
o
o
o
o

News
Weather Forecasts
Maps
Games
Text Boxes
and much more.

Design and Organization

29

What is an Announcements Page?

An Announcement page is a page which makes it
easy for an individual or group to post
chronological information like news, status
updates, or notable events.
It can be used to post organizational news, post
project updates, announce new releases, post
interesting links from around the web, as a simple
blog, and more.

Design and Organization

31

What is a File Cabinet?

A File Cabinet allows you to manage documents
from your hard drive and organize them into
folders.
This can be used to organize common
documents in one place.
Version history is stored for documents so you
can always return to an earlier version.

Design and Organization

33

What is a List?
List pages allow you to easily track lists of
information.
You can choose from a list of templates or
configure your own custom columns.
Items can be easily added, updated, and
removed.

Design and Organization

35

Website Planning
Before you start building your site, plan out its rough
content with pen and paper.
For each page on your site, write down the following:

Page Name

Page Type

Page Location

Design and Organization

37

Page Hierarchy
Page location refers to its place within the page hierarchy.
Draw a diagram for your site that looks something like this:

Home (announcement page)

Main Page 1 (web page)

Sub Page 1 (list)

Sub Page 2 (list)

Sub Page 3 (file cabinet)

Main Page 2 (web page)

Sub Page 1 (web page)

Sub Page 2 (web page)

Sub Page 1 (web page)

Main Page 3 (web page)

Design and Organization

38

Page Hierarchy (continued)

The page hierarchy is a sitemap of your website.
The home page and all main pages (aka top level
pages) are those pages that are suitable to
appear in the navigation menu.
A sub page belongs to a particular parent page,
which can be a main page, or a sub page. You
can put a sub page "under" a parent page.

Design and Organization

40

Create Pages
Now that you have your website planned, follow these steps:
1. Click on "Create new page".
2. Enter Page Name.
3. Choose Page Type.
4. Choose Page Location within Hierarchy.
5. Click on "Create Page".
6. Repeat steps 1-5 for each page.

Design and Organization

41

Create the Menu

All of your pages are now created. You may notice that none of
your pages show up in the navigation menu, which still only
contains "Home" and "Sitemap". To create the menu:
1. Click on "Sitemap".
2. Click on a top level page which you want to
see in the navigation menu.
3. Click on "More Actions".
4. Click on "Page Settings".
5. Checkmark "Show this in Navigation".
6. Click on "Save".
7. Repeat steps 1-6 for each page.
Design and Organization

42

More Actions Menu

We are now ready to explore the

remainder of the "More Actions"
button.
Note that the top six options are
page-specific, ie. they affect only the
one page that is displayed at the time
the button is clicked.

Design and Organization

43

More Actions Menu (continued)

Subscribe to page changes:
Click this once, and you will be notified by email of
any changes made to the current page. To undo this,
click the same button once again, which has now
changed to "Unsubscribe from page changes".
Subscribe to site changes:
This button acts in the same manner as the above,
except that it applies to all pages in your site.
Preview page as viewer:
Click this to see the current page in "viewer preview"
mode. A viewer is somebody who is not logged in.

Design and Organization

44

More Actions Menu (continued)

Print:
This opens a new browser window where
the current page is displayed in "printerfriendly" mode. You can then print this page
by clicking "Print" in your web browser.
Delete:
This permanently deletes the current page.
Click on "Delete" when you are being asked
"Really delete page?". Or press cancel if
you want to think this over.

Design and Organization

45

More Actions Menu: Move

To move a page (change its location within the hierarchy):
1. Click "Move" to open a window that displays the
page hierarchy of all pages in your site except the
current page.
2. Click the one page you want to move the current
page under (ie. click on the new parent page).
3. If you want to move the current page to the top
level, click on the the topmost "page", which
displays the title of your website.
4. Click on "Move".
Design and Organization

46

More Actions Menu: Page Settings

In Page settings you can toggle the visibility of these
items:

Link in the navigation menu

Page title on page top

Automatic links to sub pages at page bottom

File attachments

User comments
You can also change the page URL here.
Design and Organization

48

More Actions Menu: Sitemap

The sitemap shows you the page hierarchy with all
pages that your website contains, sorted alphabetically.
Here, you can click on:
o

a particular page to visit that page.

"Expand all" to also see all sub pages (default view).

"Collapse all" to see only top level pages.

"List View" to access an alphabetical list of pages that

does not distinguish between sub and main pages.
Included here is also who each page was created or
last updated by, with time stamp.
Design and Organization

50

Suggestions for Practice

1.Plan your own website on paper.
2.Create all pages for your website at "top level".
3.Move pages you want as sub pages under the
parent page.
4.Create the navigation menu.
5.Visit the Site Settings to edit the order in which
links appear in the navigation menu.
6.Disallow comments and attachments on pages of
your choice.
7.Create a Dashboard named "Test Page".
8.Play around with your Test Page (add gadgets).
9.Print your Test Page.
10.Delete your Test Page.

Design and Organization

52

Lesson 3
Adding and Modifying Content

Editing Overview
Lesson 3 exclusively focuses on the one button we have
not covered yet in this manual: the "Edit Page" button.

The 5 different page types have different editing options,

and we will deal with each in order:
1.Web Page
2.Dashboard
3.Announcements
4.File Cabinet
5.List

Adding and Modifying Content

54

Web Page: Toolbar

If your page is of the Web Page type, clicking "Edit Page"
displays this toolbar:

Whenever you have made changes to any page, you must click
"Save". Otherwise, your changes will not take effect.
Clicking "Cancel" will also undo any unsaved changes to the
page.
Clicking either "Save" or "Cancel" also exits the editing mode.
Adding and Modifying Content

55

Web Page: Writing Text

If your main objective is to provide written information on
your web page, simply type your text in the large box
below the page title, and that is all you need to do.

Adding and Modifying Content

57

Web Page: Insert Tab

You can insert a variety of elements into your
page:

Basic page elements (e.g. images, links)

Google Calendar
Google Docs files
Videos (Google or YouTube)
Gadgets

Pay attention to the position of your cursor:

anything you insert is inserted at this location.

Adding and Modifying Content

58

Web Page: Format Tab

Clear Formatting and Align are duplicates

from the text editing toolbar.
Various headings, strikethrough,
superscript and subscript are only
accessible here.

Adding and Modifying Content

59

Web Page: Table Tab

You can use tables to organize content in rows
and columns.
The intersection of row and column is called a
cell.
When inserting a table, you can decide how
many rows and columns you want.
When you click into a cell, you can insert more
rows and columns that appear above, below,
left, or right of the cell containing the cursor.
You can also delete rows, columns, or tables.
Adding and Modifying Content

60

Web Page: Layout Tab

You can change the default One-column
page layout to Two-column.
Two-column layout splits your page into 2
fixed columns of the same width.
Two-column layout is suitable for
newspaper-like text articles, including
smaller images.
If you want to add larger images, videos,
or gadgets, the One-column layout is
recommended.

Adding and Modifying Content

61

Easy Step Pages: Web Page

Visit this website, which is complementing this
manual:
http://sites.google.com/a/vccaps.com/guide-to-web-design/

Click Easy Step Pages.

Each of these pages guides you step by step to
exactly duplicate those pages yourself.
o
o
o

Basic Text Editing (web page)

Advanced Editing (web page)
Table Editing (web page)

Adding and Modifying Content

62

Easy Step Pages: Dashboard

Visit this website, which is complementing this
manual:
http://sites.google.com/a/vccaps.com/guide-to-web-design/

Click Easy Step Pages.

Each of these pages guides you step by step to
exactly duplicate those pages yourself.
o
o
o

Inserting Google Docs (dashboard)

Inserting Calendars (dashboard)
Inserting Gadgets (dashboard)

Adding and Modifying Content

66

Easy Step Pages (continued)

Visit this website, which is complementing this
manual:
http://sites.google.com/a/vccaps.com/guide-to-web-design/

Click Easy Step Pages.

Each of these pages guides you step by step to
exactly duplicate those pages yourself.
o
o
o

Editing Announcements
Editing File Cabinets
Editing Lists

Adding and Modifying Content

70

Easy Step Pages (continued)

Visit this website, which is complementing this
manual:
http://sites.google.com/a/vccaps.com/guide-to-web-design/

Click Easy Step Pages.

Each of these pages guides you step by step to
exactly duplicate those pages yourself.
o Attaching Files
o Making Comments

Adding and Modifying Content

74

Suggestions for practice

1. Recreate all 11 Easy Step Pages.
2. Add a web page that contains a dozen gadgets.
3. Create your own website, and make it available to the
public.
4. Create a personal website, and only share it with your
family and friends.

Adding and Modifying Content

77

Appendix: Google Apps Requirements

In order to use Google Sites with Google Apps, you need a
Google Apps account (www.google.com/a).
Once you are set up with Google Apps, and it is properly
configured, you can improve your Google Sites experience.
VCCAPS also publishes Easy Step Guides to Google Apps.
They are available here:
www.vccaps.com/easy-step-guides

Website Setup

78

Appendix: Google Apps Requirements (cont.)

With Google Apps, you will be able to access your Google

Sites website through your own domain such as:
www.vccaps.com OR capsite.middleriver.ca
Without Google Apps, you can only access your website at a
location such as: sites.google.com/site/mywebsite/
Google Sites with Google Apps also gives you Google Gmail
for your domain, more storage space, and more options.

Website Setup

79

The End