Creating Effective
School and PTA Websites
Sam Farnsworth
Utah PTA Technology Appointee
sam@utahpta.org
Creating Effective School and PTA Websites
An Effective School Website must be:
1. Current – Do not leave outdated information on your home page – nothing more than a
week old! The first time a parent sees outdated info on your website will be the last
time they visit your site.
2. Complete – All information that goes home by mail, by e-mail, or in student backpacks
must be on the website first. If a parent sees that they always get information first
through other means, they will never use the website as a source of information.
3. Timely – All information must be put on the website as soon as it is available, and more
importantly, before parents are looking for it. Avoid: “More info coming soon.”
4. Specific – Your website must have specific information about every item posted, such as
events, activities, announcements, documents, and lists. Every single post needs to
include the “who, what, when, where, why, and how”.
5. Up to Date – Parents will continue to visit the website as long as there is new
information when they visit. Constantly post news and announcements, and keep the
calendar up to date. Post advertisements and current information on the home page.
Creating Effective School and PTA Websites
An Effective School Website must be:
6. Organized – All information should be well organized so that parents can intuitively find
information without searching. Similar information should be grouped together.
7. Promoted – Parents need to be directed to the website through advertising. Send home
notes, post the URL on the marquee, e-mail a link to parents, etc. Post a coupon on the
website that parents can print for their students to receive a reward at school.
8. Updateable – You should be able to update and add content quickly and easily. Also,
multiple PTA Board members and school staff should have access to update the
website. Information should not be funneled, and bottlenecked, through one person.
9. Expandable – You must be able to easily add new pages and folders. Custom built
websites and website templates often require editing HTML and uploading
files via FTP to add pages. Your website should be updateable through a
web interface.
10. Non-technical – All changes to the website should be able to be made without any
HTML programming. The website editor should use a WYSIWYG editor.
Creating Effective School and PTA Websites
Before you start your school website, you will need:
• School logo
- Should be in PNG format with a transparent background
- Should be about 100 pixels tall and about 50 to 200 pixels wide
• School newsletters in PDF format (for the current school year or more)
• School calendar
• PTA Board contact list
- Position, name, phone number, and e-mail address
Creating your School Website:
• Go to http://sites.google.com
• Create your website using some of the
suggestions in the following slides
Login to Google here 
If you don’t have a Google
account, create one here 
 Enter your e-mail address
 Enter your password (twice)
Scroll down to complete the form 
 Select your country
 Enter your birthday
 Enter the word verification
 Click I Accept
Click Create Site
Browse the gallery to look
through more templates
Select Local PTA Chapter
(this template starts with all
the pieces you will need)
 Enter the name of your site
 Enter a shorter name for the URL if desired
Scroll down to complete the form 
 Enter the word verification
 Click Create site
This is the default PTA template
that you will now begin to customize
Click More actions 
…then click Manage site 
This page is the starting page for
making template, design, style,
color, and logo changes to your site.
 But first, click Sharing to give others access
to add and change things on the site.
 Enter the e-mail addresses of those
who will be adding to the website.
Select collaborator or owner as needed.
 Click Invite these people
 Make sure this box is checked
 Type a message informing them
they are now able to add and edit
content on the new website.
Then click Send.
 Or click Skip sending invitation
List of Owners 
List of Collaborators 
You do not need viewers 
 because the site is public
You selected the Local PTA Chapter
template, which helps determine some of
the functionality of the website, like
calendar, announcements, programs, etc.
You can select one of these
templates to change the look and
feel of your website.
 Click on Themes to change the
colors and format of your website.
Use the preview link below
each theme to see how your
site will look in that theme.
The colors of this template
match my school colors, so
I am going to select it.
 Click change logo
to replace it with yours.
 Click Site layout to
change the header
and navigation
 Every time you make a change, be
sure to click Save changes at the top.
Hint: School logo should be 100 pixels
tall and about 50 to 300 pixels wide in
order to fit inside the website header.
 Click Choose File and
select your school logo
from your computer.
 My school logo
Now let’s get rid of
the YouTube video.
Click Edit page.
This is a WYSIWYG editor. You can
edit text and add objects like pictures
and videos right here on this page.
 Click on the YouTube video
object and click Remove.
YouTube video is gone. The
Newsletter object automatically
moved up in its place.
Click on More
actions above and
choose Manage Site
to make changes
to the colors.
 Use this box to make changes
to individual elements of the
theme, such as links, titles,
navigation, background colors,
background images, etc.
 Click on Colors and fonts
I removed the background
image and changed it to a
background color.
 I changed the menu color and
link color to the school’s color.
 The background, the menu, and the
links now match our school’s color.
Now we need to make the calendar
have dates for our school. Click How to
replace this calendar for instructions 
This page has instruction on
how to create a calendar in
Google Calendar and tie it
to your school website.
Follow the instructions to
create a new calendar for
your school, then return to
your website.
Once you’ve created your calendar,
go back to your school website
home page and click Edit page.
Click on the Google Calendar
object and click Properties 
Use the drop down arrows to change
the color of the text on your calendar. 
 Click Display another calendar
and select your school calendar.
 Make your checkboxes
match my checkboxes.
 Change the calendar title if desired.
School calendar items are 
now automatically being
displayed on the home page.
Click Edit page 
Now we are going to edit
the Programs page.
 You can add text and
change fonts and colors just
like in any word processor.
 …then click the link button
 To create a link,
select the text to
make a link…
…or to a web
address 
 You can link to a page on your site
 Then click Ok.
 You can insert many different
objects into your page, such as
images, links, lines, documents,
maps, photos albums, presentations,
spreadsheets, and forms.
 You can also insert dynamic gadgets
that pull in recent files, recent lists,
posts, announcements, etc.
 There are formatting options similar
to what you see in a word processor.
 You can insert tables into your pages.
This will be useful when inputting your
PTA board or the school bell schedule.
 You can format your page
with many different styles of
columns, rows, and sidebars.
 There is no Education page
yet, so I click Create new page.
Then I used the
link tool on
Education. 
 I want to create pages for each of the
commissions, so I started by making a list
of the commissions on the Programs page.
 Name the page.
 Select where to put it.
(in this case, it’s a sub-page
of the Programs page.)
 Highlight Programs…
 …then click Create page.
Then click Save. 
 Enter text, images, objects,
links, forms, etc for the
Education page here.
 Now let’s add some news.
 To add news, click New post.
Click Save. 
 Enter the title.
 Enter the text.
 Insert images or other
ojbects as needed.
 Your new post shows up at the top.
News posts will also show up
automatically on the home page.
To change the calendar, click Edit page. 
Now we need to set up the
calendar page so it pulls in
our school calendar as well.
Click on the Google Calendar
 object and click Properties.
Use the drop down arrows to change
the color of the text on your calendar. 
 Click Display another calendar
and select your school calendar.
 Make your checkboxes
match my checkboxes.
 Click Save.
School calendar items are 
now automatically being
displayed on the calendar.
You can click on an item 
to bring up more details.
 If you typed in an
address, you can click
map to see a map.
The map link will take you 
to Google Maps, which will
provide you with more info,
like directions and pictures.
 This is the Forms page.
To upload a document,
simply click Add file.
You can use this page to post
any kind of document, like
newsletters, principal’s letters,
flyers, maps, and schedules.
 You can upload documents
from your computer.
 Click Upload
when finished.
 Or you can link to
documents on another
website. This one links
to the yearly calendar
on the Alpine School
District Website.
 I added the school logo
and the district calendar.
 Now lets add some links to
the Related Links box.
Note that Related links is
the third gadget in the list.
Go to the Site Layout page
by clicking More Actions
then Manage Site.
 Click Edit to edit this gadget.
 You can change the name.
 You can add links and text
using the WYSIWYG editor.
I changed the font color 
using the formatting tools.
 I added a link.
 Don’t forget to
make the link.
 Click Ok then Save when finished.
 Now we are going to change
the Newsletter gadget.
Go to Site Layout as before, and
click Edit on the second gadget.
 You can rename the gadget.
 You can add links and text
using the WYSIWYG editor.
 I removed the logo
and changed the text.
 Click Ok then Save when finished.
To delete a page, click Edit page 
…then click Delete page. 
 There’s my new link, which links
to the default Newsletter page.
 I don’t like the default
newsletter page, so I
am going to delete it
and create my own.
To create a page, click Create page 
Now the Newsletter page is gone.
 The newsletters aren’t showing on
the home page anymore either.
We need to create a
new Newsletter page.
 Select the template to use. In this
case, we want a File Cabinet to
store newsletters in PDF format.
 Enter the page name.
 Choose where to put the page.
 Click Create page
Here is our new page.
 Click Add file to upload newsletters.
 Click choose file and select
the file from your computer.
 If the file name is not clear, use
the File description to specify the
month and year of the newsletter.
Now I have added all the
newsletters for this school year.
If you want to see what the page will
look like for visitors, click More Actions
and choose Preview page as viewer. 
This is what the page will
look like for visitors.
Now we need to add this page
to the navigation menu,
Go to Site layout as before, then
click on Edit under Navigation.
 Click Add page
 Select Newsletters
 …and click Ok.
 Newsletters is now in the menu.
 You can also enable these links.
 Then click Ok.
 Now we have added Newsletters,
Sitemap, and Recent site
activity to the Navigation menu.
This is the sitemap page.
Visitors can use it to find the
page they are looking for.
This is the Recent site activity page.
Users can use it to see what changes
have been made recently.
 Now we need to fix the Newsletter sign up
link. We deleted the page, so the link is broken.
To create a new page, click Create page. 
This is the page you get when you
click the Newsletter sign up link.
 Select the template to use. In this
case, we want a basic web page,
then we will add to it.
 Name the page.
 Then click Create page.
This is our new page for signing up
for the newsletter e-mail list.
We are going to add a form to this page,
but first we need to create it in Google
Docs. So click on Documents at the top.
 Click Create new…
 …and choose Form.
This is Google Docs
 Enter the Form name.
 The first field will ask
for the person’s name.
 Click Done to move
to the next field.
…then click Save 
and return back to
your school website.
 The second field will ask
for the person’s e-mail.
 Click Done when finished.
 To insert the form we
created, click Insert and
choose Spreadsheet form.
 Select your form…
 …and click Select.
 Make your settings
match these…
 …then click Save.
Then click Save. 
 I also added some text.
 The Spreadsheet form
is now on the page.
 This is what the form
looks like on the page.
 To test it, enter your
name and address
and click Submit.
Then go to Google Docs and open the
Spreadsheet form you created to see if
your name and e-mail address are there.
Now we need to link the Newsletter sign up link to the new
page. Go to Site layout and click edit on the second gadget.
 Highlight the link
and click Change.
 Select E-mail List
 Then click Ok.
Now we need to fix the gadgets on the home page.
Edit the page by clicking Edit page at the top.
Click on the Recent Accountments
 gadget and click Remove.
Now we want to add a gadget for Announcements.
 Click Insert and choose
Recent posts.
 Make your settings
match these
 Then click Save.
 Now our announcements
automatically appear on
the home page.
I decided I don’t like the green background I
created. I am going to select a new Theme.
 After previewing several
themes, I like this one.
The theme is applied to all my pages. The colors change,
but all my information stays exactly the way I created it.
 I think this theme looks better,
but I want to change the link color.
 Using the font and
color page, I changed the
title and all links to be
the school’s green color.
Now I am done! (for now)
Creating Effective
School and PTA Websites
To view this presentation online, please visit:
http://www.utahpta.org
Sam Farnsworth
Utah PTA Technology Appointee
sam@utahpta.org