5 Replies Latest reply on May 22, 2010 2:27 PM by Zabeth69

    Question about editing a template and pages/navigation

    dreamweaverlearner99

      I am brand new to using dream weaver and am trying to build a web site.  I really want to learn how to use this because it looks so much nicer than a wordpress built site which is what I have done in the past.  My question is, I founded a dreamweaver template online that I downloaded.  It already has "Home, About Us, Contact Us, etc..." I first clicked on each link and renamed it what I wanted it to be called and then went to the link box and named it.  I did this for all of the links and then clicked save.  Then I did "save as" on that same page and named them all of the different pages (about us, contact us, etc...).  Ok long story short, the index page looks great just like I want it to.  The problem is when I click on preview in dreamweaver...it shows up normally for the index page but then if I try to click on "about us" from the index preview page when it takes me to the "about us" page it shows my links in bullet format and words all misarranged on the page.  It's like there is no holder for the header or side bar or footer, only the text.  I am stumpped at what I am doing wrong.  I have tried to re-do this three times the past three nights in a row and am going crazy trying to figure out what it is that I am doing wrong.  What's so strange is that if I go to the "about us" page and click on preview then it appears fine, just like the "index" page did and when I try to click on home or aka index it appears the same unorganized way it did viewing from the home page.  Can anyone give me some direction as to what part of the css or html I need to look in to see if something might be missing?  I do not want to publish this to the web site online if it will look like this.

        • 1. Re: Question about editing a template and pages/navigation
          Zabeth69 Level 5

          Welcome to the Dreamweaver Forum!

           

          Please give us a link to your page online so we can see all the code in context.

           

          The usual reason a page looks odd is that it does not have all the auxiliary files linked properly to it. Setting up links and menus on a Template should ensure that the links are correct. It could be that you are working with a true Template file (extension should be .dwt), and you are not properly casting child pages from it.

           

          Let us see your code and we'll give you a hand with it.

           

          Beth

          • 2. Re: Question about editing a template and pages/navigation
            dreamweaverlearner99 Level 1

            Hi Beth, well I think I may have figured out the problem.  With you saying that files need to be arranged in a certain order it made me double check where I was saving my pages from the template to.  I created a new folder for them but still seemed to have the same problem with how it appeared missing the header and words.  Then I moved them into the same folder as the dwt template.  Do you think moving the dwt template in the same folder as the rest of my .html page files could be the difference as to why it now works correctly?  Whatever I did, it now works and shows up correctly.  I did edit the banner from the original dwt file I downloaded online so maybe that is why it wasn't appearing when I copied the template and tried to save it as a new page.  Does that sound right?  I would like to know so that when I make other new web sites I don't have to spend forever in trial and error figuring out if that was it or not.  Thanks for your help.

             

             

            • 3. Re: Question about editing a template and pages/navigation
              Zabeth69 Level 5

              Be careful about curing the symptom but not the disease.

               

              Yes, where files sit in relation to each other in your file structure influences how they work, but only because when you set up hyperlinks (for navigation, for the source of images, and for the source of CSS and JS files), the structure dictates what the link looks like.

               

              A best-practices site structure can look like this:

               

              ROOT FOLDER

              css

              styles.css

              images

              logo.jpg

              ourfounder.jpg

              etc.

              products

              forthehome.html

              fortheoffice.html

              fortheplayground.html

              etc.

              SpryAssets

              MenuBarHorizontal.css

              SpryMenuBar.js

              etc.

              Templates

              basictemplate.dwt

              indextemplate.dwt

              innerpagetemplate.dwt

              index.html

              ourfounder.html

              contactus.html

               

              I recommend moving your files (use the Files Panel, make new folders, and drag the filenames into their appropriate folders) into a structure like this.

               

              Linking basics:

              • Whenever possible, use the 'Point to File' or the 'Browse to File' methods of creating links. The link code will automatically be correct.
              • Link structure
                • page and item being linked are in the same folder or at the same level:
                  just the file name (a link ON index.html LINKED TO contactus.html:
                  <a href="contactus.html">Contact Us</a>)
                • page linked to item 'down' one level in structure:
                  its folder is on same level, so link begins with the folder
                  (a link ON index.html LINKED TO forthehome.html:
                  <a href="products/forthehome.html>For the Home</a>)
                • page linked to item 'up' one level in structure:
                  you need to "go up" to the next higher level with ../ for each level you go up
                  (a link ON forthehome.html LINKED TO index.html:
                  <a href="../index.html">Home Page</a>)

               

              When you make a Template (file extension .dwt), it will be saved automatically into a folder called Templates. If you are downloading a Template, put it into a folder called Templates. If it has an associated stylesheet, save it in a css folder and make sure the link to it in the Template is correct. If the styles are embedded in the head of the Template document, export them to an external stylesheet and save it in the css folder.

               

              If you have downloaded a file that calls itself a template, but is really an HTML file, you can customized it for your uses and then File > Save as Template.

               

              When you cast new child pages from the Template, you will save those pages into the appropriate place in your site structure.
              DO NOT simply copy the Template; do File > New... > New Document: Page from Template [choose Template] etc.
              DO NOT save html pages in the Templates folder. Put only Templates in the Templates folder.

               

              So in your present situation, after rearranging your files (be sure to do this in the Files Panel), check to see if your links have remained correct. Because you will rearrange in the files panel (sorry for the broken record, but this is important), Dreamweaver should 'track' where your links lead and will keep them correct or correct them when you move the files.

               

              If you still have bad links when you finish that process, go into your Template and correct the links by using the 'Browse to File' or 'Point to File' method.

               

              Beth

              • 4. Re: Question about editing a template and pages/navigation
                dreamweaverlearner99 Level 1

                Thank you so much!! You were right, when I took the html pages out of the "template" folder they did not display correctly.  But I think it's because I copied and pasted the template pages and renamed them as each html page like you said not to do.  So I delete each of those pages and started over by creating a new page from template and now it works great and displays correctly!  Thanks so much for your help!