Webpage layout for creating web pages

Source: Internet
Author: User

Webmaster suggestion: a good web page layout will make the website visitors feel refreshed. It also makes it easier for visitors to find the information they need on the site, therefore, beginners should have some knowledge about 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 is the website title and banners, the next step is the main content of the website. There are two small pieces of content on the left and right, which is the main part in the middle, the following are some basic information, contact information, and copyright notices of the website. This structure is one of the most common types we have seen on the Internet.

2. Corner structure: this structure is actually just a form difference, but it is actually very similar. The above is the title and advertisement banners, and the next 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 at the top or something similar. 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 only in the two-page framework.

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 are exquisite graphic design combined 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-type structure, but this type uses Flash, which is currently very game-like. 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. Change type: 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 800*600 (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. In this case, the horizontal navigation bar is 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. What we haven't mentioned yet is the change type. I just want to leave it to the readers, because only constant changes will increase and our web pages will be enriched!




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.