Put your page markup here. On left left is the horizontal navigation
bar. Each of teh sixteen cells in the table can be used as a link to another HTML page. You can delete
cells to make a shorter nav bar by deleting the table rows (tr) in the code. On the top is the banner.
Drop your title ontop of the image in a graphics program like PhotoShop or Paintshop Pro. The image was
done in PSPro using a purple background which was 'Buttonized' then I used a "Sunburst." The nav buttons
on the left are the same purple with the buttonize feature. The logo in the upper left corner
is an animated gif, but can be replaced with a single image if necessary.
The navigation bar at the bottom of the page is just a table of links without images. These
should be the same links as your larger, horizontal bar, but can also include other minor pages or a
This page uses cascading style sheets, which not only conform to Strict XHTML standards,
but are darn usefull once you get the hang of them. I won't go into a tutorial here but there
are many good sources on the web to get a lesson on this feature.
navigation bar to show an orange dot when the mouse is hovered over them. Basically, you will
need 2 sets of buttons for each link. One will be the cell as it appears now with a phrase or
word inside like "Products," and the second will be the same image, but with an orange dot to teh left of
"Products." I have included the basic button, plus the button with the orange dot in the images
folder, so you can just drop the same text on both buttons.
Here's an example of a button set:
The top button is the first image. The second is the modified image with the added dot that
will appear when the mouse is hovered over the cell.
Check out these resources on the web:
The colors for this page are purple (66256b), orange (ffa54f) and gray (ccbaa3). Using a
theme for your text and images helps make your site more visually pleasing.
If you want to see an example of an introduction page, click here.
I like having the intro before this Index Page in the actual site, but I had to make this my Index
Page for the Free Layout Site.