Template: Editable attributes

Template: Making attributes editable:
Use this when you want to keep one template throughout but want to be able to edit certain attributes of an un-editable regions. For example, if you include the navigation links in the main template as one uniform color, but want one of the navigation links to be a different color on it’s corresponding page, the you would need to make that attribute editable.

IN THE HTML TEMPLATE:

1. In the template, have an id and class on each navigation link. For example:
<div id=”nav_about”><div class=”class_about”>about</div></div>
You would have an a href linking it to the about.html page as well but I took it out for simplicity reasons.

2. In dreamweaver, go to splitscreen view. In the code, click on the

. On the bottom of the window (below the design) there is a list of all the divs. Make sure you are on the
<div class="class_about"></div>
by clicking on it. The code will become highlighted after you click on it.

3. In the drop downs, Go to Modify>Templates>Make Attribute Editable.

4. A dialogue window will pop up.
Attribute = CLASS
Check the box
Label = class_about (the name of your class)
Type = Text
Default = Link (You can name this whatever you want. In the CSS, we created classes named “link” and “current”. The link class defines what the navigations will be like as links. On the template you will define all of them with this class. For example, if the links are black, then they will be defined as black in the link state. However, if you want the link of the page you are on to be blue, you would designate this with the “current” state on the respective page.

THE CSS

1. This is saying that whenever the state is link, it will be in the state that is in the dreamweaver template and defined in the id #nav_about:

#nav_about a:link, #nav_about a:visited{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:top left;

}


#nav_about a:hover, #nav_about a:active{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:bottom left;

}

2. This is defining what the link will look like in the current state (it is saying that for all pseudo selectors of link, visited, hover, and active, the link will look like this.
#nav_about .current a:link, #nav_about .current a:visited, #nav_about .current a:hover, #nav_about .current a:active{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:left bottom;
cursor:default;

}
3. .link{}

THE HTML PAGES
1. Make a html page from the template. Name it about.html.
2. Go to Modify>template properties
3. Select the class name, in this case “class_about”
4. At the bottom change class_about to current.