Editing in Fireworks from Dreamweaver

 < Day Day Up > 

When you create a page in Fireworks and then export it as HTML, Fireworks builds an HTML table the size of your canvas and creates cells within that table based on the slices or the slice guides. Once you are in Dreamweaver, you may want to return to Fireworks to make a change on the page. You could switch back to Fireworks, open the PNG file, export the file, and then return to Dreamweaver and open the new HTML page. Because of the integration of the two programs, however, the process is even easier. Just select the table on the HTML page and click once, and you are editing in Fireworks. Click once more, and the file is re-exported and you are returned to Dreamweaver. What could be easier?

1.

Open the template.htm file by double-clicking it on the Files panel. Change the title to Sweet Creations.

This file contains the header, logo, and buttons that you've used at the top of all of the pages; there is also a large white image on the page. You will add a text slice in Fireworks to replace the image.

2.

Click the white area in the middle of the page.

Look in the Property inspector to see the size of the image. It is a large image because you didn't draw any slices in this area. You could just delete this image in Dreamweaver and leave a large cell for inserting text or other images. Instead, you will edit this file in Fireworks and draw a smaller slice in this area, adding more white space around the cell.

The trick to editing the table that Fireworks created is to select that table in Dreamweaver. Look at the tag selector in the bottom left of the Document window. There you will see some HTML tags defining the page.

Note

If you see only the body tag, then click one of the images on the page. The other tags should appear.

3.

Click the <table> tag in the tag selector.

The table is selected, and the Property inspector changes to reflect the selection of a Fireworks table. You should see your Fireworks file listed in the Src text box.

Note

If you exported your file with nested tables, you will see multiple table tags in the tag selector. Select the left-most table tag to select the Fireworks table.

4.

Click the Edit button.

The template.png file opens in Fireworks. At the top of the Document window, you'll see text indicating that you are editing from Dreamweaver; you'll also see a Done button.

5.

Select the Slice tool and draw a slice within the white area of the canvas and then change the slice to an HTML slice.

Leave some space between the slice and the buttons and the slice of the stick. Extend the slice to the bottom of the canvas.

6.

Click Done.

Your file is saved, and you are returned to Dreamweaver. The page is updated with an empty cell where you drew the HTML slice. The title you added to the page is retained when you return to Dreamweaver.

7.

Select the candy image and link it to home_page.htm as you did previously, and then save your file.

You want the link on the candy to appear on each page you build from this template.

     < Day Day Up > 


    Macromedia Fireworks 8(c) Training from the Source
    Macromedia Fireworks 8: Training from the Source
    ISBN: 0321335910
    EAN: 2147483647
    Year: 2005
    Pages: 239
    Authors: Patti Schulze

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