Create site front-end with MX Includes

In this tutorial topic you will combine all elements created until now into a single page, allowing visitors accomplish every possible task in the shortest amount of time. To do so, you will use MX Includes, which allows adding other pages in a static or dynamic manner.

Start off by opening the index file in Dreamweaver. To decide what files will be included in the main page, you must decide what functionality this page will offer: you must have the category menu, the ad listing for the currently selected category, and a nugget that will allow registered users to login, and then have links towards the post page.

Once the files to include are set, the page design is also quite easy to figure out: a table with at least 3 rows and 2 columns, of which the second column will have only one row. To begin creating the page, follow the next steps:

  1. Add a new table into the page. Configure it to have 3 rows and 2 columns (let's add the site title as well):


     

  2. After this basic table is added to the page, merge the first row's columns. To do this, select the two columns, and select Table -> Merge Cells from the right-click pop-up menu. Now enter a site title into the first row: Welcome to Classified Ads for example.

  3. Also, merge the second column's rows, in the same manner. Now the index page looks like the following image in Dreamweaver:


     

  4. Now it is time to start adding content, by including the correct files. The first one is the tree menu created in the previous section. It will reside in the second row's first cell.

  5. Place the cursor in the cell, and apply the Server-Side Include server behavior. You can access this server behavior from Server Behaviors -> + -> MX Kollection -> Server-Side Includess. Configure the dialog box that opens by browsing to the menu file. Then click on OK to apply the server behavior:


     

  6. Next comes the login/user menu file. It will be displayed as a nugget in the third row's first cell, beneath the menu. This file is also statically included, so the steps to take are the same, the only difference residing in the file you have to select in the Server-Side Include dialog box: login.

  7. The last thing you must do in regards to the index page is to define the files that will be included in the second column's cell. This will be a dynamic include, as this will display the ad listing when a category is selected, but also the post ad form when the Post Ad link is clicked. To determine which page will be displayed, an URL parameter is used: act. Depending on its value, a different page will be loaded.

  8. To achieve this, you will use the Server-Side Includes From List server behavior, that can be accessed from Server Behaviors -> + -> MX Kollection -> Server-Side Includes.
    · To configure the Basic tab, consult the following image:



    · When configuring the Parameter tab, set the name of the URL parameter to act:


     

  9. This way, when the act parameter is missing, the ad listing will be displayed. The tree menu's links do not use the act URL parameter, and as such the correct ad list will be displayed. The Post ad link from the nugget does use it however, giving it the post value, and as such, the form will be displayed.