3 Replies Latest reply on May 22, 2010 2:08 PM by SwordsmithDave

    Images broken in DW CS4 LiveView & browser preview.

    SwordsmithDave

      Hey everyone, need some major help here.

      I'm very new to dreamweaver. I am experienced with graphics and art but anything related to code I epicly fail at... So talk with me like I'm three if possible.

       

      I built my first site for my small sword making business recently, and managed to get it on the web:

      http://maddwarfworkshop.com/

      I'm happy with the site visually but I know there are some underlying hidden flaws. First being how it functions in DW itself.

      I know plenty of people run into the issue of not being able to see their images while in design view, but mine is the exact opposite.

      My images show up as a tiny blue question mark box in Live View... As well as when I preview it in a browser localy on my machine.

       

      I think I know why it might be happening but dont know how to fix it...

      When I insert an image DW codes it as such:

      <img src="/images/madintro.jpg" width="470" height="267" />

      The problem seems to lie in DW adding the "/" in front of "images"

      when I manually go in and take out the "/" the image shows magically shows up as it should.


      Why has dreamweaver suddenly defaulted to making bad code? what did I do to cause this issue? And obviously how can I change it back to work again and make the image show in my DW workspace?

      I'm sure it lies in my crappy knowledge of understanding how to use templates.

       

       

      Also..

      If anyone could I would love a comrehensive critique of the site I built and how to clean it up, how to make the code right, and get things working as they should to propor standards.

      Here is the code for the homepage:

       

      <!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/index template.dwt" codeOutsideHTMLIsLocked="false" -->
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <!-- InstanceBeginEditable name="doctitle" -->
      <title>Mad Dwarf Workshop - Hand Forged Swords &amp; Fine Art</title>
      <!-- InstanceEndEditable -->
      <style type="text/css">
      <!--
      body,td,th {
          font-size: 12px;
          color: #FFF;
          text-align: center;
      }
      body {
          background-color: #1A1A1A;
      }
      -->
      </style>
      <link href="_css/Layout.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      a:link {
          color: #FFF;
      }
      a:visited {
          color: #FFF;
      }
      a:hover {
          color: #999;
      }
      a:active {
          color: #666;
      }
      -->
      </style>
      <script type="text/javascript">
      <!--
      function MM_preloadImages() { //v3.0
        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      }
      //-->
      </script>
      <!-- InstanceBeginEditable name="head" -->
      <script type="text/javascript">
      <!--
      function MM_swapImgRestore() { //v3.0
        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      }
      function MM_findObj(n, d) { //v4.01
        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById) x=d.getElementById(n); return x;
      }
      function MM_swapImage() { //v3.0
        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
      }
      //-->
      </script>
      <!-- InstanceEndEditable -->
      <!-- InstanceParam name="left" type="boolean" value="true" -->
      <!-- InstanceParam name="center body" type="boolean" value="true" -->
      </head>

      <body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onload="MM_preloadImages('images/facebook1.jpg','images/youtube1.jpg','images/flickr1.jpg ','images/blogger1.jpg')">
      <div id="shadow">
        <div id="wrapper">
          <div id="top navi" style="background-color: #1A1311; padding: 7px; vertical-align: middle; text-align: left; border-left-color: #666; border-bottom-color: #666; border-right-color: #666; border-top-color: #666; border-left-style: none; border-bottom-style: solid; border-right-style: none; border-top-style: none; border-left-width: medium; border-bottom-width: medium; border-right-width: medium; border-top-width: medium; border-left: tempval; font-size: 12px; height: 15px;">- <a href="index.htm">Home</a> - <a href="/welcome.html">About Us</a> - <a href="mailto:MadDwarfWorkshop@hotmail.com">Contact</a> -</div>
          <div id="top logo"><SCRIPT LANGUAGE="Javascript">
      function banner() { } ; b = new banner() ; n = 0
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner1.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner2.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner3.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner4.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner5.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner6.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner7.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner8.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner9.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner10.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner11.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner12.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner13.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner14.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner15.jpg' border='0' ALT=''></A>"
      b[n++]= "<A HREF='http://maddwarfworkshop.com/'><IMG name=randimg SRC='images/banners/madbanner18.jpg' border='0' ALT=''></A>"
      i=Math.floor(Math.random() * n) ;
      document.write( b[i] )
      </SCRIPT>
            <div></div>
            <div></div>
          </div>
          <div style="background-color: #1C1311; font-size: 15px; border-left-color: #666; border-bottom-color: #666; border-right-color: #666; border-top-color: #666; border-top-style: solid; border-left-width: medium; border-bottom-width: medium; border-right-width: medium; border-top-width: medium; padding: 7px; height: 15px; text-align: center;"> <span><a href="instock.html">In Stock Items</a> | <a href="customswords.html">Custom Swords</a> | <a href="knives.html">Knives &amp; Saxes</a> | <a href="fineart.html">Fine Art</a> | <a href="craftsmen.html">the Craftsmen</a> | <a href="process.html">the Process</a> | <a href="inspiration.html">the Inspiration</a> | <a href="articles.html">Articles</a> | <a href="faq.html">FAQ</a> | <a href="links.html">Links</a> | <a href="order.html">Order</a></span></div>
         
         
          <div id="content"><table width="875">
           
            <tr>
              <td width="183" height="583" align="center" valign="top"><!-- InstanceBeginEditable name="left" -->
                <div id="left"> <span class="boldtext">Welcome</span>
                  <p><img src="images/Forge.jpg" width="170" height="152" border="2" /></p>
                  <p>The Mad Dwarf Workshop is the swordsmithing work of Andy Davis and David DelaGardelle, but it is also an extended group of like minded individuals who have a love and passion for history, mythology, nature, ancient craftsmanship, and the good Lord Above. The Workshop was founded in November of 2004 in Newcastle Indiana by the two young craftsmen.</p>
                  <p><img src="images/sign.jpg" width="170" height="147" border="2" /></p>
                  <p>Together they began to chase their life long dream of learning how to forge swords like the ones read about in the epic sagas and mythologies they loved since childhood.</p>
                  <p><a href="welcome.html">Read more...</a><br />
                  </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                </div>
              <!-- InstanceEndEditable --></td>
              <td width="495" valign="top" bgcolor="#0F0F0F"><!-- InstanceBeginEditable name="EditRegion4" -->
              <div id="core"><img src="images/madintro.jpg" width="470" height="267" /><br />
                Welcome to the official website of Mad Dwarf Workshop. Home of hand crafted knives, swords, and fine art by David Delagardelle &amp; Andy Davis. Please take a moment to look around and view some of our work, learn about our craft, and  take a look at some pieces currently for sale. We hope you enjoy your stay and find either a treaure to call your own, or  inspiration  for the trail ahead.         
                <h2>Featured work:<br />
                  <a href="swords/ealgyd.html"><img src="images/swords/ealgyd/ealgyd1.jpg" width="430" height="323" /></a></h2>
                <h2><a href="http://maddwarfworkshop.123guestbook.com/"><img src="images/guestbook.jpg" width="209" height="88" alt="guestbook" /></a><font color="#666666"><br />
                </font></h2>
              </div><!-- Start of StatCounter Code -->
      <script type="text/javascript">
      var sc_project=4137115;
      var sc_invisible=1;
      var sc_security="86fc9d5f";
      </script>

      <script type="text/javascript"
      src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
      class="statcounter"><a title="godaddy stats"
      href="http://www.statcounter.com/godaddy_website_tonight/"
      target="_blank"><img class="statcounter"
      src="http://c.statcounter.com/4137115/0/86fc9d5f/1/"
      alt="godaddy stats" ></a></div></noscript>
      <!-- End of StatCounter Code -->
              <!-- InstanceEndEditable -->
                <p><img src="images/spacer.jpg" alt="" width="188" height="33" /></p>
                <p><span class="legaltext"><font color="#666666">Copyright
                  &copy; Mad Dwarf Workshop LLC 2010 <br />
                  Last revised
                  <!-- #BeginDate format:Am1 -->May 19, 2010<!-- #EndDate -->
                  . <br />
                  Site built by <a href="http://www.myspace.com/davidd3art" style="color: #666;">David DelaGardelle</a></font></span><font color="#666666"><br />
                    <a href="credits.html" class="legaltext" style="color: #666">- Credits -</a><br />
                <a href="mailto:MadDwarfWorkshop@hotmail.com" class="legaltext" style="color: #666;">- Contact Us-</a></font></p></td>
              <td width="183" align="center" valign="top" bgcolor="#131313"><!-- InstanceBeginEditable name="right" -->
                <div id="right"> <span class="boldtext">Connect With Us:</span>
                  <p><a href="http://www.facebook.com/#!/pages/New-Castle-Indiana/the-MAD-Dwarf-Workshop/117077868270" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook1.jpg',1)"><img src="images/facebook.jpg" name="facebook" width="70" height="70" border="0" id="facebook" /></a> <a href="http://www.youtube.com/user/MADdwarfWorkshop" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','images/youtube1.jpg',1)"><img src="images/youtube.jpg" name="youtube" width="70" height="70" border="0" id="youtube" /><br />
                  </a><a href="http://www.flickr.com/photos/40735115@N00/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('flickr','','images/flickr1.jpg',1)"><img src="images/flickr.jpg" name="flickr" width="70" height="70" border="0" id="flickr" /></a><a href="http://madswordsmithing.blogspot.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blogger','','images/blogger1.jpg',1)"> <img src="images/blogger.jpg" name="blogger" width="70" height="70" border="0" id="blogger" /></a></p>
                  <p class="boldtext">New For Sale:<br />
                    <a href="knives/hildeofor.html"><img src="images/knives/hildeofor/hildeoforthumb2.jpg" width="177" height="133" border="2" /></a></p>
                  <div align="center">
                    <div style="border:1px solid #999999; width:173px; margin: 0px; background-color:#242424;">
                      <form action="http://pub19.bravenet.com/elist/add.php" method="post" style="margin:0px;">
                        <div style="background-color:#474747; padding:0px; font:12px arial; color:#ffffff;"><b>Join our News Mailing List:</b></div>
                        <div style="margin:10px; font: 11px arial; color: #ffffff; text-align:left;">
                          <div style="margin-bottom:5px;">Enter your name and email address below:</div>
                          <div style="text-align:right;"> Name:
                            <input type="text" id="elistname" name="ename" size="25" maxlength="60" style="width: 112px" />
                            <br />
                            Email:
                            <input type="text" name="emailaddress" id="elistaddress15081046149" size="25" maxlength="100" style="width: 112px" />
                            <br />
                            <span style="white-space:nowrap;">
                              <input type="radio" name="action" value="join" checked="checked" style="border: 0px;" />
                              Subscribe </span> <span style="white-space:nowrap;">
                                <input type="radio" name="action" value="leave" style="border: 0px;" />
                                Unsubscribe </span>
                            <input type="hidden" name="usernum" style="border: 0px solid black; height: 0px; width: 0px;" value="1572390955" />
                            <input type="hidden" name="cpv"  style="border: 0px solid black; height: 0px; width: 0px;"  value="1" />
                            <input type="submit" name="submit" value="GO" />
                          </div>
                        </div>
                        <div style="color: red" id="elist_err15081046149"></div>
                        <div align="center" style="margin-bottom:3px;"><a title="" href="" style="font: bold 11px tahoma, sans-serif; color: #ffffff;" target="_blank"></a><br />
                          <a title="" href="" style="font: 10px tahoma, sans-serif; color: #ffffff;" target="_blank"></a></div>
                      </form>
                    </div>
                  </div>
                  <!-- End Bravenet.com Service Code -->
         
        <p></p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p><br />
        </p>
                </div>
              <!-- InstanceEndEditable --></td>
            </tr>
           
          </table>
          </div>
         
         
         
        </div>
      </div>
      </body>
      <!-- InstanceEnd --></html>

       

      I know its kinda a lot to ask but I know zero people in person who can help me, and am extremely desperate and absolutely obsessed with making this site the very best I am capable of.

      Any resources, videos, tips, whatever would be beyond appreciated!...

       

      Thank you so much!

      Dave D.

        • 1. Re: Images broken in DW CS4 LiveView & browser preview.
          Randy Edmunds Adobe Employee

          I know plenty of people run into the issue of not being able to see their images while in design view, but mine is the exact opposite.

          My images show up as a tiny blue question mark box in Live View... As well as when I preview it in a browser localy on my machine.

           

          I think I know why it might be happening but dont know how to fix it...

          When I insert an image DW codes it as such:

          <img src="/images/madintro.jpg" width="470" height="267" />

          The problem seems to lie in DW adding the "/" in front of "images"

          when I manually go in and take out the "/" the image shows magically shows up as it should.


          Why has dreamweaver suddenly defaulted to making bad code? what did I do to cause this issue? And obviously how can I change it back to work again and make the image show in my DW workspace?

           

          Yes, the slash is exactly the problem. That is known as a Site-root relative link.These types of link are good to use in Templates because they are always the same. They don't need to be "fixed' when you generate a page from your Template into a different folder.

           

          The downside of using Site-root reltive links, is that you can't access the files locally. You must get the page from a web server. One exception to that is using Preview in Browser (PIB) "Temp" files.

           

          Read this Tech Note about setting up a Testing Server so you can see these files in Live View and PIB:

          http://blogs.adobe.com/dreamweaver/2008/12/live_view_and_siteroot_relativ.html

           

          If you want to switch back to using Document relative links, then setthe Relative to: field to be "Document" in the "Browse for file" dialog (folder button next to Link field in PI). This setting is sticky, so all future link will use the same setting.

           

          Hope this helps,

          Randy

          1 person found this helpful
          • 2. Re: Images broken in DW CS4 LiveView & browser preview.
            SwordsmithDave Level 1

            It absolutely does indeed help Randy, and I'm guessing will resolve my problem.

            Thank you SO much!

             

            If anyone else has helpful tips, critique, or advice please le me know.

            Your help is beyond appreciated.

            • 3. Re: Images broken in DW CS4 LiveView & browser preview.
              SwordsmithDave Level 1

              Problem solved.  Thanks again Randy!