W200  Using  Computers  in  Education  

Creating  Web  Sites  with  Google  Sites  

 
 
Using  any  web  browser,  go  to  
   
http://sites.google.com/      
 
You’ll  need  to  log  in  with  your  Google  Account  
username  and  password.    From  there  select  Create  
new  site  as  seen  in  the  screen  to  the  right.    
 
 
 
Fill  in  the  following  information:  
 
A.  Site  Name  
Decide  on  a  name  for  your  site.    THINK!    
This  becomes  part  of  the  URL  to  access  
your  site.    
 
B.  Site  Description  
It  is  optional  to  give  a  description,  but  I  
would  suggest  that  you  do  so.    
 
C.  Mature  Content  
If  you  have  to  think  about  this  .  .  .    
 
D.  Share  With  
Select  “Everyone”  now,  but  you  can  
change  it  in  the  future.  
 
E.  Site  Theme  
Whatever  suits  your  personal  tastes  .  .  .  to  see  more  themes,  click  “More  Themes”.  
 
F.  Type  the  code  
You’ll  need  to  type  the  code  word  shown  so  
Google  knows  you  are  a  real  person  creating  the  
site.    
 
G.  Create  Site  
Click  the  blue  button  to  create  your  web  site!  
 
 
 
 

File  Under:  Project  3  Information/Communication  Web  Site  

 The  Basic  Page  
 
 
This  is  what  your  web  looks  like  with  no  
editing  to  content.  
 
Even  now,  your  site  is  live  on  the  Internet  
and  you  could  provide  others  your  URL.  
 
 
 
 
 
Creating  a  New  Page  
Google  Sites  lets  you  create  multiple  pages  in  your  site  and  offers  several  different  types  of  
page  templates  from  which  to  choose.    Here’s  a  brief  explanation  of  each,  taken  from  the  
Google  Sites  help  pages:  
 
Webpage  
A  web  page  is  an  unstructured  page  where  you  can  enter  text,  images,  tables,  and  embed  spreadsheets,  
presentations,  videos,  and  more.  The  Web  Page  has  standard  formatting  controls  like  bold,  italic,  underline,  
font  control,  text  color,  and  text  highlighting.  You  can  create  bulleted  lists,  numbered  lists,  and  easily  link  to  
other  pages  in  your  site.  You  can  attach  documents  from  your  hard  drive  to  the  bottom  of  the  page,  and  
allow  other  site  collaborators  to  comment  on  your  pages.  
 
Announcement  Page  
An  Announcement  page  is  a  page  which  makes  it  easy  for  an  individual  or  group  to  post  chronological  
information  like  news,  status  updates,  or  notable  events.  It  can  be  used  to  post  organizational  news,  post  
project  updates,  announce  new  releases,  post  interesting  links  from  around  the  web,  as  a  simple  blog,  and  
more.  
 
File  Cabinet  Page  
A  File  Cabinet  allows  you  to  manage  documents  from  your  hard  drive  and  organize  them  into  folders.  This  
can  be  used  to  organize  common  documents  in  one  place.  Version  history  is  stored  for  documents  so  you  
can  always  return  to  an  earlier  version.  
 
List  Page  
List  pages  allow  you  to  easily  track  lists  of  information.  You  can  choose  from  a  list  of  templates  or  configure  
your  own  custom  columns.  Items  can  be  easily  added,  updated,  and  removed.  
 
To  begin  the  process,  click  Create  new  page  near  the  top-­‐right  of  the  screen.  
 
 
A  new  dialogue  page  appears  and  is  shown  here:  
 
In  this  sample,  I’ve  elected  to  create  a  new  Web  
page  named  Homework  and  make  it  a  top  level  
page.      
 
If  you  choose  to  “Put  page  under  .  .  .  “  another  page  
in  your  site,  the  new  page  will  appear  automatically  
in  the  navigation  below  and  indented.    Google  Sites  
will  also  allow  the  user  the  ability  to  expand  and  
collapse  a  list  of  pages  “under”  another  page.  
 
Click  Create  Page  and  Google  Sites  adds  the  new  
page  to  your  site.    Google  Sites  opens  your  new  page  in  “Edit”  mode;  to  exit  this  mode,  click  
“Save”  in  the  upper  right  area  of  the  screen.  
 
Take  a  moment  to  create  all  the  pages  you’ll  need  for  your  site.    Don’t  worry  about  content;  
we’ll  get  to  that  in  bit.  
 
 
Changing  Site  Navigation  and  the  Left  Sidebar  
At  this  point,  you  may  want  to  edit  what  your  left  side  navigation  bar  shows  on  your  site.    By  
default,  Google  Sites  manages  the  navigation  automatically  and  creates  links  to  pages  in  your  
site.    They  are  listed  in  the  left-­‐side  navigation  in  alphabetical  order  by  page  title.  
 
We’ll  learn  two  things:  first,  changing  the  Site  Navigation  links  to  pages  in  your  site,  then  
deleting  and  adding  other  sidebar  elements.  
 
 
To  accomplish  either  of  those  tasks,  begin  by  clicking  Edit  sidebar.    The  link  
is  at  the  bottom  of  your  left  side  navigation  bar.  
 
The  Edit  Sidebar  screen  appears:    
 
In  this  screen,  you  have  access  to  a  number  of  advanced  aspects  of  
your  site.    This  basic  tutorial  is  not  designed  to  cover  these  aspects;  
however,  note  that  you  can  
• view  and  manage  site  content  
• change  site  setting  (you  can  delete  the  entire  site  under  
“General”)  
• Change  the  site’s  appearance  (use  “Theme”  to  select  a  new  
theme  for  your  site).  
 
Explore  these  options  to  learn  more.  
 
  
Changing  Site  Navigation  
 
In  the  new  dialogue  page  that  appears,  click  edit  in  the  
Navigation  element  box.      
 
 
 
The  Configure  Navigation  pop-­‐up  dialogue  box  appears  .  .  .    
 
   
In  this  dialogue  box,  you  can  accomplish  3  things:    
 
Title:  Changing  the  text  in  this  box  changes  the  
name  of  the  actual  box  that  appears  on  your  site’s  
left-­‐side  navigation  bar.    Decide  whether  or  not  you  
even  want  a  title  to  your  navigation  box  by  
checking  or  un-­‐checking  the  “display  title”  box.  
 
Automatically  Organize  My  Navigation:  We’ll  
come  back  to  this  in  a  second.  
 
Include  a  link  to:  Checking  or  un-­‐checking  these  boxes  adds  or  deletes  these  two  items/links  
to/from  your  navigation  bar.  
 
Sitemap:  this  will  include  a  link  to  a  listing  of  all  pages  in  your  site.    You’ll  be  able  to  view  your  site  in  
either  “list”  format  or  “tree”  format.  
 
Recent  site  activity:  this  will  include  a  link  to  a  listing  of  all  recent  updates  you’ve  made  to  your  site.    
Think  of  it  as  a  “history”  of  your  work  on  your  web  site.  
 
More  on  Automatically  organizing  my  navigation  
By  default,  Google  Sites  will  automatically  mange  your  
navigation  system  by  adding  new  pages  to  the  navigation  
bar  in  alphabetical  order  and  showing  up  to  two  (2)  
levels  of  pages.      
 
However,  you  may  need  to  re-­‐order  the  links  in  some  
non-­‐alphabetical  order.    To  access  these  links  to  make  
such  changes,  uncheck  the  box  next  to  “Automatically  
organize  my  navigation.”  
 
The  dialogue  box  refreshes  with  the  following  view:  
 
  
Configure  Navigation  –  Cont’d  
 
Reorder  the  List  
To  reorder  the  list,  click  a  page  title  to  select  the  page  and  use  the  up  and  down  arrows  to  the  right  to  move  the  
page  up  or  down  in  the  list.      
 
Put  a  Page  Under  Another  Page  
To  make  any  page  “under”  another  page,  use  the  reorder  system  to  move  the  page  below  the  page  it  will  appear  
under  and  use  the  right-­‐pointing  arrow  to  indent  the  page.    Reverse  the  indent  using  the  left-­‐pointing  arrow.  
 
Delete  a  Page  from  the  Navigation  
To  delete  a  page  from  the  navigation  list,  select  the  page  and  click  the  boxed  X.    The  page  link  is  removed  
immediately  from  the  list.    However,  the  page  itself  is  not  deleted  .  .  .  you  can  return  a  link  to  the  page  to  the  
navigation  list  by  clicking  Add  page  at  the  bottom  of  the  list.  
 
Add  a  Link  to  an  External  URL  to  the  Navigation  List  
To  add  a  link  in  your  navigation  list  to  an  external  URL,  click  Add  URL  in  the  dialogue  box.    A  new  dialogue  box  
appears  asking  for  the  URL  or  email  and  the  Text  to  display.    Fill  in  those  two  boxes  and  click  OK.  These  new  URLs  
can  be  managed  just  as  other  items  in  the  list;  however,  note  that  they  will  NOT  open  in  new  windows.    
 
Finished?    Click  OK  in  the  dialogue  box.      
 
You’ll  be  returned  to  the  Edit  Sidebar  screen  where  you  must  click  “Save  
Changes”  or  risk  losing  the  work  you  just  completed.    Click  SAVE  CHANGES!  
 
To  return  to  your  site,  click  Return  to  Site  in  the  upper  left  corner.  
 
 
Adding  Sidebar  Items  
Google  provides  a  number  of  sidebar  items  that  are  easily  added  to  your  site.  
 
If  you’ve  returned  to  your  site,  click  Edit  sidebar  just  as  you  did  in  
the  previous  section.      
 
Locate  and  click  “Add  a  sidebar  item”.    
 
 
While  Google  Sites  provides  a  number  of  different  elements,  we’ll  
work  with  one  just  to  give  you  experience;  then  you  can  explore  the  others  on  your  own.  
 
Scroll  down  in  the  list  and  select  “Add”  under  the  “Countdown”  page  element.    Google  Sites  automatically  
adds  the  Countdown  control  box  to  your  left-­‐side  navigation  bar  list.  
 
To  manage  the  Countdown,  click  “Edit”  in  the  Countdown  control  box.    (Each  page  element  will  have  a  
different  edit  screen  .  .  .  ).    Name  the  countdown  and  select  the  date  in  the  future  to  which  the  
countdown  box  is  counting  down.    Click  “OK”.    You’ll  not  see  a  change  in  the  Edit  Sidebar  screen,  but  
Google  Sites  has  added  it  to  your  site.  
  
You  can  also  rearrange  boxes  in  the  left  side  navigation  bar  by  grabbing  the  4  dots  in  the  blue  
bar  at  the  top  of  the  item  and  dragging  it  to  another  position.    Look  for  other  item  boxes  to  turn  
red;  that’s  when  it’s  OK  to  drop  the  item.  
 
When  you’re  finished  customizing,  click  the  Save  changes  button  in  the  upper  left  corner  of  this  
screen.    To  return  to  your  site,  click  Return  to  site  in  the  far  upper  left  corner  of  this  screen.  
 
 
Basic  Page  Editing  
 
Now  that  your  site  and  all  its  pages  are  created,  let’s  begin  by  adding  simple  text  to  your  
home  page.    You’ll  use  this  process  each  time  you  want  to  add  text  to  a  page  in  your  site.  
 
Click  Edit  page  in  order  to  add  content  to  your  site.    
 
 
In  this  sample,  there  are  two  text  boxes  that  can  
be  edited:  Home  and  Here  is  where  .  .  .  simply  click  and  start  typing  to  edit  these.  
 
You  can  use  the  font  style  and  size  tools  to  make  changes  to  the  text.    Note  how  most  of  the  
text  tools  are  very  similar  to  other  word  processing  tools  you  are  accustomed  to.    
 
To  highlight  text,  select  the  text,  then  click  the  Text  Background  Color  icon.  To  change  color  of  
text  itself,  select  the  text,  then  click  the  Text  Color  icon  
 
 

 
 
 Advanced  Page  Editing  
 
In  addition  to  changing  color  of  text  and  text  background,  you  have  several  other  options  you  
can  explore  to  customize  the  look  of  content  on  your  page.    This  section  of  the  tutorial  will  
cover  3  of  them:  1)  creating  a  new  page  layout,  2)  creating  and  using  a  table,  and  3)  inserting  
items  on  the  page  (images,  horizontal  lines,  etc.).  
 
Changing  the  Page  Layout  
A  basic  page  begins  with  a  single-­‐column  layout.    Google  Sites  allows  a  number  of  different  
page  layouts  ranging  from  1-­‐column  to  3-­‐columns  and  including  a  variety  of  header,  footer,  and  
side-­‐bar  combinations.  
 
To  begin,  click  Edit  page  if  you  are  not  already  in  edit  
mode  on  the  page  you  wish  to  change.    
 
 
To  change  the  page  layout,  click  the  Layout  pull-­‐down  menu  and  make  your  selection.    The  
image  below  shows  our  previous  Home  page  in  two-­‐column  layout.    Various  areas  of  the  page  
are  highlighted  using  dotted-­‐line  borders;  these  borders  are  not  visible  when  the  page  is  viewed  
online.  
 
 

 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
Creating  and  Using  a  Simple  Table  
Tables  give  you  some  measure  of  control  over  the  
placement  of  text  on  the  page  or  in  a  portion  of  a  
multi-­‐part  page  layout.    In  the  image  to  the  right,  you  
see  a  2  row/3  column  table.      
 
 
First,  ensure  you  are  in  edit  mode  for  the  page  to  which  you  wish  to  add  a  table.  
 
 
 
 
To  create  a  table,  click  the  Table  menu,  point  to  Insert  Table,  
then  select  the  height  and  width  of  the  table.      
 
Note,  too,  how  you  can  insert  rows  and  columns  and  delete  
rows  and  columns  from  the  menu.  
 
 
 
 
 
 
In  this  image,  the  middle  cell  in  the  lower  row  is  
selected;  this  occurs  when  you  click  in  the  cell.    You  can  
change  the  width  of  a  column  or  height  of  a  row  by  
grabbing  and  dragging  the  white  handle-­‐bars  of  the  
selected  cell.      
 
Note  that  changing  the  width  and  height  of  one  cell  is  not  possible.    Changes  occur  to  the  entire  
column  or  the  entire  row  (or  both).  
 
One  other  note:  You  cannot  set  the  table  borders  to  transparent;  all  tables  will  show  lines  
around  each  cell.  
 
 
 
 
 
 
  
Inserting  Items  on  a  Page  
 
We’ll  learn  how  to  insert  two  basic  items  on  your  web  page:  1)  a  horizontal  rule  (a  line  running  
horizontally  across  the  entire  page  or  the  column  (if  you’re  using  a  multi-­‐column  layout))  and  2)  
an  image  such  as  a  digital  photograph.  
 
Horizontal  rule  
Horizontal  rules  can  be  used  to  break  up  a  page  into  smaller  chunks  of  information.      
 
Position  the  cursor  on  the  line  where  you  want  your  horizontal  rule.    Click  the  Insert  menu  and  
choose  Horizontal  Rule.    The  line  will  be  placed  immediately  above  your  cursor.  
 
To  delete  a  horizontal  rule,  click  below  the  rule  and  use  your  backspace  key.  
 
The  image  below  shows  a  two-­‐column  layout,  each  with  horizontal  rules.  

 
Inserting  Images  
Putting  images  on  a  page  in  Google  Sites  is  a  two-­‐step  process:  1)  upload  the  image  to  Google  
Sites  and  2)  insert  the  image.  
 
Uploading  Images  
Any  image  you  want  to  upload  should  be  in  it  final  form.    You  will  not  be  able  to  crop  or  rotate  
your  images  once  uploaded  to  Google  Sites.    In  addition,  images  can  take  up  a  sizeable  amount  
of  storage  space,  so  you’ll  want  to  make  sure  you’ve  resized  the  image  to  a  smaller  file  size.    
This  tutorial  does  not  cover  these  aspects  of  digital  imagery.      
Please  also  note  that  once  you  upload  an  image  to  your  Google  Sites  storage,  you  cannot  
delete  it  from  storage.    Even  if  you  don’t  use  it  in  your  pages,  it  still  resides  in  your  storage.  
 
Begin  by  editing  the  page  where  you  want  the  image  to  appear  
and  placing  your  cursor  at  the  point  where  you  want  the  image  
on  the  page.    Then  click  the  Insert  menu,  and  click  Image.  
 
 
  
 
In  the  dialogue  box,  click  Uploaded  images  and  navigate  
to  the  image  you  wish  to  upload.    Select  the  photo  and  
click  Open.      
 
 
NOTE!    There  is  no  confirmation!    As  soon  as  you  click  Open,  the  photo  will  be  uploaded  and  
placed  on  the  page  at  the  point  where  your  cursor  is  located.  
 
Alternatively,  you  could  select  Web  address  (URL)  and  enter  the  URL  of  a  photo  you  have  
stored  online  somewhere  else.    This  works  well  with  photos  stored  in  places  like  Flickr.    Just  
copy  the  URL  of  your  photo  and  copy  it  in  the  URL  box  that  appears  when  you  select  Web  
address  (URL).    
 
Once  uploaded,  you  may  insert  the  same  image  again  on  this  page;  it  is  NOT  available  for  use  
on  other  pages.    If  you  need  the  same  photo  on  a  different  page,  you’ll  need  to  upload  it  again  
when  editing  that  page.  
   
You’ll  be  able  to  control  alignment,  size,  and  wrapping  of  the  
image  on  the  page  using  the  picture  controls  at  the  bottom  of  
the  image.    To  access  the  controls,  simply  click  on  an  inserted  
image.    Click  off  the  image  to  hide  the  controls.  
 
Experiment  with  the  Align,  Size,  and  Wrap  possibilities.  
 
To  remove  a  photo  from  the  page,  select  the  photo  when  the  
page  is  in  edit  mode  and  click  Remove  in  the  picture  control  bar.  
 
 
 
 
 
 
 
 
 
 
 
 
 
  
Adding  Links  to  External  Web  Sites  
One  of  the  greatest  aspects  of  web  development  is  your  ability  to  link  to  content  on  millions  
and  millions  of  other  web  sites.    This  section  will  show  you  how  to  create  these  hyperlinks.  
 
The  page  you  wish  to  include  the  link  on  must  be  open  for  editing.  
 
Begin  by  typing  the  text  you  wish  to  make  a  hyperlink  and  highlighting  that  text.      
 
Click  the  Link  tool.    
 
 
 
In  the  dialogue  box,  click  Web  address  on  the  left  side.  
 
 
 
Enter  the  URL  in  the  text  box.  
 
 
 
Check  the  Open  this  link  in  a  new  window  if  you  want  this.  
 
 
 
Click  OK.  
 
 
Email  Message  Links  
To  create  a  link  that  opens  a  new  email  message,  follow  the  directions  above,  and  use  the  
following  URL:  
  mailto:<email_address>      
For  example,  to  create  my  email  link,  I’d  use  mailto:baspitze@iusb.edu  
 
Alternatively,  you  can  simply  type  your  email  address  and  press  enter.    Google  Sites  will  
automatically  create  and  email  hyperlink.  
 
You  can  also  create  a  hyperlink  on  one  page  of  your  site  to  another  page  in  your  site.    Follow  
the  same  procedure  to  create  a  hyperlink  as  you  did  above,  but  this  time  click  Existing  page  in  
the  left  side  navigation  of  the  create  link  dialogue  box.    Select  the  page  you  want  to  link  to,  
decide  whether  or  not  to  open  in  a  new  window  (probably  not  a  good  idea),  and  click  OK.    
 
You  can  also  use  this  screen  to  create  a  new  page  in  your  site  .  .  .    
 
 
 Attaching  Documents  and  Other  Files  
One  important  aspect  of  your  site  is  the  ability  to  share  documents,  PDFs,  and  other  files  
electronically.    You  upload  the  document/PDF/file  to  your  site  as  an  attachment,  and  others  can  
access  the  document  from  your  site.  
 
You  have  no  control  over  where  the  link  to  the  file  is  on  the  page:  all  attachments  reside  at  the  
bottom  of  the  page.  
 
Attached  files  do  count  toward  your  100  Mb  quota,  but  you  can  easily  remove  attachments  
from  your  site  once  they’ve  outlived  their  usefulness.  
 
Here’s  the  process:  
 
Open  the  page  on  which  you  want  to  place  the  attachment.  
 
Note:  you  cannot  add  attachments  to  your  home  page  .  .  .    
 
 
 
Locate  the  Attachments  area  at  the  bottom  of  the  page  
and  click  either  Attachments  or  the  plus  sign  (+)  next  to  
the  word.    When  you  do,  you’ll  be  given  a  simple  Browse  
dialogue  box:  click  the  Browse  button.  
 
 
 
Locate  your  file,  select  it,  and  
click  Open.    As  soon  as  you  
click  Open,  Google  Sites  will  
automatically  upload  a  copy  
of  your  file  to  your  site  and  
create  a  link  from  the  actual  
filename.  
 
 
 
Files  are  sorted  chronologically  by  time  of  upload.      
 
 
 
To  remove  an  attached  file:    
Too  simple,  really  .  .  .  just  click  Remove  next  to  the  attached  file  you  no  longer  need  on  
your  site.  
 
 
 Additional  Help  
 
To  access  Google  Sites  help  menu,  click  Help  in  the  upper  right  corner  at  any  time.    The  
following  help  page  will  launch  in  a  new  browser  window  or  tab:  
 

Almost  any  additional  questions  can  be  answered  by  referring  to  the  help  page.  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Acknowledgements  
This  tutorial  was  created  by  Dr.  Bruce  Spitzer  for  use  with  his  EDUC-­‐W200  students  at  Indiana  University  South  
Bend  in  Fall  2009.    All  images  and  intellectual  content  remain  the  property  of  Google  and  Google  Sites.    The  author  
makes  this  document  freely  available  to  the  public  domain  through  posting  on  Scribd.com.