IT tutorials

Dreamweaver CS5 : Using Dreamweaver Templates - Using Editable Regions

11/17/2011 5:16:58 PM
- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
When you convert an existing document into a template via the Save As Template command, the entire document is initially locked. If you attempt to create a document from a template at this stage, Dreamweaver alerts you that the template doesn't have any editable regions, and you cannot change anything on the page. Editable regions are a key element in templates.

1. Marking existing content as editable

Editable regions can either surround existing content or stand alone without any content. As noted earlier, in both cases you must give the region a unique name. Dreamweaver uses the unique name to identify the editable region when entering new content, applying the template, and exporting or importing XML.


As I noted previously, each editable region must have a unique name, but the name need only be different from any other editable region on the same page. The same name could be used for objects, JavaScript functions, or editable regions on a different template.

To mark an existing area as an editable region, follow these steps:

  1. Select the text, object, or area on the page that you want to convert to an editable region.

    The general rule with editable regions is that you need to select a complete tag pair, such as <table>...</table>. This strategy has several implications. For instance, although you can mark an entire table, one or more contiguous rows, or a single cell as editable, you can't mark multiple cells, separated rows, or a column. Attempting to do so marks a multiple row region. You have to select each cell individually (<td>...</td>). In addition, you can select the content of an AP element to be editable and keep the AP element itself locked (so that its position and other properties cannot be altered). However, if you select the AP element to be editable, you can't lock the content.

  2. Choose Insert => Template Objects => Editable Region. You can also use the keyboard shortcut Ctrl+Alt+V (Command+Option+V), or right-click (Control+click) the selection and choose Templates => New Editable Region from the context menu. Whichever method you choose, Dreamweaver displays the New Editable Region dialog box shown in Figure 1.

    Now, editable template regions — as well as the other region types — are just a mouse click away. From the Common category of the Insert panel, choose the Templates group and click once on the Editable Region icon. You can also drag the icon over the selected text. Either action brings up the New Editable Region dialog box.

  3. Enter a unique name for the selected area. Click OK if you're finished, or click Cancel to abort the operation.

Figure 1. The descriptive name you enter for a new editable region must be unique.

Although you can use spaces in editable region names, some characters are not permitted. The illegal characters are the ampersand (&), double quote ("), single quote ('), and left and right angle brackets (< and >).

Dreamweaver outlines the selection with the color picked in Preferences on the Highlighting panel, shown if View Visual Aids Invisible Elements is enabled. The name for your newly designated region is displayed on a tab marking the area; the region is also listed in the Modify Templates submenu. If still selected, the region name has a checkmark next to it in the Templates submenu. You can jump to any other editable region by selecting its name from this dynamic list.

Make sure that you apply any formatting to your text — either by using HTML codes or by using CSS styles — before you select it to be an editable region. Generally, you want to keep the defined look of the content, altering just the text; so make sure that only the text is within the editable region and exclude the formatting tags. It's often helpful to have both the Code and Design views open for this detailed work.

2. Inserting a new editable region

Sometimes it's helpful to create a new editable region in which no content currently exists. In these situations, the editable region name doubles as a label identifying the type of content expected, such as CatalogPrice. Dreamweaver always highlights the entry in the template in a small tab above the region.

To insert a new editable region, follow these steps:

  1. Place your cursor anywhere on the template page without selecting any item in particular.

  2. Choose Insert => Template Objects => Editable Region. Alternatively, click the Editable Region icon on the Templates menu of the Insert panel.

  3. Enter a unique name for the new region. Click OK when you're finished, or click Cancel to abort the operation.

Dreamweaver inserts the new region name in the document, marks it with a named tab, and adds the name to the dynamic region list (which you can display by choosing Modify => Templates).

Two editable regions, one for the Web page's title and one for other <head> content, are automatically created when you save a document as a template. The title is stored in a special editable region called doctitle, and the <head> content region is named head. To change the title (which initially takes the same title as the template), enter the new text in the Title field of the Document toolbar. You can also use the keyboard shortcut Ctrl+J (Command+J) to open the Page Properties dialog box. Finally, you can select View => Head Elements and click the Title icon — with the visible region outline — to enter the new text in the Property inspector.

The head editable region may not appear very useful during the template creation phase, but when you begin creating documents based on a template it really shines. New <meta> tags, CSS style links and rules, and behavior-added JavaScript all take advantage of the head editable region.

3. Creating links in templates

A common problem that designers encounter with Dreamweaver templates centers on links. People often add links to their templates and discover that these links do not work when new pages are derived from the templates. The main cause of this error is linking to a non-existent page or element by hand — that is, typing in the link, rather than using the Select File dialog box to choose it. Designers tend to set the links according to their final site structures, without taking into account how templates are stored in Dreamweaver.

3.1. Recommended linking technique

There's an easy way to make sure the links in your template pages are correct. For example, when creating a template, suppose you have links to three pages — products.htm, services.htm, and about.htm — all in the root of your site. Both products.htm and services.htm have been created, so you click the Folder icon in the Property inspector and select those files. Dreamweaver inserts those links as follows: ../products.htm and ../services.htm. The ../ indicates the directory above the current directory — which makes sense only when you remember that all templates are stored in a subfolder of the site root called Templates. These links are correctly resolved when a document is derived from this template to reflect the stored location of the new file.

Let's assume that the third file, about.htm, has not yet been created, and so you enter that link by hand. The common mistake is entering the pathname as it should appear when it's used: about.htm. However, because the page is saved in the Templates folder, Dreamweaver converts that link to /Templates/about.htm for any page derived from the template — and the link will fail. This type of error also applies to dependent files, such as graphics or other media.

The best solution is to always use the Folder or the Point-to-File icon to link to an existing file when building your templates. If the file does not exist, and if you don't want to create a placeholder page for it, link to another existing file in the same folder and modify the link manually.

3.2. Handling special template workflows

There is one special circumstance in which you would not use the Folder or Point-to-File icon to do your linking for you. Let's suppose your site design calls for each page to link to a CSS file in the same folder as the file itself; a technique like this is used when you want to vary pages by departments and each department has its own folder. In this circumstance, linking in the standard template manner wouldn't work because you're effectively linking to a number of files and not just one. To accomplish this goal, you'll need to use a special syntax in your href attribute, like this:

<link href="@@('departmentStyles.css')@@" rel="stylesheet" type="text/css" />

The double @ signs and parentheses characters are generally used to designate template expressions. Here, they're used to tell Dreamweaver not to alter the href value. These types of links will obviously need to be coded by hand.

Another variation of the more typical template workflow is to store your dependent files — such as images, includes, and CSS style sheets — in the Templates folder. Dreamweaver novices often take this approach because it makes sense to them to group all their assets in subfolders immediately below the current page. Although this is generally a solid practice when creating sites, it's not the way Templates are intended to work. However, Dreamweaver is flexible enough to be used this way, but only if you make a change to your Site Setup settings. In the Site Setup dialog box, switch to the Advanced Settings => Templates category (see Figure 2) and clear the Template Updating checkbox. This action changes this option from its default state, Don't Rewrite Document Relative Paths, to one that will rewrite such paths in the Templates folder. Failure to turn off the Template Updating option will result in broken links to any dependent files in your Templates folder for any child page.

Figure 2. Leave the Template Updating option in its default checked state unless you are storing dependent files such as images or includes in your Templates folder.

Just to be absolutely clear: although the Template Updating option makes it possible to store your dependent files in the Templates folder, it's a bad idea and strongly discouraged. It is a far better practice to maintain such assets in a folder off the site root. Items in the Templates folder are generally not published to the Web and if your images or includes are stored there, they're likely to be forgotten.

4. Locking an editable region

Inevitably, you'll sometimes mark as editable a region that you'd prefer to keep locked. Similarly, you may discover that every page constructed to date has required inputting the same content, so it should be entered on the template and locked. In either event, converting an editable region to a locked one is a simple operation.

To lock an editable region, follow these steps:

  1. Place your cursor in the editable region you want to lock.

  2. Choose Modify => Templates => Remove Template Markup. The same menu selection is available from the context menu.

If you are removing a newly inserted editable region that contains only the region name — which happens when an empty editable region is added — the content is not removed and must be deleted by hand on the template. Otherwise, it appears as part of the document created from a template and won't be accessible.

- Adobe Photoshop CS5 : Fixing Depth-of-Field Problems
- Adobe Photoshop CS5 : Using the Dodge and Burn Tools
- QuarkXPress 8 : Combining type and graphics
- QuarkXPress 8 : Fine-tuning typography
- Adobe After Effects CS5 : Curves: Gamma and Contrast
- Adobe After Effects CS5 : Levels: Histograms and Channels
- Adobe Fireworks CS5 : Adjusting tonal range & Using the Align panel
- Adobe Fireworks CS5 : Importing images & Distortion-free bitmap scaling
- CorelDraw 10 : Naming a Web Page
- CorelDraw 10 : Adding a Page Background
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