Now that the site pages and the CSS layout are created, you can build the main page using MX Includes and complete your website.
Open the index page, if not already opened, and start bringing in the files you already built:
Remove the temporary text from the header placeholder ("Header placeholder"): select it and press Delete. Leave the cursor where it is and from the Application panel, Server Behaviors -> + -> MX Kollection -> Server-Side Includes, apply the Server-Side Include server behavior. Configure the dialog box that opens as shown below:
Use the Browse button next to the Filename text box to locate the header page in the site structure. Selected it to be included in the main page.
Click OK to apply the server behavior. In Design view, you will notice the content of the header page displayed in the corresponding div.
In a similar manner, remove the temporary text from the footer placeholder ("Footer placeholder") and include the footer page in that div.
Repeat these steps once again for the menu placeholder: remove the temporary text ("Menu placeholder") and include the menu page in the div. Notice that the menu translator inserted in page looks differently than here (in browser though it looks as expected). The reason for this difference is the fact that the set CSS skin does not seem to be used for the menu. To make the translator show completely (including the CSS styles), right-click (anywhere) inside the index page, and from the menu that opens, select CSS Styles -> Design time:
In the dialog box that pops-up, click the Plus (+) button above the Show only at design time grid. In the Select File window browse to the \includes\cssmenus2\skins folder from your site structure, then open the folder corresponding to your menu skin (nature here) and select the .css file having the name of the chosen layout (vertical.css here):
Click OK to select the file, and then once again to close the Design Time Style Sheets dialog box:
The menu translator should be visible right now.
Note: When in a Dreamweaver page you apply the Server-Side Include server behavior to include files that contain menus (either static or dynamic) generated with MX CSS Menus, follow the steps above to have the menu properly displayed in Design view.
Finally, remove the temporary text from the content placeholder ("Content placeholder"), and from the Application panel, Server Behaviors -> + -> MX Kollection -> Server-Side Includes, apply the Server-Side Includes From List server behavior. The dialog box has two tabs.
Configure the Basic tab of the server behavior as shown below:
Click the Plus (+) button on top of the Include files grid to include the first file in page (using this server behavior). Notice that the interface controls below the grid become enabled. Configure them as it follows:
Leave the URL parameter value text box blank (the default page is loaded when the passed parameter takes no value).
Use the Browse button next to the Filename text box to locate and select the home file from the site structure.
In the Page title text box enter Home.
Leave the Meta keywords and Meta description text boxes blank. To learn more about their role, click the Help button on the right.
Note: You will leave these two controls blank for the rest of the files to be included too.
Click the Plus (+) button on top of the Include files grid to include another file in page. Configure its options as it follows:
In the URL parameter value text box enter home.
Note: Check out the database records to see the values that the URL parameter should take:
Use the Browse button next to the Filename text box to locate and select the home file from the site structure. This page will be displayed when the URL parameter takes no value, as well as when it takes the home value.
In the Page title text box enter Home, as well.
Click the Plus (+) button on top of the Include files grid to include another file in page. Configure its options as it follows:
In the URL parameter value text box enter spring.
Use the Browse button next to the Filename text box to locate and select the spring_pack file from the site structure.
In the Page title text box enter MX Spring Pack 2006.
Click the Plus (+) button on top of the Include files grid to include another file in page. Configure its options as it follows:
In the URL parameter value text box enter prod.
Use the Browse button next to the Filename text box to locate and select the products file from the site structure.
In the Page title text box enter Products.
Click the Plus (+) button on top of the Include files grid to include another file in page. Configure its options as it follows:
In the URL parameter value text box enter overview.
Use the Browse button next to the Filename text box to locate and select the overview file from the site structure.
In the Page title text box enter Overview.
Click the Plus (+) button on top of the Include files grid to include the last file in page. Configure its options as it follows:
In the URL parameter value text box enter contact.
Use the Browse button next to the Filename text box to locate and select the contact file from the site structure.
In the Page title text box enter Contact.
Click the Parameter tab to continue configuring the server behavior.
Configure the Parameter tab of the server behavior as shown below:
Leave mod as the URL parameter name.
Click OK to apply the server behavior.
After following all these steps, the index page in Dreamweaver, in Design view, should look like this:
Notice in the Server Behaviors tab of the Application panel the four server behaviors added after performing these operations.
Save the index page and upload it to the server.
With this you completed the MX Includes-using application. Preview it in browser by pressing F12 in the index page:
Notice how the page content on the right changes according to the menu item selected.
In the tutorial you just completed, you created a website by putting together its components in one main page, using MX Includes. The menu you generated is a database-driven one, having its items links built with an URL parameter.