IT tutorials
 
Graphics
 

Dreamweaver CS5 : Establishing Optional Regions (part 1)

12/6/2011 5:15:52 PM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
One of my clients quite regularly wanted to feature one of his products over the others, so we developed a special logo exactly for that purpose. Whenever a product was to be highlighted, I modified the page to include the special logo rather than the standard one. Typically, this took up to a half-hour every time the change was made. Not only did I have to find the catalog page with the to-be-featured item and replace the logo — something else I had to hunt for — I also had to find the previously featured item page and revert the special logo placed there to the standard one. Not difficult work, but certainly tedious.

Dreamweaver's Optional Region feature is intended to reduce, if not eliminate, such tiresome chores. Content placed on a template within an optional region is conditionally shown or not shown on the template-derived page. In the just-described situation, this feature enables me to put both logos in the same template, each in its own optional region. By default, the main logo is shown, but if I decide not to show it, the special logo is shown in its place. Optional regions are extremely powerful.

Optional regions work somewhat like a cross between repeating regions and editable attributes. Like repeating regions, optional regions can surround any portion of a page; also, they are not editable by default, although it's possible to create an editable optional region. After an optional region has been placed on the template page — as with editable attributes — the Template Properties dialog box is used to set the condition that displays or hides the content on a template-derived page.

The conditions that control an optional region range from a basic true-false or Boolean statement to more complex, evaluated expressions. Reflecting this, the New Optional Region dialog box contains two tabs, Basic and Advanced. Under the Basic tab, you simply enter the name for the optional region and indicate whether to display the region by default. The Advanced tab, shown in Figure 1, gives you the opportunity to set the condition dependent on another existing template parameter or enter a template expression.

Figure 1. Optional regions can be controlled by the state of another parameter directly or by the evaluation of a template expression.

NOTE

The Basic and Advanced tabs are mutually exclusive. The tab showing when OK is selected determines which template parameter is used.

Now, look at an example to see how both the Basic and Advanced approaches work together. Take the situation, described at the beginning of this section, which requires the use of a special logo every so often. To accomplish this, I create one optional region using the Basic tab of the New Optional Region dialog box. In this region, I just enter a name, mainLogoRegion, and enable the Show By Default option. In this region, I place my standard logo. The Basic tab creates a template parameter with code like this in the <head>:

<!-- TemplateParam name="mainLogoRegion" type="boolean" value="true"-->

Next, I create a second optional region and select the Advanced tab of the New Optional Region dialog box. I want this region to be displayed only when the other region is not. To achieve this effect, I select the Enter Expression option and enter the following in the text area:

mainLogoRegion != true

With optional regions, the name is the same as the condition; so translated into English, this expression reads, "Show this region if mainLogoRegion is not shown." As shown in Figure 2, Dreamweaver uses the condition as the name of the optional region, and this name is represented in the tab above the optional regions.

Figure 2. Complex expressions can be used to show or hide optional regions.

Dreamweaver template expressions support a subset of JavaScript operators, so I could have also written this expression like this:

!mainLogoRegion

In a different situation, you might want to tie a number of noncontiguous optional regions together so that if the main region shows, the others would as well. You achieve this by setting Use Parameter to the name of the main region.

To insert an optional region, follow these steps:

  1. Choose Insert => Template Objects => Optional Region or, from the Templates menu of the Insert panel, click the Optional Region icon.

  2. If you want to create a template parameter, from the Basic tab, follow these steps:

    1. Enter a unique name for the optional region in the Name field.

    2. Choose the Show By Default option if you want to make the region initially viewable.

  3. If you want to link this optional region to the state of another optional region, from the Advanced tab, follow these steps:

    1. Select the Use Parameter option.

    2. Choose an existing optional region from the drop-down list.

  4. If you want to control the optional region display with a template parameter, from the Advanced tab, follow these steps:

    1. Select the Enter Expression option.

    2. Enter the desired expression in the text area.

  5. Click OK when you're finished.

1. Combining editable and optional regions

Similar to repeating regions, optional regions by themselves are not editable. Many uses exist for optional regions with the designed content either displayed or not displayed. However, in certain situations, the optional content needs to be editable as well. For such situations, Dreamweaver provides the Editable Optional Region object.

The procedure for adding an editable optional region is exactly the same as for inserting an optional region — Dreamweaver automatically includes an editable region within the optional region. The new editable region is also automatically named.

You can change the name of the automatically added editable region by selecting the template region tab or its tag in the Tag Selector and then changing the name in the Property inspector.


To add an editable optional region, follow these steps:

  1. Choose Insert => Template Objects => Editable Optional Region or, from the Templates menu of the Insert panel, click the Editable Optional Region icon.

  2. Follow the procedure outlined for inserting an optional region.

  3. Click OK when you're finished.

Of course, if you want to add an editable region to an optional region containing locked content, you can always do so when editing the template.

2. Setting optional region properties

Although you set up an area of the page to be optionally displayed in the template, you actually choose the display option — whether to show or hide the region — in the document created from the template. As with editable attributes, the Template Properties dialog box handles control of the optional regions. Unlike editable attributes, optional regions only use true/false values to determine whether a selected region is either shown (true) or not shown (false).

Instead of the template parameter statement found in templates, Dreamweaver inserts instance parameters into the <head> section of the template-derived document, like this one:

<!-- InstanceParam name="mainLogoRegion" type="boolean" value="true"-->

To set the parameters of an optional region in a template-based document, follow these steps:

  1. Choose Modify => Template Properties. The Template Properties dialog box is displayed.

  2. Select the optional region you want to affect.

  3. If you want to allow the optional region to be modified in a document based on a nested template, choose the Allow Nested Templates To Control This option. If the option is selected, the phrase pass through in parentheses replaces the Show Attribute Name option and appears in the list.

  4. Otherwise, select the Show Attribute Name option to set the value to true and deselect it to set the value to false.

  5. To set the value of any other optional regions on the page, choose the entry from the list and repeat Steps 2 through 4.

  6. Click OK when you're finished.

 
Others
 
- Adobe Photoshop CS5 : The Fastest Way to Resize Brushes Ever (Plus, You Can Change Their Hardness, Too)
- Adobe Photoshop CS5 : Fixing Dark Eye Sockets
- Adobe After Effects CS5 : Creating a Basic Animation Using Effects and Presets - Creating a new composition
- Adobe After Effects CS5 : Importing footage using Adobe Bridge
- Adobe Fireworks CS5 : Repairing areas with the Rubber Stamp tool
- CorelDraw 10 : Hyperlinks and Bookmarks (part 2) - Creating bookmarks and links
- CorelDraw 10 : Hyperlinks and Bookmarks (part 1)
- Adobe Flash Professional CS5 : Free Transform Commands and Options
- Adobe Flash Professional CS5 : Applying Modify Shape Menu Commands
- Adobe InDesign CS5 : Erasing to Reshape Paths & Working with Pathfinder
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS