W200 Using Computers in Education

Creating Web Sites with Google Sites

Using any web browser, go to

http://sites.google.com/

You’ll need to log in with your Google

Account username and password. From
there select Create new site as seen in the
screen to the right.

Fill in the following

information:

A. Site Name
Decide on a name for your site.
THINK! This becomes part of the
URL to access your site.

B. Site Description
It is optional to give a description,
but I would suggest that you do
so.

C. Mature Content
If you have to think about this . . .

D. Share With
Select “Everyone” now, but you can change it in the future.

E. Site Theme
Whatever suits your personal tastes . . . to see more themes, click “More
Themes”.

F. Type the code

You’ll need to type the code word shown
so Google knows you are a real person
creating the site.

G. Create Site
Click the blue button to create your web site!

File Under: Project 3 Information/Communication Web Site

 The Basic Page

This is what your web looks like with no

editing to content.

Even now, your site is live on the Internet

and you could provide others your URL.

Creating a New Page

Google Sites lets you create multiple pages in your site and offers several
different types of page templates from which to choose. Here’s a brief
explanation of each, taken from the Google Sites help pages:

Webpage
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.

Dashboard Page
A Dashboard page is a two column webpage with four placeholder gadgets to make it
easy to get started creating an overview of information.

Announcement 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.

File Cabinet Page

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.

List Page
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.

To begin the process, click Create new page near the top of the screen.
A new dialogue page appears and
is shown here:

In this sample, I’ve elected to

create a new Web page named
Homework and make it a top
level page

Click Create Page and Google

Sites adds the new page to your
site.

Take a moment to create all the pages you’ll need for your site. Don’t worry
about content; we’ll get to that in bit.

Changing Site Navigation and the Left Sidebar

At this point, you may want to edit what your left side navigation bar shows
on your site.

We’ll learn two things: first, changing the Site Navigation to add links to all
pages in your site, then deleting and adding other sidebar elements.

Changing Site Navigation

To accomplish either of those tasks, click Edit sidebar. The link
is at the bottom of your left side navigation bar.

In the new dialogue page that appears, click edit in

the Navigation element box.

First, add all pages to the list.

Click Add page to sidebar navigation; (it’s at the
bottom of the box).
Select a page, then click OK; repeat for all pages to be
added.

Once all pages are added to the list, you can use
the arrows to the right to move a page up or
down in the list (select the page, click the
arrows).

To delete a page from the list, select the page

and click the boxed X on the right side.
Finished? Click OK in the dialogue box.
Deleting Sidebar Items
One thing I’d like to remove from the site is the “Recent Site Activity” box. I
think it’s confusing for the user to see both it and the Site Navigation.

Click Edit sidebar just as you did in the previous section.

Locate and click delete below the box labeled “Recent

Site Activity.”

(Don’t worry; it’s easy to put it back if you decide later you want
it: just access
this dialogue box again by clicking edit sidebar, click Add a sidebar item, and select
Recent Site Activity.)

While you’re here, why not explore some of the other side bar items you can
place in the left side navigation bar?

You can also rearrange boxes in the left side navigation bar by grabbing the 4
dots in the blue bar at the top of the item and dragging it to another position.
Look for other item boxes to turn red; that’s when it’s OK to drop the item.

There are other aspects of your site that are customizable from this
page . . . take some time to explore how you can customize your site
to suit your needs!

When you’re finished customizing, click the Save changes button in the
upper right corner of this screen. To return to your site, click Return to site
in the far upper left corner of this screen.
 Basic Page Editing
Now that your site and all its pages are created, let’s begin by
adding simple text content to your home page. You’ll use this
process each time you want to add text to a page in your site.

Click Edit page in order to add content

to your site.

In this sample, there are two text boxes that can be edited: Home and Here
is where . . . simply click and start typing to edit these.

You can use the font style and size tools to make changes to the text. Note
how most of the text tools are very similar to other word processing tools you
are accustomed to.

To highlight text, select the text, then click the Text Background Color icon;
To change color of text itself, select the text, then click the Text Color
icon
 Advanced Page Editing

In addition to changing color of text and text background, you have several
other options you can explore to customize the look of content on your page.
This section of the tutorial will cover 3 of them: 1) creating a two-column
layout, 2) creating and using a table, and 3) inserting items on the page
(images, horizontal lines, etc.).

Changing to a Two-Column Layout

A basic page begins with a single-column layout. To change the page to a
two-column layout, click the Layout menu and choose Two-Column. The
image below shows the previous page in two-column layout.

Creating and Using a Simple Table

Tables give you some measure of
control over the placement of text on
the page. In the image to the right, you
see a 2 row/3 column table.

To create a table, click the Table menu,

point to Create Table, then select the height and width of the table.

The middle cell in the lower row is selected; this occurs when you click in the
cell. You can change the width of a column or height of a row by grabbing
and dragging the white handle-bars of the selected cell. Note that changing
the width and height of one cell is not possible. Changes occur to the entire
column or the entire row (or both).

One other note: You cannot set the table borders to transparent; all tables
will show lines around each cell.
 Inserting Items on a Page
We’ll learn how to insert two basic items on your web page: 1) a horizontal
rule (a line running horizontally across the entire page or the column if
you’re using two-column layout) and 2) an image such as a digital
photograph.

Horizontal rule
Horizontal rules can be used to break up a page into smaller chunks of
information. In Google Sites, you don’t get to pick colors or such, but they
can be helpful.

Position the cursor on the line where you want your horizontal rule. Click the
Insert menu and choose Horizontal Rule. The line will be placed
immediately above your cursor.

To delete a horizontal rule, click below the rule and use your backspace key.

The image below shows a two-column layout, each with horizontal rules.

Inserting Images
Putting images on a page is Google Sites is a two-step process: 1) upload the
image to Google Sites and 2) insert the image.

Uploading Images
Any image you want to upload should be in it final form. You will not
be able to crop or rotate your images once uploaded to Google Sites. In
addition, images can take up a sizeable amount of storage space, so you’ll
want to make sure you’ve resized the image to a smaller file size. This
tutorial does not cover these aspects of digital imagery.
Please also note that once you upload an image to your Google
Sites storage, you cannot delete it from storage. Even if you don’t
use it in your pages, it still resides in your storage.

Begin by clicking the Insert menu, and clicking

Image.

In the dialogue box, click Choose File and navigate to the image you wish to
upload. Select the photo and click Choose.
NOTE! There is no confirmation! As soon as you click Choose, the
photo will be uploaded.
Inserting Images
Put your cursor at the point in the page
where you want the image to appear.
Then click the Insert menu and clicking
Image.

Select the image you wish to put on the

page. You’ll see it outlined in yellow.

Then click Add

Image.
The image will be inserted at the same point as your cursor.

You’ll be able to control alignment, size, and

wrapping of the image on the page using
the picture controls at the bottom of the
image.

To remove a photo from the page, select

the photo when the page is in edit mode
and click Remove.
 Adding Links in Content
One of the greatest aspects of web development is your ability to link to
content on millions and millions of other web sites. This section will show
you how to create these hyperlinks.

Begin by typing the text you wish to make a hyperlink and highlighting
that text.

Click the Link menu.

In the dialogue box, click Web address on the

left side.

Enter the URL in the text box.

Check the Open this link in a new window if

you want this.

Click OK.

Email link: to create an email link, use the following URL

mailto:<email_address>
For example, to create my email link, I’d use mailto:[email protected]

Using these same skills, you could create a hyperlink on one page of your
site to another page in your site. Follow the same procedure, but click
Existing page in the left side navigation of the dialogue box. Select the
page you want to link to, decide whether or not to open in a new window
(probably not a good idea), and click OK.
 Attaching Documents and Other Files
One important aspect of your site is the ability to share documents, PDFs,
and other files electronically. You upload the document/PDF/file to your site
as an attachment, and others can access the document from your site.

You have no control over where the link to the file is on the page: all
attachments reside at the bottom of the page.

Attached files do count toward your 100 Mb quota, but you can easily
remove attachments from your site once they’ve outlived their usefulness.

Here’s the process:

Open the page on which you want to place the attachment.

Locate the Attachments area at the bottom of

the page and click either Attachments or the
plus sign (+) next to the word. When you do,
you’ll be given a simple Browse dialogue box:
click the Browse button.

Locate your file, select

it, and click Open. As
soon as you click Open,
Google Sites will
automatically upload a
copy of your file to your
site and create a link from the actual filename.

Files are sorted chronologically by time of upload.

To remove an attached file:

Too simple, really . . . just click Remove next to the attached file you
no longer need on your site.
 Additional Help
To access Google Sites help menu, click Help in the upper right corner at any
time. The following help page will launch in a new browser window or tab:

Almost any additional questions can be answered by referring to the help

page.

Acknowledgements
This tutorial was created by Dr. Bruce Spitzer for use with his EDUC-W200 students at
Indiana University South Bend in Spring 2009. All images and intellectual content remain
the property of Google and Google Sites. The author makes this document freely available
to the public domain through posting on Scribd.com.