Basics of web design layout_Experience exchange

As you can see now, the layout design of web pages is becoming more and more important. Visitors no longer want to see a site that only focuses on content. Although content is important, a page or site is only liked when its layout and content are successfully integrated. Either way you won't be able to retain visitors who are too "picky".

1. Basic concepts of web page layout

At the beginning, when the web page is presented in front of you, it is like a blank piece of paper, which requires you to use your design talents at will. At the beginning, you need to understand that although you can control everything you can control, if you know what is a conventional standard or the browsing habits of most visitors, then you can build on this Add something of your own. You can of course create your own designs, but if you're a beginner, it's best to understand the basic concepts of web layout.

1. Page size:

Since page size is related to monitor size and resolution, the limitation of web pages is that you cannot break through the scope of the monitor, and because the browser will also occupy A lot of space, and the page range left for you becomes smaller and smaller. Generally, when the resolution is 800x600, the display size of the page is: 780x428 pixels; when the resolution is 640x480, the display size of the page is: 620X311 pixels; when the resolution is 1024X768, the display size of the page Dimensions are: 1007x600. It can be seen from the above data that the higher the resolution, the larger the page size.

The browser toolbar also affects the page size. Generally, the toolbars of current browsers can be canceled or added, so the size of the page is different when you display all toolbars and when you close all toolbars.

In the process of web design, dragging the page downward is the only way to add more content (size) to the web page. But I would like to remind everyone that unless you are sure that the content of the site can attract people to drag, do not let visitors drag the page more than three screens. If you need to display more than three screens of content on the same page, you'd better make internal links on the page to facilitate visitors' browsing.

2. Overall shape:

What is shape? Shape is the image of an object created. This refers to the overall image of the page. This image should be a whole, and the connection of graphics and text should be layered and orderly. Although both monitors and browsers are rectangular, for the shape of the page, you can make full use of other shapes in nature and their combinations: rectangle, circle, triangle, rhombus, etc.

For different shapes, they represent different meanings. For example, the rectangle represents formality and rules. You have noticed that many ICP and government web pages use rectangles as the overall shape; circular bands represent softness, unity, warmth, security, etc. Many fashion sites like to use circles as the overall shape of the page; The triangle represents strength, authority, solidity, aggression, etc. In order to show its authority, many large commercial websites often use triangles as the overall shape of the page; the diamond represents balance, coordination, fairness, and some dating sites often use the diamond as the overall shape of the page. . Although different shapes have different meanings, most current web page production is designed by combining multiple graphics, in which a certain graphic may account for a larger proportion of the composition.

3. Header:

The header can also be called the header. The function of the header is to define the theme of the page. For example, most of the name of a site is displayed in the header. This way, visitors can quickly know what the site is about. The header is the key to the entire page design. It will involve more designs below and the coordination of the entire page. Pictures of the site name, company logo, and banner ads are often placed on the header of the page.

4. Text:

Text appears in lines or blocks (paragraphs) on the page, and their placement determines the visibility of the entire page layout. In the past, due to the limitations of page production technology, the flexibility of text placement was very small. However, with the rise of DHTML, text can be placed anywhere on the page according to your own requirements.

5. Footer:

The footer echoes the header. The header is where the site theme is placed, and the footer is where the producer or company information is placed. You can see that a lot of the production information is placed in the footer.​

​ 6. Pictures ​

​ Pictures and text are the two major elements of a web page, but they are indispensable. How to handle the position of pictures and text has become the key to the layout of the entire page. And your layout thinking will also be reflected here.

7. Multimedia

In addition to text and pictures, there are also sounds, animations, videos and other media. Although they are not often utilized, with the rise of dynamic web pages, they will become more important in web page layout.

2. Web page layout methods

There are two methods of web page layout. The first is paper layout; the second is software layout. The following are introduced separately:

1. Paper layout method

Many web designers do not like to draw a sketch of the page layout first, but directly design the layout and add content in the web designer. . This no-draft approach will not allow you to design excellent web pages. So when you start making a web page, you must first draw a sketch of the layout of your page on paper.

Prepare a few pieces of white paper and a pencil. You want to design a fashion website.

*Size selection:

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

*Shape selection:

First draw a rectangle symbolizing the browser window on the white paper. This rectangle is the scope of your layout. Choose a shape as the theme of the entire page. We choose a circle because it represents softness and is more in line with fashion. Then draw it randomly in the rectangular frame. You can try to add some circles or other shapes. If you draw it like this, you will find that it is very messy. In fact, if you want to design a perfect layout from the beginning, it is more difficult, and you have to find the special shapes hidden in this seemingly messy graphics. Also note that you don't have to worry about whether the layout you design can be implemented. In fact, any layout you can think of can be realized with today's HTML technology.

Considering the concave arc on the left side, in order to achieve balance, we added a rectangle (it can also be a line segment) on the right side of the page.

*Add a page header:

jpg is the layout shape we got from .jpg and 2.jpg, so we should add a page header. Generally, the page header is located at the top of the page, so we added a page header for .jpg. In order to balance the arc on the left and the rectangle on the right, we added a rectangular page header and let the page header intersect with the arc on the left. .

*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 placed in the blank area will not look out of place due to the arc on the left.

*Add pictures:

Pictures are necessary media to beautify the page and illustrate the content. Add the image here where appropriate.

After the above steps, the general layout of a fashion page will appear. Of course, it is not the final result, but an important reference for your future production.

　2. Software layout method

If you don’t like to use paper to draw your layout intentions, then you can also use software to complete these tasks. This software is Photoshop. The image editing functions of Photoshop are even more handy when used to design web page layouts. Unlike using paper to design layouts, Photoshop can easily use colors, graphics, and use the layer function to design layout ideas that cannot be achieved with paper.

3. Web page layout technology

1. Application of cascading style sheets

In the new HTML4.0 standard, CSS (Cascading Style Sheets) is proposed, which can position text and images completely accurately. CSS may seem a bit complicated for beginners, but it is indeed a good layout method. Ideas that you have never been able to realize can be realized with CSS. Currently on many sites, the use of cascading style sheets is an excellent reflection of a site. You can find many introductions and usage methods of CSS on the Internet. Of course, the increasingly popular WEB standard (XHTML CSS) strongly advocates the separation of content and presentation, and serves as a transition for the next generation of data exchange XML (i.e., XHTML).

　2. Table layout

Table layout seems to have become a standard. If you browse any site, they must be laid out in tables. The advantage of table layout is that it can handle different objects without worrying about the influence between different objects. Moreover, tables are more convenient for positioning images and text than using CSS. The only disadvantage of table layout is that page download speed suffers when you use too many tables. For table layout, you can just find the homepage of a site, save it as an HTML file, and open it with a web page editing tool (WYSIWYG software is required). You will see how this page uses tables.​

　 3. Frame layout

I don’t know why, but pages with a frame structure have begun to be disliked by many people, probably because of its compatibility. But from a layout perspective, frame structure is a good layout method. It is like a table layout, placing different objects on different pages for processing. Because the frame can cancel the border, it generally does not affect the overall appearance.

The layout guide I will introduce today is not all web page layout techniques. In a sense, I want to guide you how to place pictures and text just right when making web pages, and how to Have a leapfrog design thinking.