How to build a website using Google sites
This tutorial is created to illustrate how to build a website using Google Sites. With this simple yet comprehensive guide you can set up a website very quickly. Using Google Sites templates helps speed up the process but you are able to edit to suit your own preferences.
This set of How tos supports the activities related to the Assessment Criteria for INGOT Web Site software units in the Schools ITQ course. For Level 1 (Silver) assessors will need to provide continuous help and support. For Level 2, learners should be able to go through this fairly self-sufficiently in order to produce a workable web site. One idea might be to help a local small business set up a web site or improve their existing web site as part of Work Experience. Other ideas might include setting up a web site for a school club or society.
1. How to create Google mail account
2. How to plan a website using Google Sites
3. How to start on building your new website: (using a blank page)
4. How to start on building your new website: (using a template)
5. How to change the logo of the site
7. How to add and remove list items
8. How to add and remove pages from navigation
9. How to add a Picasa photo album or photo
10. How to create pages on a blank template
11. How to customize your site logo on a blank template
12. How to customize your site sidebar
14. How to insert objects into a page
15. How to post an announcement
19. How to replace a spreadsheet
21. How to use the sub page listing gadget
23. Suggested open source web software and tools
You can now start to build your own website using Google Sites. Just follow the guide and steps here and you will publish your new website on the Internet in a short while.
How to create Google mail account:
Gold INGOT Unit 2 Assessment Criteria and ITQ Course.
Step 1. In order to access Google Sites you must have to login with your Google (Gmail/Googlemail) account. If you do not have such an account you can create one here, and click on "Create an Account".
Step 2. Fill up the page with the necessary personal information. You also need to check the availability of the desired login name. Your login name has to be unique. The security question is very important for future use if you are going to recover your password including the secondary email. Word verification or Word Image needs also to be filled in correctly. After all the fields are filled up it might be worth taking a screen shot to capture an image of the information in case you forget anything. Click "I accept. Create my account" at the end of the page.
View full image
Step 3. After hitting the "I accept. Create my account" button your Google mail account will be created. Usually it will automatically login but in the case of returning back to your Google mail account you can login here.
View full image
Step 4. Hit the button "Sign in" and you will be redirected to your personal Google mail account. It is also popularly called Gmail account.
View full image
After working on this one, you can now start to build your new website using Google Sites.
How to plan a website using Google Sites
For the assessment criteria on the new Gold INGOT Unit 2 WS, you can find it here.
You can also check the reference here.
So, you need a new website?
- is this your first time you've needed a website?
- are you overwhelmed on a lot of choices on the Internet?
- is this what you need according to your budget?
Then, you must equipped yourself with the basic knowledge in building a website using Google Sites. As a starting point, this how-to will surely guide you with the rest of the process and help achieved your goal in establishing a promotional and successful website.
For your basic knowledge, you can visit these links to brush up things up. It is also important that spending a little bit of your time learning those essentials will provide a framework to visualize your goal and point of reference thus making it easier to learn its basics.
You can check this important items to gain more understanding on planning a website:
1. The Internet: An Introduction
2. Different Types of Webiste: An Introduction
3. Web Hosting: An Introduction
An overview of website development
This process summarizes the key steps that should be completed to create your website.
How to Develop Your Website
STEP 1: How to set your website goal
Check on the assessment criteria here.
STEP 2: How to identify and target your market
Check on the assessment criteria here.
STEP 3: How to write your content
Check on the assessment criteria here.
Check on the assessment criteria here.
STEP 4: How to choose your web designer
Check on the assessment criteria here.
STEP 5: How to choose your domain name
Check on the assessment criteria here.
STEP 6: How to choose a web host
Check on the assessment criteria here.
STEP 7: How to launch your website
Check on the assessment criteria here.
STEP 8: How to promote your website
Check on the assessment criteria here.
How to start on building your new website: (using a blank page)
Gold INGOT Unit 2 Assessment Criteria
Step 1. Now that you are already loged in to your Google mail account. Click drop-down more and select Sites, and a new window will open.
View full image
Step 2. Login to your Gmail account.
View full image
Step 3. Click on the "Create site" buttoon.
View full image
Step 4. You must select the type of website your are going to build and then fill in the name of your site. However, you can also click "Choose a theme" and "More options" for further details. But in this case, we are going to select a blank template.
View full image
Step 5. This is how you are going to select your built-in template.
View full image
Step 6. For the blank template, fill up the name of your site and the image word and then click "Create site" button.
View full image
Step 7. This is to show the content when you click on the "More options" button.
View full image
Step 8. Finally, after hitting the "Create site" button it will automatically create your new website. But of course without any content at all.
How to start on building your new website: (using a template)
Gold INGOT Unit 2 Assessment Criteria
Step 1. Start this one by logging into your account and then select "Sites" (see the above procedure) until you arrived on this page. But this time we are going to build it using a template. Click on the "Browse the gallery for more" to view pre-built templates for you.
View full image
Step 2. This page will show you different kinds of templates. In this case we are going to select the Professional Site Template.
View full image
Step 3. Clicking on it will display the page in a box.
View full image
Step 4. By clicking "Preview Template" it will redirect you to a new page displaying its interfaces.
View full image
Step 5. In step 3, if you are going to click on "Select" it will close down the pop-up window and you can see that it is now selected and ready to get loaded.
View full image
Step 6. Fill in the necessary data for your website including the corrent word image and click on "Create site".
View full image
Step 7. It will now display your new website with its pre-built contents. Of course, you can edit it to your liking and put your own contents after.
View full image
Step 8. This is now the complete view of your website when it is browsed on the Internet.
How to change the logo of the site
Gold INGOT Unit 2 Assessment Criteria
Step 1. Login on you Gmail account and go to the site you created. Click on the drop down menu on "More actions", then click on "Manage site".
Step 2. At the left panel, go to "Site Appearance" and click on the "Site layout".
Step 3. Click on the link "Change logo" then change the logo by inserting a logo from your local PC or from the web. After it is done, click on "OK".
Step 4. Click on "Save changes" so that the changes will take effect.
Step 5. Click on the link "Return to site" and you can now see the changes you've made on the site.
Step 6. This is now the final display of your site on the web.
Gold INGOT Unit 2 Assessment Criteria
Step 1. This process is just to illustrate how to manage your site effectively. To do this is to login first on your Gmail account and go to Google Sites. Once it is now open, click on the "More options" and then "Manage site".
Step 2. You must first hit "Subscribe" to monitor the changes you've made on your website.
Step 3. Click on "Pages" to display all its contents. You can scroll down the bottom to see all the contents.
Step 4. You can click on "Attachments" to display all the attached files on your website. At this point, you can also upload and download images to improve the design of your website.
Step 5. Click on the "Page templates" to display the current page settings on your website.
Step 6. On the Site settings, click on "General" to display on the basic settings. Here you can edit the name of your website, its description and check on the site storage.
Step 7. Click on "Sharing" to configure how to invite and share your website to your friends and colleagues. You can also set here so that your website can be viewed by everybody on the net.
Step 8. Click on "Monetize" and you can configure how your website can earn online thru Google Ads.
Step 9. Click on "Web Address" to configure how to change the domain of your website. But of course, you have to buy your own domain to do this. When changing it to your own domain, you must have to change also the CNAME of your domain registrar to point to your Google Site.
Step 10. On Site appearance, click on "Site layout". Here you can configure the look and feel of your website.
Step 11. Click on "Colors and fonts". Here you can configure the brightness and darkness of your website with its colors and fonts.
Step 12. Click on "Themes". Here you can select pre-built themes for your website. You can scroll down to check the rest of the page.
How to add and remove list items
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
List items on Google Sites is often under the menu items. In this case, our example is located in "Our Company" > "Our Staff".
Please click on "Our Staff" to view the list items.
1. Delete a row
To delete these items simply click on the list row.
Click "Delete list item" in the dialog.
2. Add a row
Add new list items using the "Add item" button.
3. Customize the list
Change the columns and default sort order using "Customize this list."
4. Add a Recent List Gadget to another page
Once you have created a list page, you can add a Recent List gadget on any other page in your site.
4.1 Click "Edit page"
4.2 Click "Insert" and select "Recent list items"
4.3 Fill out the properties, including which list page to show, which columns to display, and how to sort. When you are finished, click "Save".
4.4 When you are done editing the page, click "Save" and you will see your Recent List gadget.
How to add and remove pages from navigation
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
The side navigation can be put in two modes: automatic and manual.
When in automatic mode, pages automatically appear in the sidebar when created, and are removed when they are deleted.
In manual mode, pages can be added and removed via the navigation configuration.
Change the navigation settings
1. Access the site layout page using "Edit sidebar" at the bottom of the sidebar.
2. Access the navigation configuration using "Edit" on the box labeled "Navigation."
3. Check or uncheck "Automatically organize my navigation". In Automatic mode (pages automatically appear in the sidebar when created) you can select the number of levels of your site hierarchy. If you uncheck "Automatically organize my navigation" you will get options to manually organize your navigation. And then hit "OK" if everything is done.
Manually organize your navigation
In this mode you can add any page in your sites, or external URLs to your navigation and organize it however you like. It is important to remember that in Manual mode, pages are NOT automatically added to your navigation. You can add pages from the Configure Navigation dialog or you can add them directly from the page via page settings.
Manually add pages
Click "Add page".
The dialog that pops up allows you to find your pages in many ways:
1. Search for the page name.
2. "My changes": this shows the last pages that you have modified.
3. "Recent Site Activity": this view shows you the most recent pages in the entire site that have been modified.
4. "Site map": this allows you to navigate the entire site hierarchy to select the page to add.
Add a URL to your navigation
If you want to include a link to an external site, in Manual mode you can add the link and organize it as one of the navigation items. Click "Add URL".
Enter in your url or email address that you want to include and the text to display. Hit the button "OK" when you are done.
Add to the navigation from the page
Navigate to the page you wish to add. In the "More actions" menu, select "Page settings".
In the Page Settings dialog, check "Show this page in the sidebar". Pages added through this method will be added to the bottom of the navigation. You will need to manually organize your navigation items from the "Configure Navigation" dialog. And then click "Save".
Hide the Navigation title
If you don't want to display a title on your navigation you can hide it by unchecking the "Display title" checkbox. And then hit "OK" when you are done.
How to add a Picasa photo album or photo
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Remove the photo album
1. Click "Edit page" as shown on the figure.
2. Click on the PicasaWeb Slideshow image and you will see a properties bubble pop up. Click "Remove".
Insert a photo album
1. In the Insert menu select Picasa Photo or Picasa Web Slideshow.
2. If you select slideshow, you will be presented with a dialog to insert the URL of your PicasaWeb album. To find that URL, in a different browser window navigate to http://picasaweb.google.com/home.
3. In Picasa navigate to the Album you want to showcase. Click the album.
4. In the album, click on "Link to this album".
5. Copy the link.
6. Navigate back to Google Sites and paste in the copied URL. Click "Save".
Insert a Picasa Photo
1. If you selected Picasa Photo, a dialog will pop up showing your existing Photo Albums. Select the Album that contains the photo you want to use.
2. Choose the photo and click "Select".
3. When you are done editing the page, click "Save".
Upload a photo to Picasa
Select Upload photos, browse your computer for the file, select the album you want the photo to be in, and click "Upload".
How to create pages on a blank template
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Create pages
Only owners and collaborators can create and edit pages in your site.
1. Click "Create page".
2. Select the Page template you want to use (learn more about page templates) and give your page a name.
3. Select the location in the site hierarchy for your page, by default new pages are created at the top level.
4. If you choose a different page location, you will get the option to select the parent page for the page you are creating.
The Select Page dialog gives you 4 ways to find a page.
"Search": search for the parent page by name.
"My Changes": displays your last 10 recent page changes.
"Recent site activity": displays the last 10 recent page changes in your entire site (from you and other users).
"Site map": displays a hierarchical view of your site.
5. Select the parent page, and click "Select".
6. When the dialog closes you will see an updated page path, confirming your new location.
7. Click "Create Page".
How to customize your site logo on a blank template
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Customize your site logo
You can customize your site by adding your logo to it. You'll need an image file of your logo. Once you have your logo image file, follow these easy steps to add it to your site.
1. From the More actions menu, select Manage site.
Then choose Site Layout from the options on the left.
Click the change logo link.
Then click the Choose File button and browse to the image file.
Select your file and click OK.
Make sure to save your changes. Then you can click Return to site to continue editing your site.
How to customize your site sidebar
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Customize your site sidebar
Add or remove items from your sidebar
1. Site owners can add and remove items in the site sidebar by clicking the "Edit sidebar" link at the bottom of the sidebar.
2. You can edit, delete, or add new items to the sidebar. Click "Add a sidebar item".
3. In the dialog, select the type of page element you want to add.
4. The item is now added. If you want to organize the elements, you can reorder by dragging the boxes.
Change the location or width of your sidebar
1. Click "Change site layout".
2. In the dialog you can select the location of the sidebar and the width. When you are done, click "OK".
3. Click "Save changes".
4. Once your changes have been confirmed, click "Return to site".
Changing your Sidebar Appearance
1. There are many ways you can customize your sidebar. In the Manage site area, click "Colors and Fonts".
2. Scroll down to the Sidebar Gadgets section to view and modify the sidebar variables. When done click "Save changes" and navigate back to your site.
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Delete a post
1. Visit the post you want to delete.
Note: If you are on the blog page, seeing multiple posts, then click on the title of the post you want to delete.
2. Click "More actions" and "Delete page".
3. Click to confirm the deletion.
Once the page has been deleted you will see a message at the top of your site.
How to insert objects into a page
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Insert objects into a page
1. Click "Edit page".
2. Click the "Insert" menu.
3. The menu shows you the different types of objects that you can insert into the page.
4. You can also search the Gadget gallery by clicking the "More gadgets..." menu.
5. Search or browse the Gadget gallery. Interested in contributing a gadget to the gallery?
6. When you are done editing your page, click "Save".
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Post an announcement
1. To post an announcement first, navigate to the announcement page. If you have a recent announcements gadget you can use the "view more" link.
2. Click "New post".
3. Add in your content.
4. When you are done, or if you are not ready to Publish your content, you can click "Save Draft". If you are ready to publish, click "Save".
5. If you clicked "Save draft", you will see your draft posts at the top of your announcement page. Click the draft post you want to work on.
7. When your draft is ready to publish, click "Save".
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Replace a calendar
If you don't have a calendar yet, you will need to first create one.
Creating a calendar
1. Navigate to Google Calendar.
2. Click "Create".
3. Name the calendar and fill in the details.
4. Either make your calendar public, or make sure that the calendar is shared with the members of your site.
5. Click "Save".
Congratulations, you have created a calendar. You will need to return to calendar to add events. If you shared it with other Google accounts they will automatically see the calendar in their calendar view and can also add events.
Return to your site
Replace the existing calendar.
1. Click the edit button.
2. Click on the calendar image.
3. Click the "Properties" link.
4. Click the "Change" button.
5. Choose a calendar from the list and click "Select".
6. Choose the options you want for your Calendar and click Save.
7. When you're finished editing your page, click "Save" and your Calendar will appear.
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Replace a map
First, create your map.
(If you already have a map, skip to the instructions for inserting the map in the page.)
1. Go to http://maps.google.com (or your local version, such as http://maps.google.de, etc).
2. Click on "My Maps".
3. Click on "Create a new map".
4. Add a title and, if you want, set the privacy settings. Click "Done".
5. Search for your first map location.
6. When you have found the location you want, click on the map marker.
7. In the marker dialog, click on "Save to My Maps".
8. Select the map you created earlier.
You will see a confirmation message. You can click "View map" and see that your location was added.
9. Repeat for as many map points as you want.
- - - Return to sites - - - -
Replace the existing map with your new map.
10. Edit the page
11. Find the map you want to replace and click on it.
12. Click on the "Properties" link.
13. Click the "Change" button.
14. Select "My Maps".
Note: if you want to replace the map with a single address, you can just type your address into the Maps tab.
15. Select your map and click "Select".
16. Adjust your map settings and click "Save".
17. When you are finished editing your page, click "Save" and your new map will appear.
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Replace an image
If you want to replace an image on your site with a Picasa photo, follow the Insert Picasa Photo instructions. If you photo is on your computer and you just want to add it to your site, follow the instructions listed below.
1. Click the edit button.
2. Click the image that you want to replace.
3. A small dialog will appear above or below the image. Click "Remove" in this dialog.
4. Open the "Insert" menu, and select "Image".
5. Use the image picker dialog to select your image, and click OK.
6. After you are done moving and sizing your image, click Save.
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Replace a spreadsheet
When your template was created, embedded Google Spreadsheets, Documents and Spreadsheet Forms were also created. If you are the template creator you can find them in your Documents listing.
If you are logged into your Google account, you can navigate to your Documents by clicking "Documents".
Create a new spreadsheet to use in your site
1. Navigate to your document listing, click "Documents".
2. Create a new spreadsheet.
3. Edit the spreadsheet.
4. You must share your spreadsheet with members of your site. If your site is public, you need to make it viewable by everyone. Click "Share", then "Invite people..."
5. If your site is private (only shared with you or a few other people), then you can invite members here. If your site is public, then click on the "People with access" tab.
6. Click on the "Change" link.
7. Select "Let people view without signing in" or "Let people edit without signing in".
8. Click "Save & Close".
Replace an existing spreadsheet
1. Edit the page.
2. Find the spreadsheet and click on the image.
3. Click the "Properties" link.
4. Click "Change".
5. Select your spreadsheet and click "Select".
6. Adjust the properties and click "Save".
7. When you are done editing the page, click "Save".
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Share your site
Invite others to your site
1. Your site can be privately shared with a group of people or you can make your site public. In the "More actions" menu, click "Share this site".
2. Add the emails you want to invite. Remember that owners are able to invite others and manage the site, collaborators can edit content, and viewers can only read. You can "Choose from contacts" to see a list of your Google contacts. Click "Invite these people".
3. In the invitation dialog, you can customize the email's subject and message. Click "Send" to invite users, or click "Skip sending invitation" to add your named users without sending them an email invitation.
4. When you are finished adding users, click "Return to site".
Receiving a Google Site Invitation
1. If you have been invited to a Google Site, you will receive an email to the account that has been invited. Click on the link in the email.
2. In you are not automatically logged in or do not yet have a google account, Scroll to the site footer and click "Sign in".
3. Enter your google account email and password, and click "Sign in". If you don't have a google account you must first click "Sign up for Sites" (don't worry you can still use normal email). If you have a Google Apps Account click the "Sign in with a Google Apps Account" and enter in your Google Apps email address.
4. Fill in the Create an Account screen and click create. You are ready to enter your site.
You can also follow the steps how to sign up a google mail account here.
How to use the sub page listing gadget
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Use the sub page listing gadget
1. This gadget rolls up subpages. To insert the subpage listing gadget, click "Edit page"
2. Click insert "Subpage listing". (note: the Table of contents rolls up headers on a particular page, where the subpage gadget rolls up children of a particular page).;
3. Give your gadget a title and choose your properties, and click save.
Add page to the subpage gadget
1. If you want a page to automatically appear in the gadget you need to make sure you are creating the page under the parent selected. Click "Create page".
2. Select your page template and give the page a name and select the location in the hierarchy where your page will live. Sites gives you a couple of default locations, but you can "Choose a different location".
3. If needed, click "Choose a different location"
4. In the Select Page dialog you want to select the parent page. The Select page gives you 4 ways to find the parent page Search, My changes (your recent site changes, Recent site activity (the entire sites' recent activity) and the Site Map which shows you the entire structure of your site. (this is my preferred method of finding the parent page)
5. Select the parent page
6. and click "Select"
7. You will see the path change to your new location. Click "Create Page"
8. Your page is created. You can add content
9. Click "Save".
10. Now lets just confirm that your newly created page, shows up in the page listing gadget. Click the parent breadcrumb.
11. Verify that your newly created page is listed.
Gold INGOT Unit 2 Assessment Criteria
This tutorial can also be viewed here.
Working with forms
When your template was created, any embedded Google Spreadsheets, Documents and Spreadsheet Forms were also copied to your new site. If you are the template creator, you can find these newly-created assets in your Documents listing.
Each Form has an associated Spreadsheet that will collect that form's data.
Adjust the Form
1. To find out the name of the form, edit the page.
2. Find the spreadsheet and note the title.
3. Next go to your Documents listing.
4. Find the form and click to open it.
5. You are presented with the data table of the form. To add or remove fields, go to the form menu and select "Edit form".
Once your form is live, any submissions will be gathered in the associated spreadsheet.
Open source software for building web sites
Wordpress - This is the software used for the Gebol web site
Drupal - This is the software used for the INGOT web site
Kompozer - This is editing software similar to the proprietary Dreamweaver software,
30 open source tools - A range of useful tools.
