Web Design II: Dreamweaver and Fireworks

Lesson 1: Eat Your Fruits and Vegetable: Exporting Rollovers and HTML with Fireworks

In this lesson we will learn how much we can actually accomplish in Fireworks for web page development including HTML editing that could also be done in Dreamweaver but not as efficiently. We will be creating a very simple example of a web page with two links, built entirely out of a picture we obtain from an online archive of free images.

See an example of the finished product from this lesson

We begin by saving the image below to your computer by right-clicking and choosing "Save Picture As...". Save the file with the default name (should be "fruitsandvegetables.png").

Next, launch Fireworks. Open the file you just downloaded. The format of this file is Portable Network Graphics (PNG). The PNG format is an interesting and very versatile web format, but if it contains bitmaps like ours does, it can be quite a bit larger than its equivalent in a JPG format. This is important to keep in mind for users who might have slow internet connections.

(Note: this next section is Optional) With the file opened in Fireworks, the first step is to create a gradient screen to gradually lighten the upper part of the image. To do this, we will select the Rectangle tool from the Tools Palette and draw a rectangle with no stroke and a linear gradient fill.

Your gradient will need to change from black to white, and it will need to be vertical with the white on the top. Draw your rectangle so it covers the entire image.

Next, in the Layers panel on the right (if you don't see the Layers panel on the right, select Layers from the Window menu), click the popup menu displaying "Normal" and select "Lighten". Your image should now look something like this:

Next, we will select a smaller rectangular region from the upper middle of our image and copy and paste it over our image. Choose the Selection tool from the Tools Palette and click and drag a rectangle similar to the image below:

Choose Copy from the Edit menu, then choose Paste and the smaller rectangular region should appear as a new layer above the larger bitmap. If you do not see any change in your image, check the Layers panel and be sure the smaller rectangular bitmap is above the gradient rectangle. If it is not, click and drag it above the Rectangle layer:

Next, we want to lighten our smaller rectangular bitmap. To do this, select it with the Selection tool. In the Properties panel along the bottom, locate the Filters property and click the black cross. A popup menu appears. Select Adjust Color >> Hue/Saturation...

The Hue/Saturation property window appears. Set the Lightness to a value of 85:

Click the Filters property popup menu again and choose Bevel and Emboss >> Inner Bevel:

The Inner Bevel settings popup appears. Adjust your settings similar to the image below:

Lastly, click the Filters property popup again and select

The Drop Shadow settings appear. Adjust them closely to the image below:

Your image should now resemble the image below:

Next, we will add a text object with two lines of text. Select the Text tool from the Tools Palette and click in the left of the lightened bitmap. Type "Eat Your Vegetables", hit RETURN, and type "Eat Your Fruits", similar to the image below:

With this new text string selected, in the Properties panel adjust the line height to 140:

Next, you can add an inner bevel and a drop shadow to your text to help make it "pop out" at the user.

Now we will add a second Frame to our document and copy and paste all of the contents from Frame 1 into Frame 2. To add a new Frame, click the New/Duplicate Frame icon in the bottom of the Frames and History panel on the right. Select Frame 1 again, and choose Select All from the Select menu. Choose Copy from the Edit menu, select Frame 2, and choose Paste from the Edit menu:

Frame 2 should now contain the identical content to Frame 1.

Next, we will change the text in Frame 2 to a light yellow color. This will be the color the text turns when the user's mouse rolls over it.

With Frame 2 selected, click the text object. Change the text color to a lighter yellow color. Next we will create what Fireworks calls Image Slices so we can export our image as a sliced up set of smaller images with behaviors attached to some of them. To do this, select the Slice tool from the Web section of the Tools Palette on the left. Draw a rectangular slice around just the text "Eat Your Vegetables". Copy this rectangular slice and paste it so it covers the text "Eat Your Fruit". Be sure it is lined up exactly with the slice above it. Your image should resemble:

Now we will add Image Rollover behaviors to our text buttons. Select the image slice over the first text button and click the small round target icon in the center. A popup menu will appear. Choose "Add Simple Rollover Behavior":

In the Properties panel enter the filename "eatyourvegetables.html" into the Link text box:

Repeat these steps with the second image slice, but instead enter "eatyourfruits.html" into the Link property text box.

Save your work. Next we will export the whole document. In the File menu, choose Export. The Export dialog box should appear:

Give your exported file a name like "fruitsandvegetables.html". Be sure you check the checkbox for "Include areas without slices" and for "Put images in subfolder". Click "Export".

Finally, you can open your exported file in Dreamweaver and make further changes or preview it in a web browser.