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 NameDecide on a name for your site. THINK! This becomes part of the URL to access your site.

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

C. Mature ContentIf you have to think about this . . .

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

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

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

G. Create SiteClick 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 PageGoogle 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:

WebpageA 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 PageA Dashboard page is a two column webpage with four placeholder gadgets to make it easy to get started creating an overview of information.

Announcement PageAn 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 PageA 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 PageList 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 SidebarAt 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 NavigationTo 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 ItemsOne 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 EditingNow 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 LayoutA 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 TableTables 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 ruleHorizontal 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 ImagesPutting 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 ImagesAny 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 ImagesPut 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 ContentOne 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 URLmailto:<email_address>

For example, to create my email link, I’d use mailto:baspitze@iusb.edu

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

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