Presentation on theme: "Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Appointee"— Presentation transcript:
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Appointee firstname.lastname@example.org
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.
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.
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
Login to Google here If you don’t have a Google account, create one here
Enter your e-mail address Enter your password (twice) Scroll down to complete the form
Select your country Enter your birthday Enter the word verification Click I Accept
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.
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
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
List of Owners List of Collaborators You do not need viewers because the site is public
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.
Use the preview link below each theme to see how your site will look in that theme.
The colors of this template match my school colors, so I am going to select it.
Click Site layout to change the header and navigation Click change logo to replace it with yours.
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.
My school logo Now let’s get rid of the YouTube video. Click Edit page.
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.
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.
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.
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
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.
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
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.
School calendar items are now automatically being displayed on the home page.
Now we are going to edit the Programs page. Click Edit page
You can add text and change fonts and colors just like in any word processor.
To create a link, select the text to make a link… …then click the link button
You can link to a page on your site …or to a web address Then click Ok.
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.
There are formatting options similar to what you see in a word processor.
You can insert tables into your pages. This will be useful when inputting your PTA board or the school bell schedule.
You can format your page with many different styles of columns, rows, and sidebars.
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.
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.
Enter text, images, objects, links, forms, etc for the Education page here. Then click Save.
Now let’s add some news. To add news, click New post.
Enter the title. Enter the text. Insert images or other ojbects as needed. Click Save.
Your new post shows up at the top. News posts will also show up automatically on the home page.
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.
Click on the Google Calendar object and click Properties.
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.
School calendar items are now automatically being displayed on the calendar.
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.
The map link will take you to Google Maps, which will provide you with more info, like directions and pictures.
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.
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.
I added the school logo and the district calendar.
Now lets add some links to the Related Links box. Note that Related links is the third gadget in the list.
Go to the Site Layout page by clicking More Actions then Manage Site. Click Edit to edit this gadget.
You can change the name. You can add links and text using the WYSIWYG editor.
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.
Now we are going to change the Newsletter gadget.
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.
I removed the logo and changed the text. Click Ok then Save when finished.
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.
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
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
Here is our new page. Click Add file to upload newsletters.
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.
Now I have added all the newsletters for this school year.
If you want to see what the page will look like for visitors, click More Actions and choose Preview page as viewer.
This is what the page will look like for visitors. Now we need to add this page to the navigation menu,
Go to Site layout as before, then click on Edit under Navigation. Click Add page