Home > Web Front-end > HTML Tutorial > Dimensions of web design_html/css_WEB-ITnose

Dimensions of web design_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:03
Original
1372 people have browsed it

Size of web design

Web design needs to define the size of the web page at the beginning, just like giving a drawing board for painting, so as to facilitate the design.

The size of a web page is limited by two factors: one is the monitor screen. There are many types of monitors now, with 17-inch being the mainstream and developing towards 19-inch and widescreen. But there are also a lot of 15-inch monitors. inch monitor.

The other is browser software, which is our commonly used IE, Aoyou, Friefox, etc.

Height:

The height can be extended downwards, so generally the height There is no limit. For one screen, there is generally no fixed value, because everyone’s browser toolbar is different. I have seen some browser toolbars occupied half of the screen by plug-ins, so the height does not vary. exact value.

Width:

1. Under IE6.0, the width is the monitor resolution minus 21. For example, the width of 1024 -21 becomes 1003. But it is worth noting that IE6.0 (or

lower) will have a scroll bar box on the right no matter how high your web page is.

2. Under Firefox, the resolution of the width is reduced by 19. For example, the width of 1024 -19 becomes 1005

3. Under Opear, the resolution of the width is reduced by 23. For example, the width of 1024 -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, it is safer to set your webpage to 1000. Set to 900 to make the margins on both sides larger and more comfortable visually.

It is also convenient for doing some floating layer designs.

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

These need to be understood and kept in mind, otherwise it may not meet the browser requirements, but generally we will set it a little smaller, which should

be used by some browsers The width will change if the browser adds plug-ins or other things, so the resolution of 800 is generally set to about 760, and the resolution of 1024 is set to about 990
.

Standard size for web design:

1. At 800*600, if the width of the web page is kept within 778, there will be no horizontal scroll bar. The height will depend on the layout and content.

2. At 1024*768, the width of the web page is kept within 1002. If the full frame is displayed, the height is between 612-615. There will be no horizontal scroll bar

or vertical scroll bar.

3. When making a web page in PS, you can display the full screen in 800*600 state, and there will be no sliding bar at the bottom of the page. The size is about 740*560

4. In PS The pictures you make are different when you go online, in terms of colors, etc., because only 256 WEB safe colors are used on the WEB, while the RGB

or CMYK and LAB or HSB in PS have a very wide color gamut, so the color range is very wide. Naturally, there will be discoloration.

The page standard is produced with a resolution of 800*600, and the actual size is 778*434px

In principle, the page length should not exceed 3 screens, and the width should not exceed 1 screen

Each standard page is A4 format, that is, 8.5X11 inches

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

In addition, 120*90 and 120*60 are also standard sizes for small icons

Each non-homepage static page contains no more than 60K image bytes, and the full-size banner does not exceed 14K

Generally like a personal blog The width of the website in terms of 750 to 900 (pixels) can also be unrestricted because this does not affect anything.
Like some commercial websites, the width of the page should consider many factors, including the content to be expressed, the width of mainstream monitors, the beauty of the page, etc...

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template