2 Replies Latest reply on Aug 13, 2010 3:48 PM by Nancy OShea

    Putting Media on top of a Photoshop image

    MisoMush

           I am currently making a website that is Photoshop based. I have created a full page on Photoshop including all my text and images. I used hot spots/ image maps to link users to different pages. But I am unable to do make flash related components in Photoshop. (Example: the image viewer in dream weaver). My question is, how am I able to place an image view onto my webpage in Dreamweaver on TOP of the Photoshop image? I have tried making layers but the problem is that it has a fixed position and it will not be able to adapt to different desktop sizes. I want the image view to be able to move to the center with my website.

        • 1. Re: Putting Media on top of a Photoshop image
          MurraySummers Level 8

               I am currently making a website that is Photoshop based.

           

          If you scan through this forum, I'm wagering you'll find that >50% of the posts here are from people who have taken just this approach.  Photoshop (and Fireworks) do not write production-quality HTML.  The HTML you get from any graphics application is extremely 'brittle' and will break as soon as you begin to change the shape of the content on each page.  You should use a graphics application to make your graphics, and an HTML authoring system to write your HTML.  That's the honest truth.

           

          I have created a full page on Photoshop including all my text and images. I used hot spots/ image maps to link users to different pages.

           

          Your text content is part of the graphic?  You realize that you will not get ranked by search engines when you do that, right?  This is the worst thing you can do, really.

           

          My question is, how am I able to place an image view onto my webpage in Dreamweaver on TOP of the Photoshop image?

           

          Now you are getting to the heart of the matter.  To tell you how to do this, we will have to use HTML-speak, and CSS-speak, which you are not likely to understand if you are just using Photoshop to write your HTML.  The answer to your question is that you make your graphics a background image of the container involved, and place your media into that container, properly nudged into place using padding and margins.

           

          I have tried making layers but the problem is that it has a fixed position and it will not be able to adapt to different desktop sizes. I want the image view to be able to move to the center with my website.

           

          You can do it that way, *and* make the absolutely positioned element center along with the website by wrapping the entire page in a centering, and relatively positioned container, e.g.,

           

          <body>

          <div style="width:xxxpx; margin:0 auto;position:relative;">

          ... the rest of your page's code ...

          </div>

          </body>

          • 2. Re: Putting Media on top of a Photoshop image
            Nancy OShea Adobe Community Professional & MVP

            Have a look at the tutorials contained in the links below:

             

            Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW

             

            Part 1 --
            http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

             

            Part 2 --
            http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

             

            Adobe Developer's Center - Getting Started tutorials
            http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb

            1 person found this helpful