Workshop‎ > ‎Handouts‎ > ‎

Ex3: Intermediate Skills

Exercise 3:  Intermediate Skills
This activity has you practicing the intermediate skills for inserting files, refining the structure and adjusting the style.
Visit first3.steveraab.com to see an example of a site at the end of this exercise.

Use what you've just learned to edit your site. This includes a sampling of tasks to orient you with using the Google Sites tools. Due to time constraints, you will probably only be able to work on the main 3 activities during the class while the optional exercises will likely need to be completed after the workshop. If you need assistance with instructions refer back to the intermediate skills section:  LearnGoogleSites.steveraab.com/intermediate


Insert

First try inserting files onto a page.
  • Create a new page called "Insert", then while in edit mode for that page...

Photo

If you brought a photo with you, try inserting it into the page.  Based on where you have the photo use the following command:
  • On your computer, use: Insert -> Common -> Image (to upload the photo file as an attachment to the webpage)
  • Photo in Google Drive, use: Insert -> Google -> Drive -> Image
  • In Google+ / PicasaWeb Albums, use: Insert -> Google -> Google+ -> Photo 
Once the photo object is on the page, adjust its size and position.  Then save page to view.


Drive File

If you preloaded a Google-format file in your Google Drive, you can try adding it to the page.

To embed a Google file from drive into a page view:  
  1. Use command:  Insert -> Google -> Drive -> <ITEM TYPE>
  2. Select the file
  3. Adjust any settings if desired (defaults are OK), click Save
  4. Adjust position on page (defaults are OK)
  5. Save page to view.

Page Format

We're going to create an Announcements page, and then we'll add a Recent Posts (announcements summary) gadget to the home page.

Page Templates - Announcements

The Announcements section is a special page template.  We'll create this page and then add a story.
  1. Click the 'New page' button - and in the dialog box:
    1. Name the page "News' 
    2. Change template field from 'Web' to 'Announcement' 
    3. Other defaults OK 
    4. Click 'Create'.
  2. The new page looks a bit different.  
    1. Click 'Edit Page' 
    2. Type a few words to the top region, perhaps " My latest news" 
    3. Save page.
  3. Add a story:
    1. While still on the 'News' page, click 'New Post' button and 
    2. When a new page appears add a title "Welcome to the New News Section" (or anything) 
    3. In the body field, add a few words 
    4. Save page 
    5. Return to the 'News' page to view your story there.
  4. Optional: Repeat with a 2nd story if desired.

Page Layout

Now, we'll convert the Home page into a two column layout and add a Recent Posts gadget for the Announcements.
  • Convert Home page to two column layout:
    1. Go to Home page 
    2. Click 'Edit page' 
    3. Use command:  Layout -> Two Column (simple)  
    4. Note the existing content appears in the left column 
    5. Save.
  • Add a Gadget for the 'News' announcements on the home page, in the right column.
    1. Click 'Edit page' 
    2. Move cursor into the right column and add a couple blank rows 
    3. Use command: Insert -> Gadgets -> Recent Posts  
    4. In the dialog box:
      • Show Posts from field: "News"
      • Post length field: "Short Snippets"
      • Check the box for "Include thumbnail of first image in post"
      • Change include title to: "Recent News"
      • Other fields - OK to leave as defaults
      • Save
    5. Note the object appears in the right column, and the default position settings should be OK 
    6. Save page. 
  • Review the gadget to see that summaries of your news stories appear.

Structure

Horizontal Menu

As an example of how to use the 'Edit Site Layout' area, we're going to prepare a simple Horizontal Menu.

Follow these steps:
  1. Begin editing the site layout by using command: More actions -> Edit site layout
  2. In the top tools, click the 'Horizontal navigation' button.
  3. There is now a region on the page at the bottom of the header area, just above the main content area.  When you move your mouse there, the area will gray, and the label 'Edit Horizontal Navigation' appears.  Click there.
  4. A dialog 'Configure Navigation' dialog box appears.
  5. We'll add 2 buttons: one for the About page and another for an external site.
    1. About Page: click the 'Add Page' link 
      • In the dialog box that appears, select the 'About' page and click OK.
    2. External Link: click the 'Add URL' link
      • In the dialog box that appears add:
        • Text to display: "Steve's Learn Google Sites"
        • URL: learngooglesites.steveraab.com/home
        • Check the "Open this link in a new window' box
      • click OK. 
  6. Finishing configuring the menu.  Style: select 'Boxes' then click OK.
    • Note: the menu setup is complete; now you need to exit 'Edit Site Layout' mode.
  7. Click the blue 'Close' button in the top right to exit 'Edit Site Layout' mode.

Site Map

Move the page Hello that is currently a subpage to the Home page and place it as a subpage to About.
  1. Access the site map at: More actions -> Manage Site -> Pages
  2. Move a page to a new location by dragging it.
    • Click the '+' by Home to expand to see its subpages.
    • Grab 'Hello' and drag it onto 'About'.
Visit first3.steveraab.com to see an example of a site at the end of exercise 3.

Optional

As time permits, or at home afterwards, try the following:

Style - Themes

Give your site a new style by changing themes.
  • Go to More actions -> Manage Site -> Themes, Colors and Fonts
  • There's a drop down of 'Base theme' options.  Select another theme, click Save and go back to look at your site.
  • If you don't like it, try another one, or change back to what you previously used.

Insert a Drive Folder

You can embed an object providing a view of one of your Drive folders into a page. 
  • Use command:  Insert -> Google -> Drive -> Folder

Edit Site Layout

Enter 'Edit Site Layout' to try editing various items.  Use command: More actions -> Edit site layout

Menu

Try adjusting the sidebar menu.
  • Click on the sidebar menu, you'll get a dialog box 
  • Try out the options 
  • Note, you have to use the blue 'Close' button (upper right) to exit 'Edit Site Layout' mode before you can review your changes.

Sidebar

Try adding a new sidebar item.
  • To create another sidebar menu, look for the Sidebar    / +   label at the top of the sidebar.  This bar includes 2 controls, the Pencil icon to edit sidebar options and the '+' plus icon to add items.  Click the '+' plus icon and select an item to add.
    • Perhaps try Countdown.  It will appear at the bottom of the sidebar.
    • Setup the Countdown object by clicking on it.
    • When the dialog box appears, enter an Event and Date (perhaps Christmas), click OK.

Custom Footer

  • Add a custom footer - a copyright notice, or anything for now.

URL

  • Adjust the URL of a page using: More actions -> Page settings