Basic website elements-webpage layout

Source: Internet
Author: User

A webpage is a basic element of a website. When we tap the mouse and swim in the sea, a wonderful web page will be displayed in front of us. What are the factors for the highlights of the web page? Color matching, text changes, image processing, and so on are of course negligible factors. In addition to these, there is also a very important factor-the layout of webpages. Next, let's talk about the webpage layout.

Webpage layout type

The webpage layout can be roughly divided into the "country" font, corner type, title text type, left and right frame type, up and down frame type, comprehensive frame type, cover type, Flash type, and change type, the following are discussed respectively.

1. "Country": it can also be called the "same" font. It is a favorite type of some large websites, that is, the top of the page is the website title and banners, followed by the main content of the website, there are two small pieces of content on the left and right. The middle part is the main part. The bottom part is the basic information, contact information, and copyright statement of the website. This structure is one of the most common types we have seen on the Internet.

2. corner: this structure is similar to the previous one in form. The above structure is the title and advertisement banners, and the next one is a narrow column link on the left, the right column is a wide text, and the following is the auxiliary information of some websites. In this type, a common type is the title and advertisement on the top, and the navigation link on the left.

3. Title body type: this type is the title or something similar at the top. The following is the body, such as some article pages or registration pages.

4. Left and right Frame: this is a two-page frame structure. Generally, the left side is a navigation link. Sometimes there is a small title or Peugeot on the top, and the right side is the body. Most of the large forums we see are structured in this way, and some enterprise websites also like to adopt them. This type structure is very clear and clear at a glance.

5. Up-and-down frameworks: similar to the above, the difference lies in a framework that is divided up and down into two pages.

6. Integrated framework: the combination of the two types of structure on the previous page, a relatively complex framework structure, a common structure similar to the "corner" structure, only uses the framework structure.

7. cover Type: this type basically appears on the homepage of some websites, most of which combines some exquisite graphic design with some small animations, put a few simple links or just a "enter" link, or even directly link to the homepage image without any prompts. Most of these types appear on corporate websites and personal homepages. If they are well handled, they will give people a pleasant feeling.

8. flash: in fact, this is similar to the cover structure, but this type uses Flash, which is currently a very game line. Unlike the cover type, because of the powerful features of Flash, the information displayed on the page is richer. If the visual and auditory effects are handled properly, they will never be worse than traditional Multimedia.

9. variant: the combination and changes of the above types. For example, the site is visually close to the corner type, however, the implemented functions are actually the comprehensive framework of the top, left, and right structures.

About the first screen

The first screen is what we can see when we reach a website without dragging the scroll bar. How big is the first screen? In fact, this is unknown. Generally, in the screen display mode of 800x600 (this is also the most common), the default status after IE installation (that is, the toolbar address bar is not changed, the part that can be seen in the IE window is 778px × 435px. Generally, we can use this size as the standard. After all, when it cannot be suitable for everyone, we can only consider it for the majority.

After talking about this, it is nothing more than a standard question. In fact, you can think of it without having to say that the first screen should certainly be the most important content. What you need to know is, we need to make an estimate of the area that can be displayed on the first screen, rather than just using our own machine. In fact, a very troublesome part of web page creation is that the viewer's machine is unknown.

Location of the navigation bar

The navigation bar makes it easy for us to visit different pages during browsing. It is a very important part of web page elements. Therefore, the navigation bar must be clear and eye-catching. Generally, the navigation bar should be displayed on the "first screen", but sometimes the first screen may be smaller than the 435px mentioned above. Based on this consideration, the horizontal navigation bar should be better than the vertical navigation bar, the reason is very simple: if the viewer's first screen is very short and can still be seen horizontally, it is hard to say that the width of the window is generally not affected by browser settings, in the vertical direction, the uncertainty is much greater.

What is the best layout?

This is a question that beginners may ask. In fact, we need to analyze the specific situation: for example, if there are a lot of content, we should consider using the "country" or corner type. If there is not much content, but there are many descriptive things, you can consider the title text type. A common feature of the several framework structures is convenient browsing and fast, but the structure changes are not flexible; if an enterprise website wants to show its corporate image or personal homepage, the cover is the first choice. The Flash type is more flexible, and the good Flash greatly enriches the webpage, however, it cannot express too much text information.</

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.