Create a Database Driven DHTML Menu - Step I
DISCLAIMER: I am seriously graphically-challenged so do not expect this example page to be a beautiful page :-)
In this tutorial I will teach you how to create a database-driven DHTML menu system. You will need the following free extensions from Project Seven.
Auto Hide Layers
Auto Layers
DW4 W3C Object Color Changer
Download the extensions, install them using the Extension Manager, and restart Dreamweaver MX.
You will also need the graphics I used for the sample page. Download them here.
If you would like my graphically-challenged Fireworks MX PNG file, get it here.
If you have not already downloaded the Access database used for the previous tutorials, get it here.
Click here to see the finished menu.
With all of that said, let's start by setting up the page.
1. Open the index.asp file that you created in the earlier tutorials. If you would like to quickly review that page, click here. After you create the page, return here.
2. Now we will apply the background image to the page using CSS. Open the CSS Styles Panel (SHIFT + F11) if it is not already open.
3. Click on the New CSS Style icon 
and use the settings below.
4. Click OK and in the CSS Style definition for body window, use the following settings.
5. Click OK.
6. Click on the New CSS Style icon and use the settings below.
7. Click OK and in the CSS Style definition for .menu a:link window, use the following settings.
8. Click OK.
9. In the CSS Styles Panel, right-click on the .menu a:link class and select Duplicate.
10. In the Duplicate CSS Style window, use the following settings.
11. Click OK.
12. Repeat Steps 9 - 11 using the following for the Selector:
.menu a:hover
.menu a:active
NOTE: Be sure to do them in the above order.