Creating & Using A Website To Enhance Your

Teaching(or Confessions of a Teaching

Tech Junkie ! ! !)

Why are we here?

• Examine the characteristics of a good teaching website

• Discuss reasons for using a website in class• Create a website using Microsoft FrontPage• Create PDF files using Adobe Acrobat• Examine incorporating a website into your

teaching using web space on Board server• Discuss “fair use” and copyright issues

dealing with web sites

• Teaching high school math & science for 8 years

• Taught for 7 years in the Yukon

• Began using website in class 5 years ago

• Learned more about tech as I went

• Glad to be teaching in Halifax & at Sackville High!

Who is Jason Jennings?

Why use a website in the classroom?

• Convenient access to lecture notes & activities by teacher and students

• Saves time for more instruction/demos

• Saves photocopying credits for teacher

Why use a website in the classroom? (cont’d)

• Makes students responsible for acquiring notes (i.e. lost notes, study guide)

• Useful for Resource/IPP students

• Good communication for parents

• Can be linked to your school’s website

Characteristics of a good teaching website

• Overview of course• Course outline and marking scheme• Hyperlink to Dept. of Ed. Online Curriculum

documents• Lecture Notes (on web pages & Word/PDF format)• Assignments/Projects

Characteristics of a good teaching website (cont’d)

• Study questions• Practice tests• Instructor resume• Guest book• Date of latest site update• Email address• Links to other course-related websites• http://hrsbstaff.ednet.ns.ca/jenninj2

Tips for Designing a Good Teaching Website

• Keep it simple & easy

• Make it fast

• Offer proper print documents for notes/assignments

• Make navigation simple

• Use descriptive titles & links

Tips for Designing a Good Teaching Website (cont’d)

• Limit use of unnecessary graphics

• Avoid wide widths on web pages

• Follow copyright & “fair use” guidelines (see end of presentation)

• http://hrsbstaff.ednet.ns.ca/jenninj2

Getting Started in Microsoft FrontPage

• Go to Start, then Programs• Open Microsoft FrontPage

Creating a homepage:To Name and Save a web page…•From File, choose Save As…•Name this page “index” (homepages are ALWAYS named “index”)•Save “index.htm” on Desktop (usually this page & subsequent pages will be saved in your Board web space

Creating a homepage (cont’d):To view different panels…•Click on either Normal, HTML or Preview buttons at bottom of screen

Creating a homepage (cont’d):•Normal panel allows you to add text, pictures and links

Creating a homepage (cont’d):•HTML (Hypertext Markup Language) panel shows programming code (unless you know about it, STAY AWAY!)

Creating a homepage (cont’d):•Preview panel displays what the web site will look like in web browser

Creating a homepage (cont’d):To Change Background Color…•Go to Format•Select Background•Find the Change Background Color area•Change your color

Creating a homepage (cont’d):To Change Text Font & Color•Highlight existing text to change•Go to Format•Select Font•Find the Font & Color areas•Change your font and color

Creating a homepage (cont’d):To Insert Headings & Buttons…(www.cooltext.com)

•Type in address

•Select Render a Logo

Creating a homepage (cont’d):To Insert Headings & Buttons…(www.cooltext.com)

•Choose a style

Creating a homepage (cont’d):To Insert Headings & Buttons…(www.cooltext.com)

•Edit Logo properties, then edit logo text

•Click on Render Logo

Creating a homepage (cont’d):To Insert Headings & Buttons…(www.cooltext.com)

•Right click on Copy (or save it as a file for later use)

•Paste logo into web page

Creating a homepage (cont’d):To Insert a Picture (from ClipArt or existing file)…

•Select where you want to place the picture•Go to Insert•Select Picture•Then select Clip Art or From File

Creating a homepage (cont’d):To Insert a Picture (from ClipArt or existing file)…

•Copy and paste the file into the web page (JPEG files work well)•Adjust size of picture using scaling arrows

Some interesting, convenient components of FrontPage that can be used on a web page:To insert a horizontal line…•Choose a place to insert the horizontal line•Go to Insert•Select Horizontal Line

To insert the date and time of the last time your site was updated using FrontPage…•On your homepage, type “This site was last edited on…“•Go to Insert•Choose Date and Time…•Choose “Date this page was last edited”•Select proper Date and Time formats•Click OK

To insert a hover button (a button that will show an effect when the cursor passes over it)…•Go to Insert•Select Web Component•Under Dynamic Effects, choose Hover Button•Under Hover Button Properties, set appropriate properties such as button text, link to (i.e. Other website, page within your site), color, effect)

To insert a marquee ( a message that scrolls or slides across the screen; good for test and assignment dates!)…•Go to Insert•Choose Web Component•Under Dynamic Effects, choose Marquee•Set Marquee Properties (i.e. Text to be displayed, direction, speed, behavior)

To insert a hit counter (a counter showing how times you site has been visited)…•Go to Insert•Choose Web Component•Choose Component Type: Hit Counter•Choose Counter Style

Note: Insert this hit counter after a phrase like “The number of hits to this site is…”

So far, here is an example of what your homepage of your site should look like…

To create a new page in your web site…•Go to File•Choose New Page•Type in a title for your new page (i.e.. Chapter One – Connecting Links; it is here that you would type lecture notes)•Change Page Properties (i.e. Background & text color) by going to Format then Background

Creating Additional Web Pages:

To create a new page in your web site (cont’d)…

•Save this page as “chapter_one_connecting_links” under Save As…

To set up navigation (connecting to other pages) in your web site, begin by inserting a table…•Find a good spot on homepage for table•Go to Table, then Insert•Choose Table•Set the dimensions of your table (i.e. 2 rows, 2 columns to begin)

To continue setting up navigation in your web site…•Type the title of the new page with which you would like to link•Highlight the title•Insert a Hyperlink

To make a hyperlink…•Go to Insert•Choose Hyperlink•Click on the new page in your web•Click OKNote: instead of linking to a new page in your site, you may wish to link to another web site by typing in the URL address in Address box

To complete 2-way navigation:•Go to new page (i.e. chapter_one_connecting_links.htm)•Create a table (2 rows, 2 columns)•Type in title of homepage•Create a hyperlink back to homepage

This is what your new page should look like…

This is what your homepage should look like…

A few tips to remember at this point…A few tips to remember at this point…

Check Preview to examine what your site will look like to others

Always save work after any change to a web page in order for the change to appear in Preview

Always keep navigation simple, direct and 2-way (i.e.. Be sure you return from where you came – AVOID making users use the BACK button on the Internet Explorer or Netscape Navigator toolbar

Adding files to you web page…•Go to File•Select Import•Click on Add File•Choose the file to add to Import list•Click OK

Adding files to you web (cont’d)…•Under the navigation table in homepage, type “Download Chapter One – Connecting Links notes (Word document)”•Highlight text•Create a hyperlink to the file that you just imported

To create an Adobe Acrobat PDF (Portable Document Format) file:•Open a particular document (i.e. Word and Excel documents)•Go to File•Select Print•Change the Name of the Printer to Adobe Acrobat (Acrobat is a virtual print driver, but instead of making a paper copy of the document, it creates a PDF file)

To create an Adobe Acrobat PDF (Portable Document Format) file:

•Change settings for Acrobat PDF Writer (i.e. page size, orientation, resolution, scaling)

To create an Adobe Acrobat PDF (Portable Document Format) file:

•Save PDF file in My Documents or Desktop•Import PDF file into FrontPage as you would a regular Word document •Go to http://www.performancegraphics.com/index.html for a detailed instructions on using Adobe Acrobat for PDF file creation

Note: students will need Adobe Acrobat Reader to open and print paper copies of any PDF file. Create a hyperlink on your web site to the Adobe homepage (www.adobe.com) in order for students to download a free copy of Acrobat Reader. 

Note: An individual or site license for Adobe Acrobat is expensive. Most schools will not have it installed on machines for this reason. PDF files provide convenient, low-memory files that handle text and graphics well. They are good for transfer between email and web folders.

Note: There is free software (freeware) that can be downloaded from the Internet that will allow for the creation of PDF files. Go to www.fineprint.com to download FinePrint PDF Factory.

To create PDF file from pdfFactory…• Go to File• Select Print• Change Name of Printer to pdfFactory• Click OK

Publishing Your Website…•use Board web folder•Go to My Computer•Click on Web Folders or My Network Places

Publishing Your Website…•Click on Add Web Folder or Add a Network Place

Publishing Your Website…•Type in http://hrsbstaff.edent.ns.ca/username•Click on Next

Publishing Your Website…•Click on Finish

Publishing Your Website•To gain access to your web folder, you will need to enter username and password (from Board) to gain access to your web space

Publishing Your Website…•In your web folder (on your Board web space), you will find 2 folders:

PrivateImages

•Private folder should be used to store files that you do not want your students to see•Images folder is for images (i.e.. JPEGs, BMPs)

Publishing Your Website•Save all FrontPage web pages in your web folder•The URL address that will access your website will be

http://hrsbstaff.ednet.ns.ca/usernameNote: Do not put web pages in Private folder. This folder can only be accessed by those with your username and password (i.e. Not one of your students!)

Implementing The Website in Your TeachingA few things you’ll need to consider when implement your website:

Most students should have access to the Internet and a printer (either at home or school). You may have to be prepared to photocopy some course outlines/notes/assignments for students who have technical difficulties.

You’ll will need to have good access to an LCD projector and computer to go on-line with your site and display pages

Always have overhead transparencies of the notes and a working projector just in case the “Internet is down” (a.k.a. school server)

Implementing The Website in Your TeachingA few things you’ll need to consider when implement your website:

Have your school’s IT coordinator or webmaster add a hyperlink from the school site to your site for greater convenience

Be prepared to spend time on your website in its creation and maintenance. Learn only what you have to learn and use only what you have to use about FrontPage. Make life easy!

Make parents aware of your site at parent-teacher interviews and encourage them to visit it often (i.e. Post important assignment submission and test dates)

“Fair Use” & Copyright Issues for Teaching Websites

A few issues you must consider…

Is your site for education or some possible commercial gain?Give credit and citations where necessary. Are you “cutting & pasting” directly from a site or is your work an original composition?If you use approx. 3% of another person’s material, it can be considered “fair use”. If you use more than 10%, you are in a “gray” area.Visit http://www.benedict.com/info/fairUse/fairUse.asp for more in-depth details

A very good site that explores more aspects of Microsoft FrontPage and its features is…

http://hrsbstaff.ednet.ns.ca/mireauj/teacherscorner/teacherspagetitre.htmAuthored by N. Benoit-Canning and J. Mireau for the AST Conference2003.

Check it out!

Good luck as web artists!

Learn as you go!

Email me with questions: jenninj2@staff.ednet.ns.ca

References:

1. Miller, C. Scott. PDF Research.com. Performance Graphics. 2003 <http://www.performancegraphics.com/index.html>

2. Cooper, Georgeanne. “Teacher Effectiveness Program”, University of Oregon. 2002 <http://tep.uoregon.edu/technology/courseweb/websites.html>

3. Pinel, John. “Biopsychology”. 1999 <http://www.abacon.com/pinel/tip1.html>

4. Adobe Systems Inc. 2003 <http://www.adobe.com>

5. Benoit-Canning, N. and J. Mireau. “Teachers’ Corner.” October, 2003 http://hrsbstaff.ednet.ns.ca/mireauj/teacherscorner/teacherspagetitre.htm