Table Layout

The latest lab (#4) assignment for the Dreamweaver class focuses on using a table to control the layout of a web page. The content is a little eccentric, but the underlying table complete with rollover buttons does work. There are five pages (Lab 4 Home, Soprano, Alto, Tenor, and Bass) each of which shares the same layout. The only difference is one button on each page is not active (e.g., the Soprano button in the Soprano page). From a usability standpoint, the buttons should be graphically more obvious (there are seven of them, six on the left side and one for Mr. Shelley on the right). I had to skip ahead to the end of the book for the Photoshop class to learn how to slice an image and save the slices (actually rectangles) as separate images each of which was placed in a cell on the underlying table. For the buttons, there are two images in the cell, one is displayed when the mouse pointer is on the cell, the other when the mouse moves off the cell.

The video of the music is almost illegible; I didn't spend much time on it and it shows.

Later today I may have the site home page re-done with a table layout. Unfortunately, I've outgrown the Lockhart ranch; there just aren't enough buildings.

Many thanks to the volunteer proofreaders out there (not their :-).

A Graphic Layout

A table governs the layout of the text and images below.

Various types of lists, using mostly military aircraft as list items.		The Mighty Five, prominent Russian composers of the last half of the 19th century are featured in a photo list with links.
	A photo of an M-60 with hotspots that describe the parts of the tank.
An except from an article on the Battle of Marathon using various types of text.		Some of the six headers in a sonata context.

---

The Code:

A Simple Table

Built using HTML table tags.
Why are there a number of blank lines between this one and the table itself?

Question	Answer
Not Found	42
Query	Response

Each line of HTML code is interpreted as a blank line. The code for the table above is written on 14 lines. The same code concatenated into one line:

Question	Answer
Not Found	42
Query	Response