Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Diving into Studio MX
Pages: 1, 2, 3

Creating the Image Files

  1. Start Fireworks, and open a new document that's 300 pixels wide and 50 pixels high with 300 ppi resolution (the final Web files will have a lower resolution). Choose Custom for Canvas Color, and in the picker, select #99FFFF, to match the Web pages.

  2. Select the Text tool and click the Left alignment button on the Properties bar. From the Fill Color pop-up, choose #000066, and enter 30 in the Size field. I chose Gadget as the font, but of course you can use anything on your system. Click in the document and type "DidYouKnow.Com," then click outside the blue area, and center the title using the arrow keys. Click the Add Effects (+) button on the Properties bar. Choose Drop Shadow from the Shadow and Glow menu, and change the parameters until you like what you see. Press Enter to apply the effect.

  3. Save the file as "title.png," in your Source folder. In the Optimize panel (if it's not visible, just choose Optimize from the Window menu) select "GIF WebSnap 256" from the Settings pop-up, click the Quick Export button in the upper-right-hand corner of your document, and dragging your mouse select Dreamweaver, then Export HTML. From the Save As pop-up in the lower portion of the Export panel, choose Images only, and the filename at the top will change from title.png to title.gif. Save title.gif in the Assets folder in your Site folder. Change the text to "Flame," center the text in the document, and follow the same steps to export the file as flame.gif, stored in your Assets folder. Repeat these steps to create titles for "Bounce" and "Spin." Close title.png, and don't save the changes. (You may notice that a folder called _Notes may have been added to your Assets folder. This is normal, and you can ignore this folder.)

Creating a Rollover Button

  1. Create a new Fireworks file measuring 120 pixels wide by 25 pixels high, with a resolution of 300 pixels per inch. Keep the same Custom color. Using the text tool, keep all the type parameters the same except for the size, which should be 14-point. If you have the font Wingdings, use that and type Shift-Option-y, for a backward-pointing arrow. Then change the font to Gadget (or whatever you're using), type "DidYouKnow," click outside the blue area, and use the arrow keys to center the text in the document.

  2. Click once on the text, choose Symbol from the Modify menu, and choose Convert to Symbol. Name the symbol "Home Button," choose Button for symbol type, and click OK.

  3. Using the solid-black Pointer tool, double click on the "DidYouKnow" text, and click the Over tab. The Over state defines what happens when someone rolls over the object with a mouse. Click the Copy Up Graphic button to copy the button's normal state into the over state. But now let's add a glow. Making sure the text is selected by a rectangle, click the Add Effects button in the Properties bar, and choose Glow from the Shadow and Glow menu. In the Width box enter 1, for a color choose the bright yellow on the left side of the pop-up and slide the Softness control to about 6, or to whatever provides the most pleasing effect. Hit the Enter key to set the effect, click on the Down tab, and click the Copy Over Graphic button to copy the image to the next state. Do the same for the Over While Down state, then click on the Active Area tab. Here, you can change the size of the active area, but the defaults will work fine. Click Done, and save the file as HomeButton.png in your Source folder.

  4. Click on the Quick Export button to export HTML to Dreamweaver, but this time, in the Export dialog, set the Save As pop-up to "HTML and Images." For the HTML pop-up, select Export HTML file, and for the Slices pop-up, choose Export Slices. In the check boxes that follow, only "Include Areas without Slices" should be checked. In the top half of the Export dialog box, navigate to your Assets folder and click Save. You'll see a small message telling you that a command script is running, and several new files will be added to your Assets folder. Close HomeButton.png, and you don't need to save the changes.

Bringing Media Into Dreamweaver

  1. Open index.html with Dreamweaver. Click in the top-most table cell in the Design View window, and then click on the Image icon on the Common tab of the Insert bar (It looks like a tree). Navigate to the title.gif file that you created and stored in the Assets folder, and hit Choose. Save the file, and close it.

  2. Using the same steps, open up flame.html, and insert the flame.gif title. Then click in the leftmost column of the three-column table and insert the file MatchDnB.jpg from your Assets folder. This is the static, "button-clicked" image. Click in the bottom table cell, and then click the small orange Fireworks icon on the Common tab of the Insert bar. In the Insert Fireworks HTML dialog box, click the Browse button, navigate to the HomeButton.htm file you created earlier, and click Open, then OK. Finally, click on the button you just created, and in the Properties bar, in the Link field, replace whatever may be in there with "index.html" (without quotes), hit Return or Enter, and save the file. To preview the page in a browser and test your rollover, hit the F12 key. The home button should brighten when you pass your mouse over it, and when you click it, it should take you back to the main page. Repeat the steps to add titles, "button-clicked" images (BallDnB.jpg and TopDnB.jpg) and home buttons to bounce.html and spin.html; be sure to insert BallDnB.jpg to the center column in bounce.html, and TopDnB.jpg to the right-hand column of spin.html.

Pages: 1, 2, 3

Next Pagearrow