Study notes: web Design size

Source: Internet
Author: User
Tags color gamut

Web page design at the beginning to define the size of the page. It's like drawing a picture. This makes it easy to design.

Reprinted from: http://blog.sina.com.cn/s/blog_659e27e50101kvvz.html

The size of the Web page is limited by two factors: one is the monitor screen. The display is now a large variety of 17-inch mainstream, is facing 19-inch and wide-screen direction. But there are also a number of 15-inch monitors. Another is the browser software, is our common use of IE, roaming, friefox and so on.

Height:

Height can be extended downward, so there is no limit to the height. For a screen, there is generally no fixed value, because everyone's browser toolbar is different, I have seen some browser toolbar is the plug-in occupied half of the screen, so the height of no exact value.

Width:

1, under IE6.0, the width of the display resolution minus 21, such as 1024 of the width 21 will become 1003. But it's worth noting that IE6.0 (or lower) will have a scroll bar on the right side, no matter how high your page is.

2, in Firefox, the width of the division rate is reduced by 19. For example, 1024 width-19 becomes 1005.

3, under the Opear, the width of the division rate is reduced by 23. For example, 1024 width-23 becomes 1001.

Note: Firefox or opear does not display the right scroll bar when the content is less than the browser height.

So if the resolution is 1024, your page is not as secure as 1000. Set to 9,002 side blank larger, visually more comfortable. Also easy to do some floating layer design.

If the resolution is 800, it is generally set to 770. But there are also set to 760.

These need to understand and remember, otherwise it is likely to do not meet the browser requirements, but generally we have to set a little bit smaller, should be added to some browser plug-ins or other things width will change so 800 of the resolution is generally set at about 760, 1024 of the setting of 990 or so.

Web Design Standard Size:

1, 800*600, the width of the Web page is kept within 778, there will be no horizontal scroll bar, height depends on the layout and content decision.

2, 1024x768, the width of the Web page is kept within 1002, if the box is displayed, the height is between 612-615. The horizontal and vertical scroll bars do not appear.

3, in the PS inside to do the page can be displayed in 800*600 State full screen, the bottom of the page will not appear sliding bar, size of 740*560 around

4, in the PS do map to the web is not the same, color, and so on, because the web only uses 256WEB security color, and PS in the RGB or CMYK and lab or HSB color gamut is very wide color range, so naturally there will be a pale phenomenon.

Page standard by 800*600 resolution, the actual size is 778*434px

Page length in principle no more than 3 screen, width of not more than 1 screen

Each standard page is A4 format size, which is 8.5x11 inch

Full-size banner for 468*60px, half-size banner for 234*60px, small banner for 88*31px

In addition 120*90,120*60 is also the standard size of small icons

Each non-homepage static page with picture bytes not more than 60K, full-size banner not more than 14K

Standard page AD Size specifications

First, 120*120, this advertisement specification applies to the product or the news photo display.

Second, 120*60, this advertising specification is mainly used for logo use.

Third, 120*90, mainly used in product demonstrations or large-scale logo.

Four, 125*125, this specification is suitable for the image advertisement which displays the photograph effect.

V, 234*60, this specification applies to the frame or the left and right form of the homepage of the advertising link.

Six, 392*72, mainly used for more picture display of the banner, for the header or footer.

Seven, 468*60, the most widely used banner size for headers or footers.

Eight, 88*31, mainly used for web links, or website small logo.

Ad form pixel size maximum size remarks

BUTTON 120*60 (must be in GIF) 7K

215*50 (must be in GIF) 7K

Banner 760*100 25K static picture or reduced motion effect

430*50 15K

Super Banner 760*100 to 760*200 a total of 40K static pictures or reduced motion effects

Huge advertising 336*280 35K

585*120

Vertical Edge Advertising 130*300 25K

Full screen ad 800*600 40K must be a static picture, Flash format

Picture and text mix each channel different 15K

Pop-up window 400*300 (try to use GIF) 40K

BANNER 468*60 (try to use GIF) 18K

Hover button 80*80 (must be in GIF) 7K

Streaming media 300*200 (can be made in irregular shape but not larger than 300*200) 30K playback time less than 5 seconds 60 frames (1 seconds/12 frames)

Ad size in a Web page

1. Top right of the page, size 120*60

2. Top banner of homepage, size 468*60

3. Top banner of homepage, size 760*60

4. Home center banner, size 580*60

5. Top banner of inner page, size 468*60

6. Top banner of inner page, size 760*60

7. Inner page upper left, size 150*60 or 300*300

8. Page, size 560*60 or 468*60

9. Inner page bottom banner, size 760*60

10. Left float, size 80*80 or 100*100

11. Floating right, size 80*80 or 100*100

Study notes: web Design size

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.