15 Replies Latest reply on May 17, 2010 12:21 PM by Zabeth69

    Attempting Nested Template unsuccessfully CS4

    itsnotalwayseasy

      I created a page with a header and footer with the 1 col. fixed header and footer layout and later saved it as a template after I got the page designed like I wanted it. I had put a Spry Menu Bar in the header region and made the main content div editable after setting up the template. Creating child pages from this template went very smoothly. Then, I decided to add a secondary navigation bar on the side for a second set of pages on the site after reading McFarland's DW CS4 Missing Manual (p. 755). He gave this very example as a good time to use nested templates. I created a new template (the nested template) out of the the original template and added a div tag in the main content div area (the only editable area), then placed a new Spry Menu Bar in the div tag. I added the div tag as a compound selector, naming it .oneColFixCtrHdr #sidebar.

       

      Everything went smooth, except for one (expected, I guess) hitch. Being in an editable region, the sidebar menu was editable as well, and I wanted any future changes to the sidebar of the nested template to reflect down to the child pages. So, I followed McFarland's lead and inserted an empty editable region in the sidebar div to overcome this. That didn't work as he claimed it would. Although changes made in the sidebar were now reflected to the child pages, the main content div was no longer editbable in those child pages. I attempted a creative work-around by trying to temporarily insert an empty editable region in the sidebar div to make changes to the sidebar that would carry down to the child pages; then after making those changes, delete the empty editable region I'd just inserted, so that the main content div would resume its editibility in the child pages. That worked, except for one serious hitch -when changes were made to the menu in the nested template sidebar (with the empty editable region inserted), the content in the main content div of the nested template is transferred to the child pages as well -losing whatever content had previously existed in the child pages.That won't work!

       

      I wonder if originally the sidebar should have been set-up in the main template as a separate region from the main content div. But, I didn't want a sidebar in the original template, so that seems to complicate matters.

       

      I also wonder if what I'm trying to do couldn't have been achieved by setting up the sidebar as an optional region in the main template instead of trying to achieve this with a nested template (haven't ever tried optional regions, so I don't know). I'm not too deep into the design, so I'm willing to go whatever direction to get the best results possible, even if I have to backtrack a little. I've spent a lot of hours trying to figure this out, and it has me baffled. It's all part of the learning process, I guess...

        • 1. Re: Attempting Nested Template unsuccessfully CS4
          Zabeth69 Level 5

          Welcome to the Dreamweaver Forum! I see that this is your first post.

           

          I appreciate your thorough commentary. If you have a link to your page, we can look at the code with you.

           

          Take a look at what McFarland says about "optional Regions" and "optional editable regions." You might be able to 'get away' with one Template if you use optional regions...Here's a site I used only one template on, but got totally different 'looks' through repositioning elements through CSS: http://www.worldviewpoints.com/

           

          Also, there is a code you can add to the "begin" code on a nested template region to lock it in child pages. Sorry but I don't have it at my fingertips, but I can probably scare it up tomorrow (it's half past midnight now and I've turned into a pumpkin...).

           

          Beth

          1 person found this helpful
          • 2. Re: Attempting Nested Template unsuccessfully CS4
            itsnotalwayseasy Level 1

            Beth, Thanks for the prompt, thoughtful response. Yes, that was my first post, and I am new (obviously to DW) and web site building.

             

            The past 2 days, I have experimented a lot. I now don't think it's possible to do what I want with nested templates -because things don't work out well at all when inserting a div tag into an editable region of a nested template. I wonder if the issues I (and apparently others) are experiencing with nested templates is due to limitations in the program itself. I also then tried inserting a div tag (sidebar) in the original template and sizing it down for main template (since I didn't need it there), then resizing it (bringing it to life) in the nested template. That got very, very messy, so I finally abandoned it and took your suggestion and started experimenting with an Optional Region. I wish McFarland in the Missing Manual would have been more specific when he claimed how an optional sidebar was a perfect candidate for nested templates.Overall, I found his book quite detailed and to the point, but he definitely missed the mark here.

             

            Creating an Optional Region has been no cakewalk. I've spent the past two days monkeying around with this, and finally got it working well, but still with a few quirks. And I'm convinced that the Spry Menu has some bugs in it, especially when used in conjunction with Templates, and esp. with the Optional Region. After I create a new child page that doesn't use an Optional Region, and after I tell it not to use the Optional Region (which contains a vertical Spry Menu), I get the following annoying message:


            This document contains JavaScript code for a widget that no longer exists. If you don't remove the code, the browser might display JavaScript errors when loading the page. Would you like Dreamweaver to find all instances of the code for you? Widget:var MenuBar2 = new Spry.Widget.MenuBar("RecipeMenu", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

             

            This, I assume, is referring to the blue tab on the Spry Widget Bar. This would be the spry menu bar that is placed in the optional region. I don't know how a person would go about removing this code, as its in a locked region. Removing it from the template would also remove it from child pages where the menu actually did occur. Even if I could remove the code on the child pages, that doesn't seem like a good way to spend a person's time, and doesn't make it too user-friendly. So, I just ignore this message, which incidentally appears everytime I open a page that does not have this optional region. Perhaps its something I've done incorrectly, but searching the Adobe archives, others appear to have gotten this same annoying message.

             

            Another irritating quirk is this: In the template, and on pages with the optional region menu (which is located in a sidebar div), in the design view, the optional sidebar with spry menu moves from the left to the right side of the page (not quite all the way to the margin). It didn't start behaving this way until the Optional Region was applied to the sidebar. I can control it with View -- Visual Aides -- Invisible Elements (turning them off), and it does show up correctly in Live View and in a browser. I have even set up a shortcut key for Invisible Elements, as I find myself having to go back and forth a lot.

             

            And finally, my template is not automatically saving the child pages when changes are made to uneditable regions or to links in the template. I've finally learned, after much irritation, the only way to update the child pages is to go Modify -- Templates -- Updates. That works, but can't for the life of me figure out why the child pages aren't updating on their own. When I created the child pages I made sure the "Update page when Template changes" box was checked. I was also extremely careful when I created the template that I did it properly and "Saved as Template" every time. The reason I was being so careful, is because this is now the 3rd time I've gone through the steps of creating the site, and creating the template. I am at the point where I've done all I can do, trying to follow the instructions carefully, yet I still get these quirky things happening. Fortunately, I do have it working, and I'm just going to learn to live with the quirks.

             

            While DW is a powerful program, I also think Adobe could do a lot more to make things bug free, and make the process more idiot proof, especially when working with templates and Spry.

            • 3. Re: Attempting Nested Template unsuccessfully CS4
              Zabeth69 Level 5

              I fully understand your trials and tribulations with Templates. I've gotten pretty fluent with them, over the years, but I remember the obstacles and frustrations of my first days with them!

               

              It's easy to think that problems are due to the limitations of the program. They usually are not. Although the program is very picky (a help, to be sure, to building good code), it is not particularly buggy when it comes to Templates.

               

              The usual difficulty is in our fully understanding of how Templates work. If you run through McFarland's Templates tutorial a couple of times, some things will come clear. (I have to say that I'm pretty sick of Chia Pet by now, though, and look forward to seeing his new edition...)

               

              Spry Menu Bars are not buggy, just tricky. I would not use them in optional regions at all, because menubars need that bit of javascript at the bottom of the page and you will always get that error that you mention. They are, however, perfect for nested templates. Take a look at http://www.atonementfriars.org/index.html for instance. I used a basic template that carried the basic background and the top menus. I also had a nested template that was built from a basic page that controls the index page, and a nested template for each "department" index page (one each for the top menu items) so I could have a contextual menu on the left sidebar for each department. So learning to use nested templates is a big plus to your toolkit.

               

              It helps to remember the protocol:

              1. Create your basic template...these elements will show on every page, unless they are "optional" elements
              2. Cast a child page from your basic template
              3. Style this page with elements you want on specific portions of your site, but not all pages
              4. Save this page as a Template and create new editable regions
              5. Protect "flow through" areas with code, if you don't want them editable downstream
              6. Cast child pages from your nested template

               

              Another strategy for using a single template with a menu bar that you don't want on every page: put the menubar into a div that you give NO dimension to at all in the page you want to hide it on, or "indent" the entire div offscreen 1,000 ems to the left. Haven't actually tried that, but I have 'moved' a sidebar around through CSS. Here's a site that I used only ONE template on, even though the home page and inner pages look pretty different: http://www.worldviewpoints.com/

               

              Keep in mind that the Design View has to allow for all those "construction zone" tags and tabs and icons, as well as extra dashed lines to show where CSS elements and table elements, etc., are. It will never look exactly like your Live View and your Browser View. As long as the Browser looks good, you're golden. You just have to get used to things hopping around a little sometimes, if you're using Visual Aids.

               

              Child pages, especially grandchildren (!) pages of your original, main template, should update in the background if they are not open in your Document WIndow.

               

              But, when I update my main template for the website I mentioned earlier, I save the template. This updates the nested templates. If I have pages open besides the Template, I have to save them, too. It never hurts to open a nested template and do Modify > Templates > Update Pages, just to be sure.

               

              Don't forget to upload all the updated pages...templates included...after you have made a template change, because the templates are made for creating the pages and controlling/protecting areas in downstream editing but they do not...on their own...update pages just by being there.

               

              There is kind of a learning curve with Templates and with Spry. But most of those quirks you mention ARE in the service of making the process more 'idiot proof' as you put it, they are not bugs at all.

               

              Beth

              • 4. Re: Attempting Nested Template unsuccessfully CS4
                itsnotalwayseasy Level 1

                Beth,

                 

                Your kind, detailed response was welcomed and much appreciated. And I appreciate your opinion that DW can be kind of "picky," I still think it can also be a little buggy -I guess its just a matter of perspective. For instance, the error message:

                 

                This document contains JavaScript code for a widget that no longer  exists. If you don't remove the code, the browser might display  JavaScript errors when loading the page. Would you like Dreamweaver to  find all instances of the code for you? Widget:var MenuBar2 = new  Spry.Widget.MenuBar("RecipeMenu",  {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

                 

                can surely be avoided by DW programers. I am having a hard time imagining this message appearing everytime a file is opened is not a bug (they could at least provide a checkbox "do not show this message again."). It just seems like this bug, or whatever you want to call it, would be an easy fix for DW programers. Also, keep in mind, in my first message, I was having difficulties after inserting a spry menu in a sidebar div using nested templates. Then, you suggested I give Optional Regions a try to achieve what I wanted. So, I did, and ran into a little messiness. In your last message, you said spry menu bars are perfect for nested templates .

                 

                Well, the Optional Regions are actually working -and despite the little issues I'm having, I'm able to work around them with satisfactory results. The template is set up, and now the development of the individual pages is going well.

                 

                This morning, an idea suddenly came to me. I know very little about JavaScript (and am brand new to templates, Optional Regions, etc.), but thought of this: Why not make the code that is causing the JavaScript problem editable from the master template, then remove the code from the applicable child pages? So, I gave this a test run today, adding the beginning and ending "Editable" commands (highlighted in Bold) to the following:

                 

                <!-- TemplateBeginEditable name="script" -->

                <script type="text/javascript">

                <!--

                var MenuBar1 = new Spry.Widget.MenuBar("HeaderBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

                var MenuBar2 = new Spry.Widget.MenuBar("RecipeMenu", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

                //-->

                </script>

                <!-- TemplateEndEditable -->

                 

                Then, after saving the template and updating the child pages, I went to the one of the desired child pages and removed the "var MenuBar2" line. After saving the child page and closing it, when I opened it back up, I didn't get the error message. So, did I do this correctly? If so, I will go back and do this to all affected child pages to stop the annoying message from coming up everytime I open the file.

                 

                Thank!

                 

                -Steve

                 

                ps I looked at your site http://www.atonementfriars.org/index.html.

                Very nice work. Looks extremely professional. How long have you been doing web development and how long have you been using DW (I'm hoping you say, "not very long," which will give me some encouragement!

                • 5. Re: Attempting Nested Template unsuccessfully CS4
                  Zabeth69 Level 5

                  Hiya, Steve,

                   

                  Thanks for the kudos. I have enjoyed working on the Atonement Friars site...it was just launched...partly because I learned a lot about Spry and other widgets while doing so. I'm an 'earn while you learn' kind of person...I'm happy to investigate things/widgets/techniques, but it's even more fun if it's on a real job.

                   

                  In truth, the message about Javascript code for a widget that no longer exists is not an error message. It is a warning that Javascript will go nuts if it tries to construct the widget and the widget is not there. Believe me, it's true. But if you allow DW to find the line for you (say yes...), it will show you in the Results panel where it is; double click it there, it will highlight the line for you and you can simply press the Delete key. Bingo, it's gone.

                   

                  If your Spry widget were installed in the Ineditable Regions of your Template, I believe that your bottom of the page Javascript would have been, as well, and removing both from the Template would also remove it (through updating the pages) from all the child pages on which it had been installed by the Template.

                   

                  Well, you could do it by creating Editable Regions and then going to each child page and deleting it, but why not just delete it on the Template and have the change cascade through the child pages, propagating naturally? Change the Template, Save it, Update the child pages, and it should be gone.

                   

                  I've been doing web development as full time as one can as a freelancer starting out for a couple of years. I also teach Dreamweaver at the local Adult Education in the Public School System. I've been doing it on the side and working towards it for maybe 10 years (was there a web that long ago?), and I was partner in a computer typesetting concern in Boston for 12 years (20 years ago...). Oh, yes, there was a lot of desktop publishing in there, too.

                   

                  But my first foray into Dreamweaver was as a rank amateur, and figuring it all out myself while developing a site from someone else's foundation. That was good learning; she had structured the site well and though I have moved beyond where she was at the time, I much appreciated the 'leg up'. As time goes on, less and less needs to be hand coded...as she had done...but that does not mean there is less to know and understand.

                   

                  Beth

                  • 6. Re: Attempting Nested Template unsuccessfully CS4
                    itsnotalwayseasy Level 1

                    Beth,

                     

                    Thanks again for the great response. You are an excellent communicator. Now, lets make sure we're on the same page.

                     

                     

                    ...But if you allow DW to find the line for you (say yes...), it will show  you in the Results panel where it is; double click it there, it will  highlight the line for you and you can simply press the Delete key.  Bingo, it's gone...

                     

                    Yes, it is true that the Results panel will find the line and highlight it when its double clicked. However, before I created the Editable Regions in the template today, the Spry code was not editable in the child pages. Only now that I've created the Editable Regions in the template can I go ahead and delete this line in the child pages.

                     

                    ...If your Spry widget were installed in the Ineditable Regions of your  Template, I believe that your bottom of the page Javascript would have  been, as well, and removing both from the Template would also remove it  (through updating the pages) from all the child pages on which it had  been installed by the Template.

                     

                    Well, you could do it by creating Editable  Regions and then going to each child page and deleting it, but why not  just delete it on the Template and have the change cascade through the  child pages, propagating naturally? Change the Template, Save it, Update  the child pages, and it should be gone...

                     

                    I have 2 spry menu bars; a horizontal one in the header and a vertical one in a sidebar. The one in the header, MenuBar1, goes to all child pages. The sidebar that contains Spry MenuBar2 has been assigned as an Optional Region and is only displayed on 10 child pages in the site (accomplished by checking "show optional sidebar" on those 10 pages). On these 10 pages, I am not getting the warning message. I am only getting the warning message on the 17 other pages in the site that don't utilize the Optional Region.  Correct me if I'm mistaken, but if I were to delete the code, "Widget:var MenuBar2 = new  Spry.Widget.MenuBar("RecipeMenu",   {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});" from the template, then the code would not be available in the other 10 pages where the Srpy vertical menu bar is utilized.  I'm not 100% sure exactly what the code even does, and if its a necessity on those 10 pages. But if it is, I don't think it would be advisable to delete it from the template. If it is not necessary on those 10 pages, why not just go ahead and delete both codes for MenuBar1 and MenuBar2 on the template page and be done with it? And if the code is not necessary on the 10 pages, might it still be necessary to remain in the template? Again, my lack of understanding of this code's purpose isn't helpful.

                     

                    Thanks again!

                     

                    Steve

                     

                    ps on the Attonement Friars web site, did you do everything solo, or do you have others working on it with you?

                     


                    • 7. Re: Attempting Nested Template unsuccessfully CS4
                      Zabeth69 Level 5

                      Oh, you're right. You had put some of the menus in optional regions. Well, why not put the javascript at the bottom of the page also in optional regions? Then you can turn them both off when you don't need them and on when you do need them.

                       

                      That way, the javascript will not show or cause warnings because it will not be there!

                       

                      Regarding how the var code at the bottom of the page works with the menu bars, remember that there is a javascript file also linked that is the real engine behind the functioning of the menu bar. And you can also notice, especially on the pages where you have two menu bars, that each variable set at the bottom of the page is unique. If I read and understood Javascript a bit better, I could be more specific, but suffice to say that those variable assignments at the bottom of the page as much as say to the javascript file, "see that MenuBar1 up there? Make it work for me.... And see MenuBar2 up there? make that work, too."

                       

                      For Atonement Friars, my liaison is the Director of Internet Communications at Graymoor. He hired out the artwork to an artist in NY. Then he hired me to make the Spry MenuBar work (in all kinds of weather...so to speak). We got along well, and he decided that he would rather hand all the coding over to me. But we worked very closely together...he knew what he wanted ultimately, and I knew how to get there. When either of us was trying something new, we conferred and came up with the best result.

                       

                      Now I'm writing a description of how the site functions (for his use and for that "in case of one of us getting hit by a bus" possibility...we hope it never comes to that!) The interesting part of the work relationship is that I never met the gentleman face to face until after the site was launched, and we worked on it for 9 months.

                       

                      Ah, modern life!

                       

                      Beth

                      • 8. Re: Attempting Nested Template unsuccessfully CS4
                        itsnotalwayseasy Level 1

                        "Well, why not put the javascript at the bottom of the page also in  optional regions? Then you can turn them both off when you don't need  them and on when you do need them."

                         

                        My question for DW would be, why didn't the program put this part of the javascript in optional regions to begin with? I followed your lead, but wasn't able to figure out how to do it, as the only way I could see to even attempt it was working in the code, and that went nowhere. So, I finally went back to my idea of identying the javascipt at the bottom in an editable region in the template (as that much I was able to figure out). Then, I deleted the unwanted Javascript from the 17 pages (took all of about 5 minutes), and I am done with it. Wehhh! Finally, done with that! Now, lets MOVE ON!

                         

                        But not so fast, I've got another issue concerning the cache. Since that is a new topic, I will place a fresh post.

                         

                        Thanks again for all your kind assistance!

                         

                        Steve

                        • 9. Re: Attempting Nested Template unsuccessfully CS4
                          Zabeth69 Level 5

                          But you said you put menu bars in optional regions. It was the javascript that went to those menu bars that you should also put in optional regions. Not all the javascript. Something will break!

                           

                          I dunno. I don't put menubars in optional regions, but I also don't get javascript warnings from turning off optional regions that contain menubars

                           

                          Just trying to make things symmetrical and non-alarming.

                           

                          Best,

                          Beth

                          • 10. Re: Attempting Nested Template unsuccessfully CS4
                            itsnotalwayseasy Level 1

                            Yes, I did put a spry menu bar in an optional region (as per your suggestion in your first reply to my original post) .

                            But, now everything is running smooth enough to where I can say it did work, but not without a few hitches.

                             

                            To clarify, you had suggested I put the spry code "Widget:var MenuBar2 = new  Spry.Widget.MenuBar("RecipeMenu",    {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});" that went with the spry menu bar I placed in the optional region in an optional region. It is listed below the "Widget:var MenuBar1..." that does not go in an optional region. So, yes, I understood I needed to place the second spry message in an optional region, not the first. I tried several attempts at editing the code to accomplish this, and it was getting me into serious trouble (just not working). I understand, this is due to my lack of ability to confidently write code at this point (I've been using DW/CSS, etc. for all of 2 months now).

                             

                            So, is there anything wrong with having done what I finally did -to write the spry code

                            "Widget:var MenuBar2  = newSpry.Widget.MenuBar("RecipeMenu",    {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif" as editable, then go to the child pages where the optional menu bar is not being used and delete this message from the code? It worked, and I don't get the error message any more. (I don't want to blow anything up!!)

                             

                            And finally, I don't want to pound this point in the ground, but I'm just trying to get this all clear in my mind: When placing the spry menu bar in an optional region, it seems like DW should have automatically deleted the second unneeded code  "Widget:var MenuBar2 = new  Spry.Widget.MenuBar("RecipeMenu",    {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});" from the child pages when they were created and I assigned the optional sidebar a value of FALSE. Dreamweaver does pop up a message at that point, asking if I would like DW to remove all instances of this code for me. Before I set that up that code up as editable, there was no way (that I could figure out) to delete it. But, once I did assign the code for the second menu bar, as I finally figured out, as editable, then when I create a new page from the template, and the message comes up asking if DW would like to find all instances of the code to delete, the code IS now editable, and it can be deleted. As you say, setting the code up (for the second, optional menu bar, not the first) for the spry message at the end, should work, I just couldn't figure out how to make it work with my limited abilities.

                             

                            And again, thanks for your time that you contribute to help us newbies try to make sense of things in what sometimes looks to us like a rather strange and unknown world. At this point, I have absolutely no alligiance to Adobe, so maybe I can say things like, "it seems like a bug in Dreamweaver. And others might think, "this guy doesn't know what the hell he's talking about, if anybody's got bugs, it's him!" The latter could just as easily be true. But, I try my best to follow every instruction I can find to the letter and when things go kind of haywire, it's sometimes easiest to point the finger at Adobe! And especially when I go through and set up a website for the THIRD time, just trying to get things right.

                             

                            Steve

                            • 11. Re: Attempting Nested Template unsuccessfully CS4
                              Zabeth69 Level 5

                              Hiya, Steve, you're a champ to stick with me on this!

                               

                              If you see the <script> </script> tags at the bottom of the page, it should be surrounding both/all script var code. It is perfectly legal to split that up, if you have more than one widget happening. Just add </script> <script> between the two widget scripts to separate them (end one and start the next) and make two entities of them. Then you can surround the optional one with optional coding. (you get it, eh? the code for an optional region...)

                               

                              The only problem with making the script code editable and deleting it from the pages you don't want it on is that you then have to ADD it to the pages that you DO want it on. Dreamweaver does not try to keep track of all the salient bits of javascript Spry widgets in order to make sure they are all there throughout development. It puts them there at the beginning (if you accept them, and it's helpful if you do!) of inserting the widget. Then you have to keep them safe through your working with the file. I don't think it matters so much whether the link to the CSS file and the JS file get optioned out...they are only links, and not scripts. So you can leave them in the head of all your documents.

                               

                              Naw, I don't go around thinking people have bugs, but it is a traditional statement (made by support personnel generally) that the most likely cause of tech problems is "operator error." I don't buy it, of course, having been a beta tester for electronic typesetting equipment. The best beta testers are diligent users...of equipment and of software. Best believe them and work through the perceived difficulty. Sometimes it IS the software or the hardware; sometimes it IS the user.

                               

                              My philosophy is to try to understand as much as possible about how something works...software or hardware...or better yet, how it should work or was supposed to work. Then I go from there.

                               

                              I personally find Adobe's software terrific. And no engineer or software designer or user is perfect, so I roll with it. If there's a safe workaround when I find a glitch, I use it. I'll report it, too, but I don't stamp my foot and insist that others be more perfect than me in their creation of tools. When I was partner in a typesetting concern, we had a minor uprising among our proofreaders once, who claimed that we all (markup, typesetters, QC, etc.) thought we could make typos and mistakes with abandon, expecting the proofreaders to find and mark them all. Wake up call. We then started requiring people to check their own work FIRST and run revisions BEFORE the proofreaders were entrusted with it. That was a really good call.

                               

                              The best software is supported by the best tutorials and the best help documentation. We Community Help Moderators are on the front lines, mediating between occasionally frustrated or confused users and the documentation team. We do what we can; we trust that you as a user do what you can; we also trust that documentation listens to us. I think they do; we have a good group.

                               

                              You know, I think that it is BECAUSE Adobe software is so good that people get impatient with it from time to time. Just a thought.

                               

                              Third time's the charm, though, you know!

                               

                              Beth

                              • 12. Re: Attempting Nested Template unsuccessfully CS4
                                itsnotalwayseasy Level 1

                                Beth, I'm amazed you're sticking with me on this one!!

                                 

                                 

                                If you see the <script> </script> tags at the bottom of the  page, it should be surrounding both/all script var code. It is perfectly  legal to split that up, if you have more than one widget happening.  Just add </script> <script> between the two widget scripts  to separate them (end one and start the next) and make two entities of  them.

                                 

                                Actually, I did try that, and still got messed up. And truthfully, I began to get worried, thinking about the disasters that could occur when messing with templates, so I calmly backed down and went with a fix I thought I could handle.

                                 

                                The only problem with making the script code editable and deleting it  from the pages you don't want it on is that you then have to ADD it to  the pages that you DO want it on.

                                 

                                I haven't seemed to run into that problem. The code is there until I delete it on the individual child pages, and I have never had to add it on others. I've experimented by creating new pages, etc., and the code is always there. At any rate, my little "fix" is working so far, so we'll keep our fingers crossed...

                                 

                                Now, back to the issue of the JS warning message I was getting with the spry widget in the optional region. This is still bugging me, because either I'm a bug, or DW has a bug. So, I went back and did a very simple test site, and went through each step carfefully (without any formatting), to see if the issue duplicated itself again. And, sure enough, it did! So, if you wouldn't care to go through these steps -it should only take 5 or 10 minutes, and see if you get the same results (I'm in CS4, if you're using CS5, you might get different results). Plus, if you see I'm doing anything major wrong here, you can correct me (then I'M the bug). If not, and it does the same thing for you, then maybe there is a DW bug, and it needs to be reported. So, here goes (step by step):

                                 

                                1) Define a new site

                                2) File - New - Blank Page -2 col. fixed, left sidebar, header & footer - create

                                3) Save document as practice.html

                                4) Insert Horizontal Spry Menu Bar in Header

                                5) Insert Vertical Spry Menu Bar in Sidebar

                                6) Save file

                                7) Save file as Template -name it templatepractice -update links -yes

                                8) Select div#maincontent - Insert Template Objects - Editable Region - o.k.

                                9) Select div#sidebar1 - Insert Optional Region - o.k.

                                10) Save as template and close file

                                11) File - New - Page from Template -select "templatepractice" -check update page when template changes - create

                                12) Modify Template Properties - uncheck show optionalregion1 - o.k.

                                13) Warning message appears: "This document contains JavaScript Code for a widget that no longer exists..." It asks to find all instances of the code for removal - check yes - double click one of the instances, and you'll discover the code IS NOT EDITABLE!! (Careful, MAJOR Irritation sets in!!)

                                 

                                Do you get the same results as I do (except maybe without all the emotion)? Did I do this correctly? I know now you personally don't normally insert JS menu bars in optional regions, but if that is not an acceptable practice, why wouldn't DW give a warning message before allowing a user to do so?

                                 

                                Also, I'm having other issues the same as before when I created this practice site -when I make a change to my template, it does not automatically update the child pages when I save it and close it. However, I just discovered a few minutes ago, by accident, when I shrink DW down after making the changes and saving the template (as a template), and bring it back, voila! -the "update files" box mysteriously appears! That's the only way I can get the automatic update done -to shrink DW and bring it back -weird!

                                 

                                (update on this after posting -I corrected my site cache issue -see separate post, and though it didn't correct the problem of template changes not updating automatically, now when I shrink DW and open it back up, the "update files" box does not appear as it did before -- double weird!!)

                                 

                                (Deleted this paragraph as it no longer applies).

                                 

                                My goodness, I thought we were done with this thread three times already! And this was the longest post yet! I'll shut up!!!

                                 

                                and once again, THANK YOU, THANK YOU, THANK YOU!!!

                                 

                                Steve

                                 

                                Message was edited by: itsnotalwayseasy -edits noted in message in next to last paragraphs at end...

                                • 13. Re: Attempting Nested Template unsuccessfully CS4
                                  Zabeth69 Level 5

                                  Two points (as I work through your protocol):

                                  1. Are you making the ENTIRE #mainContent div editable (including the tags) or just the contents of it? I'd choose only the contents, not the tags.
                                  2. Are you making the ENTIRE #sidebar1 div optional (including the div tags) or just the menu? This one is up to you. If you leave the sidebar and simply make the menubar optional, your format will be more consistent across your pages (room for content there).
                                  3. Are you again doing "Save as Template" in #10 or are you simply saving the Template you have just made (in #7)? I simply "saved"...no need to re-save as template...it remembers what file type it is and where it is saved.
                                  4. Be careful with the code at the bottom of the page (ouch! it's hot!)

                                   

                                  Okay, here is what I did at the bottom of the page, and it works well:

                                   

                                    <!-- end #footer --></div>

                                  <!-- end #container --></div>

                                  <script type="text/javascript">

                                  <!--

                                  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                  //-->

                                  </script>

                                  <!-- TemplateBeginIf cond="OptionalRegion2" -->

                                  <script type="text/javascript">

                                  <!--

                                  var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                  //-->

                                  </script>

                                  <!-- TemplateEndIf -->

                                  </body>

                                  Because the Insert > Template Object > Optional Region does not appear to (on its own) recognize the script area that I selected (see bold) for my second optional area, I had to MOVE the end of the optional area code to below the script's end tag. See Bold Italic Green. I had also duplicated the original close/open script sequence (which was, as it turned out, more than simply </script><script>).

                                   

                                  I don't know much about your mysterious shrinking DW-updating-child-pages feature. Your doing that obviously triggers something.

                                   

                                  But I hope this technique (above) gives you more peace of mind than Templates have so far given you. They are a great tool once you get them to obey your wishes!

                                   

                                  Beth

                                  • 14. Re: Attempting Nested Template unsuccessfully CS4
                                    itsnotalwayseasy Level 1

                                    I think you may have potentially helped solve a combination of issues. I'm glad I posted that example, so you could see what I was doing step by step. We seem to have accomplished more here than through this entire thread. Thanks for working through this with me.

                                     

                                    To address your points: 1) yes I was making the ENTIRE #mainContent div editable, 2) Yes, I made the ENTIRE #sidebar1 div optional (including the div tags).  -you can see my code at the end of this message for these two items. 3) Yes, I was saving again as template. I had read somewhere (or thought I had read somewhere) to always save as a template, after I had run into the problem of not being able to edit the title in child pages of the template when I was starting to use templates. Since then, I've always saved as a template and never had that problem again. NOW, I am relieved to see you don't have to save as a template every time. Furthermore, when I just save it (not as a template), I now get the box pull up to save the child pages. So, the mystery of why my template was not automatically udating the child pages upon saved is now solved!

                                     

                                    I pasted the code you wrote, in my practice template, and it worked fine. I'm wondering if I should go ahead and put that into my working project (as you say -ouch, it's hot!) I don't want to mess anything up, so guess I should first copy my working folder to another location on the hard drive as a backup (always try to do that anyway -never can be too careful!) Incidentally, when I had tried to orginally edit this spry code, what I had done was very similar -I had obviously messed something up, because it didn't work. Now that you've got it all figured out, why don't you send this to DW programmers and ask them to have the program automatically insert the code when placing a spry menu bar in an optional region? Then, it can become a no-brainer for dummies like me!

                                     

                                    Back to items #2 and #3:

                                     

                                    This is what I have for the main content:

                                     

                                     

                                     

                                     

                                    <!-- TemplateBeginEditable name="EditRegion1" -->

                                      <div id="mainContent">

                                        <h1> Main Content </h1>

                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>

                                        <!-- end #mainContent -->

                                      </div>

                                      <!-- TemplateEndEditable -->

                                     

                                    Are you suggesting I do the following instead:?

                                     

                                    <div id="mainContent"><!-- TemplateBeginEditable name="EditRegion1" -->

                                        <h1> Main Content </h1>

                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>

                                      <!-- TemplateEndEditable -->

                                        <!-- end #mainContent -->

                                     

                                    ----------------------------------------------------

                                     

                                    For the sidebar, this is what I have:

                                     

                                    <!-- TemplateBeginIf cond="OptionalRegion1" -->

                                      <div id="sidebar1">

                                        <h3>Sidebar1 Content</h3>

                                        <ul id="MenuBar2" class="MenuBarVertical">

                                          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>

                                            <ul>

                                              <li><a href="#">Item 1.1</a></li>

                                              <li><a href="#">Item 1.2</a></li>

                                              <li><a href="#">Item 1.3</a></li>

                                            </ul>

                                          </li>

                                          <li><a href="#">Item 2</a></li>

                                          <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>

                                            <ul>

                                              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>

                                                <ul>

                                                  <li><a href="#">Item 3.1.1</a></li>

                                                  <li><a href="#">Item 3.1.2</a></li>

                                                </ul>

                                              </li>

                                              <li><a href="#">Item 3.2</a></li>

                                              <li><a href="#">Item 3.3</a></li>

                                            </ul>

                                          </li>

                                          <li><a href="#">Item 4</a></li>

                                        </ul>

                                        <!-- end #sidebar1 -->

                                      </div>

                                      <!-- TemplateEndIf -->

                                     

                                    Are you suggesting instead that I do this instead?:

                                     

                                    <div id="sidebar1"><!-- TemplateBeginIf cond="OptionalRegion1" -->

                                        <h3>Sidebar1 Content</h3>

                                        <ul id="MenuBar2" class="MenuBarVertical">

                                          <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>

                                            <ul>

                                              <li><a href="#">Item 1.1</a></li>

                                              <li><a href="#">Item 1.2</a></li>

                                              <li><a href="#">Item 1.3</a></li>

                                            </ul>

                                          </li>

                                          <li><a href="#">Item 2</a></li>

                                          <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>

                                            <ul>

                                              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>

                                                <ul>

                                                  <li><a href="#">Item 3.1.1</a></li>

                                                  <li><a href="#">Item 3.1.2</a></li>

                                                </ul>

                                              </li>

                                              <li><a href="#">Item 3.2</a></li>

                                              <li><a href="#">Item 3.3</a></li>

                                            </ul>

                                          </li>

                                          <li><a href="#">Item 4</a></li>

                                        </ul>

                                      <!-- TemplateEndIf -->

                                      <!-- end #sidebar1 --></div>

                                     

                                    I don't want to go back to my working project and destroy my child pages, so any advice there would be welcomed (maybe just leave well enough alone on this project and use this as a learning experience for future endeavors?)

                                     

                                    Thanks so much, we've made some serious progress today.

                                     

                                    Steve

                                    • 15. Re: Attempting Nested Template unsuccessfully CS4
                                      Zabeth69 Level 5

                                      There's no need to be so hard on yourself! I don't teach Templates (when I teach Dreamweaver) until about Chapter 19 out of 21...or about hour 30 of a 36 hour class.

                                       

                                      Regarding point 1: you really want the div tags outside the editable area for the #mainContent. That way, you can change the content safely without worrying about disturbing the structure of that div. So don't forget to end the #mainContent div:

                                      <!-- TemplateEndEditable -->

                                           </div>

                                          <!-- end #mainContent -->

                                      The sidebar is fine the way you have it, unless you want the sidebar itself to remain when you option out the second menubar, in which case your second example is the way to go.

                                       

                                      Wireframed, or logically, it would look like this:

                                       

                                      structure editable:

                                       

                                      <edit code>

                                           <div>content</div>

                                      </close edit code>

                                       

                                      structure protected:

                                       

                                      <div>

                                           <edit code>

                                                content

                                           </close edit code>

                                      </div>

                                       

                                      Regarding having the program automatically insert corresponding optional regions for scripts...I think a warning on the dialog box that pops up when you create an optional region is more to the point. At some point, you have to learn what you're looking at and how to work with it.

                                       

                                      Yeah...good solid progress.

                                       

                                      Beth