Week 4

General notes:

• Create a consistent navigation structure across all the pages in your site.
• It is good practice to have an alternative navigation method using simple text links.  The most common place this is found is across the bottom of each page.  Example:  Walmart.
• An alternate method is to incorporate a plain text site map.  Examples:  Hometown Realty and Ebay.

Tables

Example of tables used in web sites

• Bradley Real Estate Services just about everywhere.
• Hometown Realty on the realtor information pages.
• Hantge Funeral Chapels throughout.
• KMAC Inc. throughout.
• Just about all comercial web sites!

Get your files for in class use from here (58 KB zipped).

Here is the table shown with spaces so you can see the layout.

All cell padding and spacing has been removed to put the image slices together tightly.

The rollover in progress.

Rollovers

Building menus using rollovers have a distinct advantage over using flash buttons.  Flash buttons require the flash player to be installed on the users computer.  Rollover swaps are performed with Javascript, which almost every browser supports.  WebTV and handheld devices may be an exception.

The finished rollover that we completed in class (using Javascript).  Notice that if we are on that page, that the link is deactivated.  This gives the user a visual cue as to what page we are on.

We will do another table/rollover example next week in which we will modify the Bits-N-Bytes mini website.  The unique thing with this table is the autostretch column so that no matter how wide your browser is, the center column stretches.

There is now a new method of doing rollovers using CSS. Here is a tutorial that I found.

Finished rollover using CSS that we completed in class.

Lab 4

This lab is to test your knowledge of being able to do basic table creations and to create rollover links.

Create a sub folder on your web server named "lab4".  Within "lab4" you will create a mini site.

This site must contain as a minimum:

• Sub directories.
• Pages must be titled. (title tags in the head).
• Use of tables to create a page layout.
• A method of navigating through the site using a rollover menu.

Look at this example site or the rollover site that we completed in class to get ideas.

Use your imagination and creative skills. (Do not copy the instructor's topics.  Choose your own topic.)  You may copy over work from a previous lab and reuse it for lab 4, as long as you put in in the folder "lab4".  You may use advanced features if you desire.

Assignment is due one week from when it was assigned.  50% penalty if late.