Table of Contents
Height:
Home Web Front-end HTML Tutorial Dimensions of web design_html/css_WEB-ITnose

Dimensions of web design_html/css_WEB-ITnose

Jun 24, 2016 am 11:45 AM

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...

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

How do I use the HTML5 <time> element to represent dates and times semantically? How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 &lt;time&gt; element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

See all articles