Web page Layout design basics

Design | Web page

As you can see now, the layout of the Web page is becoming more and more important. Visitors are unwilling to see content-focused sites again. Although the content is very important, but only when the page layout and the content of the Web page successfully joined, such a Web page or site is a favorite. You can't keep too picky a visitor on either side.

I. Basic concepts of Web page layout

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. 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.

Two. Method of Web page layout

There are two ways to layout a Web page, the first of which is the layout of the paper, and the second is the software layout. The following are described separately:

1. Paper Layout method

Many web makers do not like to sketch the layout of a page first, but to design the layout side of the page directly inside the Web designer. This method of not making a draft will not allow you to design a good web page. So when you start making Web pages, first draw a sketch of the layout of your page on the paper.

Prepare a few sheets of white paper and a pencil, you have to design a fashion site.

* Size selection:

At present, the resolution of 800x600 is a conventional browsing mode. So in order to take care of most visitors, your page size is based on the resolution of 800x600.

* Selection of Styling:

First on the white paper to draw a symbol of the browser window rectangle, this rectangle is the scope of your layout. Select a shape as the theme of the entire page, we choose the circle, because it represents the soft, and fashion more appropriate, and then in the rectangular frame, you can try to add some circle or other shape. If you draw this, you will find it messy. In fact, if you want to design a perfect layout in the beginning it is more difficult, and you have to find in this seemingly messy figure hidden in the special shape out. Also note that you don't have to worry about whether the layout you designed is achievable. In fact, as long as you can think of the layout can rely on today's HTML technology implementation.

In order to strike a balance we have added a rectangle (or a line segment) to the right of the page, taking into account the left-concave arc on the left-hand side.

* Add Page Header:

. JPG is the layout that we get from. jpg and 2.jpg, then we should add the header. General headers are located at the top of the page, so we added a page header to. jpg, and to balance the left and right rectangles, we added a rectangular header and let the page head intersect with the left arc.

* Add text:

Add text and graphics to the blank part of the page. Because there is a rectangle on the right side of the page as a foil, the text is not placed in the blank part because the left side of the arc does not appear to be coordinated.

* Add Pictures:

The picture is the media that is necessary to beautify the page and explain the content. Add the pictures to the right place here.

After a few steps, the general layout of a fashion page appears. Of course, it is not the final result, but you later make the important reference.

2. Software Layout method

If you don't like to use paper to draw your layout intent, you can also use the software to do the work. This software is Photoshop. Photoshop has the ability to edit the image to use the layout of the design page more handy. Unlike using paper to design layouts, Photoshop makes it easy to use colors, use graphics, and use layers of functionality to design layout ideas that cannot be realized with paper.

Three. The Technology of Web page layout

1. Application of Cascading style sheets

In the new HTML4.0 standard, CSS (cascading style sheets) is presented to completely pinpoint text and images. CSS is a bit complicated for beginners, but it's a good way to lay out the layout. You can use CSS to realize the ideas you have never realized. At present in many sites, the use of cascading style sheets is an excellent embodiment of the site. You can find a lot of information about CSS and how to use it on the Internet.

2. Table layout

Table layout seems to have become a standard, browsing a site, they must be a table layout. The advantage of table layout is that it can handle different objects without worrying about the effects of different objects. And tables are more convenient for locating pictures and text than CSS. The only disadvantage of table layout is that the page download speed is affected when you use too many tables. For a table layout, you can easily find the homepage of a site, and then save it as an HTML file, using the Web page Editing tool to open it (to see the resulting software), you will see how this page is using the table.

3. Frame layout

Do not know what the original reason, the frame structure of the page began to be many people do not like, may be because of its compatibility. But from the layout, the frame structure is a good layout method. Like table layouts, it handles different objects in different pages because the frame can be removed from the border, so generally it doesn't affect the overall beauty.

The layout guide I'm introducing today is not all page layout technology, and in a sense, I want to guide you in making the Web page, how to put the pictures and text in the right place, and how to have a leapfrog design thinking.