2 Replies Latest reply on Mar 29, 2010 1:08 AM by dave_kenyon

    Navigation bars, down-states and and templates




      I'm having a few problems creating my very first site (only 3 pages!).


      I've set up a page, using CSS, with all the divs for all the sections that I require (header, horizontal nav, main and footer).  I've created a navigation bar with 3 buttons to navigate to the 3 pages.  I've given each button 3 states: up, over and down to indicate the current page.


      I created a template with just a single editable region (main) and applied it to my 3 pages.  The menus function correctly, however, I was unable to edit the navigation bar on these pages in order to change which button was in the down state.


      My next attempt involved creating the menu and then saving it as a library item.  I then created a template with 2 editable regions: one for the main content and another for the navigation bar.  I can paste the library navigation bar into the sheets created with the template but, once again, I can't change which button is in the down state.  I've read that this is because it involves changing the code which is locked elsewhere in the template.  (Incidentally, when I paste in the buttons they don't have their orginal spacing from one another - is there any way to preserve this when using library items?)


      With the time I've spent on this I could quite easily have built 3 individual navigation bars but that's not the point; I need to learn from the experience for when I try a bigger site.


      My question is this:   how do I create pages using a self-designed template, with a navigation bar on each page indicating a different button in its down state?



        • 1. Re: Navigation bars, down-states and and templates
          Nancy OShea Adobe Community Professional & MVP

          Templates are a little tricky.  You can't edit just anything on a Template spawned page unless it is inside an Editable Region.


          Button rollover states or Behaviors rely on JavaScript code inside the <head> and </head> tags of your primary document (DWT file).


          If your <head> tags are inside a non-editable region, DW can't edit that code for you. This may be why you are having trouble changing button states on child pages.


          In your DW Template (DWT file), add editable regions to your <head> tags.  Save Template.



          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists

          • 2. Re: Navigation bars, down-states and and templates
            dave_kenyon Level 1

            Hi Nancy


            Thanks for that but it's a little over my head at this stage.


            As an example, I've made up a small page and created a template from it (code below).  The page has 3 windows, one of which is designated an editable region and contains a navigation bar.  As you suggest, I need to add editable region tags to the <head>.  Could you indicate exactly where I should apply these?






            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <!-- TemplateBeginEditable name="doctitle" -->
            <title>Untitled Document</title>
            <!-- TemplateEndEditable -->
            <style type="text/css">
            #container {
            height: 500px;
            width: 500px;
            .window {
            height: 150px;
            width: 400px;
            <script type="text/javascript">
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;

            function MM_nbGroup(event, grpName) { //v6.0
              var i,img,nbArr,args=MM_nbGroup.arguments;
              if (event == "init" && args.length > 2) {
                if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
                  img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
                  if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
                  nbArr[nbArr.length] = img;
                  for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                    if (!img.MM_up) img.MM_up = img.src;
                    img.src = img.MM_dn = args[i+1];
                    nbArr[nbArr.length] = img;
                } }
              } else if (event == "over") {
                document.MM_nbOver = nbArr = new Array();
                for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
                  if (!img.MM_up) img.MM_up = img.src;
                  img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
                  nbArr[nbArr.length] = img;
              } else if (event == "out" ) {
                for (i=0; i < document.MM_nbOver.length; i++) {
                  img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
              } else if (event == "down") {
                nbArr = document[grpName];
                if (nbArr)
                  for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
                document[grpName] = nbArr = new Array();
                for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                  if (!img.MM_up) img.MM_up = img.src;
                  img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
                  nbArr[nbArr.length] = img;
              } }
            <!-- TemplateBeginEditable name="head" -->
            <!-- TemplateEndEditable -->

            <body onload="MM_preloadImages('../www/images/home_btn_up.jpg','../www/images/home_btn_over.jpg ','../www/images/ireland_btn_down.jpg','../www/images/ireland_btn_over.jpg')">
            <div id="container"><!-- TemplateBeginEditable name="EditRegion1" -->
              <div class="window"><!-- #BeginLibraryItem "/Library/nav2.lbi" --><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn1','../www/images/home_btn_down.jpg',1)" onmouseover="MM_nbGroup('over','btn1','../www/images/home_btn_over.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="../www/images/home_btn_down.jpg" alt="" name="btn1" width="70" height="30" border="0" id="btn1" onload="MM_nbGroup('init','group1','btn1','../www/images/home_btn_up.jpg',1)" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn2','../www/images/ireland_btn_down.jpg',1)" onmouseover="MM_nbGroup('over','btn2','../www/images/ireland_btn_over.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="../www/images/ireland_btn_up.jpg" alt="" name="btn2" width="88" height="30" border="0" id="btn2" onload="" /></a><!-- #EndLibraryItem --></div>
            <!-- TemplateEndEditable -->
              <div class="window">Content for  class "window" Goes Here</div>
              <div class="window">Content for  class "window" Goes Here</div>