with Fireworks 2004
 

Because a webpage will only display properly using a basic serif (e.g., Times New Roman) or sans serif font (e.g., Arial), it's necessary to create a picture of text in other fonts and use that picture to show the text on the page. Also, it is possible to add a 3-D effect using, for example, bevel and drop shadow. The result is "fancy text", like that at the top of the page. This is how you do it...

In Dreamweaver 2004, determine the background color of the page by clicking the Page Properties button.

Identify the 6-digit hexadecimal number that identifies the page color and write it down.

In Fireworks 2004, click on Creat New Fireworks File (or File, New) from the menu.

Set Width to approximately 600 and Height to perhaps 100 pixels. For Canvas Color, select Custom and then click on the popup color palette, type in your own color hexadecimal number (from your Dreamweaver webpage) and press Enter.

You should now have a rectangle of the same color as your webpage. In the Tool Palette at the left side of the screen, select the Text Tool (letter A in the Vector Group) and then select your font typeface (e.g., Monotype Corsiva), size (e.g., 65), color (from the dropdown palette), and perhaps add Bold to provide some thickness to the letters.

Now click somewhere toward the left side of your colored rectangle and type the text. Once you are finished entering the text, you can move it around using the Select Tool in the Tool Palette. This is the idea of what things should look like...

Click on the Select Tool in the Tool Palatte to allow you to see the Effects option in the Properties window. To add a bevel effect, click on the + sign at the bottom of the screen to the right of the word Effects (if you do not see it, click the down triangle just to the right of the Add Effects button; if you don't see that, click on the text itself with your arrow pointer). From the pop-up list, select Eye Candy, and then Bevel Boss.

Set the Bevel Width to about 10.00, Bevel Height to perhaps 50, and Smoothness to 25. Bevel Placement can be set to Inside marquee (although Outside marquee also produces an interesting effect). Then click OK.

Now click on the + sign beside Effects and select Shadow and Glow, and then Drop Shadow.

Set both shadow size and diffusion to perhaps 7.

At this point, you may want to save your original Fireworks file, perhaps to a folder called originals. (You can go back later, and change the text using the Text Tool to quickly generate other fancy text.) This file will be a PNG file (Fireworks' native format). Note: Do NOT load this PNG file on your webpage. It will display in Dreamweaver and on some browsers, but the file size is very large and it will not even display on many browsers. You need to export the file in an appropriate format (i.e., GIF) for display on a webpage.

Now we are ready to export the fancy text as a GIF graphic for display on a webpage. To export, use the Export Area Tool in the Select section of the Tool Palette (if the Crop Tool is displayed, you may need to click and hold to get the popup menu which gives you the Export Area Tool). Now click and drag a dotted box around the portion of the graphic that you want to save. (You can get close on the sides, but leave a little space on the top above the text and avoid coming too close to the drop shadow. You can resize the dotted box dragging its handles. Don't worry about the blue box, if one is visible.)

Now double-click inside the dotted box and the export dialog window will appear. Just click the Export button in the lower righthand corner. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .gif at the end, if it shows that). Click Save.

Back in Dreamweaver, load the fancy text graphic into your webpage just like you would any picture.

© 2004 by John Wesley Taylor V