Using Photoshop with Dreamweaver

[henrikjt]

Hello All,

I've been watching lynda.com training videos on "Dreamweaver" and "Photoshop for the web". Almost done with the photoshop video. One thing that is not clear to me is: can i create the full page in PS and then just add the links in DW?

Please look at this example: This looks like a complete layout, would one slice it up and import each image or would one save it in html.

 

[OdinSmasher]

you could look into hotspots to be used but that would limit any rollover effects

 

[Vanish Design]

It may be possible but I wouldn't recommend it. You'd end up with an inefficient, image heavy page, and I'm not sure if it would use tables or CSS for layout but I'd bet on the former.

 

[Haqqan]

This is basically what I do, but I don't know how good it is. Sure is easy though

Basically I slice them in PS then make the image where there's supposed to be text a table and make the image that was intended there the background of the table. The links are all seperate slices. Very very easy and if you "saved as web" in ps the images will be pretty light-wight .gif's so it's not that very heavy. Another option is to make iframes of the image where you want text.

I really don't know if this is the best way, but as i said, it's a very easy method

 

[adamblan]

can i create the full page in PS and then just add the links in DW?

You could, but like Vanish said, that would be a bad idea...

 

[PixelPusher]

I would not create the whole page in PS and then just add links in DW. Bad practice. Way too heavy on images. Just use images for the more intricate stuff like the map, logo, and tea cup. If you slice the site up corrcetly, many of those solid color areas can be replaced by just a hex color. There may be a slight shift in color, by using hex instead of the image, but nothing drastic.

As for your buttons, the dark grey box seems to have a styled border. You could make the button background into three images: left cap, right cap, and a tile image. That keeps the images small, and the tiled one should only be 1-3 pixels wide. If you set these images as the background (L/R cap images as no-repeat, and tile image as repeat-x) you can still acheive that same look as in the psd file. Then just add the text links into the TD or DIV. What structure are going to use? Tables? Tableless?

When getting started with the slices, I would use guides in PS to help lay them out. The snap feature also works well; assures the slices will not overlap and will fill the designated areas perfectly.

Good luck