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

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

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

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

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

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

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

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

9. Creating Effective School and PTA Websites What is the easiest way to create an effective school or PTA website? To start, go to: http://sites.google.com

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

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

12. Select your country  Enter your mobile phone  Enter the word verification  Click the box to accept  Click Next  Enter your current e-mail address  Select your gender 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30.  Use the Format menu to add text formatting

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

32.  Use the Layout menu to create columns

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

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

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

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

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

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

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

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

41.  Select the calendar you want to use If your calendar does not exist yet, go to http://calendar.google.com and create a new one http://calendar.google.com Do not use your personal calendar!  Click Select

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

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

44. We now have a calendar!

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

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

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

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

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

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

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

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

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

54.  Click Insert  Choose Form (under Drive)

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

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

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

58.  Make your settings match these  Click Save

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

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

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

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

63. Now let’s add some dynamic content to the homepage

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

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

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

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

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

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

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

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

72. Click on Settings  Choose Edit site layout 

73.  Click on the horizontal navigation bar to edit

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

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

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

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

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

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

80.  Countdown (e.g. to Carnival)

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

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

83. Scroll down   Click on General

84.  Enable Google Analytics and enter property ID Scroll down 

85.  Enable mobile support  Click Save

86.  Click on Sharing and Permissions  Click Change

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

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

89. All done! (for now)

90. Example Websites (from people who took this class)

97. Creating Effective School and PTA Websites To view this presentation online, please visit: http://www.utahpta.org/websites Sam Farnsworth Utah PTA Technology Specialist sam@utahpta.org