PageModels by Joe Abruscato

I created this page as an instructional resource for students in my courses on home page development. The pages described below were all created in less than a week by people with limited or nonexistent WWW page development experience. Please note that they are organized by type and that the key design features demo nstrated on each are identified.

I hope that your analysis of these pages helps you enhance your WWW pages..

Public School

Fayston Elementary School

• Key HTML Design Feature(s): Note the use of a very attractive opening table. The formality of a table is more than balanced out by the use of small images that convey the excitement and activities of children at an elementary school. Also, note the counter at the bottom.

School Curriculum: Author Study/Thematic Learning

Mem Fox (The Featured Author)

• Key HTML Design Feature(s):Notice the use of a background image, an image at the bottom of the page (the koala) that "picks up" the background image, and how unexpectedly effective a white background can be if you use inline graphics that have pastel hues.

School Counseling Department

South Burlington, Vermont High School

• Key HTML Design Feature(s): Used one animated gif for each hotlink plus animated horizontal bars. Also, feedback form is at bottom of home page.

Milton Vermont Junior/Senior High School

• Key HTML Design Feature(s): Use of a table to get side headings adjacent to a picture. Also, a good example of how to link to other pages and by so doing making the entire home page visible (ie. all of it fits on the screen) for a person reaching the page.

Small Village or City

Castleton, Vermont

• Key HTML Design Feature(s): Has a background image that was prepared from logo that originally was on town stationary and subsequently adjusted with Photoshop to get the contrast correct. The frames around the pictures were prepared using "lines" from the Photoshop toolbox. Also, many of the pictures were taken with a digital camera and converted from pict to gif or jpeg format.

Department, Office, or Center Within A University, Business or Government Agency

Agricuture: Communication and Technology Resources

• Key HTML Design Feature(s): Use of a "table" to get headings adjacent to picture. Use of background images and most importantly a client side image ma p for the VT map. Note: No cgi script was needed to produce a functioning image map.

Rural Education Center

• Key HTML Design Feature(s): Efficiently gets information across to reader on a limited number of topics. Also, note the use of a small picture element in the "address" location at the bottom of the page.

Wellness

• Key HTML Design Feature(s): Simple but elegant and very tasteful design. The images and horizontal bars work well together. Note how the same horizontal bar is used on all subsequent pages so the "reader" maintains an awareness of the context for the page.

Office of Student Services, College of Education and Social Services

• Key HTML Design Feature(s):Use of a table early on which contains links to successive pages. Note: This is an example of creating a page for a site that has a great deal of content to convey about many different topics. If you are trying to develop a site for such a context study this page.

Personal Information Page ("Resume-like" Page or Curriculum Vitae)

Michael McCarney

• Key HTML Design Feature(s): Demonstrates how to link within a page, ie. to reach specific sections of the page itself. Note how this is coded with the "name" attribute. The page also demonstrates the use of a counter.

Erik Dykes

• Key HTML Design Feature(s): Demonstrates how to integrate information for future employers with a home page. With respect to design note the use of the cells within tables as a way to display small images and related links. Also note the dramatic impact of a black background when used with a high impact opening graphic, and the "marque like" effect at the bottom of the browser window using java script.

Personal Home Page

Michelle Atherton

• Key HTML Design Feature(s): Conveys a serene context for the information. More importantly it has a nice example of using a table to get a picture properly aligned with related text. It also has a counter.

Shannon (Mary)Walters

• Key HTML Design Feature(s): Includes an animated gif. Has humor in the text. The next step will be to find a way in html (without getting involved in cgi scripts) to get the cow images to randomly appear.

Rebecca (Becky) Brady

• Key HTML Design Feature(s): Notice the use of the "doors" at the bottom of the page as table cells that are links, the counter and the remarkable animated gif at the bottom.

Greg Wolf

• Key HTML Design Features(s)The high impact opening "Greg's Home Page" was prepared using a program called Type Twister, imported as a PageMaker file into PhotoShop and converted to a gif file. Also notice the counter, the animated horizontal bar, and the clock!

Maggie McGilvery

• Elegant simplicity. You've got to see this to believe it. Notice the use of graphics fine tuned in PhotoShop, animated gifs prepared by Maggie using gif animator, and much more. This page is an elegant tour de force that invites us into its creator's world and keeps us there.
  
  

  I thank Maggie McGilvery for "colorizing" the graphic at the top of this page.
  
  

  Last Updated: 7/20/96
  WebMaster: Joseph Abruscato jabrusca@moose.uvm.edu
  © copyright 1996 Joseph Abruscato