When we design a text page, a graphic mesh page or a column, we often feel the positioning of the text and the picture does not listen. With the help of the table, you can put them in any position according to our needs.
Use the table to organize the contents of the web page, you can make the web page more clean and beautiful. For graphic mixed web pages, the form can greatly improve the efficiency of web pages. After the hidden table is hidden, the viewer almost does not feel the existence of the table. In fact, all the web templates provided by FrontPage are organized with forms.
I. Several typical web layouts If you want your own web page, you can have a good browse, the layout of the web page is very important. A simple and bright web page often gives people an impressive, easier to attract viewers to browse.
The business website generally has a relatively unified layout design, and the personal home page is not like a business website, the amount of information is large. But just because this reason, the form of the personal home page is more flexible, it is easier to create aesthetics.
Let's take a look at the three styles of website, pay attention to observe their layout:
1, homepage of the portal
The figure above is the homepage of my country's main portal Sina.com, we can find that the content of the homepage is very rich, many columns, bright colors and many large advertising and floating ads. 2. The following picture below is the home page of Ningbo Computer Society. Compared with Sina.com, its content is more special, and there is not much column. Unlike a portal to give people a complicated feel. The general enterprise website is also designed in this style.
3, the following picture below is a personal home page, it looks simpler, but it is easier to give a fresh feel.
Three homepages of three styles, there is no advantageous, their style has a close relationship with the nature of the website. Sina is a very obvious business portal. It must be the attention of bright colors to attract the viewers, and advertising is an important source of website revenue, so various forms of advertising are less. The computer site is a professional group website. It is only a specific user, so it is not necessary to attract the viewer by various means, because the users who care about the Society will come naturally, and the users who don't need it, even if you do it, you will not attract them. . "Retired Life" is clearly more personalized, the homepage is just a cover, and the specific content is to be "entered". Of course, there are also many personal homepages to open the door. Most Personal Homepage features "friendship link" with other websites, through this form, the personal home page can be introduced to each other, improve the page view of the home page. Second, the layout of the web page is used in the form of the table, because FrontPage is still defective for the precise positioning of the picture, and the effect of the graphic mixing is not ideal. Moreover, the columns in writing in writing are more difficult, so the webpage uses a table to design the layout of the web page. The following figure is an example of using a table planning webpage layout in a web page. The webpage is divided into upper and lower zones, and the intermediate is separated from horizontal lines. There is a picture called LOGO (icon) on the left side of the title bar, and a small picture is inserted on the right. Since the table is separated, the positioning relationship between two pictures and titles is very simple. The following home page is divided into the left and right bins, the left is the directory area, and the blank area on the right can put a web page main content.
Since the method of hiding the form frame is used, the shadow of the table cannot be seen in the browser.
Hide forms in the web page
Let's introduce this page of this web page: 1) Open a website in the FrontPage window (this example is "f: / myrice") and create a new web page. 2) Create a 3 × 3 table in the new page, right-click the form, select the Table Properties command in the pop-up shortcut menu, open the Table Properties dialog. Set "thickness" of "Border" to "0" in the dialog. 3) Drag the two columns in the middle of the table, so that the middle of the column is wide, and the two columns in the side are allowed to let go. 4) Select the three cells of the second line, click the "Merge Unit" button on the Table toolbar to make this line into a cell; then merge the two cells on the right side of the third line Become a large cell. 5) Insert the corresponding picture in the small cells of the left and right sides of the first line; insert a horizontal line in the second row and set the thickness and color. 6) Enter all text and set the fonts, font numbers, and colors, create a hyperlink on hot writing. 7) Save the webpage as "index.htm" file, multi-table and table nested 1, with a multi-table planning web form to display in the browser, there is a disadvantage: only after all the content in the form is downloaded, the form The content will be displayed without downloading one. In this way, if the content in the form is too much and the network speed is slow, the viewer will wait for a long time to see the content of the webpage. This obviously gives the viewer to a page of a web page, which affects the browse rate of the web page. We can use multi-table methods to solve this problem, namely: every table is not much, which form is downloaded first, which form is displayed, not letting viewers get a daze of blank screen. Therefore, the previous example can be planned to be planned with three forms (from top to bottom 1 × 3, 1 × 1 and 1 × 2), and everyone can try itself. 2, the nested nested table of the table is to draw a table in a form of a table, which is often used in the web file. It can solve the difficulties that unable to solve the single layer form. The corresponding column lines in each line should be in the same location, which cannot be different from the column line of the different lines like the following picture. This problem can be solved using the form nested.
[Example] Use the table nested to make the table button menu form shown below to the previous picture:
The web page is created: 1) Open the "index.htm" file in the FrontPage window. 2) Set the "cell line margins", "cell spacing", "cell spacing", and "Border" of the "Box", "0". 3) Remove the horizontal line of the second line of the table and insert a 1 × 12 second layer table, the "cell line distance", "cell spacing", "Box", and "Box" All set to "0". 4) 12 cells of the second table form a button in each of the three cells, a total of four buttons. The moving column is allowed to make the cell width in the middle of each button to 3 to 4 times the width of the cell width. 5) Tail the two cells of the three cells of the first button to the third line of the first layer of the first layer form the same background color; other buttons are set to another background color. 6) Insert a small GIF picture of each button (270 ° ~ 360 °), insert a small GIF on the right side of the button on the right side of the button, insert a small GIF of the arc (0 ° ~ 90 °) image. The "vertical alignment" of these two cell properties set "top side alignment", "horizontal alignment" in the right cell is set to "right alignment".
7) Enter all text and set fonts, font numbers, and colors, create a hyperlink on hot writing. Finally, the normal view effect in the FrontPage window is shown below:
The preview in the browser will not see the table border dotted line.
About web planning, in the end, it will be explained: to keep the website's unified coordination, the major index web pages should be consistent on hue, preferably the top column and the bottom column use the same format.
[Practice] Use the table to plan "index.htm" to make the webpage look more neat. At the same time, other pages are also planned and consistent with web "index.htm".
