Web Design Thinking (10) _ in the form of website use
Form (table) is an important element of pages, is the principal means of a page layout. Despite the DHTML layer (layer) can also achieve the freedom of positioning elements page, but obviously more convenient form editing and revision. Master and use of various forms of property you will be able to look pleasing pages.
This paper will be divided into two parts detailed form in the application of web design. Usage of the basic forms, including forms and attention to the use of points.
1. Forms of the basic usage.
Usage of the basic forms that you have very familiar. However, in order to guarantee the integrity of the article, or to Acha listed here again.
â— forms of the basic HTML syntax
<table> …</ Table> - definition forms
<tr> - Definitions watch
<th> - The first table definition
<td> - Definitions Table yuan (Form-specific data)
For example:
<table Border>
<tr> <th> 1 </ th>
<th> 2 </ th>
<th> 3 </ th>
<tr> <td> A </ td>
<td> B </ td>
<td> C </ td>
</ Table>
1 2 3 A B C
â— table tag parameters. Table label with the following parameters can be.
Border forms borders
Cellspacing table from the gap between yuan
Cellpadding Table yuan from the internal gaps
Width forms width (% can be used or that specific data)
Form a high degree of height
For example:
<table Border=5 cellpadding=10>
<tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th>
<tr> <td> A </ td> <td> B </ td> <td> C </ td>
</ Table>
1 2 3 A B C
â— forms Alignment
1. Form the text alignment.
Syntax: <td align = #> # which can set the parameters are:
Habitat left lateral left
Center horizontal center
Right lateral right of abode
Top top vertical Habitat
Middle vertical center
Habitat bottom end of vertical
For example:
<table Border height=100>
<td Valign=top> A </ td>
<td Valign=middle> B </ td>
<td Valign=bottom> C </ td>
</ Table>
A B C
2. Pages in the form of alignment.
If you need the form and emit a section of text, it is necessary to use another table labelling parameters:
<table Align=#> # which can be set to left (Habitat left), right (right of abode)
For example:
<table Align="left" border>
<tr> <th> 1 </ th> <th> 2 </ th> <th> 3 </ th>
<tr> <td> A </ td> <td> B </ td> <td> C </ td>
</ Table>
Here the text <br>
And tables are side-by-side emissions
1 2 3 A B C Here is the text and tables side-by-side emissions
â— forms nested
Form is nested in the table, insert a table, nested typesetting method is to be inserted into the table to deal with the same text as the use of <td align = #> statement.
For example:
<table Border width=200 height=100>
<tr> <td Valign="top">
<table Border> <tr> <td> </ td> </ tr> </ table>
</ Td> <td valign="bottom">
<table Border> <tr> <td> </ td> </ tr> </ table>
</ Td> </ tr>
</ Table>
â— forms of color
The forms are color labels <table> Set parameters are:
Bgcolor background color
Bordercolor border color
Bordercolorlight three-dimensional frame of light
Bordercolordark dark three-dimensional frame
Grammar: <table bgcolor = "# RRGGBB"> RRGGBB which were three-color RGB hexadecimal value of 16
For example:
<Table width = 100 = # a9d7fb border bgColor
# Ffffff borderColorLight borderColorDark = = = 5 # 000000 cellPadding
Bordercolorlight cellSpacing = 0 = "# 000000">
<tr> <td BgColor=#FFE084> </ td>
</ Tr> <tr> <td> </ td> </ tr> </ table>
These are the basic forms used. Now frngtpage, dreamweaver, such as WYSIWYG page editing software do not have to write code, you can easily form the realization of the layout and nested, but to master some basic grammar, or the crucial moment of very useful.
2. Attention to the use of Form point
Nested form is not dealt with the most difficult form, no matter how complex the layout, carefully pondering can always find a solution to the problem.
We need to consider is:
â—‹ what kind of a way nested layout of web pages download speed of the fastest.
We know: Web browser to read the html code, it is a complete table then read it to them. That is to say from the beginning <table> tags to read </ table> label when it will form the content displayed on the screen. And that also have priority, first read the first showing. If this is the case, if the presence of a large number of forms of forms, such as forms must be read together to form son will be displayed.
We visited some sites, waiting for a long time without results, according to "stop" button to show it is the pages of this reason.
Therefore, we in the design of pages of forms, we should accomplish the following:
1. Entire page in the package do not have a table, as far as possible split into multiple forms;
2. Form a single structure as neat;
3. Forms nested levels to be less.
Experimental proof: more complicated, more levels of nested forms the slower download speeds.
On the web form design wrote here today. Acha did not provide a lot of skills, the key lies in your own practice and the use of the phrase is an old saying: "Shounaishengqiao."
Tags: css layout Record website, CSS style design, css website, w3c form w3c detection, w3c website w3c statement w3c css, web standards
Leave a Reply