Fireworks exports HTML webpages

Source: Internet
Author: User
Tags transparent image
In order to allow fireworks to export HTML webpages that are more in line with DW modification and improve efficiency, the following settings are generally required:
1. Select "file"> "HTML Settings", or click "options" in the "Export" dialog box.
2. Click the table tab. Select a spacing option from the "spacing" pop-up menu:
There are three options:
"Nested table-No delimiter" creates a nested table that does not contain the delimiter. (This is good, and it won't be too difficult to modify it)
"Single Table-No delimiter" creates a single table that does not contain the delimiter. This option may incorrectly display the table in some cases. Do not select this option. (I have tried several export examples. This option does not show normal, Making modification more troublesome. I don't know what is necessary for this option ?)
"1 pixel transparent delimiter"-uses a 1 pixel transparent GIF as the delimiter, and its size can be adjusted as needed in HTML. This option generates a row with a height of 1 pixel along the top of the table, and generates a column with a width of 1 pixel along the right of the table. (In fact, "generating a 1-pixel column on the right side of the top" requires very little, and it is troublesome to modify it)
Conclusion: select "nested table-No delimiter"
3. For empty cells:
From the "content" pop-up menu, select the content to be placed in an empty cell:
There are three more options:
"None" to keep empty cells blank. (If "including no slice area" is not selected, the exported table cannot see the position of the slice area)
An empty cell contains a small transparent image named spacer.gif. (If "includes no slice area" is not selected, export the table to see the position of the slice area, as shown in the design drawing)
Place an HTML space tag in an empty cell. The cell is displayed as hollow. (If "include no slice area" is not selected, export the table to see the position of the slice area, but not necessarily as shown in the design drawing)

Note: An empty cell is displayed only when "include no slice area" in the "Export" dialog box is not selected during the export process. That is, the non-slice area is treated as an empty cell. (In fact, if you select "including the no-slice Area", no empty cells are displayed, but these empty cells have been filled with images in the no-slice area, it is no longer "empty)
Note:
For the cutting of a large image, I personally think that the cutting of the rule is the cutting of the rule. Do not cut it as you like... This is because I usually do not use HTML tables automatically generated by FW after slicing ..

First, let's look at the structure of the table automatically generated by FW (without special settings ):

If a graph is split into two rows, the first row is three blocks, and the second row is two blocks, the width of the Five slices is different, the automatically generated table is a big table with three rows and six columns. This is why we usually see this small image in the source code and file generated automatically by FW.

After carefully analyzing the principle of this non-nested large table, we will find that FW will take the smallest slice in the row (column) width (height) as the smallest unit, to generate the number of rows in the table. That is to say, in the preceding slice example, there are only five slice graphs, but it does not use a two-row, three-column chart for layout (in fact, it is difficult to achieve seamless effect if you manually set the table in DW)

In this way, if we adjust the size of a certain slice, we need to re-output the entire large table. For the designers who keep improving, frequent changes are very painful.

Therefore, when I use slice, I only output images, but not tables. I will do it myself .... The specific method is to use a table with the same height as the row slice. If you really need to make slices of different heights in a row (do not do this as much as possible ), you need to create complex table nesting Based on the segment with the highest height ..

The final result of this operation is that the large image after a cut is not a large table that is automatically generated by FW, but several tables are combined... The first is to facilitate the modification of a part in the image, and the second is to accelerate the download speed of the large image (we know that, the browser displays the <Table> label only when it is downloaded to </table>)

Sorry, I am so sorry, I am so sorry. I don't know if you have understood what I mean. Because of the inconvenience, there is no instance diagram to help you explain it, if you have time, make up ......

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.