Search this site

775days since
Project Presentation April 14

Visits so far ...

Free Hit Counters

 
 

Visual Features

Contents

  1. 1 Ethical citation and reference
  2. 2 Using your own media
  3. 3 Modifying images
  4. 4 Site Templates
  5. 5 Image captions and color backgrounds
  6. 6 Tables and Background Colors
  7. 7 Images as links to subpages
  8. 8 Alternative Themes
  9. 9 Adjust your margins and page width
  10. 10 Header logo
  11. 11 Image as site background
  12. 12 Presentations
    1. 12.1 Helping Students Find Time for Service-Learning
  13. 13 Videos and slide shows

This page provides instructions for Google Sites features, as listed in the table of contents to the right. 

Other pages within this section 



 

Ethical citation and reference

[Section created Jan. 31, 10am.  Dr. Smith  to author]

This is important.  Learn how to collect the complete information about your media and other sources.  Cite it as you find it and use it. 

Resources and instructions can be found on these pages within our website:

Using your own media

  • If you are using your own photograph or creating your own media, either

    • submit a signed Copyright Waiver naming the image file name(s). This allows the University of Calgary and our course to use the image now and in the future

OR

    • provide information about your Creative Commons license of choice.  This allows anyone on the Internet to make use of the image. 

  • If your image features recognizable faces of individual people such as yourselves (other than a general crowd image taken in a public place), you need to say that you have submitted the photographic subject's signed waiver to the instructional team.

  • If you are creating a Video or Audio file, use the Copyright Waiver form to donate your creation for use by the University of Calgary, and/or create a free YouTube account and upload your file (max. 10 minute files) and embed the video in your website using the instructions below.  Use the Video Consent and Releaseform to obtain the signatures of the people featured in your video/audio.

Modifying images

[Section updated Feb.6 by  Dr. Smith]

Make sure your images are obtained ethically. 

Some of you may not have many skills with modifying images using an an image editor or photoshop.
I recommend the following FREE programs

    • Picnik online image editor. No registration required. Great for adding text, resizing, colorizing, framing

    • IrfanView image editing program.  Download to your computer.  Don't let the old-fashioned, simple interface fool you -- it is incredibly versatile. 

    • Jingscreenshot / screenvid creator and sharer.  Free download with registration.  Useful for efficiently taking screenshots and making movies out of screen motion.  It sits at the top of your screen as a little yellow dot, ready for use at any time.  Highlight and mark up images, save them, or upload them to screencast.com free account for sharing via a weblink

Site Templates

Since November 2009, some amazing templates were made available to you when you create a new Google Site. 

Professional template: (click to enlarge)


See 3 more templates on this Google official blog

How?

Once you have created a Google Site you can't change its overall template.  But you can create a new site and the options will be open for you to preview before selecting a new site template.

  • Go into any Google page while you are logged into your Google Account.
  • Select "More" and find "Sites" in the menu:


  • Create a new Google Site by pressing the button "Create Site"
    • You can create 5 new sites each week, max.
  • Select a template from the library to the far right - it is easy to miss! 
  • They give you some options, but if you choose a category, as you scroll down you can browse not only Google's templates but those which are shared and uploaded by Google Sites users.


Image captions and color backgrounds

You can insert images with colored backgrounds or borders around them.


T. Smith, 2009, with consent

How?

  • In the "Insert" menu, select "Text Box."
  • Remove the title text from the box
  • choose an appropriate image width -- I selected 300px for the photo above
  • Insert your image *within* the text box. Center it. 
  • Insert your caption text underneath, beside, above, centered or not.
  • Select all the text/images and then select a highlighter color. 
  • Adjust as needed


Tables and Background Colors

If you want to change backgrounds site-wide, go into the sidebar and choose "Colors and Fonts"

You can insert a table or 1x1 table box with cell borders and background colors

 Here is an example of a 1x1 cell

This is the default.  You can resize the cell by dragging it while in edit mode.

You can also insert backgrounds and remove the borders.  See Advanced Tables by Steegle.com

 
Here is a 1x1 table cell with a background color.

How?
  • Go into the HTML and find this code (if you can't find it, you can use Ctrl+F and search for <td )
<td style=

  • Add [ background-color: rgb(255, 204, 204); ] to the style attribute in the table cell tags, so it looks like this, but the RGB codes in red will be changed to the color you want.

    <td style="width: 50%;background-color: rgb(255, 204, 204);">

  • Pick the RGB colour codes  by going to the Quackit.com HTML color picker.

    In the box provided

    • select the part of the rainbow you want

    • select the density you want.

  •  The RGB codes are in the red box in the image above:  212, 254, 232.


Images as links to subpages

Hide hyperlinks to subpages underneath images like this. 


Click to enlarge.  See the Groza portfolio site

How?

  • Create your images with the appropriate pixel height and width.
  • Use an image editor to add text to the "buttons."  (see "Modifying Images" section above)


Alternative Themes

Google Sites already comes with a set of themes to choose from. 

Here is one of them.



How?
  • When editing a page, go to the bottom of the sidebar and click "edit sidebar."
  • Click "themes" at the bottom of the sidebar.

Check out the GetThemes.com website for Google Site themes and design --
Its own website is shown below and is based on the Google Sites technology.




Adjust your margins and page width

You can change the width of the main text frame. 

It is much easier on the eyes to have wider margins framing the information on the page.


How?
  • When editing a page go to the bottom of your sidebar and click "edit sidebar."
  • In the upper left click "change site layout" and the menu will appear as shown below (click to enlarge)

Pixels or % ?

In the example above, I used 800 px. 

This retains layout fidelity when a user resizes their browser window.  For the COMS 463 website I chose a static value such as 960px

  • For example, if you have a 2-column layout and insert a YouTube video, you might always want it to show up within the column (not bulging out of the column area when a person resizes their browser window).

OR You can enter a value such as 75% (of the width of the browser window). 

This prioritizes the margins -- you will always have the same % ratio of page-to-margins if a person resizes their browser window.


Header logo

How did I get the U of Calgary logo in the upper left of this page?

See instructions at the top of this page from Gethemes.com

NOTE:  There are restrictions on the use of the U of C logo.  My use is appropriate because it is for a U of C course.  Student sites hosted off the server after the course is over -- these would not be appropriate for the logo.



Image as site background

Create a new site look by inserting images or patterns in the background.


How?

Instructions for creating this page are located on the site that uses this background.

You can also follow the instructions on the Mori79 Google help page.

  • TIP:  The image shown is more personal than professional.
    It would be wise to keep it subdued and professional looking.

Presentations

You can embed a set of presentation slides into your Google Site
  • Viewers can click through photos
  • Read instructions without scrolling down
Sample:

Helping Students Find Time for Service-Learning

Helping Students Find Time for Service-Learning

You have the option of 3 sizes, and this is medium.

How?

  • I uploaded a .ppt file into Google Docs
  • I inserted the presentation into this page.

Videos and slide shows

What do you think? ... notice there is no YouTube logo.

PicasaWeb Slideshow


How?
  • Register an account with Google Picasa and download the free software.
  • Create an image library and put some images in a folder.
  • Upload the folder to Picasa Web Albums.
  • In Google Sites go to the "insert" menu and select "Picasa slideshow"
  • Obtain the link to share your album and insert the URL into the gadget.  I've selected "autoplay."

And here is a YouTube video

Jane Arnett, Student of COMS 451 & 501.32, U of Calgary