« Previous


Page 2 » Dreamweaver CS4 Templates Editable Regions & Attributes

Next »


Page 2 » Dreamweaver CS4 Templates Editable Regions & Attributes

Step.03 » Creating Editable Regions

Creating Editable Regions is the key step in creating a usable template because a template with no Editable Regions is useless.

  1. Click inside first editable region (usually an empty paragraph tag).
  2. SELECT » Insert » Template Objects » Editable Region
  3. Give new editable region a UNIQUE, descriptive name.
  4. Dreamweaver automatically inserts placeholder text within the editable region with the name of the editable region. Can delete, change or add to the placeholder text as desired.
  5. Repeat the above steps for all editable regions, giving each a unique name.
  6. Think again about what will and won't change from page to page. Best to plan your page's structure now and create a template that will be both powerful and flexible. More difficult to change later.
  7. Save the template file with its new Editable Regions.

Step.04 » Creating Editable Attributes

Editable Attributes are used for times when certain attributes will change, while the element itself will remain the same.

For example, you can make the "src" attribute editable in an img element to change the specific image used. You could make the "class" attribute editable for various navigation elements. Any attribute is editable.

  1. Select/highlight the item you want to work with.
  2. SELECT » Modify » Template » Make Attribute Editable...
  3. Dialogue box pops up .. with a listing of all that tag's attributes. It's tries to guess which one you want. Select from drop-down menu.
  4. Have to put a check in box beside "Make attribute editable"
  5. By default the name of the attribute becomes the label, but you want to change that because you might have multiple editable attributes on a page, and each must have a unique name. So rename it (label) to something tha is unique and descriptive.
  6. Look at the drop-down menu labeled "Type". Select the appropriate item there. (e.g. Text, URL, Color, True/False, Number). When making a "src" attribute editable for an img, it would be best to select "URL" (not "text"). The 'URL' will offer a browse-path, so we don't have to type in exact "text".
  7. When you give graphic Editable Attributes, they will disappear from the page, but code will exist in "Src" path indicating attribute is editable.
  8. For navigation, click on and select element. Look at tag selector and select an element.
  9. SELECT (again) » Modify » Template » Make Attribute Editable... (dialogue box appears)
  10. Need to put check in box labeled "Make attribute editable" and give unique descriptive label, and select type. Good idea to give it a default value. For an editable class, select "Text' as type.
  11. For navigation bars, have to do each element separately.
  12. Save file.
  13. Template is ready to use. Before creating pages off of template, look at it one more time and make sure you thought of everything.

On the next page we'll look at creating new pages from our template, and also applying our template to pre-existing pages. See below for linkage.

NEXT » Creating new web pages based on Dreamweaver CS4 template

Created with Dreamweaver using XHTML 1.0 Strict web standards. Validate.