Skip navigation
Duzeon
Currently Being Moderated

Css, Html, and templates problem.

Mar 23, 2013 10:55 AM

Hey guys, this is the first time i've encountered this problem.

 

Well, I've created a site, and also made a template for that to change my current theme.

 

After I created the template, the preview on "split" mode is just all html view, not like it would normally look like before the template(it used to have all the colours like it would appear on a website with css).

I'm not sure if this connects to it, but I've got all the code right (I think). But after I applied the template to another page, and upload it on File Zilla, it doesn't seem like it wants to connect it with the css file.

 

I've got:

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

 

in the source code.

 

Before the template, underneath the tabs, it has all these: http://prntscr.com/xi7dw

Which are files connected to my code(css, js) And when I click on them it shows the code.

 

But after that page was turned into a template, those things underneath all the tabs of my files are still there, but when I click on them it shows nothing but a info bar:  http://prntscr.com/xi7m7

Clicking on "Get" brings me: http://prntscr.com/xi7oj

 

So I'm not sure how to get my site working using templates. I've used templates before and applying them to replace other themes and it works, not sure what the problem is here.

 

Hope someone can help.

 

Thanks.

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Mar 23, 2013 11:16 AM   in reply to Duzeon

    After I created the template, the preview on "split" mode is just all html view

     

    Which DW are you using? So, are you saying that you see only code in each pane of split view?

     

    Why don't you start by showing us the code on the Template page - can you paste it into a reply here, please?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 11:30 AM   in reply to Duzeon

    Obviously, none of your links in the template are correct. The code in your template *should* be this (and would be this if the template had been made properly using File > Save as Template) (all other links in your template file should be adjusted similarly as well) -

     

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

    <!-- TemplateBeginEditable name="doctitle" --><title>Home - PCreedHelp Website - All for your needs!</title><!-- TemplateEndEditable -->

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

    <meta name="description" content="" />

    <meta name="keywords" content="" />

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

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>

    <script type="text/javascript" src="j../s/jquery.coda-slider-2.0.js"></script>

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

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

    <script type="text/javascript" src="../js/leaguegothic.font.js"></script>

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

    <!-- TemplateEndEditable -->

    </head>

    <body>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:26 PM   in reply to Duzeon

    Templates are stored in a Templates folder inside your main site folder.

    Looking at your Template code, this link to your CSS file is not right.

     

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

     

    It should look like this:

     

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

     

    Ditto for all your scripts.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:32 PM   in reply to Duzeon

    Please don't PM me.  Just post a link to your site.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:46 PM   in reply to Duzeon

    You're not getting it.

     

    A template is in the /Templates folder. No other files should be in that folder. All other files are OUTSIDE of the Templates folder, but still within the root of the site. This means that ALL links in a template page that are document relative MUST begin with "../", i.e., go up one folder level and then begin looking for the path. Now - show us your template page and its code, please. That will allow us to help you completely.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:57 PM   in reply to Duzeon

    You don't need to upload the template files ever unless you want to share them with someone. This is the code that you SHOULD have in this template file (assuming that the js files are not saved within the Templates folder) -

     

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

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

    <title>Home - PCreedHelp Website - All for your needs!</title>

    <!-- TemplateEndEditable -->

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

    <meta name="description" content="" />

    <meta name="keywords" content="" />

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

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>

    <script type="text/javascript" src="../js/jquery.coda-slider-2.0.js"></script>

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

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

    <script type="text/javascript" src="../js/leaguegothic.font.js"></script>

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

    <!-- TemplateEndEditable -->

    </head>

    <body>

     

     

    <div id="headercont" class="clearfix">

              <div id="header">

                  <div id="headerlogo">

            <center>

                      <h1><a title="" href="">PCreedHelp </a></h1>

              </center>

            </div>

          

           <div id="headermenu">

                <ul class="sf-menu dropdown">

                    <li><a title="" href="">Home</a></li>

                    <li><a class="has_submenu" title="" href="/offguides/">Official Guides</a>

                        <ul>

                            <li><a title="" href="/mapguide/">Map Guide</a></li>

                            <li><a title="" href="/staffinfo/">Staff Info</a></li>

                            <li><a title="" href="/gamescorner/">Games Corner</a></li>

                            <li><a title="" href="/abbreviations/">Abbreviations</a></li>

                        </ul>

                    </li>        

                <li><a class="has_submenu" title="" href="/playerguides/">Player Guides</a>

                        <ul>

                            <li><a title="" href="/guide1/">Coins Guide</a></li>

                            <li><a title="" href="/guide2/">Training Guide</a></li>

                            <li><a title="" href="/guide3/">Account Security</a></li>

                            <li><a title="" href="/playerguides/">More</a></li>

                        </ul>

                  </li>        

                  <li><a title="" href="/contact/">Contact</a></li>

                               

                  

              </ul>

            </div>

        </div>

    </div>

     

     

    <div id="gallerycont" class="clearfix">

        <div class="coda-slider preload" id="gallery">

            <div class="panel">

                <div class="panel-wrapper">

                <div class="panelleft">

                   <h3>Hello</h3>

                   </div>

                    <div class="panelright">

                        <img alt="" src="../images/CursedGolett.png" />

                        </div>

                  

                </div>

            </div>

            <div class="panel">

                <div class="panel-wrapper">

                    <div class="panelleft">

                        <h3>More Information</h3>

                        <p>If you see anything wrong, errors, or mistakes please email me here or you can visit the forums, register, and post!</p>             </div>

                    <div class="panelright">

                        <img alt="" src="../images/gallery-image.jpg" />

                    </div>

                </div>

            </div>

            <div class="panel">

                <div class="panel-wrapper">

                    <div class="panelleft">

                        <h3>Updated Daily!</h3>

                        <p>As this website is still new, I will be updating every day. So be sure to be keep checking this website out. I mainly do a guide per day, or more depending on what the guide is. As some may be shorter, but some may take ages to write. But so far, I have a few guides to keep the mood going.</p>

                        <p>Current Updates for Today:

    Done:

     

     

    Edited Coins Guide

     

     

    Improved quality of guides

     

     

    [Updated on [6/03/13]

     

     

    To do:</p>

                    </div>

                    <div class="panelright">

                        <img alt="" src="../images/gallery-image.jpg" />

                    </div>

                </div>

            </div>

        </div>

    </div>

      

         <div id="maincont" class="clearfix">

                  <div id="mainleft">

                      <h3>Player Created Guides</h3>

                <p>All these are guides created by Pokemon Creed Members.                                                                             Feel free to suggest some by contacting me or posting on the forums.</p>

                <ul class="sidemenu">

                    <li><a title="" href="">Coins Guide</a></li>

                    <li><a title="" href="">Training Guide</a></li>

                    <li><a title="" href="">Account Security</a></li>

                    <li><a title="" href="#">Coming Soon!</a></li>

                </ul>

                <p>How is your day today?</p>

            </div>

                  <div id="mainright"><!-- TemplateBeginEditable name="InfoContent" -->

                    <h1>PCreedHelp Site</h1>

              <p>Welcome to the site, information will be put up soon.</p>

              <ul>

                <li>This is an unordered list - Item 1</li>

                <li>This is an unordered list - Item 2</li>

                <li>This is an unordered list - Item 3</li>

                <li>This is an unordered list - Item 4</li>

              </ul>

              <h2>Have Fun</h2>

              <p>Fun is good.</p>

              <ol>

                <li>This is an ordered list - Item 1</li>

                <li>This is an ordered list - Item 2</li>

                <li>This is an ordered list - Item 3</li>

                <li>This is an ordered list - Item 4</li>

              </ol>

              <p>How cool is this site?</p>

              <blockquote>I say hi.</blockquote>

                  <!-- TemplateEndEditable --></div>

        </div>

      

     

      

    <div id="footercont" class="clearfix">

        <center>

        <a href="#">[Back To Top]</a><br>

      

                   <a href="">[Home]</a> | <a href="/donate/">[Donate]</a>  | <a href="/contact/">[Contact Me]</a>

                  <p>Copyright © 2013 PCreedHelp Website</p>

          </center>

        </div>

      

        <div id="adverts">

        <center>

        <script type="text/javascript" src="http://ap.lijit.com/www/delivery/fpi.js?z=196124&u=jd3101&width=728&he ight=90"></script>

        </center>

        </div>

     

     

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:00 PM   in reply to MurraySummers

    Also, be aware that the menu links you have are ROOT relative links -

     

    <li><a title="" href="/mapguide/">Map Guide</a></li>

     

    They will not work properly in a local preview of your child pages UNLESS you have enabled the use of temporary files in PREFERENCES > Preview in browser. In addition, if you click away from the previewed page, you cannot click away from that resulting page - so when you are previewing pages that contain root relative links and you have temporary files enabled, you can only click away from that previewed page once.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:03 PM   in reply to Duzeon

    DW Templates are used to spawn your site pages.  If your Template.dwt file is not put together properly, none of your pages will work right.

     

    #1 You must be working within a defined site in DW.

    #2 Templates must be inside the Templates folder of your local site folder.

    #3 All links should begin with ../

    #4 When you spawn a child page from your Template and SaveAs to your root folder, DW will reconcile paths to files for you.

     

    Make sense?

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:31 PM   in reply to Duzeon

    Are you working within a Defined Local Site in DW?  Without this critical first step, DW cannot properly manage assets and links for you. You should have one site definition for each web site you work on.

     

    Creating  your first web site in DW  -

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:40 PM   in reply to Duzeon

    This page is inside a sub-folder (index) off your site's root folder.

    http://www.pcreedhelp.com/index/

     

    Links to supporting files are broken because the paths are NOT pointing to your site root.

     

    Added ../ to each link:

     

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>

    <script type="text/javascript" src="../js/jquery.coda-slider-2.0.js"></script>

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

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

    <script type="text/javascript" src="../js/leaguegothic.font.js"></script>

     

    Ditto for images:

    <img alt="" src="../images/gallery-image.jpg" />

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:58 PM   in reply to Duzeon

    Your site is not properly defined.

     

    In your current site definition, what is the path to the local root folder?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 2:00 PM   in reply to Duzeon

    I think you should skip using Templates until you've thoroughly read the F1 (help) topics on them.

    http://helpx.adobe.com/dreamweaver/topics.html#dynamicpod_reference_11

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 7:32 AM   in reply to Duzeon

    Define your site properly. That will change the whole character of how DW forms your links.  You have not answered my most recent question. We cannot help you do this until you tell us what is the path shown in your site definition to your local root folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 10:06 AM   in reply to Duzeon

    Edit your site definition in Site Manager. Use Site > Manage Sites, select the site name and click the Edit (pencil) icon. The opening pane tells you the path to the local root folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 10:58 AM   in reply to Duzeon

    If that is indeed the path to your local root folder, then the only time you would see that path appearing in your links would be on a freshly created page that has not yet been saved.  As soon as you save the page, DW will adjust the link to reflect where in your local site you saved the page. So - on a new, unsaved page, when you make a link to another file, you will see something like this -

     

    <a href="file:///public/Web Sites/Testing3/annie.html">Link</a>

     

    then when you save the page (in the root of the site), that becomes this -

     

    <a href="annie.html">Link</a>

     

    This will happen whether you are using a template or not. Is that what is troubling you?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 11:34 AM   in reply to Duzeon

    There is still something wrong. Clearly the links to your js files are wrong, as is the link to your CSS.

     

    Try this - spawn a new child page from your template (FILE > New > Page From Template), save this page in your site, copy the code on the page and paste it here in a reply.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 11:50 AM   in reply to Duzeon

    Something you are doing has confused DW (and me).

     

    Can you post a screen shot of a) your Site panel from your site definition, and b) the local file list from your Files panel?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 12:04 PM   in reply to Duzeon

    None of the linked files are within that local site! The Files panel that you show has nothing in it but the Templates folder and the template files. So, all of your links are pointing to files OUTSIDE of the current site.

     

    The local folder of your current site must contain ALL of the files that are part of your current site.

     

    No, the problem would not be in the SERVERS category.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 12:18 PM   in reply to Duzeon

    That will never work. Use Expolorer/Finder to move the files into the current site. Do not place anything in the Templates folder other than the templates themselves. Open a template, and remake *all* of the links by browsing to the target file that has been moved into your site. Save the template. Dreamweaver will now understand how to make your links properly and will update the child pages that you have moved into your site accordingly.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 12:40 PM   in reply to Duzeon

    Your site hierarchy should be this -

     

    ROOT FOLDER (this must be the same as is configured in the site definition)

         - Templates (a folder containing template files)

         - All the rest of the files. They can be in folders or not - your call. BUT the site's home page must be in the site at this level so that when you upload it, it stays at this level.

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points