Sample Web Pages and Web Sites
 

These web pages are designed to provide information on designing simple web pages.  View them sequentially by clicking on the links below to see each web page.  

Please note that each sample web page opens in a new browser window so after viewing each one, you will have to click on this browser on your task bar to return to this page.  Remember to close off the open browsers.

 

 
Sample Personal Web Pages and Web Sites 
plan.htm You can print this page (File - Print) and use it as a planning sheet for a personal web page. It can then be created using the features covered in "Computers in your Classroom" course text, Chapter 20 or Chapter 21. You could use this to create an educational web page by changing the links "Milestones, Home Town and Educational Links" to ", Course Information, Classroom Procedures and Educational Web Links".
   
floyd.htm This is a sample of a personal web page created with Netscape Composer and based on the planning sheet above. Click on the index links to navigate to each section of the page.

It has internal links as well as links to external sites.  Notice how the "Return to the Top of the Page" links let you avoid having to scroll to the index.

My photograph was originally 640 x 480 pixels but I cropped the original to create a photograph that is approximately 144 x 170 pixels, making the file size smaller.

The images were obtained from the Internet.  It is difficult to arrange images on a web page and you will notice I have placed the text above the image of the ENIAC computer.  Notice how I arranged this on the web page below using a table.

   
floyd1.htm This web page is based on the previous one but has enhancements.
The map was created at Mapquest, cropped and enhanced with text.
The photographs were placed in tables.  This gave me more control over the placement of the images and allowed me to add the descriptive text.  I gave them a border which is 2 pixels wide. 

I made the table borders equal to zero so they would not be visible when viewed in the browser.

I added a background image and an email address in this version.
Background images can be downloaded from the Internet.  Check my web page links for sites.

   
floydsite.htm

This is a web site which contains the same information as the web page above. However, the information is placed on several pages to create a web site and all pages can be accessed from the home page.

There is a link back to the home page from each secondary pages and all pages have a consistent look re. font type (Comic Sans) and background colour.

   
 
Sample Classroom Web Page and Web Sites
class.htm A sample of a classroom web page based on the "plan" above.  The classroom page has links to three other sections, Classroom Procedures, Course Information and Educational Web Links .  A number of suggestions for topics are listed.  You could elaborate on these.

The structure of "class.htm" consists of one page with links up and down the page.

   
classite.htm This is a "skeleton" for a web site of four web pages based on the previous topics of a home page, but the information for Classroom Procedures, Course Information and Educational Web Links is put on separate pages.  Links are made from the home page to each of the other three pages, and a "Return to Home Page" link is placed on the bottom of those pages.

This "classite.htm" web site will show you the basic navigation.  Once you have the navigation operating smoothly, you just add information to each page.  You can add additional pages also, e.g. a Photo Gallery page.

Detailed instructions for creating this web site using Dreamweaver are available from Derek Floyd.

   
classsite2.htm

This class site is similar to the one immediately above but has some sample information on the pages. You will have to personalize your classroom web site pages with informaion that is relevant to your class and courses.

   
 
Other Web Pages and Web Sites
   
Peter and the Wolf This web site follows the same structure as the "classites" but is based on musical story of "Peter and the Wolf". It was created by Lydia Wittchen - thank you Lydia for allowing me to share your web site.
   
banting.htm

This web page is the same general format as the web pages above, but the content and photographs are based on the life of Sir Frederick Banting.

I used Microsoft Front Page to create the thumbnail photographs.  I could have re-sized them myself in a photo editing program, but using the thumbnail option in Front Page was much easier.

   
bantingsite.htm The web site is based on the content of the Banting web Page above and on the structure of the Personal and Classroom web sites.
   
school1.htm This is an example (not active) of the design of a school web page with some of the more common links included.  Each bullet would link to a new page.  This is more complex than the above web pages since you need to design each page and create links to return you to the main (home) page.

This design is easy to add new pages as your skills in web page design increase.

A good example of this design can be found at St. Theresa Catholic School in London.