Web page design to grasp the layout of the reference

Reference | design | Web page design

At the beginning, the Web page appears in front of you, it is like a piece of white paper, it requires you to arbitrarily sway your design. In the beginning, you need to understand that although you can control everything you can control, if you know what is a common standard or the browsing habits of most visitors, then you can add your own things on that basis. You can certainly create your own design, but if you're a beginner, it's best to understand the basics of Web layout.

1. Page Size

Because the page size and monitor size and resolution are related, the limitations of the Web page is that you can not break through the scope of the display, and because the browser will also take up a lot of space, leaving your page range is becoming smaller. General resolution in the case of 800x600, the page display size: 780x428 pixels; Resolution in 640x480 case, the page display size: 620x311 pixels; Resolution in 1024x768, the page display size: 1007x600. From the above data can be seen, the higher the resolution of the larger page size.

The browser's toolbar also causes the page size to be affected. Generally the current browser's toolbar can be canceled or added, then when you display all the toolbars, and close all toolbars, the page size is not the same.

Dragging a page down during web design is the only way to add more content (dimensions) to a page. But I would like to remind you that unless you can be sure that the content of the site to attract people to drag, otherwise do not let visitors drag the page more than three screen. If you need to display more than three screens on the same page, you might want to make an internal connection on the page so that visitors can browse.

2. Overall styling

What is modelling, modelling is creates the object image. Here refers to the overall image of the page, this image should be a whole, graphics and text should be connected to the layering of orderly. Although both the monitor and the browser are rectangles, you can make full use of other shapes in nature and their combinations in the shape of the page: rectangles, circles, triangles, diamonds, and so on.

For different shapes, the meanings they represent are different. For example, the rectangle represents the formal, the rules, you notice a lot of ICP and Government pages are the overall shape of the rectangle, the round belt table with soft, unity, warmth, security, and many fashion sites like to round for the overall shape of the page; The triangle represents strength, authority, firmness, aggression, etc. Many large commercial sites to show its authority is often triangular for the overall shape of the page; The diamond represents balance, coordination and fairness, and some dating sites often use rhombus as the overall styling of the page. Although different shapes have different meanings, most of the current web-page production is designed to engage multiple graphs, in which the composition of some of the graphs may account for more.

3. Page Header

The header is also called a header, and the function of the page is to define the theme of the page. For example, the name of a site is mostly displayed in the header. In this way, visitors can quickly know what the site is. The page header is the key to the entire page design, and it will involve more of the following design and the coordination of the entire page. Page headers often place the site name of the picture and company logo as well as banner ads.

4. The text

Text appears on the page in rows or blocks (paragraphs), and their placement determines the visibility of the entire page layout. In the past, because of the limitations of page-making technology, the flexibility of text placement is very small, and with the rise of DHTML, text can be placed anywhere on the page according to its own requirements.

5. Footer

The footer echoes the page header. The header is where the site theme is placed, and the footer is where the creator or company information is placed. As you can see, many of the production information is placed in the footer.

6. Picture

Pictures and text are the two major elements of a Web page, but one cannot. How to handle the position of pictures and text is the key to the layout of the whole page. And your layout thinking will also be reflected here.

7. Multimedia

In addition to text and pictures, there are sound, animation, video and other media. Although they are not often exploited, they will become more important in the layout of the Web as Dynamic Web pages rise.