FM wanted me to modify the components prototype so that each "tab" had a different color, tab mouseover/selected color change effect, and border around the content matching the selected tab's color. I had to make some modifications to the template to simplify the implementation. In the original the tabs were put in an editable region, which makes a mass change like this the same as if no template were used. I moved the tabs back to the templated region, removed some excess table code, and put the content in a div tag so that I could give it a border. I had originally thought of using template properties to select which tab should be selected, but I decided that it would be just as easy to use JS to do the job. I set up a script that checks the URL on page load and selects a tab based on the results of a search(). The "selected" state of the appropriate tab is set using the same Macromedia function that's used by the Dreamweaver "Navigation Bar" code. I modify the class of the div containing the content for the content border.
I'm using a dark shade for the mouseout state of tabs that are not selected. For tabs that are selected and for the mouseover state I'm using a light shade. This is the style we've used in past navigation. Looking at the result, however, I think I may have to change this. The non-selected tabs are too prominent, especially compared to the lighter shade used for the selected tab. I suspect this has to do with the fact that a different color is used for each tab. Taking this into consideration, I think it would work better to use a washed out color for the "unselected" state and a more saturated color for the "selected" state.
Update 2005-05-19:
Changed the color scheme as indcated above. I think it definitely looks better. The images could probably be even more washed out than they are now, but I'll wait for feedback.
