1. Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Appointee sam@utahpta.org

2. 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.

3. 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.

4. 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

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

6.  Enter your e-mail address  Enter your password (twice) Scroll down to complete the form 

7.  Select your country  Enter your birthday  Enter the word verification  Click I Accept

8. Click Create Site

9. Browse the gallery to look through more templates

10. Select Local PTA Chapter (this template starts with all the pieces you will need)

11.  Enter the name of your site  Enter a shorter name for the URL if desired Scroll down to complete the form 

12.  Click Create site  Enter the word verification

13. This is the default PTA template that you will now begin to customize

14. Click More actions  …then click Manage site 

15. 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.

16.  Enter the e-mail addresses of those who will be adding to the website. Select collaborator or owner as needed.  Make sure this box is checked  Click Invite these people

17.  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

18. List of Owners  List of Collaborators  You do not need viewers   because the site is public

19. 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.

20. Use the preview link below each theme to see how your site will look in that theme.

21. The colors of this template match my school colors, so I am going to select it.

22.  Click Site layout to change the header and navigation  Click change logo to replace it with yours.

23.  Click Choose File and select your school logo from your computer. Hint: School logo should be 100 pixels tall and about 50 to 300 pixels wide in order to fit inside the website header.  Every time you make a change, be sure to click Save changes at the top.

24.  My school logo Now let’s get rid of the YouTube video. Click Edit page.

25. 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.

26. 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.

27.  Click on Colors and fonts  Use this box to make changes to individual elements of the theme, such as links, titles, navigation, background colors, background images, etc. 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.

28.  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 

29. 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.

30. 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 

31.  Click Display another calendar and select your school calendar. Use the drop down arrows to change the color of the text on your calendar.   Make your checkboxes match my checkboxes.  Change the calendar title if desired.

32. School calendar items are  now automatically being displayed on the home page.

33. Now we are going to edit the Programs page. Click Edit page 

34.  You can add text and change fonts and colors just like in any word processor.

35.  To create a link, select the text to make a link…  …then click the link button

36.  You can link to a page on your site …or to a web address   Then click Ok.

37.  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.

38.  There are formatting options similar to what you see in a word processor.

39.  You can insert tables into your pages. This will be useful when inputting your PTA board or the school bell schedule.

40.  You can format your page with many different styles of columns, rows, and sidebars.

41.  I want to create pages for each of the commissions, so I started by making a list of the commissions on the Programs page. Then I used the link tool on Education.   There is no Education page yet, so I click Create new page.

42.  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.

43.  Enter text, images, objects, links, forms, etc for the Education page here. Then click Save. 

44.  Now let’s add some news.  To add news, click New post.

45.  Enter the title.  Enter the text.  Insert images or other ojbects as needed. Click Save. 

46.  Your new post shows up at the top. News posts will also show up automatically on the home page.

47. Now we need to set up the calendar page so it pulls in our school calendar as well. To change the calendar, click Edit page. 

48. Click on the Google Calendar  object and click Properties.

49. 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.

50. School calendar items are  now automatically being displayed on the calendar.

51. 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.

52. The map link will take you  to Google Maps, which will provide you with more info, like directions and pictures.

53.  This is the Forms page. You can use this page to post any kind of document, like newsletters, principal’s letters, flyers, maps, and schedules.  To upload a document, simply click Add file.

54.  You can upload documents from your computer.  Or you can link to documents on another website. This one links to the yearly calendar on the Alpine School District Website.  Click Upload when finished.

55.  I added the school logo and the district calendar.

56.  Now lets add some links to the Related Links box. Note that Related links is the third gadget in the list.

57. Go to the Site Layout page by clicking More Actions then Manage Site.  Click Edit to edit this gadget.

58.  You can change the name.  You can add links and text using the WYSIWYG editor.

59.  I added a link. I changed the font color  using the formatting tools.  Don’t forget to make the link.  Click Ok then Save when finished.

60.  Now we are going to change the Newsletter gadget.

61. 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.

62.  I removed the logo and changed the text.  Click Ok then Save when finished.

63.  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 delete a page, click Edit page  …then click Delete page. 

64. 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. To create a page, click Create page 

65.  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

66. Here is our new page.  Click Add file to upload newsletters.

67.  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.

68. Now I have added all the newsletters for this school year.

69. If you want to see what the page will look like for visitors, click More Actions and choose Preview page as viewer. 

70. This is what the page will look like for visitors. Now we need to add this page to the navigation menu,

71. Go to Site layout as before, then click on Edit under Navigation.  Click Add page

72.  Select Newsletters  …and click Ok.

73.  Newsletters is now in the menu.  You can also enable these links.  Then click Ok.

74.  Now we have added Newsletters, Sitemap, and Recent site activity to the Navigation menu.

75. This is the sitemap page. Visitors can use it to find the page they are looking for.

76. 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.

77. This is the page you get when you click the Newsletter sign up link. To create a new page, click Create page. 

78.  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.

79. 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.

80. This is Google Docs  Click Create new…  …and choose Form.

81.  Enter the Form name.  The first field will ask for the person’s name.  Click Done to move to the next field.

82.  The second field will ask for the person’s e-mail.  Click Done when finished. …then click Save  and return back to your school website.

83.  To insert the form we created, click Insert and choose Spreadsheet form.

84.  Select your form…  …and click Select.

85.  Make your settings match these…  …then click Save.

86.  The Spreadsheet form is now on the page.  I also added some text. Then click Save. 

87.  This is what the form looks like on the page.  To test it, enter your name and address and click Submit.

88. Then go to Google Docs and open the Spreadsheet form you created to see if your name and e-mail address are there.

89. 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.

90.  Select E-mail List  Then click Ok.

91. 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.

92. Now we want to add a gadget for Announcements.  Click Insert and choose Recent posts.

93.  Make your settings match these  Then click Save.

94.  Now our announcements automatically appear on the home page.

95. I decided I don’t like the green background I created. I am going to select a new Theme.

96.  After previewing several themes, I like this one.

97. 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.

98.  Using the font and color page, I changed the title and all links to be the school’s green color.

99. Now I am done! (for now)

105. 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