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

Transcription

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

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, , 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:

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

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

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

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. Search by topic Browse by category 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.

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

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

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

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

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

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

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

23 then click Close Edit the footer using the WYSIWYG editor Click Ok

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

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

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

27 Click Create 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)

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

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 then click the link icon To create a link, highlight the text We are going to link to the Community Involvement page, which doesn t exist yet.

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

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 I also edited colors, fonts, sizes, added bullets, etc. This text now links to the new page (which you will need to edit later) Do the same for the other pages

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

38 Click Create Enter a title Select Web Page Select where to put the new 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 Click Insert to add a calendar widget to the page Select Calendar

41 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

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

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

44 We now have a calendar!

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

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

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

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

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

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

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

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

53 Click Create Enter a title Select Web Page Select where to put the new 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 Select Data Validation Choose Text, then address Click Required, then click Done Change confirmation text Make your settings match these Now go back to your site

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

58 Click Save Make your settings match these

59 Our form is now embedded in the page Click Save

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

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 Choose Recent posts First, we want to display recent announcements on the homepage

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

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

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

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

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

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

72 Choose Edit site layout Click on Settings

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 Click OK Enter a title Enter a URL 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 We are almost done. We just need to add site editors and change some settings. Choose Manage site

83 Click on General Scroll down

84 Enable Google Analytics and enter property ID Scroll down

85 Click Save Enable mobile support

86 Click on Sharing and Permissions Click Change

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

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

89 All done! (for now)

90 Example Websites (from people who took this class)

91

92

93

94

95

96

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