What is a web page layout? Web page layout is to arrange pictures and words in different positions on the website page in the most suitable way for browsing. Different manufacturers will have different layouts.

Generally, there are seven steps: page size, overall shape, header, body, footer, picture and multimedia.

Common types of web page layout

[1] Layout of "Chinese Characters":

The layout of "Guo" evolved from the layout of "Tong", so it was named after its similarity with the Chinese character "Guo". Website logo and navigation bar or Banner advertisement are generally placed at the top of the page, the main content of the website is mainly placed in the middle of the page, and the copyright information and contact information of the website are generally placed at the bottom.

This picture is provided by registered user "Speak the Internet", and the copyright statement is feedback.

[2]T-shaped layout

T-shaped layout structure is named because it is similar to the English capital letter T. Generally, the logo of a horizontal website or banner advertisement is placed at the top of the page, the navigation bar menu is at the lower left, and the main contents such as the text of the webpage are at the lower right.

[3] Title text type

The layout structure of the title page is generally used to display article pages, news pages and some registration pages.

[4] Left and right frame layout

The left and right frame layout structure is a kind of layout structure often used by some large forums and enterprises. Its layout structure is mainly divided into two pages. Generally, the left side is the navigation bar link, and the right side is the main content of the website.

[5] Upper and lower frame types

The layout of the upper and lower frames is similar to that of the previous left and right frames. The only difference is that it is a two-page framework.

[6] Integration framework type

Comprehensive frame layout is a page layout technology that combines left and right frame layout with upper and lower frame layout.

[7] Popular layout

POP layout is an artistic and fashionable web layout. Design usually takes a beautiful poster picture as the main body of the layout.

[8] Flash layout

FLASH layout refers to the layout of web pages with one or more Flash pages as the main body. In this layout, most or even the whole page is Flash.

Web page layout tips

First of all, we should locate the theme of the website. After the website is planned, you can choose to apply the template or go to a professional website construction company for customization.

First of all, let users know what the content of the website is and whether it can meet the needs of users, just like Taobao, Tmall and other websites. For example, if you are a product website, our home page should reflect the price, model and picture of the product.

Reduce the use of different types of fonts. More than three different fonts will make the website look messy and unattractive. Whether it is pictures or text, too many size types and styles may destroy the overall layout.

Try not to use too many flash animations or too many dynamic pictures, because this will affect the opening speed of the website and even the user experience, and reduce the trust of the website.

For the information typesetting of the website, we need to pay attention to that users often browse the website from top to bottom and from left to right. This behavior habit determines the typesetting rules of the website, so important information such as main business should be placed in the upper left corner, and other minor content should be placed below, so as to conform to the user's browsing habits and generate interest.

No matter what website you are, all we have to do is present the good side of the website to users, push more services to users, help users solve problems quickly, and show our specialties to users. Therefore, the layout of the website should be more inclined to the actual problems of users, so that users can click as soon as possible and get a good ranking.

In addition, don't blindly pursue high standards. Many websites pursue users' visual effects and make their functions very complicated. However, the website weight ranking is not high, and the complex structure affects the later optimization work.

Typesetting is a very important thing, and it is essential to make typesetting easy to read, understand and clear. Regarding the typesetting in website construction, every place should be as perfect as possible, so that the website can get better rankings and more user traffic.

What are the layout structures of web pages?

1. Chinese-shaped web page layout: This web page layout is suitable for some large-scale websites, simple and atmospheric, and it is also one of the most frequently used types in Beijing website construction at present.

Second, the corner page layout: this is very similar to the Chinese font layout, but it has a certain awareness of the situation and the application effect is better.

Third, the title text page layout: This is one of the easiest layout types in Beijing website development.

In addition, website production companies often use "T" structure, "three" type and symmetrical contrast type.

Analyze common layout methods?

1, "t" structure layout, so-called "t" structure. It means that there is a horizontal website logo+ advertising column at the top of the page, a main menu at the bottom left, and the layout of the content on the right. Because the background of the menu bar is deep and the overall effect is similar to the English letter "T", we call it "T" layout. This is the most widely used layout method in web design. The advantages of this layout are clear page structure and clear priority. It is the simplest layout method for beginners. The disadvantage is that the rules are rigid. If you don't pay attention to details and colors, it's easy to make people "look boring".

2, "mouth" layout, this is a pictographic statement, that is, there are advertising columns on the top and bottom of the page, the main menu on the left and the friendly links on the right. The middle is the main content. The advantage of this layout is that it makes full use of the layout and contains a lot of information (my home page belongs to this layout). The disadvantage is that the page is crowded and inflexible. There is also a blank space on all sides, and only the middle window design is used, such as Netease wallpaper station.

3, "three" layout, this layout is mostly used in foreign sites, not much used in China. Its characteristic is that there are two horizontal color blocks on the page, which divide the whole page into four parts, and most of the color blocks put advertising strips.

4. Symmetrical contrast layout, as the name implies, adopts a left-right or up-and-down symmetrical layout, which is half dark and half bright, and is generally used for design-oriented sites. The advantage is strong visual impact, but the disadvantage is that it is difficult to combine the two parts organically.

5.POP layout, quoted from advertising language, means that the page layout is like a poster, with a beautiful picture as the design center of the page. Commonly used in fashion websites, such as ELLE, com, etc. The advantages are obvious: beautiful and attractive. The disadvantage is slow speed. As a layout, it is still worth learning.

What's the difference between the layout of a web page and the layout of a table?

Tables usually refer to tables, and layout tables are used to realize the overall layout of web pages, but tables are not recommended, and p+css is a popular layout method.

Common layout styles of web pages?

Create a index.htm file and a main.css file on the desktop. Of course, you don't have to use the main.css file, but for the convenience of operation, you should build one. Just save Notepad as. After making these two files, we write the basic code of the web page, make the index file under the control of main.css, right-click the notepad to open the index file and enter the code, and write it in the header to make it under the control of main.css..

Let's go to main.css and write some attributes to see if we can control the index file. I hope the whole page is pink and looks warm. I wrote *{background:#FF66FF} in main.css to have a look. Let's open the index file and see if it is pink in the browser. It is pink in the browser, which means it has been controlled by css style sheets. What's the difference between a table and a frame in a web page layout?

(1) table is divided into different areas in the same page, and then in the layout of the page, specific contents can be placed in its cells.

(2) The framework is to display multiple web pages in the same browser window;

③ Frames can obtain interactive layout effect by specifying the target frame of hyperlinks.