Layout is to arrange pictures and text in different positions on the page in the most suitable way for browsing. Different producers will have different layout designs. Web page layouts have the following common structures:

1. "Same" font structure layout

The so-called same font is enough means that the top of the page is "Website Logo Advertising Banner Main Menu" ” or the main menu, with the secondary column bar on the left below, the link column bar on the right, and the layout of the specific content displayed in the middle of the screen.

The advantage of this layout is that it makes full use of the layout. The page structure is clear, stacked left and right, with clear priorities, and a large amount of information. The disadvantage is that the page is crowded and too rigid. If there is a lack of changes in details and colors, It's easy to feel monotonous and lacking.

2. "国" font layout

The "国" font layout evolved from the "同" font layout, while retaining the "同" font layout. At the same time, adding a horizontal bar menu or advertisement at the bottom of the page is a type that some large websites like. Generally, the top is the website title and banner advertisement, followed by the main content of the website, with two small pieces of content on the left and right, the middle is the main part, listed together with the left and right, and the bottom is some basic information and contact information of the website. , copyright statement, etc. This structure is the most common type of structure seen online.

The advantage of this layout is that it makes full use of the layout, has a large amount of information, and is easy to switch links to other pages. The disadvantage is that the page is crowded and closed on all sides, which makes people feel suffocated.

3. T-shaped layout

This is a vivid way of saying that the top of the page is the "website logo and advertising banner", the left is the main menu, and the right is the main content. The advantage of this layout is that the page structure is clear and the priorities are clear. It is the easiest layout method for beginners to use. The disadvantage is that the page is dull. If you don't pay attention to the details of color, it can easily become "boring".

4. "Three" layout

This kind of layout is mostly used on foreign sites and is not used much in China. The characteristic is that there are two horizontal color blocks on the page, which divide the entire page into parts. Most of the color blocks contain advertising banners, updates and copyright notices.

5. Contrast layout

As the name suggests, this layout uses left-right or top-bottom contrast: half dark and half light. Generally used for design sites. The advantage is that it has strong visual impact; the disadvantage is that it is difficult to combine the two parts organically.

6.POP layout

POP refers to the advertising term, which means that the page layout is like a promotional poster, with exquisite pictures as the design center of the page. This type basically appears on the homepage of some websites. Most of them are some exquisite graphic designs combined with some small animations, with a few simple links or just an "enter" link, or even pictures directly on the homepage. Make a link without any prompt. This kind of layout appears mostly on corporate websites and personal homepages. If done well, it will give people a pleasing feeling.

7. Flash layout

This kind of layout means that the entire or most of the web page itself is a Flash animation, which itself is dynamic. The picture is generally not gorgeous or interesting. It is a relatively new layout method. In fact, this is similar to the cover type structure, but this type uses the currently very popular Flash. What is different from the cover type is that due to the powerful function of Flash, the page expresses richer information, and its visual and auditory effects If handled properly, it is no worse than traditional multimedia. Websites of different natures have different page content arrangements. The basic content of a general web page includes the title, website logo (LOGO), header, footer, main content, advertising column, etc. The following is a brief explanation: A. Page title There is a title in every page of the site, which is used to indicate the main content of the page. This information will appear in the title bar of the browser, not in the layout of the page. Its important role is to guide visitors to browse the various contents of the website clearly without getting lost.

Adding titles is relatively simple in HTML language. Title name B. Website logo (LOGO). As an important window for external communication, the website will be used by creators to promote their own image. If the enterprise (society) has introduced the CIS (Corporate Identity System) image recognition system, then the web page design should be guided by this system during the website construction process, and the iconic pattern is the website's LOGO. A successful website, like the creator entity, has a unique image recognition, which will achieve twice the result with half the effort in the website promotion process. If CIS has not been introduced, before website construction, a website LOGO should be designed and produced based on the overall positioning of the website. This is like a product trademark, which embodies the characteristics, content and inherent cultural connotation and concepts of the website. The LOGO is generally set in a prominent position on the main page and in the header of the secondary page. C. Header The header refers to the upper part of the page. Some pages are clearly divided, while some pages have no clear distinction or no header. The header has a high attention value. Most website developers set the purpose of the website, slogans, slogans, etc. here, and some design it as an advertising space for rent. D. Footer The footer is the bottom part of the page. It is usually used to display the name, address, copyright information, email hyperlink, etc. of the company (society) to which the site belongs. E. Navigation Navigation is an important part of web design and an independent part of the entire WEB site design. Generally speaking, the navigation position of a website appears in a fixed position on each page. The location of navigation plays a decisive role in the structure and overall layout of the site. There are generally four standard display positions for navigation: left, right, top, and bottom. Some sites use multiple navigations to increase page accessibility. F. Main content The main content is the main element of the page design. It is generally the title of the secondary link content, or a summary of the content, or a partial excerpt of the content. The technique of expression is generally a combination of text and images. Its layout is usually arranged in columns according to the classification of the content. The attention value of the page is generally arranged from top to bottom and from left to right, so the important content is generally arranged at the top of the page, and the less important content is arranged at the bottom right. Original publisher: menwai2018

Lecture on the homepage content layout of e-commerce websites: Hua Xiaoqin’s common web page layout structure is the Chinese character layout - the Chinese character layout evolved from the same character layout, because the layout structure is different from the Chinese character layout. The Chinese characters are similar to the country and got its name. The top part of the page generally places the website's logo and navigation bar or banner advertisement, the middle of the page mainly places the main content of the website, and the bottom part generally places the website's copyright information and contact information. Common web page layout structure T-shaped layout - The T-shaped layout structure is named after its similarity to the English capital letter T. The top of the page is generally placed with the logo or banner advertisement of the horizontal website, the lower left side is the navigation bar menu, and the lower right side is used to place the main content such as the main content of the web page. Common web page layout structure title text type - the layout structure of title text type layout is generally used to display article pages, news pages and some registration pages, etc. Common web page layout structures: left and right frame layout - the left and right frame layout structure is a layout structure often used by some large forums and enterprises. Its layout structure is mainly divided into pages on the left and right sides. The left side is generally mainly for navigation bar links, and the right side is where the main content of the website is placed. The common web page layout structure is the top and bottom frame type - the top and bottom frame type layout is similar to the previous left and right frame type layout. The only difference is that it is a frame divided into two pages. Common web page layout structure comprehensive frame type - comprehensive frame type layout is a page layout technology that combines left and right frame layout and top and bottom frame layout. Common web page layout structure POP layout - POP layout is an artistic and fashionable one The way the web page is laid out. Page design usually uses a beautiful poster as the main body of the layout.

Common web page layout structure FLASH layout - FLASH layout refers to a web page with one or more Flash as the main body of the page. The first step of learning the front-end: divide the web page structure, what principles should be followed for the division of the web page structure, and how to divide the web page What about structure?

For a front-end beginner, the first step is to learn how to divide the structure of a web page. When the designer gives you a design drawing, you need to make a page that meets the standards based on this drawing. The standard mentioned here is the w3c standard. Please refer to the w3school online tutorial. So the first step to create a complete web page that meets standards is to divide the structure of the web page. Generally speaking, the division of web page structure needs to follow several principles:

1. Top-down principle

Because the order in which browsers render a web page is top-down. . The word rendering is mentioned here. The so-called rendering is the process by which the browser converts code into page display content. The browser will read the code you write from top to bottom and display it from top to bottom.

2. Left-to-right principle

While top-down, the content of the same line is rendered from left to right, so when dividing the structure, there is a left-to-right rule. Right order.

3. One-pixel principle

Beginners must adhere to this principle, but it does not mean that they must always accept this principle. In the early stage, when we divide the web pages, we must divide them accurately, especially horizontally. Just imagine, if the width of the outer box is 1200 pixels, and the two boxes inside are 600 pixels and the other 601 pixels, and the total exceeds the width of the parent, then the second box will inevitably be moved to the next line for display.

After talking about the above three principles, some people will blindly pursue following these principles. For example, when dividing the structure, it must be divided into upper and lower parts. But for example, below I intercepted part of this webpage, picture The text and text actually belong to a whole. The text is a description of the picture, so it should not be divided up and down, but should be divided horizontally. Each picture and text is a part of the content and is divided into four parts horizontally:

We say that general web pages have header (header area), banner (advertising banner area), main (main content area), and footer (bottom area). Not all single-page webpages are like this. Some webpages do not have banners, but beginners can easily use them. The part below the header is hard divided into banners. In addition to these parts, some web pages also have areas such as icons, and they like to be divided into main.

Speaking of the main area, this structural division is diverse. Some web pages have a background color or even a background image that runs from left to right. In this way, the division of our structure should also have an outer box with a banner, giving it the background color or background image, and nesting an inner box inside. Fixed width of the viewable area and centered. If there is no background for the banner, then there is no need to provide a box for the banner at this time. Just center the main area with a fixed width.

So when dividing the structure, how to divide the gaps between some box areas is also the most difficult problem for beginners. In fact, strictly speaking, these blanks will not affect the structure division, because the blank areas can be implemented using code. However, you cannot divide some text areas according to the top and bottom of the text, because the text has its own line height.

In addition, in some places there may be some small pictures or part of the content covering the large box outside. This part can be ignored when dividing the structure, because we can use positioning technology when implementing the code later. accomplish.