Inserting Fireworks s HTML Command

Team-Fly    

Macromedia® DreamWeaver® MX Unleashed
By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 15.  Integration with Complementing Programs


Inserting Fireworks's HTML Command

When you create a rollover button, an image map, a drop-down menu, or even an entire Web page with JavaScript functionality, you must import not only the image produced in Fireworks, but also the code that Fireworks produced. This is easy enough to do in Dreamweaver MX.

Creating a Button in Fireworks

The first thing you need to do is create a rollover button inside Fireworks. Then you need to import that button into Dreamweaver. I will briefly review how to make a button in Fireworks; however, if you need to learn Fireworks MX, several books are available on the topic. To create a button in Fireworks, follow these steps:

  1. Create a new document by choosing File, New. This launches the New Document dialog box. Specify the dimension you would like for this image. There is no need to be too picky, you can fix any size problems later. Click OK to open the new document.

  2. In the new document choose the Rectangle tool. In the Tools panel also choose a fill color and a stroke color. Draw a box on the document as shown in Figure 15.12.

    Figure 15.12. Draw a rectangle on the document. Notice that the rectangle's dimensions are smaller than the document's.

    graphics/15fig12.jpg

  3. The shape you just drew is probably smaller than the dimensions of the document. You want the document and the box to be the same size. To do this choose Modify, Canvas, Trim Canvas. The rectangle and the document are now the same size.

  4. With the rectangle selected, press F8 on your keyboard to bring up the Convert to Symbol dialog box. Here type in the name and choose Button for Type.

  5. This automatically draws a slice around the rectangle. Double-click the slice to enter the button symbol editing mode.

  6. Click the Over tab to edit the Over state of the button. Click the Copy Up Graphic button toward the bottom-right corner of the dialog box, as shown in Figure 15.13. This will carry over any attributes, including the graphic as a whole, from the Up state.

    Figure 15.13. You can copy the previous state of the button by pressing, in this case, the Copy Up Graphic button.

    graphics/15fig13.jpg

  7. After you click the button, the Up state is copied to the Over state. Notice that all the tools are still available to you. Highlight the square and in the Tools panel change the fill color. This is the color the button will change to when the end user hovers over the button.

  8. Click the Down tab. In the Down state click the Copy Over Graphic button. The Down state now has the same attributes as the Over state. Select the square and change the color or make some other physical change. This is how the button will appear when the end user clicks it.

  9. Repeat step 8 for the Over While Down state. Over While Down occurs when the end user clicks the button and, without releasing the mouse button, mouses away from the button and then, still holding the mouse button down, mouses back over the button. Yes, it's as practical as it sounds.

  10. Finally, click the Active Area tab. This is the same concept as a hot spot in an image map. This defines what area activates the button. For the best results, make sure the active area covers the entire graphic. Click Done when you're finished making all changes.

  11. Click the Preview tab at the top of the document to see how your button will behave in a browser.

Now that you have a button made, you're ready to export it out of Fireworks. For a rollover graphic to work, JavaScript is written so the button's behaviors will work properly in a Web browser. Our main goal is to take this button we've created in Fireworks and import it into Dreamweaver. When we export this button, it's very important to export an HTML file along with it. To export this button choose File, Export. This opens a dialog box. In the Save As drop-down menu, be sure to select HTML and Images. You may want to save this file in the local root folder of the site you're working on in Dreamweaver. Next, check off the Put Images in a Sub Folder option and browse to find an image folder inside the local root folder of the site you are working with in Dreamweaver. After all that is set, click Save.

Inserting Fireworks HTML

Now that you have created a button in Fireworks, you're ready to bring it into Dreamweaver. The process is quite simple. Follow these steps:

  1. Place a blinking cursor anywhere in the document to act as the insertion point.

  2. In the Insert panel under the Common tab, click the Fireworks HTML button to open the Insert Fireworks HTML dialog box. All you have to do here is browse for the HTML file generated by Fireworks.

  3. Click the Browse button and the Select File dialog box will appear. Navigate to the location of the HTML document you exported from Fireworks. When you find it, click OK to return to the Insert Fireworks HTML dialog box.

  4. Click OK in the Insert Fireworks HTML dialog box. The button now appears inside your Dreamweaver document. Preview this document in a browser to make sure the rollover works.

Inserting Fireworks HTML is that simple. Unfortunately, the process is a bit more complex if you're a Photoshop user. We'll take a look at that toward the end of this chapter. Depending on your comfort level with code, it may be worth it to explore Fireworks as your Web imaging authoring tool.


    Team-Fly    
    Top


    Macromedia Dreamweaver MX Unleashed
    Macromedia Dreamweaver MX 2004 Unleashed
    ISBN: 0672326310
    EAN: 2147483647
    Year: 2002
    Pages: 321

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net