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

1. Creating EffectiveSchool and PTA WebsitesSam FarnsworthUtah PTA Technology Appointeesam@utahpta.org

2. Creating Effective School and PTA Websites • An Effective School Website must be: • 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. • 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. • 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.” • 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”. • 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: • Organized – All information should be well organized so that parents can intuitively find information without searching. Similar information should be grouped together. • 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. • 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. • Expandable– You must be able to easily add new pages and folders. Custom built websites and website templates often require editing HTML and uploadingfiles via FTP to add pages. Your website should be updateable through aweb interface. • 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 thesuggestions 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.  Enter the word verification  Click Create site

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. • Click Invite these people • Make sure this box is checked

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 change logo to replace it with yours. • Click Site layout to change the header and navigation

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

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

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. 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.  Click on Colors and fonts • 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. 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.

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

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

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

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

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

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. Then click Save.  • Enter text, images, objects, • links, forms, etc for the Education page here.

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

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

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

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

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.