Trendy Website Design in Photoshop Part 3: Editing HTML in Dreamweaver

How to Edit ImageReady Generated HTML in Dreamweaver

This tutorial is the third of three parts outlining a method for creating great website designs tailored to your needs. You'll want to check here for the first and second parts, detailing the design process in Photoshop and generating HTML from slices made in ImageReady.

You won't need to have much knowledge of Dreamweaver at all - just the ability to find the tools and options discussed in this article.

How to Edit ImageReady Generated HTML in Dreamweaver

The moment you exported your slices in ImageReady, you created a web page that could (technically) be uploaded to the Internet as-is. But it doesn't do you much good to have a web page made up of nothing but a bunch of graphics. It might look nice, but it would take forever to download and search engines would absolutely hate it.

So, enter Dreamweaver. These last steps are really easy, and you'll have a complete website design in no time at all.

1. Open HTML in Dreamweaver: You'll need to have an html page ready to go. If you don't have one already, look for Part 2 of this tutorial series here. To open the file, just click "File", choose "Open", and navigate to your html file.

2. Set Content Backgrounds: Most of the slices we made in ImageReady represent areas where we'll type in content. What this means is that we don't need the graphic sitting in there at all - just the color used in that graphic.

Starting at the top of your page, perform this process to set all content areas to background colors ready for typing in:

*Click once on the slice to select it.
*Locate the "Source" of the slice (down below the design, in the Properties window).
*Highlight and copy the source text.
*Click once on the slice to select it again.
*Hit the backspace key on your keyboard to remove the graphic.
*Paste the source text in the "BG" option in your Properties window.