Converting Photshop Design to a DW site

[seanmetaphor]

I have an entire website designed on Adobe Photoshop. What is the best way to turn the pics into a DW site? How can I turn the design pics into working buttons with links etc. Should I set the bacjground as the Photoshop pic first. Apprectiate any help, thank you.

 

[danielh68]

If this is your first site, it sounds like you got a lot of work ahead of you. Since your question is rather broad, it might benefit you to invest some time in the tutorials provided in DW & PS. The tutorials will basically provide all the information you need to get started.

Hope this helps,
DanH

 

[GUJUm0deL]

Hiya, do this:

1) Save the photoshop files as a GIF (you do this: File -> Save For Web, a new window pops up, under setting select either JPEG or GIF and click OK) -- assuming you have one big image, like an interface...

2) Open DW

3) Insert a table (Insert -> Table), I usualy make my table width around 725...

4) Then, do Insert -> Image, and select the image that you converted...

5) Now this where you slice up the image...if you have a menu on the image (most interfaces have an menu) then in DW, select the hotspot (you can get them from the Properties box, just click on the small white arrow on the lower right) and out of the three types of hotspots select the one that suits your image...

6) If you want the menu buttons, to switch from one image to another, you have to do a rollover image (Insert -> Interactive Images -> Rollover Image)

7) Now, if you image has a place for the HTML files to load...you can do that a number of ways: one way is to create iFrames and iLayers (that is what I did on my site)...

Take a look at how I did it...the interface was done in PhotShop5.5 and then imported in DW, I created the hotspots on the buttons and created iFrames in the center...

http://www.geocities.com/GUJUm0deL

I have not failed; I merely found 100,000 different ways of not succeding...

 

[seanmetaphor]

Hey, thanks a lot for your help. I can't quite figure out how to use an IFrame or ILayer. If you get a chance could you let me know. Thanks again. seanmetaphor

 

[GUJUm0deL]

Hey, well using the iFrame and iLayer isnt that hard...
The basic syntax for an iFrame is this:

<iframe src=&quot;nameofthefile.html&quot; height=&quot;100%&quot; width=&quot;100%&quot; name=&quot;nameofiFrame&quot; bottomscroll=&quot;no&quot; frameborder=&quot;0&quot; bgcolor=&quot;&quot;>
</iframe>

The bold parts have two diff. meanings, the src=&quot;nameofthefile.html&quot; means that the intial HTML to load inside of an iFrame when the page is loaded...and the name=&quot;nameofiFrame&quot; is the name of the iFrame itself...
When your HTML page loads, whatever file you have specified as the &quot;nameofthefile.html&quot; will load...and when you want your links to open a page inside the iFrame you call it via the &quot;name&quot; attribute...
This is an example of how to use the HREF tags:

<a href=&quot;MainPage.html&quot; target=&quot;right&quot;>MainPage</a><br>
<a href=&quot;Downloads.html&quot; target=&quot;right&quot;>Downloads</a><br>
<a href=&quot;SitePiks.html&quot; target=&quot;right&quot;>SitePiks</a><br>
<a href=&quot;picks.html&quot; target=&quot;right&quot;>picks</a><br>

Now whenever you click any of these links, the page associated with that link will open in the iFrame window (in this example I called the iFrame window &quot;right&quot
Since you will be also be using &quot;map&quot; (which you create with DW when you use the hotspots), then your code should look similar to this:

<map name=&quot;Map&quot;>
<area shape=&quot;rect&quot; coords=&quot;129,543,249,556&quot; onfocus=&quot;blur();&quot; href=&quot;MainPage.html&quot; target=&quot;right&quot;>
<area shape=&quot;rect&quot; coords=&quot;390,542,509,556&quot; onfocus=&quot;blur();&quot; href=&quot;Downloads.html&quot; target=&quot;right&quot;>
<area shape=&quot;rect&quot; coords=&quot;260,543,378,557&quot; onfocus=&quot;blur();&quot; href=&quot;SitePiks.html&quot; target=&quot;right&quot;>
<area shape=&quot;rect&quot; coords=&quot;519,540,639,555&quot; onfocus=&quot;blur();&quot; href=&quot;picks.html&quot; target=&quot;right&quot;>
</map>

Any other questiopns, feel free to ask... I have not failed; I merely found 100,000 different ways of not succeding...

 

[Julianne]

Rather than saving the whole page as one big gif image I think you'd be better off slicing the design into relevant parts (using ImageReady or a shareware program) and reassembling the design in a Dreamweaver table. In this way the page will load much faster as it will have been sliced into smaller pieces. You can still apply rollovers, hotspots etc, plus there is the benefit that cells that contain just solid colour won't need to have a graphic in them at all as you can set the cell's background colour instead, thus saving on kb!

If you need me to explain a bit better or point you in the direction of tutorials on how to do this then let me know.

http://www.leevalleylions.co.uk