Home

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 contact link.

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.

The only Script on this site is a basic JavaScript which causes the buttons on the horizontal 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:

• Webdevelopersnotes.com
• Cool Text.com
• Free Buttons.com
• Uncanny Programming
• Nic's Javascript Page

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.