Tutorial/dreamweaver/to improve the table magical-wireframe production details (5)

dreamweaver| Tutorial | The making of the spacer frame


"Spacer Frame" in the Web page is mainly used to arrange the columns or channels of the list of items used, in order to facilitate everyone to understand, the author will be finished after the production of the effect of the picture to show you, as follows:





The following is the corresponding production process (to make a three-frame spacer for example)


First inserts a 1 Row 3 column Table object in the webpage, inserts the process directly to "Border" set to 0, "Cellspace" is set to 2, "Cellpad" is set to 1, as shown





Note: Setting here is exactly equivalent to the one in the property board.


Press and hold the left mouse button, drag on each cell, and select 3 cell objects. In the property board, set its "bgcolor" to "red," and notice that the color is the color of the spacer border.


In order to achieve the effect of distance, we need to use the "nested table" production. I first tell you some of the design of the "nested" table considerations, when inserting a table in a cell, it is best to advance the cell contents of the positioning attribute "Horz" (left and right) and "Vert" (up and down position) are respectively set to the "right" and "top", This avoids the unnecessary hassle of resizing a nested table, dragging the lower right corner to achieve it. As follows




Insert a Table object in three cells in turn, will "Border", "Cellspace", "Cellpad" all set to "0", while in the property board the background color of each table is set to the same page background color "white", and another point is that the "Width" (width) and height (height) are all set to the proportional display state of "100%", so that it automatically fills the entire cell according to the size.


You can now preview the viewing effect.


In making a spacer border, the difference between a thin line border is that the width 1 of the border is implemented through the "Cellpad" property, not the previous "Cellspace", where "cellpad" refers to the distance between the contents of the cell and the bounds of the cell. There is no doubt that the other three tables are inserted in this example by us as content. Then adjust the "cellspace" to change the spacing of the various borders, such as the "6" unit effect






Similarly, you can create a vertical spacing frame with a similar method.


Above we detailed analysis of several web pages common border types of the production process, principle and adjustment methods. The effect of the form of contrast is believed to be more conducive to understanding their respective differences, so as to deepen the impression, of course, I hope you can follow similar design ideas to find more border effects.