GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 2)

GCIT315A :
Produce an interactive website to

meet user requirements (Part 2)
ITE3001 IT Essentials - Services

Google Sites service
2
GCIT315A : Produce an interactive website to meet user requirements ©VTC2012
go to
http://www.google.co
m
GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 3

After Login

Google Sites has a new look!
 Choose the classic look from the gear menu
 Get back to the new look from the gear menu.

Create a New Site (1)
Step 1 Step 2
Step 3
Google Sites has many site templates for
you to use to help you get started quickly
with your new site. A Site template has
pre-built pages with a design, structure,
and content suited to a particular
purpose. (You can find out more about
each template by hovering over the
icon.), you can click Browse the gallery
for more to see more template options.


Step 5
Tips
When selecting a URL for your site, keep the following in

mind:
• Your site name (and URL) can't conflict with an existing
site name.
• Your site URL can't conflict with an existing Gmail
username (unless it's your own).
• Site URLs can only use these characters: A-Z, a-z, 0-9.
Step 6
Your site theme creates a
consistent look to the pages on
your site, such as images used
in the header or color schemes Under the More Options
on menus. section, you can enter a site
description, which gives a brief
description of the purpose of
your site.
Step 7


Step 8
Tips
Decide who you want to be able to see your site.

• If you want your site to be public, choose the radio
button next to Everyone in the world can view this site.
• If you want you want your site to be private, choose the
radio button next to Only people I specify can view this
site.
Step 9
Step 10
Step 11

The Homepage of a New Site
Tips
Your Google Site is a collection of individual pages. Your site
begins as just a single homepage.
Delete a Site
Step 1
Step 2
Step 3
Step 4

Restore a Deleted Site
Step 1
Step 2

Deleting a page
 Go to the page you want to delete.
Step 1 Step 2
Tips
If you delete a page, its sub-pages and attachments will be
removed. If you accidentally delete a page, you have 30 days
to recover the deleted page, which will automatically restore
its sub-pages and attachments.
Recovering a deleted page
Step 1 Step 2 Tips

On the Deleted items tab, you can also see how
long each page has left before it will be deleted
permanently by looking under the Delete
permanently column. If you want to delete a
page permanently right away, you can click the
box next to the page and click "Delete
permanently." Be careful, though – you cannot
undo this action.
Step 3

Selecting a page location
 You can change the location of a page within the

hierarchy of your site either when you create the page
or after it has been created.
 Navigate to the page that you want to move.
Step 1
Step 3
Step 2
Select the page where you want

this page appear under.

Create new pages within your site

Step 1 Name your page. Google
Sites will generate a URL
Step 3
(web address) based on the
name you choose, but you
Step 5
can alter it by clicking
Change.
Step 2 Choose where to locate your page

within your site:
• Put page at the top level: Top-
level pages are the most general
Step 4 in your site's hierarchy. They exist
at the same level as your
homepage, and it's easy to create
subpages beneath them. They are
best for main categories of your
site's content.
• Put page under {current page}:
The second option is to place your
Choose a page template
new page as a subpage of the
page you were on when you
clicked "Create page".
• Choose a different location:
Choose to nest your page under
any other page in your site.

Web Page Templates (Types)
 When you create a new page for your Google Site, you
can choose from among a number of different page
types, depending on what type of content will be on
that page.

Web Page Template : Web page
 A web page is the simplest kind of page; you can write

content, embed gadgets, and arrange it however you
like.
 The web page has standard formatting controls like
bold, italic, and underline, bullets, and more.
 You can attach documents from your hard drive to the
bottom of the page, and you can let other site
collaborators comment on your pages.
 Google Sites periodically saves versions of your page as
you make edits, so it’s easy to go back to earlier versions
of the page to make comparisons or undo changes.

Web Page Template : Announcements
 Much like a blog, announcement pages display posts you

make to the page in chronological order, starting with
the most recent.
 For example, an announcement page would be great for
keeping a record of weekly meeting notes, while
providing quick access to the most recent meeting info.

Sample Annoucements Page

Step 2
Step 1
Step 3

Web Page Template : File cabinet
 File cabinet pages let you store and organize files from
your computer’s hard drive, making it an easy way to
share files with other users of your site.
 Anyone subscribed to the page will be notified when
files are added, changed, or removed.

Sample File Cabinet Page

Web Page Template : List page
 List pages let you make and organize lists of information.

Items on the list are easy to add, edit, and remove,
 and viewers of the list can sort it by any column.
 Like the file cabinet page, subscribers are notified when

items are added, changed, or removed.

Sample List Page


Adding links to your page (1)
ITE3001 IT Essentials -
Services
 Adding links is an easy  Choose one of the
way to help visitors following link options
better navigate your site, (see next slide)
provide further
information, and increase
your chances of showing Step 1
up on relevant search
results
1. Click "Edit page."
2. Highlight the text and
click Link.

 Existing internal page: If you would like to link to an existing page

on your site, select the Existing page tab. You can then find the
page you want by searching for its name, looking through your site
map, or, if you have edited it recently, finding it in your list of
recent changes.
 New internal page: If you would like to link to a new page on your
site, select the Existing page tab and click "Create new page." You
will then be prompted to give the page a title, choose what
type of page you want it to be, and choose where to place the
page.
 External page: If you want to link to a page on another website,

select the Web address tab and enter the URL of the page you
want to link to in the box below Link to this URL.

Existing internal page Step 3a
Step 2
Step 2a
Step 4b
Step 2b
Step 3b
New internal page

ITE3001 IT Essentials -
External page
Tips
Services
Step 2
To open in a new browser
window or tab when a visitor
clicks on it, check the box next
to Open this link in a new
window.
Step 3

Step 1
Insert An Image (1)
Either browse for an image

on your machine or upload
one from a specific web
address
Step 2

Insert An Image (2)

You can choose one of these
standard sizes for your If you'd like to resize your
image: small, medium, image manually on the page,
large, or original size. click the HTML button
Include attributes for width,

height, or both, within the
'img src' tag.

Inserting Google Maps

Step 1
Step 7 Click on map
Step 5
Step 2
Step 6
Step 4
Step 3
Your location appears in the

map, marked with a red
placemark.

Add a Youtube Video



Google Form
service
Collect information by creating a form in Google Docs.
Google Docs is now replaced by Google Drive
 Your Google Docs files are now stored in Google Drive, and
you can access them anytime at drive.google.com :
Just like before, you can upload, edit, share, and create files
online.
 To access all of your files, folders, and Google Docs, you can
sign into Google Drive on the web at drive.google.com.
 What's the same
 If you've used Google Docs, some things in Google Drive will be
familiar.
Go To Google Docs
If you already logged in Google Sites :
 Click the Documents option
Otherwise, login directly at http://docs.google.com/
After you log in to Google Docs, you will be automatically redirected to Google Drive.

Go To Google Sites
If you already logged in Google Docs :

 Click the Sites option
Otherwise, login directly at http://sites.google.com/

Google Docs has a new look!
 Not ready for change? Choose the classic look from the
gear menu
 Get back to the new look from the gear menu.

Create a Google Form
 Click the CREATE comamnd, then choose Form

 Provide a title for the form
 It is optional to choose a "Theme" to choose
the Preferred background and colours

Delete a Google Form
 Method 1
 Method 2
 select All items, select a form document, click Delete

Add items and questions to a form
 You can add different types of questions to your forms

by clicking Form in your spreadsheet and Add item at
the top of the editing page. Here are some of the
question types you can choose: checkboxes, grid, drop-
down lists with options, multiple choice, paragraph text,
which allow for long answers, and scale, to ask your
invitees to grade something in a scale from 1-5, for
instance.

Edit a form question
 Edit: To edit an existing question, just click the Edit

button to the right of the question you want to edit.
 Delete: To delete a question, click the Delete button to

the right of the question you want to delete.
 Duplicate: To duplicate a question, click the Duplicate

button to the right of the question you want to
duplicate.

Edit a Question
By default a new question is already created in a new

form
 Click the Edit button to switch between Edit mode and
Display mode


Select Question Type
 Click the dropdown list to select a question type

Question Type : Text
 In Edit mode
 In Display mode

Question Type : Paragraph Text
 In Edit mode
 In Display mode

Question Type : Multiple Choices
 In Edit mode
 In Display mode

Question Type : Checkboxes
 In Edit mode
 In Display mode

Question Type : List
 In Edit mode
 In Display mode

Question Type : Scale
 In Edit mode
 In Display mode

Question Type : Grid
 In Edit mode
 In Display mode

Add a New Question
1. Choose Add item

2. Chosoe a question type

Delete a Question
 Move the mouse cursor to the question you want to

delete
 Click the Delete button

Add section headers (1)
 Add section headers if you'd like to divide your form in

sections to make it easier to read and complete. Simply
select Section header from the Add item drop-down
menu.
 Each section header can have a title, which appears in a
larger font, and a section description.

Add section headers (2)

Add a Google Form To Google Sites
 In Google Site service, choose a

page to add a Google form
 Under the Insert menu, choose
Spreadsheet form
 Choose the form you have created

To Save a Google Form
 Click the Save button

Collect form responses
 The form responses are collected in a spreadsheet.

 If you created the form from an existing spreadsheet,
form responses will be collected in that spreadsheet.
 If you created the form from your Documents List, form
responses will be collected in a new spreadsheet with
the same title as the form.
 It's a good idea to use the same name for the form and
the spreadsheet, so you can quickly find both of them in
your Documents List.

View the summary of responses (1)
 To see the spreadsheet with the form responses, click

See responses at the top-right of the form and select
Spreadsheet.

View the summary of responses (2)
 To quickly see how many users filled out a form and

what their responses are, you can check the response
summary. From your spreadsheet, go to Form > Show
summary to view it.

View Collected Data in a Form
 At Google Docs, select All items, click the form you

wanted
 The data will be display
in worksheet format
 it shows the time when
the form data is received

Download Form Data as Excel File
 Click File, then Download as, then Excel

Switch to Form Design View
 If you are viewing the collected in a form, you can switch

to the Edit form screen :
 Select Edit form command under the Form menu

Other Learning Resources
 A short tutorial to create create a free online survey

with Google Forms
 http://www.speedofcreativity.org/2010/07/30/create-a-free-
online-survey-with-google-forms/
 A video demo to show you how to create an online quiz
using Google form (4 min 53 sec)
 http://
www.youtube.com/watch?v=xC1L0wpmqlY&feature=player_
embedded
 Google Sites Help page

 https://support.google.com/sites/?hl=en

Google Sites Help page
 Includes the following topics :

1. Get started with Google Sites
2. Change the design of your site
3. Add content to your site
4. Manage site access and settings
5. Use Google Analytics and other services with your site
6. Use Google Sites with Google Apps
7. Troubleshoot issues

Adding content to your site
 Adding text and images

 Adding Docs, Calendars and other gadgets
 Modifying pages and sub-pages
 Adding attachments, comments and files

Adding text and images
 Text and HTML

1. Adding links to your page
2. Linking to files or text within your site
3. Adjusting tables within a site
4. Unlocking pages
5. Code and formatting not allowed in your site
 Images
1. Uploading images
2. Customizing how your images are displayed

GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 2)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 2)

Uploaded by

Copyright:

Available Formats

GCIT315A :

Produce an interactive website to

ITE3001 IT Essentials - Services

Google Sites service

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 3

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 4

Google Sites has a new look!

 Choose the classic look from the gear menu

 Get back to the new look from the gear menu.

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 5

Create a New Site (1)

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 6

Create a New Site (2)

When selecting a URL for your site, keep the following in

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 7

Create a New Site (3)

Decide who you want to be able to see your site.

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 8

The Homepage of a New Site

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 10

Restore a Deleted Site

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 11

 Go to the page you want to delete.

Recovering a deleted page

Step 1 Step 2 Tips

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 13

Selecting a page location

 You can change the location of a page within the

Select the page where you want

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 14

Create new pages within your site

Step 2 Choose where to locate your page

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 15

Web Page Templates (Types)

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 16

Web Page Template : Web page

 A web page is the simplest kind of page; you can write

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 17

Web Page Template : Announcements

 Much like a blog, announcement pages display posts you

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 18

Sample Annoucements Page

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 19

Web Page Template : File cabinet

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 20

Sample File Cabinet Page

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 21

Web Page Template : List page

 List pages let you make and organize lists of information.

 Like the file cabinet page, subscribers are notified when

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 22

Sample List Page

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 23

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 24

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 25

Adding links to your page (2)

 Existing internal page: If you would like to link to an existing page

 External page: If you want to link to a page on another website,

Adding links to your page (3)

New internal page

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 27

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 28

Either browse for an image