Magical uses of DreamWeaver tables-detailed explanation of wireframe production (5)
Author：Eve Cole
Update Time：2009-05-30 18:36:21
4> Production of spacer borders
"Gap border" is mainly used to arrange the item list of each column or channel on the web page. In order to facilitate everyone's understanding, the author will first show you the renderings after the production is completed, as follows:
The following is the corresponding production process (taking the production of three-frame spacing as an example)
First, insert a table object with 1 row and 3 columns into the web page. During the insertion process, directly set "Border" to 0, "CellSpace" to 2, and "CellPad" to 1, as shown in the figure
Note: The settings here are completely equivalent to those in the property panel.
Hold down the left button of the mouse and drag on each cell to select 3 cell objects at the same time. Set its "Bgcolor" to "Red" in the property panel. Note that this color is the color of the gutter border.
In order to achieve the effect of spacing, we will use the production of "nested tables" here. The author first tells you some things to pay attention to when designing "nested" tables. When inserting a table into a cell, it is best to set the positioning attributes of the cell content "Horz" (left and right position) and "Vert" (up and down position) respectively. Set to "Left" and "Top" to avoid unnecessary trouble when adjusting the size of the nested table again. Simply drag the lower right corner to achieve this. as follows
Insert a table object into three cells in turn, set "Border", "CellSpace", and "CellPad" all to "0", and set the background color of each table in the property panel to the same page The background color is "white". Another point is to set both "Width" and "Height" to "100%" in the proportional display state, so that it can automatically fill the entire unit according to the size. grid.
You can now preview the effect.
In the production of the gutter border, the difference from the thin line border is that the width of the border 1 is achieved through the "CellPad" attribute instead of the previous "CellSpace". The "CellPad" here refers to the cell The distance between the content and the cell boundary. There is no doubt that the other three tables we inserted as content in this example are. Then adjusting "CellSpace" can change the spacing between each border, such as the effect of "6" units
Likewise, you can create vertical gutter borders in a similar way.
Above we have carefully analyzed the production process, principles and adjustment methods of several common border types in web pages. I believe that the form of effect comparison is more conducive to everyone's understanding of their respective differences, thereby deepening their impression. Of course, I hope that everyone can find more border effects according to similar design ideas.
