Trendy Website Design in Photoshop Part 3: Editing 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.

3. Set Resizable Backgrounds: On each side of your content areas, you should have a thin line that will allow the background to "stretch". The problem is that just a single graphic won't do that on its own. Instead, follow the steps above for setting a content background - but don't delete your original graphic. This way, when you type text in the content area, the sides will stretch without the design appearing to break up.

4. Set Links: To set a link on one of your navigation buttons, for example, follow these steps:

*Click once on the graphic to select it.
*Locate the "Link" option in your Properties Window.
*Type the link location in the box.

5. Save & Start Typing: With everything you've just done, your page is ready to be used as a template for your website. Save the changed html, and start typing away!