Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 214 > Dreamweaver Templates

GDS 214 WEB DESIGN II
Dreamweaver Templates - Page 6
Instructor: Rob Higgins

1 > 2 > 3 > 4 > 5 > 6 > 7 > 8> 9 > 10 > 11 > 12 > 13

Next >

Defining editable tag attributes

You use the Make Attribute Editable command to allow a template user to modify specified tag attributes in a document created from a template. For example, you can set a background color in the template document yet allow a template user to set a different background color for pages they create. The user can update only the attributes you define as editable.

Creating an editable tag attribute inserts a template parameter in the code. An initial value for the attribute is set in the template document; when a template-based document is created, it inherits the parameter. A template user can then edit the parameter in the document.

Defining editable tag attributes in a template

You can set multiple editable attributes for a page element. Only tag attributes that are currently set for the element initially appear in the Attribute pop-up menu. For example, with an image tag the width and height attributes may be the only ones that appear in the menu.

If the attribute that you want to make editable isn’t listed in the Attribute pop-up menu, click Add to add the attribute to the list.

1. In the Document window, select an item you want to set an editable tag attribute for.
   
   
2. Choose Modify > Templates > Make Attribute Editable.
   
   
3. In the dialog box that appears, do one of the following:
   
   • If the attribute you want to make editable is listed in the Attribute pop-up menu, select it.
     
   • If the attribute you want to make editable isn’t listed in the Attribute pop-up menu, click Add, and in the dialog box that opens, enter the name of the attribute you want to add, and click OK.
     
     
4. Make sure the Make Attribute Editable option is selected.
   
   In the dialog box complete the fields to set the values you want.
   
   
5. In the Label text box, enter a unique name for the attribute.
   
   Tip: To make it easier to identify a specific editable tag attribute later, use a label that identifies the element and the attribute. For example, you might label an image whose source is editable logoSrc or label the editable background color of a body tag bodyBgcolor.
   
   
6. In the Type pop-up menu, select the type of value allowed for this attribute by setting one of the following options:
   • To let a user enter a text value for the attribute, choose Text. For example, you can use text with the align attribute; the user can then set the attribute’s value to left, right, or center.
   • To set the link to an element, such as the file path to an image, choose URL. Using URL allows Dreamweaver to automatically update the path used in a link. If the user moves the image to a new folder, the Update Links dialog appears.
   • To make the color picker available for selecting a value, choose Color.
   • To let a template user type a numerical value to update an attribute (for example, to change the height or width values of an image), choose Number.
     
     
7. The Default Value field displays the value of the selected tag attribute in the template. Enter a new value in this field to set a different initial value for the parameter in the template-based document.
   
   
8. If you want to make changes to another attribute of the selected tag, repeat steps 3 through 7.
   
   
9. Click OK.
   

Making an editable tag attribute uneditable

A tag previously marked as editable can be marked as uneditable. Make the change in the template and update the pages derived from the template.

To reset an editable tag attribute:

1. In the template document, click the element associated with the editable attribute or use the tag selector to select the tag.
   
2. Choose Modify > Templates > Make Attribute Editable.
   
3. In the Attributes pop-up menu, select the attribute you want to affect.
   
4. Deselect the Make Attribute Editable checkbox.
   
5. Click OK.
   

Design View and Code View

Viewing templates in Design view

In template files and documents based on templates, editable regions appear in the Document window’s Design view surrounded by rectangular outlines in a preset highlight color.

A small tab appears at the upper left corner of each region, showing the name of each defined region. Template regions are also include a highlighted outline. You can make changes to both editable and locked content.

Template files can be identified by the <<Template>> title and .dwt file extension in the Document window.

In a document based on a template (a template-based document), in addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab at the upper right giving the name of the template that the document is based on. This highlighted rectangle is there to remind you that the document is based on a template and that you can’t change anything outside the editable regions.

Note: If you try to edit a locked region in a document based on a template when highlighting is turned off, the mouse pointer changes to indicate that you can’t click in a locked region.

Viewing templates in Code view

In Code view, you can make changes to both editable and locked HTML source code in a template. Editable content is marked in HTML with the comments <!-- TemplateBeginEditable> and <!-- TemplateEndEditable -->. Everything between these comments is editable in documents based on the template. The HTML source code for the editable region from the previous example might look like this:

<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>

In Code view, editable regions of a document derived from a template are displayed in a different color than code in the non-editable regions; you can make changes only to code in the editable regions or editable parameters.

Editable content is marked in HTML with the Dreamweaver comments
<!-- InstanceBeginEditable> and <!-- InstanceEndEditable -->. Everything between these comments is editable.

The HTML source code for an editable region might look like this:

<head>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr><td>enter name</td><td>enter city</td></tr>

<!-- InstanceEndEditable -->

</table>
</body>
<!-- InstanceEnd -->

The default setting for non-editable text is gray, you can define a different color for the editable and non-editable regions in the Preferences dialog box. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select Code Coloring. For more information, see Setting code color preferences for a template document.

Note: Dreamweaver prevents you from typing in locked regions in the Code view of the Document window.

1 > 2 > 3 > 4 > 5 > 6 > 7 > 8> 9 > 10 > 11 > 12 > 13

Next >

______________________________

Last updated: 6/28/02 • Webmaster: Paul Young

Tips, Tricks
& Handouts

Student
Links