Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist

Creating Effective School and PTA Websites Prerequisites: (as listed in class description) HTML and CSS JavaScript (helpful) FTP or SFTP or SSH Just kidding! This stuff is easy! You only need to know how to click.

Creating Effective School and PTA Websites Why are you here? Where did you come from? Where do you go after this?

Creating Effective School and PTA Websites An effective website must be: Current Complete Easy to Update Promoted

Creating Effective School and PTA Websites An effective website must be CURRENT Keep news, announcements, and calendar up to date - no outdated information! Post info ASAP Avoid “More info coming soon”

Creating Effective School and PTA Websites An effective website must be COMPLETE All information on website Specific information about every item Who, what, when, where, why, how

Creating Effective School and PTA Websites An effective website must be EASY TO UPDATE Instantaneous (in the browser) Multiple editors (no bottlenecks) WYSIWYG editor (no code)

Creating Effective School and PTA Websites An effective website must be PROMOTED Direct parents to website Fliers, Marquee, , Facebook Reward students / class

Creating Effective School and PTA Websites What is the easiest way to create an effective school or PTA website? To start, go to:

Login to Google here  If you don’t have a Google account, create one here 

Enter your name  Scroll down to complete the form  Create a new G-mail  address or use your existing address Enter a new password (twice)  Enter your birthday  Select your gender 

Select your country  Enter your mobile phone  Enter the word verification  Click the box to accept  Click Next  Enter your current address  Select your gender 

 To create a new site, click Create Now you are logged in to Google Sites!

 Start with a blank template  You can browse the gallery, but I don’t recommend it (but I’ll show you anyway)

The gallery contains templates you can start with. If you find one you like, you can start with that template and much of the work will already be done for you. But, templates also come with a lot of garbage we don’t want. Browse by category   Search by topic

 Enter the name of your site  Enter a shorter name for the URL if desired  Click Select a theme  Start with a blank template

 Select a theme (we can change this later)  Click Create

This is a blank Google site that we will now begin to customize.

Click the Settings button  …then click Edit site layout  First, we want to change the logo.

This page is used for making template and layout changes on your site.  To edit the logo, click the header

 Click Custom Logo  Click Choose File and select your logo (should be about 75 to 100 pixels tall)  Click OK Resize your logo online:

 We now have our school logo  Click here  Click on the footer to edit it Use the buttons across the top to turn features on and off. We want to turn on the Horizontal navigation and the Footer

 Edit the footer using the WYSIWYG editor  Click Ok …then click Close 

We also want to change the color of the site title Click the Settings button  …then click Manage site 

 Click on the section you want to edit This page is used for style and color changes on your site. …then change the settings  (such as color, font, and size)  Click Save when you are done editing styles  Click on Themes, Colors, and Fonts

Now our site has the right logo and colors and the footer has our school information. To create a new page, click here  Now lets add our first new page.

 Enter a page title  Select Web Page as the page template (we’ll demonstrate the other options later)  Select where to put the page (in the menu hierarchy)  Click Create

This is our new blank page. Use the WYSIWYG editor to edit text, links, fonts, colors, etc.  Use these menus to add widgets

 Use the Insert menu to add images, videos, links, widgets, scripts, etc.  We’ll add several of these items later.

 Use the Format menu to add text formatting

 Use the Table menu to create tables (for example: board list)

 Use the Layout menu to create columns

 To create a link, highlight the text  …then click the link icon We are going to link to the Community Involvement page, which doesn’t exist yet.

The page we want to link to does not exist yet, so click Create new page   You can link to site pages or external URLs

 Enter a title for the new page  Select PTA Programs to put the new page under it in the menu  Click Create page

Click Save when finished editing   This text now links to the new page (which you will need to edit later)  I also edited colors, fonts, sizes, added bullets, etc.  Do the same for the other pages

 This is the finished page  The new pages are also in the menu Now let’s add a calendar, so click the add button 

 Enter a title  Select where to put the new page  Click Create  Select Web Page

We now have a blank calendar page  And it’s already in the menu  We need to add a calendar widget to the page

 Select Calendar  Click Insert to add a calendar widget to the page

 Select the calendar you want to use If your calendar does not exist yet, go to and create a new one Do not use your personal calendar!  Click Select

 Click here to add more calendars (like Holidays)  Select Month  Select your time zone  Make your settings match mine  Click Save  Click here to change colors

Click Save   In edit mode, widgets appear as gray blocks

We now have a calendar!

Parents can view event details and quickly copy events to their calendars  Now let’s add an announcements page, so click the add button 

 Enter a title  Select where to put the new page  Click Create  Select Announcements

We now have an Announcements page  Click New post to add a new announcement

I added an image using the WYSIWYG editor   I added two announcements  Announcements are sorted with newest at the top

 The news page tells about recent events, whereas the Announcements page tells about upcoming events  I added a “News” page using the same steps as the Announcements page Now let’s add a newsletter page, so click the add button 

 Enter a title  Select where to put the new page  Click Create  Select File Cabinet

We now have a Newsletter page  Click Add file to add recent newsletters

 Use this button to put newsletters into folders  Keep your file names simple and consistent  Add descriptions if needed I added all the recent newsletters to the page Now let’s add a newsletter subscription page, so click the add button 

 Enter a title  Select where to put the new page  Click Create  Select Web Page

 Click Insert  Choose Form (under Drive)

 Open a new tab and go to Google forms  Enter a field name  Select Text as the field type  Click Required, then click Done  Click Add item to add another field Scroll down 

 Enter a field name  Select Text as the field type  Click Required, then click Done  Change confirmation text  Select Data Validation  Choose Text, then address  Make your settings match these Now go back to your site

 Select your form (refresh list if needed)  Click Select

 Make your settings match these  Click Save

Click Save   Our form is now embedded in the page

We now have a newsletter subscription form!  We need to test the form. Enter your name and address in the fields.  Click Submit

 Click View responses To view form submissions, go back to Google forms

Responses are saved in a (private) Google spreadsheet Click Share to share this  spreadsheet with others

Now let’s add some dynamic content to the homepage

 Click on Layout  Click on Two column (simple) Let’s make the homepage have two columns

 Click Insert First, we want to display recent announcements on the homepage  Choose Recent posts

 Select Announcements  Select Short snippet  Select number to display  Enter a title  Click Save

 Click Insert Next, we want to display upcoming events on the homepage  Choose Calendar Put your  cursor in the right column

 Click here to add more calendars (like Holidays)  Select Agenda  Select your time zone  Make your settings match mine  Click Save  Click here to change colors

 Put your cursor back in the left column  Click Insert Last, we want to add a link to the most recent newsletter  Choose Recent updated files

 Select Newsletters  Select number to display  Enter a title  Click Save

Now our homepage automatically shows all the most recent content  Let’s add a few more items to the layout

Click on Settings  Choose Edit site layout 

 Click on the horizontal navigation bar to edit

 Add links to important pages and sites using the the links below

When adding a link to a page…  Enter a title  Select the page  Click OK

When adding a link to another site…  Enter a title  Enter a URL  Click OK When you are done adding links…  Click OK

 We now have new links  Click the plus (+) to add more items

 There are lots of widgets we can add to the sidebar  +1 button  New navigation box (to break menu into sections)

 Text box (to add anything)  Recent site activity (to show recent updates)

 Countdown (e.g. to Carnival)

I added a few widgets to my layout…  Subscription link (using an image in a text box)  Countdown to Carnival  Recent site activity

Click on Settings  Choose Manage site  We are almost done. We just need to add site editors and change some settings.

Scroll down   Click on General

 Enable Google Analytics and enter property ID Scroll down 

 Enable mobile support  Click Save

 Click on Sharing and Permissions  Click Change

 Choose Public on the web so anyone can view the site  Click Save

 Add people you want to allow to edit the site  Click Send

All done! (for now)

Example Websites (from people who took this class)

Creating Effective School and PTA Websites To view this presentation online, please visit: Sam Farnsworth Utah PTA Technology Specialist