How many pixels should a web page be designed in?

How many pixels should a web page be designed in?
Many web designers are confused about the width of the interface web page when designing the web page layout. How many pixels should the web page be designed to be at a resolution of 800*600 and 1024*768? If it is too wide, a horizontal scroll bar will appear. Below we will explain the standard size of web page design. Standard size of web page design:
1. Under 800*600, if the width of the web page is kept within 778, there will be no horizontal scroll bar. The height depends on the layout and content.
2. Under 1024*768, the width of the web page should be kept within 1002. If it is displayed in full frame, the height should be between 612-615. No horizontal scroll bar or vertical scroll bar will appear.
3. When making a web page in PS, it can be displayed in full screen at 800*600, and there will be no sliding bar at the bottom of the page. The size is about 740*560
4. The pictures made in PS will be different when they are posted on the Internet, in terms of color, etc., because the WEB only uses 256 WEB safe colors, while the color gamut of RGB or CMYK and LAB or HSB in PS is very wide, so there will naturally be a phenomenon of color loss.
The page is made with a standard 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, i.e. 8.5X11 inches. The full-size banner is 468*60px, the half-size banner is 234*60px, and the 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 pictures with bytes not exceeding 60K, and the full-size banner does not exceed 14K. Standard web page advertising size specifications: 120*120. This advertising specification is suitable for product or news photo display.
2. 120*60: This advertising specification is mainly used for LOGO.
3. 120*90, mainly used for product demonstration or large LOGO.
4. 125*125: This specification is suitable for image advertisements with photo effects.
5. 234*60: This specification is suitable for advertising links on framed or left-right homepages.
6. 392*72, mainly used for advertising strips with more pictures, used for headers or footers.
7. 468*60, the most widely used advertising banner size, used for headers or footers.
8. 88*31, mainly used for web links or small website LOGOs.
Ad format Pixel size Maximum size Remarks
BUTTON 120*60 (must use gif) 7K
215*50 (must use gif) 7K
Full-width 760*100 25K static image or reduce motion effect
430*50 15K
Super banner 760*100 to 760*200 40K in total Static image or reduced motion effect Large advertisement 336*280 35K
585*120
Vertical Advertisement 130*300 25K
Full screen advertisement 800*600 40K Must be a static image, FLASH format mixed text and graphics, different for each channel 15K
Pop-up window 400*300 (use gif as much as possible) 40K
BANNER 468*60 (use gif as much as possible) 18K
Hover button 80*80 (must use gif) 7K
Streaming media 300*200 (can be made into irregular shapes but the size cannot exceed 300*200) 30K Playback time is less than 5 seconds 60 frames (1 second/12 frames)
Ad size on the page
1. Top right of the home page, size 120*60 2. Top column of the home page, size 468*60 3. Top column of the home page, size 760*60
4. Middle column of home page, size 580*60 5. Top column of inner page, size 468*60 6. Top column of inner page, size 760*60
7. Inner page, upper left, size 150*60 or 300*300 8. Download address page, size 560*60 or 468*60
9. Bottom column of inner page, size 760*60 10. Left floating, size 80*80 or 100*100
11. Right floating, size 80*80 or 100*100. The above statements may have slight discrepancies, you can discuss it.
IAB and EIAA release new online ad size standards. Among these six formats, in addition to the four "universal ad packages" released by IAB last year: 160x600, 300x250, 180x150 and 728x90, the newly announced 468x60 and 120x600 (Optimus Prime) are also included.

<<:  Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

>>:  In-depth explanation of MySql table, database, sharding and partitioning knowledge

Recommend

React realizes the whole process of page watermark effect

Table of contents Preface 1. Usage examples 2. Im...

How to check PCIe version and speed in Linux

PCIE has four different specifications. Let’s tak...

MYSQL updatexml() function error injection analysis

First, understand the updatexml() function UPDATE...

Solve the problem that ElementUI custom CSS style does not take effect

For example, there is an input box <el-input r...

Detailed explanation of mysql exists and not exists examples

Detailed explanation of mysql exists and not exis...

Summary of methods for inserting videos into HTML pages

Now if you want to use the video tag in a page, y...

js to achieve simple accordion effect

This article shares the specific code of js to ac...

Various methods to implement the prompt function of text box in html

You can use the attribute in HTML5 <input="...

4 ways to implement routing transition effects in Vue

Vue router transitions are a quick and easy way t...

Implementation of the login page of Vue actual combat record

Table of contents 1. Preliminary preparation 1.1 ...

Innodb system table space maintenance method

Environmental Description: There is a running MyS...

14 practical experiences on reducing SCSS style code by 50%

Preface Sass is an extension of the CSS3 language...

MySQL quickly inserts 100 million test data

Table of contents 1. Create a table 1.1 Create te...

Complete steps to install Anaconda3 in Ubuntu environment

Table of contents Introduction to Anaconda 1. Dow...