3 Replies Latest reply on May 21, 2010 2:21 PM by jxlusa

    Templates, links and 'here'...

    JN Cunliffe

      Hi All,

       

      I understand the benefits of using site templates to help improve maintainability so you only have to define the header, menu and footer once but change the 'content' on each page.  My questions is, if I use a template with my menu of links to other pages, is there a way to change a links appearance dependent on which page I browse to but still use a template for the menu.  To be clear I know how to do this in HTML/CSS coding each page individually but not if I use a Dreamweaver template.

       

      Thanks,

       

      Jon

        • 1. Re: Templates, links and 'here'...
          jxlusa Level 2

          There are many ways to do this. Here are two.


          1. If your menu html code does not have to change, just the styles that affect it's appearance:

          • put your menu inside another container (this could even be the body tag, but I'll use a container for just the menu for this example)

            <div id="topmenu" class="topmenuclass">
               <ul>
                  <li><a href="">menu link 1</a></li>
                   <li><a href="">menu link 2</a></li>
                   <li><a href="">menu link 3</a></li>
              </ul>
            </div>
          • In the template code view, place your cursor inside the topmenu opening div tag (in the tag itself, not just in the div).
            • go to Modify > Templates > Make Attribute Editable... (This is a different menu than Insert > Templates >   )
            • In the pop-up dialog choose "class" (or add it if there isn't one there already)
            • check the "make attribut editable checkbox
            • enter a "label that makes sense to you.. for instace, menuClass
            • leave the type as "Text"
            • enter a default value for the class. (in this case "default" might be a good choice.)
            • Your outer menu div will now have an id of "topmenu" and class that is editable in any page based on the template.
          • Make your default  menu styles in your stylesheet.
          • For other sections, define the styles with a more specific rule.
          • In the template itself, it's a good idea to add comments after the div that remind you what the possible classes are:
            • <div id="topmenu" class="topmenuclass"><!-- class should be either default, mySpecialClass, or section2class -->
          • Now, when you create a page based on that template, you can go to:
               Modify > Template Properties
            and change the value of "topmenuclass" to whatever is appropriate.

           

          Example

          /* default menu styles */

          #topmenu ul { background: #300;}

          #topmenu ul li { float: left;}

          #topmenu ul li a {color: #fff;)

           

          /* section 1 menu styles */

          #topmenu.mySpecialClass ul { background: #030;}

          /* since I don't want to change anything for the topmenu <li> tag I don't need to add it here */

          #topmenu.mySpecialClass ul li a {color: #09c;)

           

          /* section 2 menu styles */

          #topmenu.section2class ul { background: #003;}

          #topmenu.section2class ul li a {color: #c90;)


          2. If your menu HTML code needs to be different for each section of your site:

          • In your template, create your menu inside an Optional Region (Do NOT use Editable Optional Region)
            • Insert > Template Objects > Optional Region
            • give it a name that makes sense, like defaultTopMenu
            • leave the "default" checkbox checked.
          • Create each section menu inside another Optional Area
            • give it a name that makes sense, like sectionOneTopMenu
            • uncheck the "default" checkbox.
          • Now, when you create a page based on that template, you can go to:
                Modify > Template Properties
            and chose which optional region you want to have show on that page.
            Simply change the vale of the default menu Optional Region to "false" and the one you want to have show to "true" (there is a checkbox for this)
          • 2. Re: Templates, links and 'here'...
            JN Cunliffe Level 1

            Fantastic....  I'll give it a go.

             

            Thanks for a very clear and comprehensive answer, much appreciated.

             

            Jonathan

            • 3. Re: Templates, links and 'here'...
              jxlusa Level 2

              My pleasure.

               

              Also signed,

              Jonathan