Converting Images to HTML by Splicing in Dreamweaver

[suzanne]

Hi,

I am a relative newbie to dreamweaver. I am most used to just hand coding html. But, in the interest of saving myself some time, I'd like to figure out how to take an image with a basic design, and splice it up into a table in dreamweaver. Then I can keep some of the pieces as images and and insert the appropriate html where it makes sense.

I know I've seen this done, I just can't seem to muddle my way through the macromedia forums/help text and figure it out.

I thought a few of the experts here might be able to point me in the right direction. Help!

Thanks.

Suzanne

[martinibuster]

Well,
If you have a photoshop mockup, you could conceivably insert it as a "tracing" image. But I wouldn't recommend that.

Part of what I do, when working from a mockup, is to decide which parts of the design will be a table cell with html color, and which parts are a colored 1 pixel gif, stretched out to fill up space.

In Photoshop, you set up your rulers and align them so that the zero point is in the top left corner. Then you pull out the guides and align them to the edges of the various buttons and graphics. You will have to zoom in all the way, as the guides have to be pixel perfect.

Buttons can be cut out this way, using your marquee tool if you wish, and care is taken to note how many pixels everything is from each other. The pixel measurements are gleaned from the guides. It can look pretty crosshatched, but when working from a photoshop mockup, that's what it can look like.

[suzanne]

well... at the risk of exposing myself as a complete newbie, I did find my answer. it's ImageReady. Duh. I knew I had seen it done and I must have just remembered the finished splices getting opened up in dreamweaver.

I thought I'd post my answer to myself for anyone else out there who is still learning all this stuff...

[martinibuster]

But I wouldn't recommend ImageReady for generating your actual HTML. Fireworks does the same thing, and works symbiotically with Dreamweaver. But I don't like the unusual amounts of TD's etc. that Fireworks and ImageReady makes, although Adobe is more infamous for it's bloated code. Makes a file that is far larger than it has to be.

[nvision]

Sometimes I find that I have to recreate the tables in Dreamweaver because Imageready sets them up wierd. But at least you've got the images sliced up...

You can also save yourself file size by sparing sliced one-colour images and filling in the respective table/cell background with that colour.