Working with Fireworks HTML
|
| < Day Day Up > |
|
With few exceptions, pages exported from Fireworks MX use table structures for layout. User-defined slices build complex rows and columns that are exported as one big table by default. To keep the complex structure from falling apart, an extra row is added along the top of the layout, and spacer GIFs — formed from a 1 × 1 transparent pixel image — are stretched to the column's required width.
Fireworks MX See Chapter 23 for options and more information about how Fireworks MX exports HTML.
Because Fireworks cannot export all types of tables, it's likely you will want to modify the table structure and add HTML text content, links, and other elements inside of Dreamweaver. You can open and modify Macromedia Fireworks MX pages in Macromedia Dreamweaver MX. The simpler your layout in the Fireworks page, the easier this is to do in Dreamweaver. When your design's slices are too complex, it is often easier to rebuild the page layout in Macromedia Dreamweaver rather than try to modify it.
No graphic application's HTML features match those found in Dreamweaver. For professional, fine-tuned, and modular pages, it is always better to build the HTML in Dreamweaver rather than rely on Fireworks to export the entire page. Later in this chapter, you see how to rebuild a page layout and bring in carefully planned exported HTML from Macromedia Fireworks MX.
Opening a Fireworks page
To use Fireworks pages in Dreamweaver, export the page and images (from Fireworks) into a folder, and in Macromedia Dreamweaver define a new site using that folder as the site root. You can, of course, export the page into an existing Dreamweaver site. Figure 34-7 shows the Habitat Alert page as exported from Macromedia Fireworks and viewed in Macromedia Dreamweaver.
Figure 34-7: Basic page and complicated table structure exported from Fireworks MX
Modifying a Fireworks table
The table structure of the page illustrated in Figure 34-7 is actually far more complicated than the final page structure used for the Habitat Alert site, because Macromedia Fireworks creates a separate cell for each slice. Since cells form the grid of rows and columns, and Macromedia Fireworks (by default) uses one table to contain everything, the table is very complex and contains 11 rows and 11 columns, as marked by the dotted lines in Figure 34-7. The code is long and complex, with many spans. A span is formed by merging cells and should be avoided unless absolutely necessary. Unfortunately, Macromedia Fireworks tables make excessive use of spans, as shown in Listing 34-1.
Listing 34-1: Code for the Fireworks HTML file
 |
<html> <head> <title>pacificalliance.gif</title> <meta http-equiv="Content-Type" content="text/html;"> <!-- Fireworks MX Dreamweaver MX target. Created Sat Jul 27 09:03:54 GMT-0700 2002--> </head> <body bgcolor="#ffffff"> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="680"> <!-- fwtable fwsrc="/books/2/375/1/html/2/typical_export.png" fwbase="pacificalliance.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" --> <tr> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="231" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="19" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="112" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="15" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="62" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="51" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="43" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="51" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="53" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="43" height="1" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="1" border="0" alt=""></td> </tr> <tr> <td><img name="banner_left" src="/books/2/375/1/html/2/images/banner_left.gif" width="231" height="74" border="0" alt=""></td> <td rowspan="2" colspan="9"><img name="logo" src="/books/2/375/1/html/2/images/logo.jpg" width="449" height="102" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="74" border="0" alt=""></td> </tr> <tr> <td rowspan="2"><img name="location_" src="/books/2/375/1/html/2/images/location_.gif" width="231" height="45" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="28" border="0" alt=""></td> </tr> <tr> <td rowspan="2" colspan="3"><img name="btn_left" src="/books/2/375/1/html/2/images/btn_left.gif" width="146" height="21" border="0" alt=""></td> <td rowspan="2"><img name="btn_learn" src="/books/2/375/1/html/2/images/btn_learn.gif" width="62" height="21" border="0" alt=""></td> <td rowspan="2"><img name="btn_act" src="/books/2/375/1/html/2/images/btn_act.gif" width="51" height="21" border="0" alt=""></td> <td rowspan="2" colspan="2"><img name="btn_support" src="/books/2/375/1/html/2/images/btn_support.gif" width="94" height="21" border="0" alt=""></td> <td rowspan="2"><img name="btn_find" src="/books/2/375/1/html/2/images/btn_find.gif" width="53" height="21" border="0" alt=""></td> <td rowspan="2"><img name="btn_right" src="/books/2/375/1/html/2/images/btn_right.gif" width="43" height="21" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="17" border="0" alt=""></td> </tr> <tr> <td rowspan="3"><img name="circlepic0" src="/books/2/375/1/html/2/images/circlepic0.jpg" width="231" height="171" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="4" border="0" alt=""></td> </tr> <tr> <td colspan="9" bgcolor="#ffffff"><img src="/books/2/375/1/html/2/images/spacer.gif" width="449" height="91" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="91" border="0" alt=""></td> </tr> <tr> <td rowspan="2" colspan="6" bgcolor="#ffffff"><img src="/books/2/375/1/html/2/images/spacer.gif" width="302" height="118" border="0" alt=""></td> <td rowspan="4" colspan="3"><img name="shop_items" src="/books/2/375/1/html/2/images/shop_items.jpg" width="147" height="170" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="76" border="0" alt=""></td> </tr> <tr> <td rowspan="3"><img name="circle_btm" src="/books/2/375/1/html/2/images/circle_btm.gif" width="231" height="94" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="42" border="0" alt=""></td> </tr> <tr> <td rowspan="2" bgcolor="#ffffff"><img src="/books/2/375/1/html/2/images/spacer.gif" width="19" height="52" border="0" alt=""></td> <td><img name="creditcards" src="/books/2/375/1/html/2/images/creditcards.jpg" width="112" height="19" border="0" alt=""></td> <td rowspan="2" colspan="4" bgcolor="#ffffff"><img src="/books/2/375/1/html/2/images/spacer.gif" width="171" height="52" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="19" border="0" alt=""></td> </tr> <tr> <td bgcolor="#ffffff"><img src="/books/2/375/1/html/2/images/spacer.gif" width="112" height="33" border="0" alt=""></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="33" border="0" alt=""></td> </tr> <tr> <td valign="top" bgcolor="#ffffff"><p></p></td> <td colspan="9" valign="top" bgcolor="#ffffff"><p></p></td> <td><img src="/books/2/375/1/html/2/images/spacer.gif" width="1" height="116" border="0" alt=""></td> </tr> </table> </body> </html>
|
When you place content into the table cells, to add text, you must first remove the spacers in the cells. Select and delete them; then add your text by typing or copying content and pasting it into the cell. Figure 34-8 shows how the overly complicated table structure might react to additional content.
Figure 34-8: The table falls apart when HTML text is added.
It is possible to edit the table structure to simplify its layout prior to adding text and other content to prevent problems like the one in Figure 34-8. The idea is to simplify the content area, as seen in Figure 34-9, by merging rows and columns.
Figure 34-9: Merging all of these cells forms an easier-to-edit space.
Images are first deleted; then a logical selection of cells are selected and merged to form a single, main content cell. Choose Modify ® Table ® Merge Cells or use the Property inspector's Merge Cells icon, shown in Figure 34-10.
Figure 34-10: The Property inspector's Merge Cell and Split Cell icons
Content is replaced inside the newly merged cells, as shown in Figure 34-9.
Controlling the alignment of content within table cells is a key factor to having your design lay out properly. Click a cell (or row) and use the Property inspector to vertically align the images and text (content) within a cell (or row). The default horizontal alignment for table cell content is Left. The default vertical alignment is Middle. When two cells sit in the same row, uneven amounts of content can cause the other cell's content to realign. Setting the vertical alignment of the cell or row to Top in the Vert menu forces each cell's content to start at the top of the cell.
You still need to title and modify page properties to get this page close to finished, but it is at least able to accept text and other HTML content within some of its cells without falling apart. Adjusting the margin offsets in the page properties (set all to zeros) places the design in the top-left corner. You could create a background image tile to place behind the design to continue the blue and gold stripes to the right.
So many edits to this page are necessary that it would be better to build the page from scratch in Dreamweaver MX.
|
| < Day Day Up > |
|
EAN: 2147483647
Pages: 491