Google Sites Tutorial, Level I



Other Google tutorials:
Google Search Engine
Google Books
Google Images
Google News
Google Scholar


(Generic description - coming soon!)




I. Introduction

Google Sites, part of the set of tools offered by Google (www.google.com), is a Web tool that allows users to create a Web site quickly and easily based on a site template, and then to use a number of features to customize the design, content and accessibility of their Web sites.


Google Sites offers the advantage of allowing users to create Web pages in WYSIWYG (what you see is what you get) format, i.e. without requiring knowledge of a markup language such as HTML or XML. In addition, Google sites offers a number of automatic site management functions, such as automatic creation of links between pages, assistance with site structuring, and access management for the site’s creator(s) and users through accounts linked to users’ e-mail addresses.


However, it is important to note that (unlike tools such as Dreamweaver, FrontPage or nVu) Google Sites is not intended as a tool for professional Web design; it is intended for the average Web user, who may have little or no prior knowledge of Web design. These sites are hosted on the Google server, allowing users to create and maintain a personal site without paying site hosting fees.


While Google Sites can be a useful tool to help with basic technical aspects of site creation and management, it is nevertheless important to keep in mind the fundamentals of good Web design and site usability when developing a site (e.g. keeping the site structure shallow, i.e. not requiring too many clicks to access information; making sure site navigation is as flexible and intuitive as possible; keeping text short and concise, with important information clearly presented). You must also respect the rules of copyright (e.g. acknowledge all of your sources) when adding any material that is not your own to your site.


You can learn more about Google Sites by consulting the Help page, which is available at http://www.google.com/sites/help/intl/en/overview.html.



II. Getting ready

  1. Open the Web browser of your choice (e.g. Internet Explorer, Mozilla Firefox) from the start menu or by double-clicking the appropriate shortcut on the Desktop.
  2. Go to the Google home page, www.google.com, by typing this URL into the address bar of the browser or by clicking on the link above.
  3. From the menu bar at the top of the Google home page, click the More link, and choose the Sites option that appears in the drop-down list.


III. Creating a Google Sites account and logging in

  1. Create a Google Sites account to use for creating your site.
    1. If you have a Gmail account, you may use the same username and password for creating your Google Site. Click on the Sign in with a Google Apps account link under the main sign-in box, enter your Gmail address, and click the Go button. Your e-mail address will appear automatically in the appropriate box in the Sign-in panel. Enter your password in the box that appears and click the Sign in button to continue.
    2. If you wish, you can also create a new account and/or use an external (non-Gmail) e-mail account as your contact e-mail. To do this, click on the Sign up for Sites link, located on the right-hand side of the screen, below the Google Account sign-in box.
      1. Choose whether you want to sign up for a new G-mail address, or use an existing address.
      2. Fill in the fields in the form that is displayed. To sign in using an existing e-mail, enter your current email address and enter and confirm your a password. Be sure to note your password in a place that is accessible to you but safe from others’ viewing.
      3. Google will send an email to you, confirming that your Google Account is ready to be used. You will need to click on the link included in the email in order to activate your account.
  2. If you are not already at the Google Sites sign-in page, from the Google home page (www.google.ca), click on the more link in the top left-hand portion of the screen, and then choose the Sites option from the drop-down list.
  3. In the Google Account sign-in box on the right-hand side of the screen, sign in by entering the e-mail address and password you used to create your Google Sites account and clicking the Sign in button below.


IV. Creating a Google Site

  1. Click on the Create new site button.
  2. On the page that appears,  a number of pre-established models for sites for a variety of purposes appear. For this tutorial, we will create our own site structure and choose the tools we wish to include, so leave the Blank template option selected. However, if you wish later on you can take a look at the available options.
  3. Give your site a name. For this tutorial, we will create a site about dance. Type a name such as Dance Site Project into the Site name field. (See note 1.) Notice that an adapted form of the name (without spaces or special characters) appears in the URL box: http://sites.google.com/site/dancesiteproject/. (You can also edit the automatically assigned URL in the URL box if you wish.)
    1. Why is your site name important? For example, do you think it might affect searching or memorability for users?
    2. Are all of the potential site names you have identified available? How might the issue of site name availability influence your evaluation of Google Sites?
  1. Choose a background pattern, or “theme,” for your site. Click on the plus sign (+) beside the Choose a theme link to view the available themes.  Choose your favourite theme by clicking on it. 

  2. View and adjust the settings that control access to your site. Display the options by clicking on the plus sign (+) beside the More options link.

    1. Add a brief description of your site to the Site description field by typing in A general overview of dance in the Western world. Why might you want to provide this description?

    2. You have the option of restricting access to this site or making it available to everyone. For the moment, select the Only people I specify can view this site option to keep the site private until it’s ready.

    3. You also  have the option of indicating that the site is not suitable for all audiences, by checking the box next to Mature content. We will leave this box unchecked.

  3. Type in the verification code that appears at the bottom of the page (i.e. the series of letters used to verify that the user creating the site is a “real” person and not a computer program) and then click the Create site button.


V. Exploring your new site

  1. You will be taken directly to the home page of your new site. On the left-hand side of the page, you’ll see the site’s navigation panel. (See note 2.)
  1. In the top right-hand corner of the page, you’ll see a series of buttons offering site management functions.
    1. The first, Edit page, allows you to add content to pages or to change the content or presentation of the pages. 
    2. The second, New page, allows you to add new pages to your site.
  • What other features do you see on the home page of your site?
  • What is the initial layout of this Web site and its pages? What do you like about it? What would you like to change? (See note 3.)


VI. Editing pages

  1. You’re now ready to update your Home page and add a short paragraph describing the site. From this page, click the Edit page button at the top right-hand corner of the screen. What menus, tools and toolbars appear?
  2. The default title for this page is Home. Give it the new title of Dance in the Western World by selecting the title, deleting it and typing in the new title.
  3. Type the text below into the box on the main part of the page (or copy and paste it, for example using the keyboard shortcuts Ctrl + C and Ctrl + V). (See note 4)


While there are many types of dance in the Western world, the ones I find most interesting are Ballet, Hip Hop, and Modern Dance. This site will describe these three types of dance.


  1. Save your changes by clicking the Save button, located in the top right-hand corner of the screen.
  2. What do you think of the default font and font size of the page? Edit the page againand use the toolbar that appears at the top of the screen to change the font type, size and colour of the page’s title and the main text to suit your preference.
  3. Still in Edit mode, compare the different possible layouts for your page.
    1. If you had exited Edit mode already, click the Edit page button again to return to editing.
    2. Click on the Layout drop-down menu to see the various options available to you, and try some to see your options.
  4. When you are happy with the content and format of your page, save your changes by clicking the Save button. (See note 5.)


VII. Creating new pages

Web sites typically consist of a kind of hierarchical (tree-like) structure of different pages, each containing part of the site’s content, broken down into manageable chunks. This structure helps to organize the site (e.g. by topic) and improve the readability, accessibility and usability of the information.


Depending on the type of information to be stored, different formats of Web pages may be appropriate. Google Sites offers a number of page templates. Three that may be particularly useful are the following:

  • Web Page, which is used to present text, photos and/or videos;
  • List, which may be useful for storing structured information in a format similar to a database or table; and
  • File Cabinet, which may be used to make electronic files available to visitors to the site (e.g. for downloading or sharing).

The sections below will show you how to create a Web Page and a List page, and will give you some examples of the type of information you might wish to store on these pages.


Creating Web Pages and sub-pages

  1. To create a new page, click the Create page button in the top right-hand corner of the screen.
  2. You will also be asked to give this page a name. We will organize this site by dance style. Give this page the name Modern Dance. (See note 6.)
  1. You will be prompted to select a template for the Web page you are creating, which determines the layout of the page. Select the Web Page option. 
  2. Lastly, you will decide where to locate this page in relation to the others in the site’s structure. In other words, you will decide on what level in the site’s tree structure this page will be located. Select Put page under Dance in the Western World.
  3. Then click the Create button. This will take you to the new page you have created. The name of your page will be automatically indicated in the title field, and you will be able to edit the page immediately.
  4. Click the Save button at the top right-hand corner of the screen to save your site with this new page, leaving it empty for the moment.
  5. Create two other Web pages for Ballet and Hip Hop, placing each on the same level as the Modern Dance page (i.e. under Dance in the Western World). To do this, you might need to click on the Choose a different location link and then find and select the Dance in the Western World page in the dialogue box that appears.
    1. To put these pages at the right level, you may need to click on the Choose a different location link that appears under the two automatically suggested locations. The Select Page dialogue box will appear.
    2. Click on the Site map link to view the layout of all of your site’s pages. The site’s structure (hierarchy) is displayed. Choose the Dance in the Western World page to create the new pages as sub-pages of this main section, and click the Select button.
    3. Verify that the page has been placed in the right location by checking the location indicated under the location that was automatically suggested.
    4. Click the Create Page button to create the page.
  6. Create three sub-pages under the Modern Dance page, with the following names: Alvin Ailey American Dance Theater, Nederlands Dans Theater, José Limón Dance Company. (See note 7.)
  1. Click on the Sitemap link in the left-hand navigation panel, then click the Tree button and then plus signs (+) beside each of the links where they appear. Notice how the sites are organized by level. You can also click the List buton to see who created and/or updated each page and when the pages were created/updated. (See note 8.)
  • What does the navigation panel include? How is it organized?
  1. Return to the Dance in the Western World homepage by clicking on the link to the home page of your site in th eleft-hand sidebar. When you return to the Dance in the Western World homepage, what new information appears along the bottom of the screen? What new information appears along the bottom of the screen when you click on Modern Dance? In what order do the items appear? What do you think about the way Google Sites manages sub-pages?


Creating a List page

  1. Create a sub-page under the Modern Dance page to list future modern dance performances that visitors might be interested in. Name it Upcoming performances, and select the List template for this page.
  2. You will be asked to select a sub-type of list template. Read the descriptions of the first three ready-made options. In what context(s) might these ready-made lists be useful? How pertinent are they to this site and this purpose?
  3. Choose the Create your own option to use for this page by clicking the Create a custom list button under it.
    1. You will need to assign a name to each of the columns in your list and define the type of information each column will contain.
      1. Under Column name, type Company.
      2. Under Type, there are several options:
        • Checkbox for Yes/No type information,
        • Date to enter dates in a specific format,
        • URL to add links to Web pages or sites,
        • Text to enter text of any kind and length, and
        • Dropdown to allow users to pick from a list of options.

 In this case, select the Dropdown option.

  1. You will need to specify which items (i.e. names of modern dance companies) will appear in the dropdown menu. In the field under Options, type in José Limón. Click on the Add another link in order to add the following two companies to the list of options: Alvin Ailey, Nederlands Dans Theater. In what other contexts might the dropdown option be useful?
  1. Click on the Add a column link, located at the left-hand side of the dialogue box. Name this column Performance location(s), leaving the type as Text.
  2. Add three more columns as follows:
    1. Start date, assigning it a Date type;
    2. Web site, with a URL type; and
    3. New choreography, with a Checkbox type.
  3. Choose a column to use to sort the information in the list. For example, you might want to sort the upcoming performances by the start date.
    1. In the Sorting section of the dialogue box, choose the Start date option from the First sort by drop-down list.
    2. Ensure that the Ascending option is selected to sort the performances from earliest to latest.
  4. Then click the Save button. Your list page appears, containing an empty table with the column headings you selected. (See note 9.)
  1. To add information to your list, click the Add item button.What information appears in the box that pops up? How is it displayed?
  2. Fill in the various fields using the following information: Alvin AileyTivoli Concert Hall, Copenhagen, DenmarkSeptember 14, 2009; www.alvinailey.org; the choreography is new. Then click the Save button.
  3. Add another one or two fictional upcoming performances to get familiar with inputting information and how it is displayed. (See note 10.)
  • Which features do you like about the List template? What do you dislike? How user-friendly is its set-up?
  1. If you wish, you can also create another list page, under the Ballet page, in order to include a glossary of terms.
    1. Use the following headings to name the columns of your glossary: Term (FR)Context (FR)Source (FR)Term (EN)Context (EN)Source (EN), Borrowed term.
    2. Each of the columns should be assigned a Text type, except Borrowed term, which should have a Checkbox type. (The Borrowed term field makes it easy to indicate whether an English term is a direct borrowing from French, which is commonly the case in ballet terminology.)
    3. How might the List page option be relevant for a Web site about, or related to, translation?


VIII. Creating links in your site

One of the features that makes good Web sites easy to navigate is the use of hyperlinks (sometimes called just links) that allow users to jump from page to page (or even from one part of a page to another) to find the information they need. If links lead to another spot on a page or on other pages within the site users are consulting, they are called internal links. If links lead to another site, they are called external links. The sections below will show you how to create both types of links in Google Sites.


Creating internal links

  1. We will continue to focus mainly on the Modern Dance portion of the Google Site. From the Modern Dance page, click the Edit page button at the top right-hand corner of the screen.
  2. Add an introduction to this part of your site. Copy and paste the two paragraphs below into the body of the Modern Dance page (removing the formatting if required). (Note that the first paragraph has been taken from an online source, so it is accompanied by its source; the second paragraph has been written specifically for this site.)

Born in the early 20th century, modern dance is a dance style that centers on a dancer’s own interpretations instead of structured steps, as in traditional ballet dancing. During the 1900’s, European dancers began rebelling against the rigid rules of classical ballet. Turning against the structured techniques, costumes and shoes of ballet, these dancers favoured a more relaxed, free style of dancing. Modern dance pioneers often danced in bare feet and revealing costumes. (source: http://dance.about.com/od/solodancestyles/p/Modern_Dance.htm)(external link) (For alternative definitions of Modern dance, see the site Answers.com or the International Dictionary of Modern Dance.)

Although there are many modern dance companies around the world, this Web site will focus on three in particular: Alvin Ailey American Dance Theater, José Limón Dance Company and Nederlands Dans Theater.

  1. Highlight Alvin Ailey American Dance Theater. Then click on the Link button (see screenshot), located on the editing toolbar.
  2. A Create Link dialogue box will open with Existing page highlighted on the left-hand panel. In the main part of the box, a list of pages from your site appear. Select Alvin Ailey American Dance Theater. (Note that you may have to click on the plus sign (+) next to some of the pages to see their sub-pages.)
  3. You are given a choice to open this link in a new window when you click on the hyperlink. Check the Open this page in a new window box and click the OK button. (See note 11.)
  1. Note that when you click on the hyperlinked words, a small box appears, showing the URL of the page to which the words are linked. From this box, you can also modify or delete the links by clicking on either the Change or the Remove link. (Note that when you exit Edit mode, these links will function normally when you click on them.)
  2. Create links between the main Modern Dance page and the existing pages for the other two dance companies featured in this part of the site. When and why might it be useful to add internal links within the text of a page (given that the navigation panel is always visible on the screen)?
  3. Click the Save button to save your modified page. 


Creating external links

  1. From the Modern Dance page, click on the Edit page button, in the top right-hand corner of the screen.
  2. In the text that you copied to the Modern Dance page, find the URL http://dance.about.com/od/solodancestyles/p/Modern_Dance.htm. What does this URL look like after you pasted it in? Then click on the Link button, located in the editing toolbar. What happens? With the text of the URL selected, click the Link button again. What happens? How is this process different from what happened when you created links in the Creating internal links section of this tutorial?
  3. Highlight Answers.com near the end of the first paragraph, and click the Link button. Note that Google Sites automatically identifies Answers.com as an external site and creates a link to the main page. However, in this case, we want to link to a specific Answers.com entry.
    1. Click on the Change link in the blue box that appears next to the new link, to display the URL of the external page.
    2. Copy and paste the URL http://www.answers.com/topic/modern-dance into the field under Link to this URL:.
    3. Check the box marked Open this link in a new window and click the OK button to modify the link.
  4. Highlight the text International Dictionary of Modern Dance in this same paragraph, and add a link to a review of this book in the Dance Research Journal.
    1. In the Link dialogue box, Select the Web address option from the left-hand panel, and copy and paste the URL (http://www.jstor.org/stable/1478293) into the field under Link to this URL:.  
    2. Specify that the link should open in a new window.
    3. Click the OK button to create the link.
  • How does the process of adding links differ depending on the type of link you are creating? What do you think about how Google Sites manages links?
  1. Click the Save button. What has changed, visually, on this page?
  2. Test out your links to see how they work.



IX. Adding multimedia content to your site's pages


Adding photos

  1. Open a new window (Ctrl + N) or tab (Ctrl + T) in your web browser. In this new window or tab, do a Google search (using the Google search engine) for images of Alvin Ailey and his dance company.
    1. From www.google.ca, type “Alvin Ailey” into the search field.
    2. Click on Images in the top left-hand corner of the screen.
  2. Have a look at the photos that your search has generated. Select a photo to post on your site, and click on it. From the Google sidebar that appears, click on the Full-Size Image link so it appears alone in a window. Copy (Ctrl + C) the URL where the photo appears alone.
  3. Return to your Google Site window or tab. From the Alvin Ailey page, click the Edit page button, in the top right-hand corner of the screen. Add the image to your page.
    1. Select the drop-down menu Insert, and then the Image option.
    2. Then select the Web address (url) option and paste (Ctrl + V) the URL of your photo into the field beside Image URL. (Be sure not to include the http:// twice.)
    3. If the URL is valid, the image will appear in the Add an Image window. Click the Add Image button. (See notes 12 and 13.)
  1. Note that a blue toolbar automatically appears below the added image. (If it disappears, you can display it again by clicking on the image.) You can modify the photo in several ways: you can use the toolbar options to adjust the photo’s size (Small, Medium, Large or its Original size), its positioning (Left, Centre or Right) and its relationship with the surrounding objects (e.g. whether text will Wrap around it or appear only above and below but not beside it).
  2. Click the Save button.


Adding videos

  1. In the window or tab you used for searching for photos, do a YouTube search for videos of Alvin Ailey and his dance company. From www.youtube.com, type Alvin Ailey into the search field, and click the Search button.
  2. Have a look at the videos that are available and select one that you would like to post on your site. Click the Share button that appears under the video, and then copy (Ctrl + C) the link that appears in the Link to this video field.
  3. Return to your Google Site window or tab. From the Alvin Ailey page, click on Edit page, in the top right-hand corner of the screen and add the video to your page.
    1. Click on the Insert drop-down menu, and then on the Video option, located at the bottom of the list.
    2. Then select YouTube and paste (Ctrl + V) the URL of your video into the field located under Paste the URL of your YouTube video.
    3. Leave the boxes labelled Include border around Google video and Include title checked.
    4. You may change the title displayed for your video if you like. (See note 13.)
  1. You can modify the positioning of the video on the page by clicking on the video itself and selecting the appropriate option (L, C, R) from the toolbar that appears below the video.
  2. Click the Save button to save the new version of the page.


X. Managing access to your Google Site

  1. From any of the pages on your site, click the More button in the top right-hand corner, and then select the Sharing and permissions option. (See note 14.)
  1. As the original creator of your site, you can share your site with others in a few different ways: you can invite them to be involved as owners (who can manage all aspects of the site), or you can allow them to view and edit, or simply to view the site. For more information about the specific differences between these three categories of site sharing, consult the help files (http://sites.google.com/support/bin/answer.py?hl=en&answer=90594).
  2. Invite one of your friends to access your site. (If you prefer, you can send the message to yourself instead, at another e-mail account, just to see how the invitations work.)
    1. Click in the Add people field to open the site sharing dialogue box.
    2. From the dropdown list beside the field, choose the Can view option.
    3. Enter your friend’s email address in the field provided.
    4. Ensure that the Notify people via e-mail check box is checked. (You can also add a personalized message to the stock invite by clicking on the Add message link that appears beside the check box.) (See note 15)
    5. Then click on the Share & save button to automatically send an invitation e-mail with a link the recipient can click to view the site. 
  3. Click on the link at the top of the left-hand sidebar to return to the main site. 


XI. Wrapping up

  1. When you are finished editing your site, save the page you are editing (if necessary) to exit Edit mode.
  2. If you no longer want to use this site, you can delete it by clicking the More button, choosing the Manage site option, choosing the General option from the ;;eft-hand sidebar, and then clicking on the Delete this site link. Note the warning that you won’t be able to restore the site or re-use the URL.
  3. When you are done, log out of Google Sites by clicking the arrow that appears beside your e-mail at the top right-hand corner of the window and then choosing the Sign out option.
  4. Close the browser.







































NOTE 1: This exact site name will not be available to you, since it has been used for this tutorial. Therefore, you will need to adjust this site name by, for example, adding your name to the beginning or a number to the end (e.g. yourname’s Dance Site Project or Dance Site Project 001).



















NOTE 2: The Edit sidebar link below the navigation panel allows you to change the content and appearance of the sidebar if you wish. You may want to explore this option once you’ve added additional pages to your site.


NOTE 3: You can change the layout of each of your site’s pages by clicking the Edit page button and then clicking on the Layout drop-down menu. We will explore the available options below in the section on editing pages.







NOTE 4: You may find that the text is pasted with its original format, which may make it hard to read. To return to the default format for the Google Sites page, select the text and then click the Remove formatting button  (see screenshot) that appears near the right-hand side of the Edit toolbar.


Screenshot coming soon!




NOTE 5: You can also change the layout of the whole site. To do this, once you have saved your page, click the More button at the top right-hand corner of the screen, and choose the Manage site option. From the left-hand sidebar, choose the Site layout option. Click the Change site layout option to view the options available.

















NOTE 6: A URL based on the name you enter is automatically assigned to this page and is indicated below the name you have given the page. If you like, you may click on the Change hyperlink link beside the URL to make modifications to this URL.










NOTE 7: If at any point you want to delete a page, you can do so by clicking the More button in the top right-hand corner of the screen, and selecting the Delete page option. You will be asked if you are sure you want to delete the page you are currently on. Choose Delete. You can also move a page to a different place in the site hierarchy by clicking the More button and selecting the Move option.


NOTE 8: You can change how many levels of pages are displayed in the navigation panel by clicking on the Edit sidebar link. Clicking on the edit link in the Navigation section will allow you to choose the number of levels to display, as well as other sidebar settings.



































NOTE 9: To make changes to your list, you can click on the Customize this list link that appears at the top of your list. When editing your list, you can change the order of the columns by highlighting the column you would like to move and clicking on the white up-and-down arrows on the right-hand side of the header. You can also delete a column by clicking the  button that appears to its right when it is selected. 


NOTE 10: You will find that the information you add is not immediately sorted according to the column you chose. However, if you navigate away from the list (e.g. by clicking on one of the links in the navigation panel) and come back, you will find it sorted automatically. 




































NOTE 11: If you have not already created a page that you wish to link this page to, you can do so at this time by clicking on Create a new page, located at the bottom of the Create Link window. This opens a new window in which you must give the new page a title, determine the page type, and identify where you would like the page to be located within your site.












































NOTE 12: Note the copyright warning that appears at the bottom of the dialogue box as you add your image. As noted above, it is important to respect copyright when adding material not your own to a site. (This use of the photo would likely be an infringement of copyright if you were to make your site public.)



NOTE 13: If you would like to post a photo stored on your computer, you can access it by choosing the Uploaded imagesoption at the left-hand side of the Add an Image dialogue box and using the Browse button to locate and add the image you want to include. 












NOTE 13: Again, pay careful attention to copyright issues if the material is not yours. You can of course post your own videos on YouTube and then include them on your Google Site. To do this, consult the instructions on the YouTube site to create an account and upload your videos. 








NOTE 14: You can also access these settings by choosing the Manage site option and then clicking on the Sharing option located in the left-hand panel of the dialogue box that appears. The site management tools also allow you to manage various other characteristics of the site. 


NOTE 15: If you want to receive a copy of the message you're sending to a friend, you can check the Send a copy to myself check box.


XII. Questions for reflection

  • What are your first impressions of the functions and functioning of Google Sites?
  • What might Google Sites help you to do? In what kind of situation(s)?
  • How does Google Sites compare to creating a site using other similar Web site creation tools? What criteria can be used to evaluate Google Sites and similar Web tools (e.g. www.blogspot.com)?
  • What are some of the advantages and disadvantages of using Google Sites in your translation and terminology studies and/or work?
  • Can you think of any advantages or disadvantages of using Google Sites for a professional site? For a personal site?
  • The site text was provided for you in this tutorial. If you were creating a site independently, what kind of information would you include? Would the text consist of information you provide yourself (e.g. opinions), or would it be a synthesis of information pulled from other sources (e.g. historical data)? What criteria might you use to make those decisions?
  • When consulting online sources, how can you decide whether a site is trustworthy? What will you keep in mind when creating your own sites, in light of this?
  • When you are adding multimedia content to your site, how do you decide which photos or videos to post on your Web site? What is the quality of the photos and videos that appear in your search results?
  • What do you most like about Google Sites? In what ways could it be improved?



Tutorial created by Trish Van Bolderen and updated by the CERTT Team. (2011-09-02)