Creating a web-site on Google Sites

mjr 24.10.12

In days of old, web sites were written in HTML, using a text editor. The problem thus created was that a web site needs to be refreshed continually in order to remain current. The only people who were able to work with the site were those software engineers who understood HTML. From the designer’s point of view it meant that customers had to keep coming back, and the designer had a long-term responsibility that would not go away. From the client’s point of view, every change has to be sent to a software engineer, which can be slow and expensive. The solution is a content management system of the kind we will be dealing with here. In most cases, changes can be done by an office worker with minimal training.

Get a Google account

You may already have a Google account. If you have an account on Youtube, Gmail, Google Docs, Google Drive or any of the other Google services, you already have an account.

If you don’t have an account yet, you’ll be invited to create one when you access Google Sites.

You may have an email account which is banned from using Google Sites. One example of a banned account is Virgin email. If so, they will tell you. Then you create a Hotmail account and create a Google account based on your Hotmail email address.

Access Google Sites

Go to :

Log in or create an account

Once you are in, hit the "create" button on the left.

You will be offered a choice of a wide variety of themes, or you can stay with a blank template.

Name your site. Call it anything you want. If you can't think of anything else, put in the date of your birthday.

Finally, type in the Captcha code into the box provided (followed by a "return") to prove that you are a human being.

Your chosen site name may already be in use. You may need to try a few names before they accept one.

Working with the site

Perhaps the most useful tool at this stage is "More – edit site layout". This tool will allow you choose various options for the entire site:

  • The existence of a page header
  • The existence of a horizontal navigation bar
  • The existence of a vertical navigation bar on the LHS
  • The existence of a customised footer for the page.

Hit "Close" (top right) when you have finished.

"Share-General" or "More - Manage site" allows you to change the site title at the top of each page – or choose to display nothing.

Clicking the crayon symbol allows you to edit or add to the current page. It works a little like Microsoft Word. Highlight some text and click on one of the symbols at the top. The most interesting button in this set is at the extreme right: The <html> button allows you to edit the existing HTML code for the page or add in your own HTML that you have prepared elsewhere. Hit "Save" (top right) to get out of editing mode.

The "+" symbol allows you to add a new page. It allows you to add at top level on the menu or to put it under the home page.

The "sitemap" entry on the menu will allow you to edit the structure of the site and the menu itself.

There are many more features available on Google Sites. Experiment and find out.

Familiarisation exercise

Take your files from the XHTML exercise. They will be for the Napier Sales Company, and have a logo. Take all the code between in the main section and use the HTML editing feature to paste it into a page on Google Sites. Do necessary modifications to make it look right.

Be aware that Google Sites will accept styles, but will not accept stylesheets.

Do what you can to make the Google Sites pages look as similar as possible to the original pictures of the web pages.