7 Replies Latest reply on Oct 31, 2006 3:58 AM by Newsgroup_User

    Preview Browser in Dreamweaver

    Don_Arcuri
      First of all, let me say "kudos" for offering this site. Your expertise is impressive, and I'm glad I have this forum to vent! :-)

      Now on to my business:

      OK - here's a spin on a common theme throughout this support site. I, too, am having problems when previewing pages within Dreamweaver, but my story's a bit different:
      - I"m using Dreamweaver 4 (I know, I know, but I can't afford an upgrade right now)...
      - I can preview pages fine in Dreamweaver (I believe I'm viewing the temp file, because I can see the filename change in the title bar), so no problem there...
      - When simply double-clicking the .html file in my directory, the formatting/CSS stuff all goes away...
      - When trying to open the file directly through a browser (whether IE or Firefox), the formatting/CSS stuff is not present...

      I've seen previous advice saying that the paths to the .css file (absolute vs. relative, etc) need to be verified so the files can be read correctly. However, I've created three separate sites based on the same template design, but have only started having this problem over the last 3-4 weeks (no problems with the first two). I've done NO OTHER configuration changes to any templates, files, or anything else in Dreamweaver. I have NO option (as in later versions of Dreamweaver) to check/uncheck the box that says "preview using temp file" as this option isn't there in DW4. I am not using, nor have I ever used, any kind of 'test server' to post pages to - don't need that!

      I'm really at my wit's end, as it really only started happening this way on its own. Yes - I'm somewhat of a novice at Dreamweaver, but I understand the basic concepts of templates, making new files and saving, etc, and have really never had a problem until now...HELP!!

      Thanks!

      ~Don
        • 1. Re: Preview Browser in Dreamweaver
          *mista* Level 1
          Can you please upload the page causing this problem. It'll be difficult to help without looking at the code.

          Try inserting the CSS code directly into one page instead of linking the css stylesheet - Does that show the way it should?

          The other issue could be some syntax error in your code. Can't say much without looking at the code. Try to validate you site pages and see if there are errors.
          • 2. Preview Browser in Dreamweaver
            Don_Arcuri Level 1
            Thanks for the response.

            I'd rather not have to put the CSS code directly into EVERY page, but you feel that might be the only course of action, maybe you can assist me with that. Where exactly would the code be inserted/pasted?

            Let me say, directory structure-wise, that I have a root directory, a Templates folder in the root which contain the templates for my page designs, and a Styles folder in the root which contains the external style sheet. All of my .html files, including index.html, are in the root directory.

            I don't know which specific page you would want me to upload, as the same symptoms are happening over multiple pages/templates. I can start with the first few lines of code (<head> text) that reference the external style sheet from the 'index.html' file, so you can see if the path to the CSS is correct. The path to the template I used to create the index file is also referenced:
            ================================
            <html><!-- #BeginTemplate "/Templates/primary.dwt" -->
            <head>
            <title>Cheyenne Mountain Charter Academy</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <LINK HREF="/styles/cmca.css" REL="stylesheet" TYPE="text/css">
            </head>
            ================================

            Hope this helps.

            ~Don
            • 3. Re: Preview Browser in Dreamweaver
              Level 7
              This is how DW will work if you are using ROOT RELATIVE links, *and*
              temporary files to preview.

              Here's an example -

              * I create a page with a link to an image -> <img src="/images/foo.gif">
              (note that the image link is a root relative link - the path says to go to
              the
              root of the site and look for the images folder because of the leading
              slash)

              <img src="/images/foo.gif" (that's root relative - it starts with the root
              of the site)
              <img src="../images/foo.gif" (that's document relative - it starts with the
              current location of the document)

              * I preview that page with DW (since I am using temp files, DMX is kind
              enough to realize that root relative links won't work in a preview, and so
              it converts them to document relative links when it builds the temporary
              file for the preview) -> <img src="../images/foo.gif"> (I'm assuming that
              your document is one level below the root of the site). In the preview,
              this page looks fine because the browser has no trouble with the document
              relative link - it knows where the file it just opened is, and can follow
              the path to the image).

              * I then click on a link in the previewed page to another page that also has
              ROOT relative linked images --> <img src="/images/bar.gif"> and suddenly
              the image does not load.

              Why? Because when you click away from the temp file DW just built for you,
              you have lost the benefit of the automatic conversion that DW does with
              root relative links, and the browser looks for this new image starting from
              the root of the hard drive, not the root of your site.

              The solution is to not use root relative links, and to change all your
              existing ones to document relative.

              To read more about this, go here -

              http://www.macromedia.com/support/dreamweaver/ts/documents/site_root_rel.htm
              http://www.macromedia.com/support/dreamweaver/ts/documents/document_vs_site.htm


              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "Don_Arcuri" <webforumsuser@macromedia.com> wrote in message
              news:ei17lp$m8a$1@forums.macromedia.com...
              > First of all, let me say "kudos" for offering this site. Your expertise
              > is
              > impressive, and I'm glad I have this forum to vent! :-)
              >
              > Now on to my business:
              >
              > OK - here's a spin on a common theme throughout this support site. I,
              > too, am
              > having problems when previewing pages within Dreamweaver, but my story's a
              > bit
              > different:
              > - I"m using Dreamweaver 4 (I know, I know, but I can't afford an upgrade
              > right
              > now)...
              > - I can preview pages fine in Dreamweaver (I believe I'm viewing the temp
              > file, because I can see the filename change in the title bar), so no
              > problem
              > there...
              > - When simply double-clicking the .html file in my directory, the
              > formatting/CSS stuff all goes away...
              > - When trying to open the file directly through a browser (whether IE or
              > Firefox), the formatting/CSS stuff is not present...
              >
              > I've seen previous advice saying that the paths to the .css file (absolute
              > vs.
              > relative, etc) need to be verified so the files can be read correctly.
              > However, I've created three separate sites based on the same template
              > design,
              > but have only started having this problem over the last 3-4 weeks (no
              > problems
              > with the first two). I've done NO OTHER configuration changes to any
              > templates, files, or anything else in Dreamweaver. I have NO option (as
              > in
              > later versions of Dreamweaver) to check/uncheck the box that says "preview
              > using temp file" as this option isn't there in DW4. I am not using, nor
              > have I
              > ever used, any kind of 'test server' to post pages to - don't need that!
              >
              > I'm really at my wit's end, as it really only started happening this way
              > on
              > its own. Yes - I'm somewhat of a novice at Dreamweaver, but I understand
              > the
              > basic concepts of templates, making new files and saving, etc, and have
              > really
              > never had a problem until now...HELP!!
              >
              > Thanks!
              >
              > ~Don
              >


              • 4. Re: Preview Browser in Dreamweaver
                Don_Arcuri Level 1
                Thanks! I do understand the concept of what you're trying to communicate. Let me tell you what I've done up to this point; then, maybe you can direct me further...

                1. I DID place the CSS code directly into the document, and it worked. So - at least I know the code is good. I would MUCH rather use ONE external style sheet though than to update three template pages...so...on to #2.

                2. I wish I could give you a screenshot of my directory structure. The CSS code I placed for you in the 12:38 message above has been standard for any page I've ever created before (with the reference to an external style sheet). I can try to describe the directory tree this way:

                - root directory
                -- Templates folder (to hold the templates for new pages)
                -- Styles folder (to hold the external style sheet)
                -- Images folder (to hold my images, including the ones referenced before)
                -- all active .html files

                So - when I'm in a Templates folder, editing a .dwt file for a future web page, I insert the image I want for my header graphic. Since I have to go out of the Templates folder and then back into an Images folder to reference that .png file, I coded it IN the Template file as<img src="../images/header.png">. Also - since I'm referencing the path of the external style sheet, I coded IT in the template files as: <LINK HREF="../styles/cmca.css" REL="stylesheet" TYPE="text/css"> (which should take me back out one directory from the Templates folder, go into my Styles folder and read the CSS code).

                Once the .dwt file was saved, I created a new file based on that template. In that file (.html, which resides in the root directory), the link to the stylesheet was labeled as a root-specific path ("/styles/cmca.css").

                When I got down to the reference to the header image later in the code, it LOOKS in the .html file that it will go straight out and get the image ("images/header.png" - since the Images directory and .html file are BOTH in the root, it should go right into the Images folder and read the .png file, then insert it, right?).

                The bottom line? Remember - I could preview fine, but once viewed, if I went back and double-clicked on the same file to open, I lost all my fonts/formatting/images. So - the CSS file was not being accessed correctly and the images could not be viewed.

                As I'm still a relative novice at all this as far as directory design and these stupid path references, would you be able to suggest how I could restructure a future site (or save this one) where 'document' paths are the rule and not the exception? My desire is to reference an external style sheet (to keep central design control), and have separate Template and Image directories. Perhaps, if you're willing, I can snap some screenshots and E-Mail them to you. Do you have a Dreamweaver Forum E-Mail address?

                Thanks again ACE - you're the best!

                ~Don
                • 5. Re: Preview Browser in Dreamweaver
                  Level 7


                  > the link to the
                  > stylesheet was labeled as a root-specific path ("/styles/cmca.css")

                  to repeat what Murray said a different way-

                  If you use site root relative paths in pages- the F12 Preview in Browser
                  will work fine. BUT, if you click a link in the Preview in browser page, you
                  will be viewing the next page directly from your hard drive. Which is not a
                  web server, and the site root relative paths won't work on this page.

                  Is that what is happening?
                  The paths work in F12 Preview in Browser?
                  The paths work on the remote site?
                  The paths don't work if you open a link in the F12 preview page?



                  • 6. Re: Preview Browser in Dreamweaver
                    Level 1
                    As Murray and et. al, such as Alan have said, if I may want to add something simple, it is important that you *understand* the difference between root site, absoute or relative path.

                    If you don't understand, the you have problem understanding how HTML works and whatnot.
                    • 7. Re: Preview Browser in Dreamweaver
                      Level 7
                      To repeat what Alan said, in a different way, if you use Root Relative
                      links, DO NOT CLICK away from a page in preview, *and* definitely do not
                      just browse to and open a page, unless you understand what to expect when
                      you do. 8)

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.dreamweavermx-templates.com - Template Triage!
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                      ==================


                      "Alan" <dont_mail_me_period@macromedia.com> wrote in message
                      news:C16C5F0C.2AC0FE%dont_mail_me_period@macromedia.com...
                      >
                      >
                      >> the link to the
                      >> stylesheet was labeled as a root-specific path ("/styles/cmca.css")
                      >
                      > to repeat what Murray said a different way-
                      >
                      > If you use site root relative paths in pages- the F12 Preview in Browser
                      > will work fine. BUT, if you click a link in the Preview in browser page,
                      > you
                      > will be viewing the next page directly from your hard drive. Which is not
                      > a
                      > web server, and the site root relative paths won't work on this page.
                      >
                      > Is that what is happening?
                      > The paths work in F12 Preview in Browser?
                      > The paths work on the remote site?
                      > The paths don't work if you open a link in the F12 preview page?
                      >
                      >
                      >