Creating

Web Sites with Google Sites

Google Sites is a great resource for teachers. You can create an unlimited number of web sites for free. You do not need any web design knowledge such as HTML code or other special skills; the interface is completely online so you don't even need special software, just Internet access and a web browser. Built into Google Sites are a number of templates geared for a variety of applications. This tutorial, though, is designed to be used with the default "Blank template" and a stock theme. Feel free to try out the templates, but I'd encourage you to go through this tutorial first so you have a good understanding of Google Sites before you try the more robust templates.

Accessing Google Sites To access Google Sites, simply point your favorite web browser to http://sites.google.com 1. Log in to your Google Account using your W200 Google Account username and password. 2. If you forgot your login and/or password use this link. Creating a Site - Step 1 After you login, you can access your sites, if you have any, by clicking the "My Sites" link. Just above that list is the Create button. Click the button to create a new site. 9

Creating a Site - Step 2 -Template and URL 1. Selecting a template: This feature allows you to select a predefined layout and design. While there are a large number of templates provided in Google Sites, this tutorial will not select a template. Rather, it will go through the process using the "Blank template" (the default selection) and then apply a theme to that blank template. 2. Provide a name for your site. This is the text that appears at the top of each page and in your list of sites. 3. Create your URL. Google Sites will create a URL based on your site name, but you can modify the URL if you choose. You can only use A-Z, a-z, and 0-9. Do not use punctuation, spaces, or special characters. Creating a Site - Step 3 - Theme 1. To see the list of available themes, click the down- pointing triangle next to "Choose a theme." There are 52 available themes. 2. To select a theme, simply click on the theme you want to use. In this example, I have selected the "Open Sky" theme. Note: You can change the theme of your site at any time. We'll cover this later in the tutorial. Creating a Site - Step 4 - More Options 1. Click the down-pointing triangle next to "Options" to show the additional options for your site. 2. The site description will appear in your list of sites, but not necessarily on your web site. It's more of a reminder for you of what the site is about. 3. The share with option allows you to limit who can see you site. This is not a guarantee that your site will be private, but it is a step to keep it private. 10

 4. If you select this option a user will be shown a page alerting them to the mature content. (None of your sites for this project should require you to check this box . . . .) 5. You need to enter the code shown on your screen. Creating a Site - Step 5 - Click Create Near the top of the screen, locate and click the "Create" button. If you've not typed the Captcha word correctly, you'll get more opportunities to do so. Thats all there is to it! Your site is created and youll be taken to your web site. Your site is live online and you can provide the link to others so they can visit your empty site.

11

12

Editing a Site in Google Sites

Now that your site is created, it's time to edit the content. This is what your web looks like with no editing to content. Remember: even now, your site is live on the Internet and you could provide others your URL. The Site

Important Buttons! These buttons appear in the upper right corner of each page in sites you own when you're logged in. They are important: they provide access to editing tools for each page in the site! 1. Edit a page 2. Add a new page 3. More: links to more site and page control options. Well cover them later in the tutorial 4. Share: allows you to change the privacy settings for your site.

13

Creating a new page To create a new page, click the Create New Page button in the upper right corner. You'll be presented some options for which type of page you want to create. 1. The name you use for a page will appear in two locations: the second heading of the page and in the navigation. 2. You'll need to select the type or template of page you want to create. Here are you options:

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

Using different page templates may allow you to provide greater organization for your users. For example, could use a File Cabinet page to organize handouts or worksheets for different units. 3. When you add a page to your website, you have two choices about where it is placed in your site organization. For the class project, you can leave it at the top level. If you change the organization, the page will appear differently in the navigation and the use of breadcrumb navigation will appear on the page. Breadcrumbs provide links at the top of a page that show the hierarchy of the site like Home - Page 2 - Page 2a. 4. Click the Create button near the top of the screen to create the page. 14

Editing a Page To edit a page, navigate to that page using the left-side navigation bar in the site itself. Once there, click the Edit Page button in the upper right corner of the screen. The editable areas of the page are then shown with dotted-line borders. Google Sites has a number of great editing features. Many of them should be familiar to you from your experiences with word processing. 1. These are the standard font formatting options: font, size, bold, italic, underline, font color, and background/highlight color. 2. Click here to add a hyperlink to another web page. Adding a hyperlink has two steps: a. The text the user will see on the page and click. b. The URL of the web page you want to link to take them to. The first step is to select the text in your content that you want to turn into a link. Then click the Link option in the formatting bar as shown above. The window that appears will be discussed in the next step of the tutorial. 3. These are the common bulleted list, numbered list, increase indent, decrease indent, and alignment options. 4. These two options are not used often, but the "T" with a red "x" will remove formatting that has been applied. The "pencil" icon and HTML will allow you to edit the HTML that controls the look and feel of your page. 5. Your page heading is added here. By default, the page name is placed in this field, but you can change it to something more relevant to your content. 6. This is the content area. 7. When you are done adding content, click the Save button. 15

Adding a Hyperlink Hyperlinks allow users the ability to click text and move to other places in your site or to other web sites on the World Wide Web. In order to create a hyperlink on a page, you must be in Edit mode on the page. Begin by highlighting the text you wish to turn into a hyperlink. Then, click the Link option in the tool bar. The Create Link dialogue box appears. 1. Decide if the hyperlink is going to a page elsewhere in your site (Existing page) or to a web page in another site (Web address). In this example, we are going to a Web address. 2. The text you highlighted from your page will appear here; if you need to change that text, you can do so in this box. 3. Enter the URL of the web page you want the link to go to. For the sake of accuracy, I'd do a copy- and-paste from a browser at the site itself. 4. It is common practice that if you are taking users to a web page outside of your website, you should open the link in a new window. This helps users find your page when they are done without having to use the back button in their browser. 5. When you are finished, click the OK button. Editing a Hyperlink There will be times when you need to edit the information you have in a hyperlink. Maybe you made a typo in the address or want to change where the link goes. When you are editing a page, click on a link and a box will appear. You can change or remove the link. You also see the URL that was entered for this link.

16

Adding Attachments The easiest way to post documents (.doc files, .pdf files, etc.) to your site is to add them as attachments to the page. Click the "Add files" link at the bottom of the page. Then navigate to the file you wish to attach, and click Open. You can have multiple attachments on a page. Remember: PDF files are pretty universally accessible; MS Word and Corel WordPerfect files are not. Adding Images and Other Things The Insert menu gives you access to a number of things that you can add to a web page. This is where you would add an image, horizontal line, Google tools, and gadgets. Adding an Image Web sites that contain only text are pretty dull. Adding appropriate images helps increase the visual appeal of your page. To insert an image After selecting Image from the Insert menu, you will see this dialogue box. 1. There are two ways to add an image. a. You can upload an image from your computer, flash drive, or O:\ drive. (recommended) b. You can link to an image that is already on the web if you have the URL of the image. Note: This is not the URL of the web page that displays the image.

17

2. When uploading an image, you'll need to click the Choose File button and browse your computer to find the image you want to upload. Once uploaded, you can insert that same image on other pages just by accessing this dialogue box. 3. Click the OK button when you are done. Formatting an Image As you did with the link, once the image is added, you can click on it to access the formatting box. This will allow you to change the alignment, size and text wrap for the image. You can align the image to the left, center, or right of the content box in which it appears. You can select 4 different sizes: small, medium, large, or original. You can turn Wrap on or off. Wrap on means text on the page will wrap around the image. If you do not want the image any longer, click Remove. While this removes it from your site, it remains in your uploaded images collection for use later. Advanced Editing - Changing the page layout A basic page begins with a single-column layout. Google Sites allows a number of different page layouts ranging from 1- column to 3-columns and including a variety of header, footer, and side-bar combinations. To begin, click Edit page if you are not already in edit mode on the page you wish to change. To change the page layout, click the Layout pull-down menu and make your selection. Your page will refresh to show the new layout; remember, dotted lines show content areas but are not visible online. 18

Advanced Editing - Adding a Table Tables give you some measure of control over the placement of text on the page or in a portion of a multi-part page layout. In the image to the right, you see a 2 row/3 column table. First, ensure you are in edit mode for the page to which you wish to add a table. To create a table, click the Table menu, point to Insert Table, then select the height and width of the table. Note, too, how you can insert rows and columns and delete rows and columns from the menu. Advanced Editing - Editing a table In this image, the right 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). More Actions The More actions menu is where you find a lot of useful options. The Page settings and Manage site options are likely the two you will use most often.

One other note: If you need the borders to be invisible, you'll need to edit the HTML code (click <HTML> tool) and change all references to border sizes from "1px" to "0px"; be sure to also change the "border=1" to "border=0".

19

Page Settings After clicking on Page settings in the More actions menu, you'll see this window. This is where you can add/remove the attachments and comments features, and change some of the other functions of the page. Managing Your Site If you choose Manage site from the More actions menu, you will have the ability to change a number of things on your site. Often this is used to change the page templates and site layout. You can also change many of the settings and information you provided when you created your site. Site Layout - Edit Navigation - Add Sidebar Item When managing your site, choosing the Site layout option from the left navigation bar allows you to edit the site navigation and add sidebar items along with many of the other functions of your website. Editing Navigation At this point, you may want to edit what your left side navigation bar shows on your site. By default, Google Sites manages the navigation automatically and creates links to pages in your site. They are listed in the left-side navigation in alphabetical order by page title. Well learn two things: first, changing the Site Navigation links to pages in your site, then deleting and adding other sidebar elements. To accomplish either of those tasks, begin by clicking Edit next to Navigation.

20

 The Configure Navigation dialog box appears. Begin by unchecking the box next to Automatically organize my navigation. The dialogue box will enlarge. 1. If you'd like your navigation bar to be titled something other than Navigation, type a new word here. 2. Select a page from the list and, using these arrows, you can reorder the page. Clicking a right pointing arrow move the page "under" the page above it; clicking a left-pointing arrow moves a selected page out from under. Clicking the box X deletes a page. 3. If you've created a page in your site, but the page does not show up in the navigation bar, use Add page to add the page to the navigation. Once you stop allowing Google Sites to automatically organize your navigation, new pages will NOT be automatically added to your navigation; you'll need to return to this screen to add them. 4. If you'd like a link to a Sitemap of your site and/or a list of recent site activity added to your sidebar navigation, click the appropriate box. 5. When all selections and changes are complete, click OK. Editing Navigation - Returning to the site After all site management activities are finished, you'll return to your site by clicking the name of your site just below "Manage Site." Don't forget to click "Save" to save all management decisions you've made!

21

Additional Help
To access Google Sites help menu, click Sites Help under the More button 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 2012. 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.

22