PDA

View Full Version : Highlight Nav link


enstrique
11-18-2008, 06:49 PM
I have, what I think is, a complicated template question using Dreamweaver. I am involved in creating a web site for my school which has a main nav-bar and a side-bar which will contain submenus as well. I am also building this site using CSS (which I am teaching myself from an existing template).

My question is this... the CSS tags have rollover effects which work great. The problem that I am having is editing the CSS tag (class="current") on links that are the current viewing web page. I do not want to make the main nav-bar or the side-bar editable though. I want to be able to change the name of a side-bar link in the future and have all 40-50 web pages update together.

I've noticed that I can simply open the HTML file in notepad and add the 40-50 CSS tags individually, which is fine, but when I make a minor modification to the template, it resets the CSS tags. Is there a way that I can make the text non-editable but the HTML code editable??

I've tried nesting, which will work, but if I change the nav-bar text, the text is not updated on existing web pages.

Can this be done??

If you want to see an example of my existing site (with no templates used yet - I did not upload them. I am working on templates locally), you can visit http://www2.svsd.net/~hms/HMS_Web_Test (http://www2.svsd.net/~hms/HMS_Web_Test).

If you need more information, please let me know. Thank you.

domedia
11-18-2008, 07:44 PM
I don't think you can do that with the DW template system.
The way I do it is to dynamically add a CSS id to whatever the current link is on every page
<a id="current">Current Page</a>
and then style accordingly
- or -
Give each page an ID in the BODY tag, and then make sure every link in the nav have a seperate ID, then write the styles if they match:
<body id="about">
....
<a id="aboutLink">About Us</a>

CSS:
#about a#aboutLink {text-decoration: blink;}

You might be able to find an extension for this.
Surely someone must have been in this situation before with DW templates?

Corrosive
11-18-2008, 07:53 PM
Surely someone must have been in this situation before with DW templates?

Not sure this can be done I'm afraid.

enstrique
11-19-2008, 03:08 AM
Would I have to create CSS tags for over 40 individual "current" links? I can do that in the .css file if I have to. But, is there a way to make the <body> header an editable region using templates? I would like to change each page to be <body id="home"> etc... but if it is in the non-editable region, I don't have access to it.

Also, how does this relate to the submenus? Some pages have submenus which have their own "current" CSS tags applied to them.

I'm beginning to think that this is impossible to combine my CSS tags to Dreamweaver templates. I didn't want to have roll-over pop-up menus, nor do I have the technical expertise to make it a nice Flash menu either.

I'm just trying to lay down the solid foundation once, so when I make updates, I don't have to do it on 50 individual web pages.

I'll keep researching!

domedia
11-19-2008, 12:58 PM
What do you mean when you say 'CSS tags'. There is no such thing. You've got HTML which uses tags, and CSS rules.

enstrique
11-19-2008, 01:26 PM
I admit to being new to CSS. I've used HTML for a while, and my terminology may inter-change incorrectly. I apologize. I meant that I have CSS rules apply to individual HTML tags, but I cannot edit the template on individual pages.

I started a new thread (going in a different direction) here (http://www.dreamweaverclub.com/forum/showthread.php?t=29474). Perhaps this could be another solution (if there is an answer)?

domedia
11-19-2008, 02:01 PM
Would I have to create CSS tags for over 40 individual "current" links? You would have to make 40 CSS rules, yes. But, is there a way to make the <body> header an editable region using templates? I would like to change each page to be <body id="home"> etc... but if it is in the non-editable region, I don't have access to it Yes, you can make editable areas in your template anywhere you want to. Look in the help files for templates. .


Also, how does this relate to the submenus? Some pages have submenus which have their own "current" CSS tags applied to them.
Just repeat the approach with the sub menus

DWcourse
08-04-2009, 06:37 PM
I don't think you can do that with the DW template system.

Give each page an ID in the BODY tag, and then make sure every link in the nav have a seperate ID, then write the styles if they match:
<body id="about">
....
<a id="aboutLink">About Us</a>CSS:
#about a#aboutLink {text-decoration: blink;}You might be able to find an extension for this.
Surely someone must have been in this situation before with DW templates?

At least in CS4 (not sure about earlier versions) you can do it.


In the template (with the selection anywhere in an editable region) choose menu: Modify>Templates>Make Attribute Editable…
In the dialog, if ID isn't available in the Attribute menu, click the button to add it.
Check the Make Attribute Editable box.
Give the attribute a label that's easy to remember (bodyID for example).
Choose Text from the Type menu
Type in a default value for the attribute (you'll be changing this on each page - I chose "page")
Click OKTo set the body tag ID on an individual page:

Open the page.
Select menu: Modify>Template Properties…
In the dialog, select the attribute you want to change (bodyID).
Type in a new value for the attribute.
Click OK.This way you can have a different ID for every page and use the CSS method discussed to highlight the current page. BTW, you can also make image attributes editable (for instance, you can change the SRC of an image in a locked area on a page by page basis)