• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Using Optional Regions

It’s time to take a small step into the world of Dreamweaver’s advanced Template features. In this technique, both the up and the down state buttons will exist on the template. You will make each of these buttons into Template Optional Regions, which allow independent control of their display on child pages. By doing this, you can eliminate both the rollover and the links on the buttons.

Using the Files panel, open the file Templates\T3.dwt.

Using Design view, select the Line Break shield beside Button 1 and press the left arrow on the keyboard. This will move your cursor to the left of the line break (<br> tag) and position it to receive the image for the button’s down state without it being in the anchor (<a> tag) for the existing Button 1.


If you don’t see the Line Break shield, edit your Preferences (Ctrl+U/Cmd+U), choose the Invisible Elements Category, check Line Breaks, and then click OK in the Preferences dialog. Also, choose View > Visual Aids > Invisible Elements and make sure there is a check beside it. If not, then select it and the check will appear. You should now have no problems viewing the Line Break shield.

Select Insert > Image. Browse to and select the down state image for Button 1 (button1_d.jpg).

You will now have both buttons in that part of the menu: the up and down button for Button 1.

Select the down image for Button 1, and name it button1d using the Property inspector’s name field (it’s not labeled), tabbing out of the field to set the value. Right-click/Ctrl-click on the button1d image to open the context menu, and select Templates > New Optional Region.

An Optional Region is used around this image to control its inclusion in the child page. This, in turn, is controlled by a template parameter that is automatically inserted when an Optional Region is added to the page.

In the New Optional Region dialog, choose the Basic tab and enter OR_Button1Down in the Name field. Clear the Show by Default check box, and click OK to close the dialog.

You have just created a Template Parameter (OR_Button1Down), an Optional Region that is controlled by the value given to the Template Parameter, and set a default of false for that parameter. This means that if you spawn a child page from this Template file, that downstate image will not be shown. In fact, the code for it is not even written into the child page.

Select the image named button1, choose Insert > Template Objects > Optional Region. Choose the Advanced tab, click on the Enter Expression radio button, and enter !OR_Button1Down in the text area. Click OK. Save the Template page and update the child pages when prompted.

The Template Expression you just entered, !OR_Button1Down, tests the value of the parameter OR_Button1Down. If the value is false in the child page, then that child page will contain the code for the up state of Button 1. If the value is true in the child page, then the child page will contain the code for the down state of Button 1.

Repeat steps 2 through 6 for Button 2. Use OR_Button2Down for the Optional Region name assigned to Button 2 and !OR_Button2Down for the Expression’s value assigned to Button 2’s Optional Region. Save the template, update pages if prompted, and close the template.

Open Technique3\Button1.html and select Modify > Template Properties. Select the OR_Button1Down parameter in the text area, and check the check box for Show OR_Button1Down. Click the OK button to close the Template Properties dialog and see the changes you made in Design and Code views. Save the page. When you preview the page, you should see the down state for Button 1.

Repeat step 8 for Technique3\Tech3Button2.html, this time setting the OR_Button2Down parameter to true by selecting the check box for Show OR_Button2Down.

Save the page, and preview it.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint