| |
| |
As said earlier, before building (adding content in) the site pages, you need to create a template file in Dreamweaver that will include the site menu. By attaching the template to the site files, you will make sure that the menu shows in each site page.
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 your 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 HTML template option.
Click the Create button to create the template file in your site.
Before starting to add content in the template, press Ctrl+S to save the file in your site structure. 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 - html_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. 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 arktic_orange 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 site CSS menu. Start with the first-level items (Home, Products, Company), and then continue with the sub-items for the Products 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 (disabled at first) 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 just entered in the Add Menu Item dialog box, 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.
Click the Browse button next to the URL text box and in the dialog box that opens, select the home.html page from the site structure. Click OK to add the URL link (no parameters need to or can be passed in this HTML site).
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 label enter Products, and then click OK.
In the URL text box leave the # default value (this means that the menu item will not point to any site page).
Having the Products 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 label enter Company, and then click OK.
For the URL link, browse to the company.html page from the site structure and select it.
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 Products item on the first menu level has three sub-items, and one of them has four sub-items itself.
Select the Products item in the grid and click the Add sub-item button to add a new menu item (child for the current one):
When prompted for the menu item label enter MX CSS Menus, and then click OK.
For the URL link, browse to the menus.html page from the site structure and select it.
Having the MX CSS Menus item selected in the grid, click the Add item button to add another menu item on the same level (namely the second one):
When prompted for the menu item label enter ImpAKT, and then click OK.
For the URL link, browse to the impakt.html page from the site structure and select it.
Having the ImpAKT item selected in the grid, click the Add item button to add one more menu item on the same level (namely the second one):
When prompted for the menu item label enter KTML, and then click OK.
For the URL link, browse to the ktml.html page from the site structure and select it.
Select the ImpAKT item in the grid and click the Add sub-item button to add a new menu item (child for the current one):
When prompted for the menu item label enter MX File Upload, and then click OK.
For the URL link, browse to the file.html page from the site structure and select it.
Having the MX File Upload item selected in the grid, click the Add item button to add another menu item on the same level (namely the third one):
When prompted for the menu item label enter MX Send E-mail, and then click OK.
For the URL link, browse to the email.html page from the site structure and select it.
Having the MX Send E-mail item selected in the grid, click the Add item button to add another menu item on the same level (namely the third one):
When prompted for the menu item label enter MX User Login, and then click OK.
For the URL link, browse to the login.html page from the site structure and select it.
Having the MX User Login item selected in the grid, click the Add item button to add one more menu item on the same level (namely the third one):
When prompted for the menu item label enter MX Form Validation, and then click OK.
For the URL link, browse to the validation.html page from the site structure and select it.
Click Next to continue configuring the wizard.
Configure the third step of the wizard as shown below:
Select the Zoom 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 adding the menu in page, the last thing you have to do to complete the template file is to add an editable region. In 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 where the content of each template-based site page will be entered.
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 - HTML content, and then click the OK button:
After following the steps above, the html_tmp.dwt page in Dreamweaver, in Design view, should look like this:
Notice that nothing was added in the Server Behaviors tab of the Application panel. If you want to edit the menu later on, click inside its translator and use the corresponding Property Inspector.
Note: If you later on make changes in the template file, they will become visible (after refreshing) in the template-based pages.
Save the html_tmp.dwt file 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 empty right now (no content and no template attached).
Continue with the next topic to build the actual site pages based on this Dreamweaver template.