Resources‎ > ‎

Using Google Sites


Contents

  1. 1 Introduction & Overview
    1. 1.1 Help
    2. 1.2 Introductory Exercises
  2. 2 Key Features
  3. 3 Advanced
    1. 3.1 Adding Docs, Calendars, and Other Gadgets to a Google Site 
      1. 3.1.1 Embedding a forum/Google Group in a web page
      2. 3.1.2 Embedding Google Documents
      3. 3.1.3 Embedding Iframes into google sites
      4. 3.1.4 Using Google Apps Scripts
      5. 3.1.5 Inserting Google Moderator
      6. 3.1.6 Finding Useful Gadgets (Mini-HTML & Javascript programs) for Google Sites
      7. 3.1.7 Developing Gadgets for Google Sites
    2. 3.2 Useful shortcuts
    3. 3.3 Anchor Links
    4. 3.4 Site Layout
    5. 3.5 Templates
      1. 3.5.1 Examples of websites with useful features
      2. 3.5.2 Page templates
      3. 3.5.3 Copying a Google Site
  4. 4 List of How-To s (Most of your questions can also be answered by Googling them, or searching at support.google.com. e.g. "How to insert image google sites")
    1. 4.1 How to add an image to a page in Google Sites 
  5. 5 Site Management
    1. 5.1 Managing Permissions
    2. 5.2 Add a search bar
    3. 5.3 Custom Search Engine
    4. 5.4 Mapping a Custom URL to a Google Site
    5. 5.5 Google Analytics
    6. 5.6 Search Engine Optimization & Google Webmaster
  6. 6 List of questions
  7. 7 Not-yet-organized Information
    1. 7.1 Can google sites interface with dreamhoster? 
    2. 7.2 General website resources

TOCLEANzzz

Introduction & Overview

Google Sites Help

Beginner's guide and tons of short articles explaining different capacities

Beginner's Guide

Tips to Integrate More into Google Sites


Help

Kcloud Help Center

Kcloud FAQ, Steegle's FAQ

Google's user guides & tips & tricks

Google Product Forums

Introductory Exercises

Create a new google sites page and upload this page in a format that would be presentable to the general public. Add it at the top level as a main page, and also put a link to it from the home page.

Key Features

How to display extra text upon mouseover or click

Insert Custom HTML, CSS, and Javascript or JQuery using the HTML Box


Setting email notifications for changes to the site

Letting Visitors Subscribe to Changes in your site using an RSS feed

Advanced


Adding Docs, Calendars, and Other Gadgets to a Google Site 

Highly recommend this, capacities like inserting a chart, adding a +1 button, inserting multiple calendars

Embedding a forum/Google Group in a web page

Embedding Google Documents


Embedding Iframes into google sites


Iframes let you display content from any web source inside your pages, and users can even interact with that content.

To embed an iFrame, hit the insert button and choose "more Gadgets". On the featured tab of the popup, the second one down should be "include gadget (iframe). Select it. If it is not on the featured tab, search for it.

It will ask you to choose some options -- most importantly, the URL. Enter whatever URL you wish people to see in the frame. The rest of the options are fine as defaults, or can be changed as you wish. (for instance, making the "width" field blank will cause the frame to span the entire screen and adapt it's width to the resolution of the user's device.

Using Google Apps Scripts

Inserting Google Moderator

Adding and using the page sidebar Google sites provides a sidebar which can be positioned on either the left or right hand side of a site. You can add a variety of gadgets to it, including navigation and text boxes. Importantly, you can also add multiple gadgets of the same type, so that you can (for instance) split up your navigation into different headers.

Finding Useful Gadgets (Mini-HTML & Javascript programs) for Google Sites

Developing Gadgets for Google Sites

"Gadgets are lightweight applications written in HTML and JavaScript. In Google Sites, gadgets let you embed rich media, retrieve feeds, and perform simple tasks like managing a to-do list. Most gadgets that you use are hosted on the public internet and their source code could be read by anyone." 

https://developers.google.com/google-apps/sites/gadgets/site_gadgets

So many useful gadgets could be found simply on the marketplace, or through a Google Search.
Others can be built using the Gadget API Developer's Guide


Useful shortcuts

When navigating,

 Cmd Function 
e  Start editing 

When editing,

 Cmd(Ctrl for PCs) Function 
Cmd(Ctrl)+s Saves page
Cmd(Ctrl)+K When highlighting text, automatically creates a hyperlink

List of shortcuts for Google Sites

Anchor Links

How to create links that point to another *part* of a page

On linking to sections within a webpage: HTML Links

You'll have to use the HTML editor to link to sections in your pages. Basically, you create an anchor by putting the tags <a id="yourname">Section Title</a>, and then you later link to that section by using the tags 

<a href="#yourname">Link Text </a>. Notice the use of the hashtag(#) sign when linking to anchored sections.

You can even link to sections within a page from outside the page. So if you wanted to link to the "yourname" section of the page "domain.com/papers", you could just link to "domain.com/papers#yourname"

Also, google treats all <a> tags as links, so they turn blue and get an underline when you mouse over them. I couldn't figure out how to turn off the underline, but to turn off the blue, I had to insert font color tags after the <a> tags. So the extended discussion section header looks like   <a id="discussion"><font color="#000000">Extended Discussion</font></a>.


Site Layout

SIDEBAR: How to create a Sidebar and add pages to it

How to turn on the sidebar and add/manage navigation links inside it On turning on the sidebar, and adding/managing navigation links in the sidebar:

 (not noted in the article: the <- and -> buttons change the subpage hierarchy -- so to make something a subpage of home (in the navigation menu) us the up and down arrows to put the new page under home, and then the right arrow to move it down a level)

TIP: To add a new page to the sidebar quickly, just hit "page settings" (under the "more" menu), and check the "place in sidebar" box.

How to change site width: managing horizontal navigation bar: manage site -> site layout -> change site layout


Changing page layout:

To change the template for a particular page

  1. On that page, go to "more" (upper right-hand corner), 
  2. Under "Page Templates" select "change page template".

Adding additional templates

Templates

Examples of websites with useful features

https://sites.google.com/site/tildecafe/Home/material-you-can-download

https://sites.google.com/site/bcjteachingwiki/

http://www.steegle.com/websites

Page templates


Copying a Google Site

To make a copy of a Google site: You have to have the site shared with you so that you are an "Owner". After you "Sign in" at the bottom of the page to get the editing buttons to appear, click on the "More" button and "Manage Site". The page you're on should have a "Copy site" button and you can then copy it to a personal site, if that address is available. 

If that site has been shared as a template (publicly), the procedure is different and you can easily Google instructions for that.

Copying a personal Google Site to a Google Apps Google Site 

Share the site with google apps email as *owner*. log in to apps email, go to site, hit "manage site" -> "copy site". check url -- should be "sites.google.com/a/apps_account_name/sitename" http://support.google.com/a/bin/answer.py?hl=en&answer=48313


List of How-To s (Most of your questions can also be answered by Googling them, or searching at support.google.com. e.g. "How to insert image google sites")

How to add an image to a page in Google Sites 


Site Management

Managing Permissions

Google Sites has three permission levels: Can View, Can Edit, and Is Owner. They are probably fairly self-explanatory, but for details on what permissions each role has, see the Google Sites Permissions Help Page.


Add a search bar



There are two things that you need to do, but unfortunately Google only mentions one of them.
  1. Enable Search
    1. While viewing a page, select the drop-down menu "More" select "Manage Site".
    2. Click on the Site-Layout tab.
    3. Click on Configure Search, and under the tab "General", check the box for "Enable Search"
  2. Make the Search Bar Visible
    1. Within the Site Layout tab, click "Change Layout" and check the box for "Header". If you don't do this, I don't believe the search bar will be visible, even if you still enable search.

Custom Search Engine

With Google Custom Search, you can add a search box that not only searches your site, but also a list of other sites.
Set up a Search Engine
Choosing Search Options for your Site

Mapping a Custom URL to a Google Site

Google Sites Support post

Changing your site's URL

domain mapping with google apps: http://support.google.com/sites/bin/answer.py?hl=en&answer=99448&topic=1046101&ctx=topic

Use "www." trick

Mapping a google site to a domain

Basically, this is a two-step process.


 First, set up a mapping in the apps dashboard (you must have admin privileges).


Second, log in to your domain host and create a CNAME record for the subdomain you want to use (like www). Note that you may only be allowed up to 5 subdomains.

Google apps does not support mapping to a naked domain (that is, just example.com, without the www.) You may want to forward the naked domain to something else, like the www subdomain, so people can get to your site without www. in front.

You can also change the root url used to access google sites to a custom domain that you own. See this video for a video tutorial: http://youtu.be/OvkLw9X1OHI


Google Analytics

Steegle on adding Google Analytics to a Google Site

Google Support Page for Adding Analytics to a Google Site

Search Engine Optimization & Google Webmaster

Google Support page on Webmaster tools, How to add Google Webmaster to a Google Site

Steegle's search engine optimization for Google Sites, which was recommended by Google Support



List of questions

How to add a Facebook like "button" to the navigation bar

Q: Sometimes when it says I'm logged in with my Google Account I'm still not allowed to edit a Gsite. Why?
A: It's because you have to "Sign in" to stop viewing the Gsite as a webpage and start viewing it as something you edit. The "Sign in" button is at the very bottom (footer) of the page.

Not-yet-organized Information

Part II of using Google Sites to create a small business site


Can google sites interface with dreamhoster? 

http://discussion.dreamhost.com/archive/index.php/thread-134890.html

http://easy-life.sabza.org/2008/09/howto-create-simple-website-google-sites/


Have google host the domain directly?

http://wiki.dreamhost.com/Google_Apps#For_New_Domains_2




General website resources

http://webtrends.about.com/od/wiki/a/guide_to_wikis.htm

Lifehacker's 10 tools for developing website