Intimate touch teaches you the basics of Web layout

Source: Internet
Author: User
Tags touch window
Web page
Web pages can be said to constitute the basic elements of the site. When we light the mouse, in the surf in the sea, a wonderful page will be presented in front of us, then, the page is the highlight of the factors? Color collocation, text changes, image processing, and so on, these are certainly not negligible factors, in addition to these, there is also a very important factor-the layout of the Web page. Next, let's talk about the layout of the page.

Page Layout type


The page layout can be broadly divided into "country" font, corner type, title body type, left and right frame type, integrated frame type, cover type, flash type, change type, discussed below respectively.

1. "Country" font: Also can be called the "Same" font, some large sites like the type, that is, the top is the title of the site and banner ads, then the main content of the site, the left and right to break down some of the two pieces of content, the middle is the main part, together with the bottom of the list, the bottom is the site some basic information, Contact method, copyright notice and so on. This structure is almost the most common type of structure we see on the Internet.

2. Corner type: This kind of structure and the previous one is actually only the formal difference, in fact is very similar, above is the title and the advertisement banner, the next left is a narrow column link and so on, the right column is a very wide body, the following is also some website auxiliary information. In this type, a very common type is the top is the title and ads, the left is the navigation link.

3. Title Body type: This type is the top is the title or something similar, the following is the text, such as some articles page or registration page, and so is this class.

4. Left-Right frame type: This is a two-page frame structure, the general left is the navigation link, sometimes the top will have a small title or Peugeot, the right is the text. Most of the big forums we've seen are in this structure, and some corporate websites like to use them. This type of structure is very clear, at a glance.

5. Upper and lower frame type: Similar to the above, the difference is only a two-page frame.

6. Integrated frame type: The combination of two kinds of structure, a relatively complex frame structure, more common is similar to the "Corner type" structure, but the use of frame structure.

7. Cover type: This type basically appears in some website homepage, most for some exquisite graphic design combine some small animation, put on a few simple links or just a "enter" the link even directly in the homepage the picture to do the link without any hint. Most of this type appears in the corporate web site and personal homepage, if handled well, it will bring people a pleasing feeling.

8. Flash Type: In fact, this is similar to the cover type structure, only this type uses the current very game line of Flash, and the cover type is different, because of flash powerful features, the page expresses more information, its visual effects and auditory effects if properly handled, not worse than the traditional multimedia.

9. Variation: That is, the above types of combination and change, such as the site is visually very close to the corner type, but the essence of the implementation of the function is that the upper, left and right structure of the integrated frame type.

About the first screen

The first screen is the part that we can see when we reach a Web site without dragging the scroll bar. So how big is the first screen? In fact, this is unknown. Generally speaking, in 800x600 screen display mode (which is also the most commonly used), in IE after installation of the default state (that is, the toolbar address bar, etc.), IE window can see the part of the 778pxx435px, generally speaking, we take this size as the standard on the line, after all, We can only take the majority into account in situations where it is not suitable for everyone.

Said so much, nothing but a standard problem, in fact, then I do not need to say that we can also think that the first screen of course to put the most important content, the key to know is that we have to the first screen can be shown the area to have an estimate, and not only to their own machine. In fact, a very troublesome place to make Web pages is that the browser's machine is unknown.

About the location of the navigation bar

The navigation bar allows us to easily reach different pages while browsing, is a very important part of the page elements, so the navigation bar must be clear, eye-catching, generally speaking, the navigation bar in the "first screen" can be displayed, but sometimes the first screen may be smaller than the above 435px, based on this consideration, The horizontally positioned navigation bar is preferable to the vertical navigation bar, the reason is simple: if the browser's first screen is very short, the horizontal can still see all, and the portrait is difficult to say, because the width of the window is generally not affected by browsers, while the vertical is much more uncertainty.

What kind of layout is the best

This is a question that beginners may ask. In fact, this should be specific analysis of the situation: for example, if the content is very much, consider the use of "country style" or corner type, and if the content is not too much and some of the descriptive things more, you can consider the title body type; A common feature of these frame structures is that browsing is convenient, fast, but the structure change is not flexible And if it is an enterprise website want to show the corporate image or personal home page want to show personal style, cover is preferred; flash more flexible, good flash greatly enriched the Web page, but it can not express too much text information. Has not mentioned is the change type, I just want to leave this to your friends, because, only constant changes will improve, will continue to enrich our web page!

Related Article

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.