Design the homepage by using a table skillfully

Source: Internet
Author: User
Tags object
Design in the HTML language, tables (table) are used to organize data, such as annual reports, work plans and so on, and the table is also a sharp tool for the design of the page, its flexible control, so that you can easily organize your own documents and pictures. As long as you are imaginative, you can use the form to design a very good personal homepage.

Selection of tools

In the past, when we used to write a Web page in HTML, it was a hassle to write a table, because you had to remember its tag elements, and then you had to properly organize and arrange them to get the form you needed. At that time, perhaps no one would use tables to organize Web pages. Today, we are using FrontPage98 this WYSIWYG tool, only to find that the home page becomes very relaxed, the sense of boredom immediately disappeared, and we can put a little more energy in the design.

Now, there is no need to remember the label elements, but only to "take" the pen, with your Lenovo free play. You'll also find that tables are a good helper for designing the home page. So, when designing a Web page with a table, be sure to choose a WYSIWYG HTML authoring tool, FrontPage98 is a good choice.

Conception and organization

The production of Web pages is an art, because it contains art, typesetting, music and other artistic components, and the idea is the prelude to all art, without this step, no art has vitality. So, when you're using a table to make a home page, the idea is a very important step.

To plan the layout of the Web page as a whole. The main page is divided into the upper, middle and lower three parts, where the top part of the page to place the title picture, the middle part of the entire page content, and the next part is the producer's information. This is certainly not the same as it is, but it is generally first designed and then modified as needed.

When using a table Design home page, first click on the toolbar inserttable icon, drag from top to bottom a table with 3 rows, you can modify the table size and location as needed, and each row represents the upper, middle, and the next three parts, respectively, described below:

1. Upper

Here generally placed their own web page, first of all you want to prepare the general size of the 480pixelsx68pixels title pattern, in this layer, you can also place some other advertising map files, the general size of 88pixelsx31pixels, of course, can also place counters.

Note that if you want to place these two images, you first have to set up a table in the upper layer, because the two files can be set freely without affecting the settings in the table below. This is important, this is also the characteristics of the table, you need to deal with the object separately, it is best to create a table for each object, so that it does not affect each other.

2. Middle

This is the core of the Web page. As a general situation, you will have a Web page directory, the layout of the table is generally random. When you set up a directory, the other location is the introduction of the content. When you use this part of the table design, you have to set up another table in the unit, like the top, and then allocate the left and right sizes of the table, the small natural Place directory, and the large cell placement.

It should be noted that the tables interact with each other. When setting, first select any of the cells, right-click, select Cellproperties in the shortcut menu, select Top in the vertical alignment of the Settings window layout item, so that the content placed in any cell will be placed at the bottom. Otherwise, in a table, the left side of the unit after the content, in the right unit and also place content, the left side of the content will fall from the top to the middle of the section, if you set up good, this problem does not occur.

3. Lower

The lower layers Place the information of the producer, like the upper layer.

The above is only the use of forms to design the basic method of Web pages, the rest of the play will depend on everyone. You can also make these three layers separately, saying that when you start the design, you use three separate tables instead of a table that is divided into three rows. When you finish the design, click on any table, right-click, select Tableproperties ..., in layout, set the Bordersize to 0. Note that when you use a table to design a Web page, the outermost main table does not turn off the width of the frame at the outset.

Using a table to design a Web page is simple, and the advantage of the table is that you can completely control the placement of your text and pictures without having to use CSS cascading style sheets.

You'll get a little bit of trouble when you use a table, for example, the table size cannot be changed. In particular, after the elimination of the table border, there are several layers in the table, the innermost table uses a certain color fill, and when this page with Navigator4.0 view, found that the table color is not, in the IE4.0 is good. These problems are due to your haste in the use of the process, do not master the use of the table habits. Keep in mind that a table completes one thing rather than a table involving several objects. For example, the contents and contents are placed in a table, which can easily cause the problems mentioned above.

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.