Transcript Creating a homepage (cont`d)

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
Who is Jason Jennings?
• 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!
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…
Creating Additional Web Pages:
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
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 OK
Note: 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…
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:
Private
Images
•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/username
Note: 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 Teaching
A 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 Teaching
A 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.htm
Authored by N. Benoit-Canning and J. Mireau for the AST Conference
2003.
 Check it out!
 Good luck as web artists!
 Learn as you go!
 Email me with questions: [email protected]
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.h
tm