Editable attributes in Dreamweaver

Creating a 'you are here' or 'current page' type link, letting the user know where they are in your site, is a pretty common task. This would normally be achieved by adding a CSS rule that highlights a particular link tag based on it's ID, which would look something like this:

<a href = "home">Home</a>
<a href = "home" id = "currentPage">Contact</a>

In the above example, the contact page is the current page, and responds to the corresponding CSS rule - #currentPage.

However, if you are using a Template in Dreamweaver to generate your pages, and the page is an instance of the Template, then your menu is not going to be within an editable region. This makes it impossible to add the ID to the link. You could theoretically give each link a different ID in the template, but that's a clumsy solution, which would require writing a new CSS rule for each link. Fortunately, you can get around the problem by using Editable Attributes.

Make sure you are in your Template.
Select the corresponding <a> tag. An easy method is to click inside the element, and use the tag selectors in the status bar.
From the Modify menu, select Templates, Make Attribute Editable.
The only default editable attribute is href. To add a new attribute, click Add Attribute and type "id". Click OK.

You will need to give the editable attribute a Label, as this will let you select it later on. The label should correspond to the link itself, so if you are editing the link for the contact page, the label should be something like "contact".

The rest of the options should be left as they are.

editable attributes dialog

If you check your source code, you should see something like this in the link tag:

<a href="contact.html" id="@@(contact)@@">Contact</a>

And in the head of document:

Dreamweaver adds a template parameter for each editable attribute.

Save your Template, and update your site.
Go ahead and create a new page based on your template, or open an existing page based on the Template. The editable tag will now have an empty id attribute: (id = " ").
*Read about empty values in the Relevant Stuff column.

The value of the attribute cannot be changed by hand, you have to use the Template Properties command:

Modify, Template Poperties.
Click on the relevant label (now you see why you needed to add a label for each link!).
Set the value to currentPage (or whatever you like, but note that this will be the name of your CSS rule in the next step).
Next, you will need to write a CSS rule to change the appearance of the current page link.

Your rule will look something like this:

#currentPage {
color: white;
}

or, if you've decided to use a class for the editable attribute:

.currentPage {
color: white;
}

Note that you may need to make the rule more specific, in order to override other rules - if you are not sure how to do this, a 'cheat' would be to use the !important declaration:

.currentPage {
color: white !important;
}

This would automatically override all other rules affecting the colour of your link.

Better; use descendant selectors, including as many ids as appropriate (these will depend on the structure of your page) I usually have a wrapper div around everything (id = "wrapper"), and I give my navigation bar an id as well. The following rule has high specificity due to the number of ids included:

#wrapper #navbar .currentPage {
color: white;
}

Once you've saved your stylesheet, the link should change appearance. If it doesn't work, check for issues such as case-sensitivity, and make sure that your CSS selector (the bit to the left of the curly braces) is specific enough.

Editable attributes in Dreamweaver

relevant stuff