13 Replies Latest reply: Jul 21, 2012 7:19 PM by Ivy54 RSS

    The template doesn't look like the original page.

    Ivy54 Community Member

      Hi,

       

      When I create a template the template ends up looking like a very generic version of the original until I save it as an html file.  All the images disappear and the menu bar is missing but the words that make up the menu bar are stretched out all over the page.  The boxes I built for the content area also disappears so I can't make them an editble region.  I know this is not right because I just watched a youtube video from some guy at adobe and when he creates a template the template looks the exact same as the page:  http://www.youtube.com/watch?v=V5_-kaDZr6whttp://.  Does anyone have any idea why this happens?

       

      Thanks,

      M

        • 1. Re: The template doesn't look like the original page.
          Nancy O. CommunityMVP

          File > New Page from Template.   Choose a Template from your current site.

          SaveAs new file name.html

           

          I think what you're doing is saving your Template as a new file which doesn't work because the paths to external CSS, scripts and images will be broken.

           

           

          Nancy O.

          • 2. Re: The template doesn't look like the original page.
            Ivy54 Community Member

            Hi, thanks for the reply.  What I do is File > Save as Template > Save as:  main.dwt >  Insert > Template Objects > Editable Regions (all places necessary) then > Save.  Can you please tell me one more time, what you think I should do instead so I can try it?  Thanks.

            • 3. Re: The template doesn't look like the original page.
              Nancy O. CommunityMVP

              Are you working within a Defined Local Site Folder? 

              Site > Manage Sites...

               

               

              Nancy O.

              • 5. Re: The template doesn't look like the original page.
                Nancy O. CommunityMVP

                We would need to see the code in your Template (.dwt) and the code from a child page (html) spawned from that template.  The best & fastest way to get help here is to upload your pages & dependant files to your remote server space and post the URLs.  That way we can see everything.

                 

                 

                Nancy O.

                • 6. Re: The template doesn't look like the original page.
                  Ivy54 Community Member

                  Here is the child called "template.html." and I will post the dwt below it.  Thanks.

                    

                  <!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">

                  <head>

                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                  <title>Inland Empire Waterkeeper</title>

                  <link href="_css/styles.css" rel="stylesheet" type="text/css" />

                  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                  <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                  <style type="text/css">

                  body,td,th {

                      color: #333333;

                      font-family: Verdana, Geneva, sans-serif;

                      font-size: 12px;

                  }

                  body {

                      background-color: #FFFFFF;

                      color: #D6D6D6;

                      background-image: url(_images/background_teal.png);

                      background-repeat: repeat-x;

                      margin: auto;

                      margin-left: 0px;

                      margin-top: 0px;

                      margin-right: 0px;

                      margin-bottom: 0px;

                  }

                  h1 {

                      font-size: 28px;

                      color: #666666;

                  }

                  h2 {

                      font-size: 26px;

                      color: #666666;

                  }

                  h3 {

                      font-size: 24px;

                      color: #666666;

                  }

                  h4 {

                      font-size: 22px;

                      color: #666666;

                  }

                  h5 {

                      font-size: 20px;

                      color: #666666;

                  }

                  h6 {

                      font-size: 18px;

                      color: #666666;

                  }

                  </style>

                  </head>

                   

                  <body>

                  <div class="container">

                    <div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>

                    <div class="menubar">

                      <ul id="MenuBar1" class="MenuBarHorizontal">

                        <li><a href="#" class="MenuBarItemSubmenu">About Us</a>

                          <ul>

                            <li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>

                              <ul>

                                <li><a href="mission.html">Our Mission</a></li>

                                <li><a href="history.html">Our History</a></li>

                                <li><a href="community.html">Our Community</a></li>

                              </ul>

                            </li>

                            <li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>

                              <ul>

                                <li><a href="staff.html">Staff</a></li>

                                <li><a href="supporters.html">Supporters</a></li>

                                <li><a href="advisoryboard.html">Advisory Board</a></li>

                              </ul>

                            </li>

                            <li><a href="coastkeeper.html">Coastkeeper</a></li>

                          </ul>

                        </li>

                        <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>

                          <ul>

                            <li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>

                              <ul>

                                <li><a href="advocacy.html">Advocacy</a></li>

                                <li><a href="education.html">Education</a></li>

                                <li><a href="research.html">Research</a></li>

                                <li><a href="restoration.html">Restoration</a></li>

                                <li><a href="enforcement.html">Enforcement</a></li>

                              </ul>

                            </li>

                            <li><a href="prokects.html">Projects</a></li>

                            <li><a href="datareports.html">Data &amp; Reports</a></li>

                          </ul>

                        </li>

                        <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>

                          <ul>

                            <li><a href="volunteer.html">Volunteer</a></li>

                            <li><a href="employment.html">Employment</a></li>

                            <li><a href="events.html">Events &amp; Meetings</a></li>

                            <li><a href="donate.html">Donate</a></li>

                          </ul>

                        </li>

                        <li><a href="#" class="MenuBarItemSubmenu">News Room</a>

                          <ul>

                            <li><a href="pressrelease.html">In the News and Press Releases</a></li>

                            <li><a href="legislation.html">Legislative Updates</a></li>

                            <li><a href="waternews.html">Water in the News</a></li>

                          </ul>

                        </li>

                        <li><a href="#" class="MenuBarItemSubmenu">Resources</a>

                          <ul>

                            <li><a href="#" class="MenuBarItemSubmenu">Information</a>

                              <ul>

                                <li><a href="watershed.html">Our Watershed</a></li>

                                <li><a href="reportpollution.html">Report Pollution</a></li>

                              </ul>

                            </li>

                            <li><a href="photos.html">Photo Gallery</a></li>

                          </ul>

                        </li>

                        <li><a href="contact.html">Contact Us</a></li>

                      </ul>

                    </div>

                    <div class="body">

                    

                    

                      <div class="emptyspacecontent">

                      <h4><strong style="text-align:  justify;"><br />

                      </strong></h4>

                  </div>

                   

                        <div class="emptyspace4"></div>

                    </div>

                     

                   

                  <div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>

                  </div>

                   

                  <script type="text/javascript">

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

                  </script>

                  </body>

                  </html>

                  • 7. Re: The template doesn't look like the original page.
                    Ivy54 Community Member

                    Here is the dwt named main.dwt:

                     

                    <!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">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

                    <title>Inland Empire Waterkeeper</title>

                    <!-- TemplateEndEditable -->

                    <link href="_css/styles.css" rel="stylesheet" type="text/css" />

                    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                    <style type="text/css">

                    body,td,th {

                        color: #333333;

                        font-family: Verdana, Geneva, sans-serif;

                        font-size: 12px;

                    }

                    body {

                        background-color: #FFFFFF;

                        color: #D6D6D6;

                        background-image: url(_images/background_teal.png);

                        background-repeat: repeat-x;

                        margin: auto;

                        margin-left: 0px;

                        margin-top: 0px;

                        margin-right: 0px;

                        margin-bottom: 0px;

                    }

                    h1 {

                        font-size: 28px;

                        color: #666666;

                        margin-bottom: 0

                     

                    }

                    h2 {

                        font-size: 26px;

                        color: #666666;

                        margin-bottom: 0

                    }

                    h3 {

                        font-size: 24px;

                        color: #666666;

                        margin-bottom: 0

                    }

                    h4 {

                        font-size: 22px;

                        color: #666666;

                        margin-bottom: 0

                    }

                    h5 {

                        font-size: 20px;

                        color: #666666;

                        margin-bottom: 0

                    }

                    h6 {

                        font-size: 18px;

                        color: #666666;

                        margin-bottom: 0

                    }

                    p {margin-top:0}

                    </style>

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

                    <!-- TemplateEndEditable -->

                    </head>

                     

                    <body>

                    <div class="container"><!-- TemplateBeginEditable name="header" -->

                      <div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>

                    <!-- TemplateEndEditable -->

                      <div class="menubar">

                        <ul id="MenuBar1" class="MenuBarHorizontal">

                          <li><a href="#" class="MenuBarItemSubmenu">About Us</a>

                            <ul>

                              <li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>

                                <ul>

                                  <li><a href="mission.html">Our Mission</a></li>

                                  <li><a href="history.html">Our History</a></li>

                                  <li><a href="community.html">Our Community</a></li>

                                </ul>

                              </li>

                              <li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>

                                <ul>

                                  <li><a href="staff.html">Staff</a></li>

                                  <li><a href="supporters.html">Supporters</a></li>

                                  <li><a href="advisoryboard.html">Advisory Board</a></li>

                                </ul>

                              </li>

                              <li><a href="coastkeeper.html">Coastkeeper</a></li>

                            </ul>

                          </li>

                          <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>

                            <ul>

                              <li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>

                                <ul>

                                  <li><a href="advocacy.html">Advocacy</a></li>

                                  <li><a href="education.html">Education</a></li>

                                  <li><a href="research.html">Research</a></li>

                                  <li><a href="restoration.html">Restoration</a></li>

                                  <li><a href="enforcement.html">Enforcement</a></li>

                                </ul>

                              </li>

                              <li><a href="prokects.html">Projects</a></li>

                              <li><a href="datareports.html">Data &amp; Reports</a></li>

                            </ul>

                          </li>

                          <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>

                            <ul>

                              <li><a href="volunteer.html">Volunteer</a></li>

                              <li><a href="employment.html">Employment</a></li>

                              <li><a href="events.html">Events &amp; Meetings</a></li>

                              <li><a href="donate.html">Donate</a></li>

                            </ul>

                          </li>

                          <li><a href="#" class="MenuBarItemSubmenu">News Room</a>

                            <ul>

                              <li><a href="pressrelease.html">In the News and Press Releases</a></li>

                              <li><a href="legislation.html">Legislative Updates</a></li>

                              <li><a href="waternews.html">Water in the News</a></li>

                            </ul>

                          </li>

                          <li><a href="#" class="MenuBarItemSubmenu">Resources</a>

                            <ul>

                              <li><a href="#" class="MenuBarItemSubmenu">Information</a>

                                <ul>

                                  <li><a href="watershed.html">Our Watershed</a></li>

                                  <li><a href="reportpollution.html">Report Pollution</a></li>

                                </ul>

                              </li>

                              <li><a href="photos.html">Photo Gallery</a></li>

                            </ul>

                          </li>

                          <li><a href="contact.html">Contact Us</a></li>

                        </ul>

                      </div>

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

                      <div class="emptyspacecontent">

                        <h4><strong style="text-align:  justify;"><br />

                        </strong></h4>

                      </div>

                      <!-- TemplateEndEditable -->

                      <div class="emptyspace4"></div>

                     

                     

                     

                    <div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>

                    </div>

                     

                    <script type="text/javascript">

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

                    </script>

                    </body>

                    </html>

                    • 8. Re: The template doesn't look like the original page.
                      Nancy O. CommunityMVP

                      Your child page isn't a child page. 

                       

                      The code at the top of a template child page must reference the template.dwt from which it was spawned like this:

                       

                      <!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">

                      <!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

                       

                      Also, main.dwt must be inside your site's Templates folder or it won't work.

                       

                       

                      Nancy O.

                      • 9. Re: The template doesn't look like the original page.
                        Ivy54 Community Member

                        Sorry, this is my first real website outside of a classroom setting.  I may have made a mistake.   The template.html is how I created the main.dwt.  Here is what I created with the main.dwt, which may be what you mean by the "child".  This is the first web page I created with the template main.dwt.  It's name is mission.html.  Sorry for the confusion:

                         

                        <!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

                        <head>

                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                        <!-- InstanceBeginEditable name="doctitle" -->

                        <title>Inland Empire Waterkeeper</title>

                        <!-- InstanceEndEditable -->

                        <link href="_css/styles.css" rel="stylesheet" type="text/css" />

                        <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                        <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                        <style type="text/css">

                        body,td,th {

                            color: #333333;

                            font-family: Verdana, Geneva, sans-serif;

                            font-size: 12px;

                        }

                        body {

                            background-color: #FFFFFF;

                            color: #D6D6D6;

                            background-image: url(_images/background_teal.png);

                            background-repeat: repeat-x;

                            margin: auto;

                            margin-left: 0px;

                            margin-top: 0px;

                            margin-right: 0px;

                            margin-bottom: 0px;

                        }

                        h1 {

                            font-size: 28px;

                            color: #666666;

                            margin-bottom: 0

                           

                        }

                        h2 {

                            font-size: 26px;

                            color: #666666;

                            margin-bottom: 0

                        }

                        h3 {

                            font-size: 24px;

                            color: #666666;

                            margin-bottom: 0

                        }

                        h4 {

                            font-size: 22px;

                            color: #666666;

                            margin-bottom: 0

                        }

                        h5 {

                            font-size: 20px;

                            color: #666666;

                            margin-bottom: 0

                        }

                        h6 {

                            font-size: 18px;

                            color: #666666;

                            margin-bottom: 0

                        }

                        p {margin-top:0}

                        </style>

                        <!-- InstanceBeginEditable name="head" -->

                        <!-- InstanceEndEditable -->

                        </head>

                         

                        <body>

                        <div class="container"><!-- InstanceBeginEditable name="header" -->

                          <div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>

                        <!-- InstanceEndEditable -->

                          <div class="menubar">

                            <ul id="MenuBar1" class="MenuBarHorizontal">

                              <li><a href="#" class="MenuBarItemSubmenu">About Us</a>

                                <ul>

                                  <li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>

                                    <ul>

                                      <li><a href="mission.html">Our Mission</a></li>

                                      <li><a href="history.html">Our History</a></li>

                                      <li><a href="community.html">Our Community</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>

                                    <ul>

                                      <li><a href="staff.html">Staff</a></li>

                                      <li><a href="supporters.html">Supporters</a></li>

                                      <li><a href="advisoryboard.html">Advisory Board</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="coastkeeper.html">Coastkeeper</a></li>

                                </ul>

                              </li>

                              <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>

                                <ul>

                                  <li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>

                                    <ul>

                                      <li><a href="advocacy.html">Advocacy</a></li>

                                      <li><a href="education.html">Education</a></li>

                                      <li><a href="research.html">Research</a></li>

                                      <li><a href="restoration.html">Restoration</a></li>

                                      <li><a href="enforcement.html">Enforcement</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="prokects.html">Projects</a></li>

                                  <li><a href="datareports.html">Data &amp; Reports</a></li>

                                </ul>

                              </li>

                              <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>

                                <ul>

                                  <li><a href="volunteer.html">Volunteer</a></li>

                                  <li><a href="employment.html">Employment</a></li>

                                  <li><a href="events.html">Events &amp; Meetings</a></li>

                                  <li><a href="donate.html">Donate</a></li>

                                </ul>

                              </li>

                              <li><a href="#" class="MenuBarItemSubmenu">News Room</a>

                                <ul>

                                  <li><a href="pressrelease.html">In the News and Press Releases</a></li>

                                  <li><a href="legislation.html">Legislative Updates</a></li>

                                  <li><a href="waternews.html">Water in the News</a></li>

                                </ul>

                              </li>

                              <li><a href="#" class="MenuBarItemSubmenu">Resources</a>

                                <ul>

                                  <li><a href="#" class="MenuBarItemSubmenu">Information</a>

                                    <ul>

                                      <li><a href="watershed.html">Our Watershed</a></li>

                                      <li><a href="reportpollution.html">Report Pollution</a></li>

                                    </ul>

                                  </li>

                                  <li><a href="photos.html">Photo Gallery</a></li>

                                </ul>

                              </li>

                              <li><a href="contact.html">Contact Us</a></li>

                            </ul>

                          </div>

                          <!-- InstanceBeginEditable name="content" -->

                          <div class="emptyspacecontent">

                            <h4><strong style="text-align:  justify;">Inland Empire Waterkeeper</strong><img src="_images/border_horizontal.png" width="933" height="3" /></h4>

                            <p align="left">Inland Empire Waterkeeper's <em>vision</em> is to achieve a sustainable watershed free of pollution and a community                 of motivated water stewards. <br />

                              <br />

                              Inland Empire Waterkeeper's <em>mission</em> is to protect and enhance                 the water quality of the Upper Santa Ana River Watershed through                 programs of advocacy, education, research, restoration, and enforcement. <br />

                          <br />

                          <strong><em>Our team seeks to:</em></strong></p>

                            <ul>

                              <li>Build a regional, collaborative approach to watershed management</li>

                              <li>Develop water quality solutions that meet the needs of both                   the environment and the community</li>

                              <li>Implement actions and programs that have well-defined, measurable                   results</li>

                              <li>Work with local, state and federal government agencies to ensure                   proactive water policy</li>

                              <li>Increase environmental awareness among citizens, students, policymakers                   and the business community</li>

                              <li>Promote compliance with the federal Clean Water Act and other                   environmental laws</li>

                            </ul>

                            <h4><strong style="text-align:  justify;"><br />

                            </strong></h4>

                          </div>

                          <!-- InstanceEndEditable -->

                          <div class="emptyspace4"></div>

                         

                           

                         

                        <div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>

                        </div>

                         

                        <script type="text/javascript">

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

                        </script>

                        </body>

                        <!-- InstanceEnd --></html>

                        • 10. Re: The template doesn't look like the original page.
                          MurraySummers CommunityMVP

                          Starting at the top, all templates must be saved in the "Templates" folder which is located at the root level of your site.  When you create a page, and use FILE | Save As Template..., DW will do this for you automatically.  If this is true, then...

                           

                          <!-- TemplateEndEditable -->

                          <link href="_css/styles.css" rel="stylesheet" type="text/css" />

                           

                          this link that I see present in the template code you have posted is a curious one.  It implies that the CSS file is ALSO present at the same level as the template, i.e., it's also within the Templates folder.  But that cannot be because the Templates folder must only contain your template files, not the rest of the files for your site.

                           

                          So, right off the bat, there is something offkilter in your code.

                           

                          If you open your file "template.html" and use FILE | Save As Template..., then when prompted for a name use "main2.dwt". Now open main2.dwt, and look at that link to the CSS file - it should look like this -

                           

                          <!-- TemplateEndEditable -->

                          <link href="../_css/styles.css" rel="stylesheet" type="text/css" />

                           

                          Does it?

                          • 11. Re: The template doesn't look like the original page.
                            Ivy54 Community Member

                            Thank you, I just tried saving the dwt with the same html name and it worked.

                            • 12. Re: The template doesn't look like the original page.
                              MurraySummers CommunityMVP

                              Excellent.  First stop when you have problems like this is the Code view.  Even a blind squirrel will find an acorn in there occasionally.  The more you do it, the more comfortable you will be, and the more familar you will become with the 'normal' look of code....

                              • 13. Re: The template doesn't look like the original page.
                                Ivy54 Community Member

                                I also realized that I was clicking no when Dreamweaver asked me if I wanted to update the links.