How can I control text color in a template?

Question

Hi,
I've got a template I'm using to control a simple text
navigation menu. The menu is not even a list, it is just the
following text with links applied:
Page 1 | Page 2 | Page 3 | Page 4 ....etc
All the pages on my site use this template to control the
order in which pages appear in the navigation menu. The color
(a.link, visited, hover, and active) is controlled by css styles.
What I want to do is make the "Page 1" text a certain color when
the user is on Page 1, make the "Page 2" text a certain color when
the user is on Page 2, and so on. However, since I cannot edit any
of the individual pages (e.g. cannot apply a class style to
individual "Page x" text links) due to the fact that they are
controlled by a template and are not editable regions, I can't seem
to apply a certain color to the appropriate text link for the
corresponding page (i.e. can't make the "Page 1" text a certain
color only on Page 1). If I make the navigation text links an
editable region than I loose the ability to update those text links
via the template, so that's not an option. I fooled around with the
"Make Attribute Editable" tool, putting div tags around my text
links (<div class="text_color">Page 1</div>...I also
tried it with span instead of div), but couldn't get that to work.
Does anyone know how I can do this? Basically, I just want the user
to have a visual clue as to what page he's on while still being
able to use a template to create the pages (and residing navigation
menu).
Thanks so much.

Answer 1

NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages