As said earlier, before creating and adding content to the site pages, you need to create a template file in Dreamweaver that will include the site menu. You will use this template file to later on create all the site pages (so that the menu will show in each one of them).
To create the Dreamweaver template, follow the instructions below:
From the File menu in Dreamweaver, choose the first option, namely New (or press Ctrl+N in the newly created site). A dialog box with two tabs will pop-up. You only need to set some options in the first tab (General):
In the Category list on the left select the Template page option.
In the Template page list on the right select the template type corresponding to your server model.
Click the Create button to create the template file in your site.
What you need to do next, before continuing with the actual template, is to create a Dreamweaver database connection. Use the Databases tab of the Application panel to define it. Name it conn_other_table, configure it to connect to your database server, and make it point to the database containing the table previously described.
The site menu that you will generate in the template file will retrieve the labels for the second level menu items (corresponding to one of the first level items) from the database, more precisely from a recordset. Create this recordset now to retrieve the products names. Go to the Application panel, Bindings -> + -> Recordset (Query). Configure the dialog box that opens as shown below:
Name the recordset rsProductsNames.
Select the conn_other_table database connection.
Select the product_prd database table to retrieve the products names (to be used as labels for the second level menu items).
Select only the two table columns needed for the menu: check the Selected radio button, and then hold the Ctrl key while clicking the id_prd and name_prd columns.
There is no need to filter or sort the recordset.
You can press the Test button and see the retrieved data (products ID's and names).
Click OK to create the recordset.
After clicking OK in the Recordset dialog box, the following message will pop-up:
Click OK to close the alert window. You will be told how to make the code corresponding to the recordset (added above the <html> tag) to be seen in the pages based on this template.
Press Ctrl+S to save the changes made in the template file so far. Since there is no editable region in your template file yet, you will be asked for confirmation first if you really want to save the file:
Click OK as you will add the editable region below. In the new dialog box that opens enter the name by which you want to save the template file - other_table_tmp, and click the Save button:
Notice in the Files tab of the Files panel the Templates folder automatically generated by Dreamweaver, and the template file you just created located inside this folder.
It is now time to add the site CSS menu. Remember that the menu items on the first level are entered manually and the ones on the second level (corresponding to one of the first level items) are retrieved from the database. Apply the CSS Menu Wizard from the InterAKT tab of the Insert bar. The wizard has three steps.
Configure the first step of the wizard as shown below:
Select the Horizontal layout.
Choose the modern_red 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 CSS menu will look in browser.
Click Next to continue configuring the wizard.
In the second step of the wizard you get to enter the items of the CSS site menu. Start with the first-level items (Home, Spring Pack, Company), and then continue with the sub-items for the Spring Pack item. Configure the user interface as shown below:
Use text and not images for the first menu level.
Note: To see a concrete example of using images for the first level, click here.
Use the Items grid and the controls below it to create the menu items:
To create the first menu item, click the Add item button on top of the Items grid. In the dialog box that opens enter the label for the menu item - Home, and then click OK. The item is added in the grid and it is automatically selected.
The Label and Tooltip text boxes are automatically filled with the value you entered in the dialog box that just prompted, and the Target drop-down menu is set to its default option (blank). Leave these three controls set as they are.
Note: Leave the automatically generated values in the Label and Tooltip text boxes, and the default value in the Target drop-down menu as they are for all the other menu items you are about to add.
As for the URL text box, since there are no pages in your site yet (you will create them based on this template), you cannot use the Browse button, so you have to enter the name of a page you will later on create. Also, since the template file is saved in the Templates folder from the site root and your page(s) will be created in the site root, the filename needs to be preceded by "../".
Enter ../home.extension in this text box (replace extension with php/asp/cfm according to your server model).
Having the Home item selected in the grid, click the Add item button to add another menu item on the same level (namely the first one):
When prompted for the menu item name enter Spring Pack, and then click OK.
In the URL text box enter ../spring_pack.extension (replace extension with php/asp/cfm according to your server model).
Having the Spring Pack item selected in the grid, click the Add item button to add one more menu item on the same level (namely the first one):
When prompted for the menu item name enter Company, and then click OK.
In the URL text box enter ../company.extension (replace extension with php/asp/cfm according to your server model).
After adding these three items for the first menu level, continue with the sub-items:
The Home and Company items on the first menu level have no sub-items.
The Spring Pack item on the first menu level has sub-items retrieved from the database.
Select the Spring Pack item in the grid and click the Add sub-item button to add a new menu item, this time a child for the current one:
When prompted for the menu item name enter Products, and then click OK.
In the URL text box enter ../products.extension?id_prd= (replace extension with php/asp/cfm according to your server model).
Note 1: The products page content will be filtered by the id_prd URL parameter.
Note 2: The one menu item you just added will be "transformed" in more items - as many as the number of products recorded in the database. You will add a repeat region to achieve this.
Click Next to continue configuring the wizard.
Configure the third step of the wizard as shown below:
Select the Slide animation for menu sub-items.
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 the steps above, the other_table_tmp.dwt page in Dreamweaver, in Design view, should look like this:
Place the cursor inside the Spring Pack menu item displayed in the translator, and select (click) the <li> tag in the Tag Selector. Switch to Code view and notice the selected code corresponding to the <li> tag:
<li> <a href="../spring_pack.php" title="Spring Pack">Spring Pack</a>
<ul>
<li> <a href="../products.php?id_prd=" title="Products">Products</a> </li>
</ul>
</li>
In order for the sub-items of the Spring Pack menu item to be retrieved dynamically, perform the following operations inside the <li> tag from the <ul> one in the selected code:
Expand the rsProductsNames recordset in the Bindings tab of the Application panel, and drag and drop the id_prd column inside the value for the href attribute, namely after id_prd=. This ensures that the link to which the menu item points passes an URL parameter that has its value equal to the product ID.
Remember that the products page content will be filtered by the id_prd URL parameter.
Select the value for the title attribute (what is written between the quotation marks, namely Products), and drag and drop on top of it the name_prd column from the same recordset. This ensures that the tooltip (alternative text) corresponding to the menu item displays the product name.
Select the text between the <a> tags, namely Products, and drag and drop on top of it the name_prd column as well. This ensures that the label of the menu items is retrieved from the name_prd table column.
After performing the three changes above, the code section should now look like this:
<li> <a href="../spring_pack.php" title="Spring Pack">Spring Pack</a>
<ul>
<li> <a href="../products.php?id_prd=<?php echo $row_rsProductsNames['id_prd']; ?>" title="<?php echo $row_rsProductsNames['name_prd']; ?>"><?php echo $row_rsProductsNames['name_prd']; ?></a> </li>
</ul>
</li>
At this moment though, only one menu item is retrieved from the recordset. To make all the dynamically-retrieved items show you need to apply a repeat region. Select the line of code you just modified (including the opening and closing <li> tags), and from the Server Behaviors tab of the Application panel access the Repeat Region server behavior. Configure the dialog box that opens as shown below:
Select the rsProductsNames recordset from which menu items data will be retrieved.
Choose to show all the records (menu items) at once.
Click OK to create the repeat region.
The last thing you need to do before the template file is complete is to add an editable region. Switch back to Design view, click inside the menu translator, and select (click) the <div.horizontal#cssMenu1> tag in the Tag Selector. Press the right arrow key and then Enter to create a new paragraph below the menu <div>. This is where you will insert the editable region used to hold the specific content of the pages built based on this template.
From the Insert menu in Dreamweaver, select the Templates Objects -> Editable Region option:
In the dialog box that pops-up enter a name for the editable region - content, and then click the OK button:
After following all the steps above, the other_table_tmp.dwt page in Dreamweaver, in Design view, should look like this:
Notice the elements added in the Server Behaviors tab of the Application panel (recordset, server behavior, dynamic elements). If you want to edit any of these, double-click their name in the list. If you want to edit the menu, click inside its translator and use the corresponding Property Inspector.
Note: After creating template-based pages in your site, if you later on make changes in the template file, they will become visible (after refreshing) in the template-based pages only if they (the changes) were not made above the <html> tag. This means that if you edit the recordset (its corresponding code is placed above the <html> tag) the changes will not become available in the other pages.
Save the other_table_tmp.dwt file (if you haven't already) 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 built yet.
Continue with the next topic to create the actual site pages based on this Dreamweaver template.