Building a Site in Google Apps

Create a site

Open your Google Docs, click the Sites menu and you will get a Create button.  Click it!

Select a name for your site.  If you choose something that has already been used in the Beaverton domain, you will be told.
Select a theme

This may be the most difficult part of the process.  There are a lot of cool templates to choose from.  Select one you think you will like.  You will learn how to change the theme later if you decide you don't like the one you selected.
More Options

This is the space where you get to add things that will help make your page more findable when searches happen.  

Click the Create button on the top of the screen. You now have a site that you can customize.

You will either see four buttons or two buttons in the upper right corner.  This depends on whether you are editing or not. The four buttons will show when the page is waiting to be edited.  These four buttons allow you to Edit (pencil), Add a Page (paper), do More (this will be discussed later) and change the Share permissions.  Once you click one of these, you will see only two buttons. 

If you see Save and Cancel buttons, it means you are in editing mode and it is waiting for a Save command.  Once you click Save or Cancel, you will again see all 4 buttons.  

Note: individual pages on a Google Site auto-save drafts as you work (look for the "draft saved at..." text in the upper right corner), but you'll still click on the Save button when finished.  When working in the Manage Site settings menus, look for the Save button to manually save changes.


Editing Your Page

Click the pencil to edit your page.  You can add and format information here.  You can also insert pictures, calendars and forms from here (more about that later). 

To create a link:
  • Enter the text you wish to link and highlight it.
  • Click on the chain link tool (shown at the far left of the second image).
  • Click on Web address and enter the URL for the link. 
  • Select the "Open this link in new window" option if you'd like it to do that. Click OK.

Editing the Sidebar

The Sidebar provides page navigation and the ability to add fun things like a Countdown clock.  

To access this functionality, Go to the More menu and select Edit site layout (pic 1).  This will open the Edit site layout header row (pic 2).  These buttons are toggles on and off.  

This will activate your ability to work with the Sidebar (pic 3).  To change the look and feel of the sidebar, click on the edit pencil.  To add new items, click on the plus sign.  To edit existing items, roll over them and click on the edit at the bottom of the item.  To delete an existing item, click the X in the upper right hand corner.

To add a Countdown clock, click on Edit sidebar, then select Add a sidebar item. Scroll to find Countdown and click Add. Click the Edit button to label the event and choose the countdown date.




More About the More Menu

The More Menu is where most of your tools live for working with your document.  It is divided into 3 sections.  We will talk about the two most important ones.  The first section is the Page Settings.  These tools apply to the specific page you are working with.
Page Settings

The page settings menu item allows you to control the following items:
The default on the Home (main) page is that these are all off.
  • If the page title shows
  • If you see the links to sub pages
  • If you are going to allow attachments
  • If you are going to allow comments
Adding Pages

When adding pages, you can choose from several page formats.
  • Web Page is the default format. 
  • Announcements are like news clips, enabling you to post short, informative statements to your site. This Ridgewood example from 5th grade teachers Mrs. King and Mrs. Curtis shows how they use this page format.
  • File Cabinet allows you to create an repository of files from your computer such as Word or PowerPoint documents. Mrs. Robinson's Business and Marketing site at Beaverton High is one example.
  • List allows you to create and customize a list of some kind such as class assignments or projects. Here's an example from Mrs. Dennis, a science teacher at ACMA. In addition to posting attachments, URLs directing to specific assignments in Google Docs can be included in the list.
Previewing Pages

To see how your page would look to a viewer, go to the More menu and select Preview page as viewer.


More Menu - Site Actions

Everything that impacts your entire site happens in this section.  The "Manage site" item gets you into these settings.  You can control the look and feel, delete the site, share the site and much more from this area. 
Manage Site

This menu allows you to access the tools you will need to make decisions about the way your site looks and feels.  The top part of the menu applies to page settings, the bottom to the entire site.

You will need to spend some time exploring what features are covered in each of the following important areas:
  • General
  • Sharing and Permissions
  • Site Layout
  • Colors and Fonts
  • Themes
Adding Pictures

When you want to add a picture to a page, make sure you are in the edit mode on the page.  Place your cursor on the page where you want to image located.  The go to Insert --> Image (picture 1).

A screen will open (picture 2) that will ask you to locate the picture you want to add to your page.  Click on Choose File to navigate to and upload the image.  Select it and it will be placed on the page.  
1)         2) 
Modifying Pictures

When you roll over an inserted picture while in the editing mode, you will see a toolbar that allows you to change alignment, size indent and remove the picture.  These are only available in the editing mode.

To delete an image from your page, click the X on this toolbar.


Inserting Documents

Native Google Doc files:
Use the Insert menu for native Google Doc files (documents you can edit inside Google). Select the document, spreadsheet, presentation, etc., navigate to the file and click Select.

Non-Google formatted files:
To insert a non-Google formatted doc such as a Word or PowerPoint file, make sure Allow attachments is selected under Page Settings for your page.  Click the plus sign next to Attachments at the bottom of your page and navigate to the file on your computer. 

Go to the Insert menu and select "More gadgets" to choose from additional built-in tools that can be added to your site such as calculators, weather, PDF viewers, etc.

Inserting Video
  • Upload the video to Google Docs.
  • Go to the Insert menu on your Google Sites page.
  • Select the Google Docs video.
  • Select your video and click the Select button.

Embedding Items 

Calendars, forms and videos may be embedded in your site.  

Resources such as calendars may be embedded in your site by copying the embed code provided by the resource that you want to embed. This will usually be available somewhere in the settings of the item.  Look for the word embed or for some ugly looking text (calendar example.....<iframe src=" calendar/embed?" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>). 
Note: if you don't want your email address to display on your calendar, go to your calendar settings, select "Customize the color, size and other options" and uncheck "Title."

Google Forms:
The embed code for Google Forms (surveys) can be found by opening the spreadsheet view of the Google Form, going to the Form menu and selecting "Embed form in a webpage." 

Using the Embed Code:
Once you have the embed code, return to your page and click on the html button on the tool bar.  The html editor will open.  Don't looks ugly, but you do not need to do anything other than paste the copied code where you want the embedded item to appear.  

After pasting the code, click the Update button and the ugly stuff will go away.  Click the Save button and it will show your embedded item on your web page.


You'll find the commands to insert a table, add and delete rows and columns under the Table menu. One tip when trying to resize tables is to click on a table cell which will give you a box outline with tiny squares at each corner. When you hover over a square, an arrow will appear to allow you to drag the corner outward or inward to resize the table.


Changing Sharing Permissions

Save your Site editing changes.  You will need to manually Save your Manage Sites settings.  Once you have saved, you will get the four buttons back and can click on the Share button on the right.  Now you will be able to decide from the options on the right how widely you want to publish your site. have a web page!