Open the home page, if not already opened, and start working on the CSS layout first. Then you will add the menu in the location designed for it.
Designing a CSS layout means working with divs, and not with tables. Since the layout you will create is a very simple one, you will describe its properties inline, and not in a separate .css file.
You want your site content to be displayed in browser horizontally centered, and having a width of 800 pixels. You want the menu to be displayed on the left, fitting in a 200-pixel width, and the page content to be displayed on the right, but not to be expanded under the menu as well. For this you need three in your page:
The wrapper div that includes the other two: 800-pixel width, auto margin (to be horizontally centered).
The menu div: 200-pixel width, floating on the left.
The content div: floating on the left as well (so that no matter how large the content is, it will always be aligned to the left).
Back to the home page, switch to Code view and enter the following code between the <body> opening and closing tags:
<div style="width: 800px; margin: auto;">
<div style="width: 200px; float: left;">Menu placeholder</div>
<div style="float: left;">Content placeholder</div>
</div>
Switching back to Design view, this is how the home page should look like:
After creating the simple CSS layout, it is now time to generate the database-driven menu. Click inside the menu placeholder, and remove the temporary text ("Menu placeholder"). Keep the cursor inside that div and apply the Database-driven CSS Menu Wizard from the InterAKT tab of the Insert bar. The wizard has four steps.
Configure the first step of the wizard as shown below:
Select the Expandable layout.
Note: When using this layout, the first level menu items that have sub-items cannot link to any page. This happens because the sub-menu is expanded when a first level item is clicked, and not mouse-hovered.
Choose the metal_blue skin.
Note: There are 23 available skins in MX CSS Menus. Click here to see all the provided skins and how they suit your menus.
The image below the two drop-down menus offers a preview of how the database-driven menu will look in browser.
Click Next to continue configuring the wizard.
Configure the second step of the wizard as shown below:
Select the conn_InterAKT_table database connection.
Select the menu_mnu table to retrieve information about the menu items.
Select the id_mnu column as the primary key of the menu table.
As the parent ID column, select idmnu_mnu - it specifies the parent-child relation between menu items.
The menu item label is given by the label_mnu column.
Select the tooltip_mnu column to retrieve the alternative text displayed for each item when mouse-hovered.
Select the order_mnu column to retrieve the order of the menu items.
The visible_mnu column (having 1/0 values) specifies if the menu item is shown or not.
Click Next to continue configuring the wizard.
Configure the third step of the wizard as shown below:
Select the Retrieved from database option regarding the link type.
The url_link_mnu column stores the site-relative URL addresses to which menu items point.
Select the target_mnu column to set the target type of the page opened when menu items are clicked.
Click Next to continue configuring the wizard.
Configure the forth step of the wizard as shown below:
Since you selected the Expandable layout, the menu can have at most 2 levels.
Make sure the Highlight current entry option is checked.
Leave the rest of the interface controls to their default values. To learn more about their role and default value, click the Help button on the bottom.
Click Finish when you are done configuring the wizard.
After following all these steps, the home page in Dreamweaver, in Design view, should look like this:
Notice the elements added in the Server Behaviors tab of the Application panel (recordset and server behavior). If you want to edit any of these, double-click their name in the list.
Save the home page and upload it to the server. You can preview it in browser (press F12) if you want to, but the pages to which menu items point are not created yet (except for this one).
Considering this current state of the home page, it is time to create (in the site root) the other three site pages before adding specific content in the content placeholder. Right-click the filename displayed in the top bar of the file area, and select the Save As option:
Save three new files in this manner by the following names:
products
overview
contact
Continue with the next topic to add, for all the four site pages, specific content inside the specially designed placeholder.