1 Reply Latest reply on May 17, 2010 4:14 AM by Ben M

    What's happening to my site?!?


      I've designed this site in Photoshop, sliced it up and then exported it to HTML format, then opened up the HTML file for editing in Dreamweaver. Everything looks good and when I go to preview it in Safari, it looks great.


      So I sent this project out for testing by some of my family and a cousin came back and told me to look at the site in Firefox. It looked like crap! Really, there were spaces where there shouldn't have been and some links had blue borders around them. I managed to get the blue borders off, but the site still looks kind of truncated.


      So, I had to make a flash site which looks great and does everything I wanted it to, all for this truncated table reason.


      Would someone be so kind as to take a look at the site and the code (I'm a designer by the way, not a developer and this is just beyond me!) and give me some suggestions? This project is my first web project and I'm getting a little stressed out that I can't find the answer to a problem that seems basic.





      You can view it here - http://www.temanametalpolishing.com/ and be sure to choose the non-flash site.



      I've got Dreamweaver CS5 on a Mac platform by the way.

        • 1. Re: What's happening to my site?!?
          Ben M Adobe Community Professional

          Unfortunately web design is not like print design.  You can't just drag and drop and expect things to work. Web design does require a little bit of coding knowledge.  Typically most here will suggest that you create the slices in Photoshop and export the slices you need.  Then in Dreamweaver build the HTML instead of using the Export function from Photoshop because all Photoshop does is create a table with images in each cell.  Not ideal for a web design, it fits everything tightly which is why when you add a link you get a blue border since when images become links you get a blue border unless you turn it off.


          Also what is happening is that fonts might display differently in browsers and because of the tight fitting structure when you add too much text things get pushed out of alignment even if it does not appear that way in Design View.


          If time is important give this tutorial a read over: http://layersmagazine.com/image-slicing-in-photoshop-cs3.html .  It is an excellent tutorial about the current method you are using and will get you setup with best practices.


          I'll try and look to see a better tutorial of what I am explaining about coding the page manually from Photoshop slices unless someone else on here beats me to it.  But that first link should get you going.

          1 person found this helpful