Review: Dreamweaver MX Part 2: Instant Web Design

A Recipe for Print Designers

Ingredients:

a good concept for a web site/ navigation system
Photoshop 5+
Fireworks MX
Dreamweaver MX
patience

This is a basic workflow for creating simple web sites using Photoshop, Fireworks and Dreamweaver. I have been using this workflow as a designer for a few years, and have been very happy with the results.

Step One: Concepting and Design in Photoshop

Since most designers are very familiar with Photoshop, I find it very easy to start out the basic layout in Photoshop. Use layers, shape layers, type layers and whatever else you need to mock up your site - and avoid the slice tool. Use guides as a means to simulate slices - and remember that all slices are going to end up as rectangles - there are no such things as elliptical slices.

I start with a Photoshop document in RBG color format, 72 dpi, and at a web-safe pixel size. If my target audience merits a design that fills a screen at 800x600 resolution, I create a PSD at 760x420 to allow for scroll bars and browser buttons. If I need to design for 640x480 screens, I use 600x300 as a starting resolution.

Although most monitors today display at a minimum of 1024x768 - I never actually build a page to fill that width. Good typographical practice requires that columns of text should never get too wide to maximize readibility. I have seen far too many pages designed at 1024 pixels wide with one column of text - making the text quite hard to read. I recommend never exceeding 550 pixels wide for a single column of text.

The Applelust Photoshop mockup - notice I'm using guides to help me layout the slices for individual graphics. Also, I'm only concerning myself with designing the graphical interface for the page - not the page contents that will be shown below.

For this recipe - I am using a theorhetical redesign of Applelust. I have set up the navigation for a "simple rollover" - which means that a given slice will activate a rollover only within the boundaries of the slice. In plain English - rolling over the the text will only change the text that is rolled over.

When I am done mocking up the website in Photoshop - I need to get the bad boy ready for Fireworks. If you follow the next steps carefully, you will have a Web page up in record time.

Step 2: Photoshop to Fireworks

First we need to save down the Photoshop file to 2 layers - an "on" and "off" layer. Both layers should be "complete" - with all image information present on both pages. Now, the easiest way to do this:

First, throw away any layers that do not actually get "used" in the design - all invisible layers that contain ideas you ended up not utilizing.
SAVE the document as xxxxfire.psd (xxxx is the name of your original document).
Next, TURN OFF THE VISIBILITY (the eyeball) of any layer that contains rollover text or imagery. This means BOTH "ON" AND "OFF" LAYERS should be made invisible (in my design, the text layers would get turned off, so all I would see is the logo and logotype, the background color, and the white bar at the bottom).
Now you should see the entire page contents except the rollover imagery/ text. Select one of your visible layers, and go to the Layer "options" menu (the little round button at the top of the layer palette) and select merge visible. This will condense all non-rollover design elements to one layer.
Drag this layer to the "new layer" button at the bottom of the layers palette to duplicate the layer. You now have two duplicate layers of the layout.

Here's what we are shooting for: a Photoshop document with two layers that include ALL of the image information for each rollover state - "on" and "off."

Turn off the visibility of one of the duplicate layers, and turn on the visibility of the "off" (off = when the mouse is not rolling over the graphics) rollover state (this might just be one layer, or several). If you need to adjust layer order, please do so that you can see the layout on screen just as it should appear in the final Web site. Only the "off" rollover state should be visible.

Select one of your visible layers, and merge the visible layers. This should result in one layer that contains the background, graphics, and "off" rollovers.
Turn off the visibility of the merged "off" layer.
Turn on the visibility of the remaining layers, and adjust layer order if necessary.
Merge visibility of the remaining layers (make sure is visible layer is selected in the layers palette first) to create a single "on" layer.
Place the "on" layer above the "off" layer - renaming the layers is optional. You are now ready to take this document into Fireworks. Save and quit Photoshop.

Getting ready to rip in Fireworks

Set Fireworks to Convert Photoshop Layers to Frames

Launch Fireworks, and immediately head for the preferences. Go to the Import preferences, and set Photoshop File Conversion to "Convert to Frames." If you build graphics in Fireworks already - these will not be affected as they affect only imported Photoshop files.

Go to open>file and open up your xxxfire.psd file. The "on" and "off" layer will convert to frames, making setting up rollover behaviors in Fireworks REALLY EASY.

Now, we need to slice up the layout to create the individual graphics for the Web page. I recommend slicing EVERYTHING in the design. Leave no part of the image unsliced. You will need individual slices for all of your rollover buttons.

Slicing in Fireworks - use the slice tool to create slices for your page. I prefer to make slices that define specific parts of the page - such as the large slice that contains the logotype.

ALSO - notice I'm making the page more accessible to the visually impaired by defining an Alt tag.

When you create your slices, make sure you define descriptive Alt tags for all of your graphics. Alt tags are used by screen readers to aid the visually impaired - so Alt tags should definitely contain any text shown in the graphic. I also make it a habit to "name" the slice - the slice above is named "logotype."

After you have named all of your slices, you can select the slices that contain rollovers (hold down the shift key to select multiple slices with the "black arrow" tool) and assign rollovers to these slices in one fell swoop.

Under the Window menu, open the Behaviors panel. With all the rollover slices selected, click the little "+" sign in the Behaviors panel and add a simple rollover. Congratulations, you now have rollover images. It's that easy. You can preview your rollovers be clicking the "preview" tab at the top of the Fireworks document window.

Optimize and Export

Optimize your graphics in the Preview window to use the fewest colors you can get away with...

After you define all of your slices, go through and name your slices and add Alt tags. Then you can optimize your slices to maximize image quality while minimizing download size. Open the Optimize panel and set up each slice (or all of the slice together) to the best possible settings. A bit of advice - I only use JPGS for photographs - I use GIFs for all graphic elements to maintain color consistency. Using the Optimize panel with the preview window - you can find the lowest color GIF settings that still look good. Go with as few GIF colors as you are comfortable using - reduce color until you can see pixels shift.

After you have named, optimized and Alt tagged your slices, you are ready to export to Dreamweaver.

Go to the file menu, and choose Export... from "Original" mode (you know - right next to the preview tab). Fireworks is going to slice and dice your graphics and create tables for you - we just need to give Fireworks a little advice on what we want. In the Export dialog - click "Options" right away, go to the "Tables" tab, and set it up to match the graphic at the right. Using nested tables instead of 1 pixel spacers will actually work quite nicely in Fireworks MX. After you have set up nested tables, hit OK to head back to the Export dialog.

Select a folder to save your files into - and make sure your export settings are set up like the following:

Definitely put images in a subfolder, and you will also want HTML and images as well.

After setting up your Export settings - hit OK. You are now ready to head into Dreamweaver. Save your work as a .png file into the same folder that you just exported to and quit Fireworks.

Finishing Touches and HTML production

Open Dreamweaver, and go to Site>Site files. Setting up your site is the most important step in the using Dreamweaver - doing it correctly can make Dreamweaver work a true pleasure, doing it wrong can make a day go to hell in a handbasket.

I'm going to assume you know some basic elements of Web design for this next section, to keep this page from reaching critical mass.

In the Dreamweaver Site Window - click on Define sites and create a site that will hold your HTML files. The local root folder should be the folder you exported your HTML and graphics into from Fireworks. Correctly indentifiying that folder to Dreamweaver is a huge step toward Web happiness. the rest of the information, while important, is not nearly as critical as the local root folder. You can also define an images folder (you should have one) and give your site a name (this is a name only used by Dremaweaver to select your site). If you have a space on a server - fill in the site address and click on the "Remote Info" category to fill in FTP or local server address information.

Hit the ubiquitous OK button, and you are ready to build your site.

Go to File>New and create a new HTML page. Save it into your local root folder as layout.html. Click the Insert Fireworks button in the Insert panel and choose the Fireworks HTML that was created when you exported from Fireowrks, NOT THE PNG file. This should insert a table full of graphics and rollovers into your layout.html document.

You can then go to Modify>page properties and set background colors, margins, titles and text colors to customize your page.

Go to the File menu and choose Save as Template... to create a template for your site that will speed up the production of your site. Give the Template a name that describes the site content, and hit OK. You now have a template that you can use to build your entire site.

In the DWT file (notice it does not have a .html extension) you can add tables for text, graphics and content. Take some time customizing your design to maximize readability.

Templates are used to easily update design elements in your site - but you'll need to add editable regions to allow custom content on every page. Select the table or cell that will hold your content (or many tables or cells, you can have as many editable regions as you wish, just keep repeating this step for every region) and go to Insert>Template Objects>Editable Region to define that cell or table as editable. Now you will be able to only edit editable regions in individual HTML pages (which you'll start building shortly).

You can add a CSS to your template using the CSS styles panel - click the little New CSS Style button at the bottom of the panel to create a new style in a new external style sheet that you should save into your root folder (the Dreamweaver manual has some great information about CSS style creation). By creating a new style sheet connected to your Template, all of your pages will automatically link to the style sheet.

What other pages you ask? Well, we are getting to that. Go to File>New and click on the Template tab at the top of the window. You should see a preview of your template - select the template name and create a new page. Save this page as whatever.html (actually, give it a good name) in you local root folder. Repeat as necessary until you have all the pages you are going to need for that site.

You can then reopen the Template (cleverly placed in your Site in the "Templates" folder - and you should NEVER EVER rename the Templates folder) and link all the navigation buttons to their respective pages using the Properties panel.

When you save the Template - you will be asked if you care to update the pages in your site. Updating the pages will then apply any changes to have made to your entire web site - but will not affect the contents of editable regions.

Final Tweaking

Add all the content that your heart desiers in the pages you have created, but keep in mind that disorganization may be a sign of genius, but its also a sign of being a total slob. If you need to create new files and folders and move pages around - make all of these moves, name changes, and new folders inside the Dreamweaver Site window. Using the site window effectively will save you hours from repairing broken links, as Dreamweaver will automatically update pages to reflect moves and name changes.

Spend some time testing and tweaking your site - but once you have gone through this process a couple times, you will find it only takes about 20 minutes to get from Photoshop to a Dreamweaver Template, depending on how fast you type.

Besides, Dreamweaver and Fireworks creating industry standard code, having awesome tools and a decent price - this workflow is the reason I will always keep coming back to Macromedia for Web design applications.

- Joel Davies

What do you think? Talk about it in our Forums...

MacBook Pro (5-17-06) Dr. Neale Monks. A subjective review of the MacBook Pro
Freeway 4 Pro (2-28-06) Dr. Neale Monks. Freeway Pro, the Quark-like web design program from Softpress, has been substantially revised and sports a bright new look. But do the changes go more than skin deep? Neale Monks finds out.
Astrostack (1-18-06) Dr. Neale Monks. Long respected as one best astronomical image processing applications about, in its newest incarnation AstroStack now runs on the Macintosh. Has the wait been worthwhile?
Virtual PC 7 (11-23-05) Dr. Neale Monks. Virtual PC 7 is the update to the venerable Windows emulator to be entirely all Microsoft’s own work. Can Mac users expect to see any dramatic changes?
Eudora Pro 6.2 (8-5-05) Dr. Neale Monks. Eudora has been one of the most popular e-mail clients for the Macintosh for more than a decade. Neale Monks finds out how it compares with the Mail application that comes with OS X
MacAstronomica (4-22-05) Dr. Neale Monks. How does this amateur naked eye astronomy software stack up?
iKey 2.0 (3-11-05) Jeremy Young. How well does this automation utility work? How much time will you save?
Wolfram Research Publicon (3-11-05) Jeff Terry Does this new scientific word processor live up to the potential?
Microsoft Office 2004, Part 3, Word (1-28-05) Dr. Neale Monks. Are there enough new features to necessitate a jump from v.X?
REALbasic 5.5 (12-03-04) Dr. Neale Monks. Neale takes a look at the latest version of this programming package.
Office 2004, Part 2, Excel and Entourage (11-05-04) Dr. Neale Monks. In the second part of his review of Office 2004, Neale Monks looks at Excel and Entourage.
Phone Valet 2.0 (11-05-04) Pat St-Arnaud. The best question to ask might be "Is there anything that you can't do with this telephone/Mac integration tool?"
TiPaint Touch-up Kit and iKlear iPod Cleaning Kit (10-29-04) Dr. Neale Monks. Is it possible to restore the shiny good looks of iPods and PowerBooks even after years of use? Neale Monks looks at two cleaning products designed especially for Apple hardware.
Microsoft Office 2004, Part 1, PowerPoint (10-15-04) Dr. Neale Monks. In the first part of his review of Office 2004, Neale Monks looks at PowerPoint, for many people still the benchmark for presentation software.
ScrapX (9-17-04) Dr. Neale Monks. Aqueous Software's ScrapX brings the Scrapbook to OS X
CDFinder (8-20-04) Dr. Neale Monks. Finding what you want from among a stack of similar looking CDs can be a hassle, but help is at hand. Neale Monks looks at CDFinder, a budget-priced but powerful cataloguing tool.
Endnote 7 (8-13-04) Dr. Markus Geisen. EndNote 7 is a literature database that seamlessly interacts with your word processor. Is the latest version worth the upgrade?