网页设计中页面尺寸标准
对于固定宽度的网站布局，设计师常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px这样的分辨率。
页面最大化、满屏化的网站看着的确是舒服，但过高的分辨率在设计师显示器上合适，并不代表在浏览者的显示器上也合适。现在用的最多的分辨率还是1024×768，在这种分辨率下，含滚动条的页面最大宽度应不超过994px，所以一般页面宽度定位在990px以内比较适宜。
这一讲主要来说说网页设计的标准尺寸
一、在800×600分辨率下，页面宽度应在778px以内，这样不会出现横向滚动条，高度可以依据版面和内容而定。
二、在1024×768分辨率下，页面宽度应在1003px以内，如果仅一屏显示的页面，高度在612px～615px之间，这样横向和纵向滚动条都不会出现。
三、在photoshop中做800×600分辨率下仅一屏的网页时，尺寸可以设为740×560左右。
页面标准按800×600分辨率制作，尺寸为778px×434px
页面长度一般不要超过三屏，宽度不宜出现横向滚动条为宜
每个标准页面为A4幅面大小，即8.5×11英寸
全尺寸banner为468px×60px，半尺寸banner为234px×60px，小banner为88px×31px
小图标的标准尺寸还有120px×90px、120px×60px等
每个非首页静态页面含图片字节不超过60K，全尺寸banner不宜超过14k
标准网页广告尺寸规格
1、120×120，这种广告规格适用于产品或新闻照片展示。
2、120×60，这种广告规格主要用于做LOGO使用。
3、120×90，主要应用于产品演示或大型LOGO。
4、125×125，这种规格适于表现照片效果的图像广告。
5、234×60，这种规格适用于框架或左右形式主页的广告链接。
6、392×72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468×60，应用最为广泛的广告条尺寸，用于页眉或页脚。
8、88×31，主要用于网页链接，或网站小型LOGO。
广告形式 像素大小 最大尺寸 备注
BUTTON 120×60(必须用gif) 7K
215×50(必须用gif) 7K
通栏 760×100 25K 静态图片或减少运动效果
430×50 15K
超级通栏 760×100 to 760×200 共40K 静态图片或减少运动效果
巨幅广告 336×280 35K
585×120
竖边广告 130×300 25K
全屏广告 800×600 40K 必须为静态图片，FLASH格式
图文混排 各频道不同 15K
弹出窗口 400×300(尽量用gif) 40K
BANNER 468×60(尽量用gif) 18K
悬停按钮 80×80(必须用gif) 7K
流媒体 300×200
（可做不规则形状但尺寸不能超过300×200） 30K 播放时间小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1.首页右上，尺寸120×60
2.首页顶部通栏，尺寸468×60
3.首页顶部通栏，尺寸760×60
4.首页中部通栏，尺寸580×60
5.内页顶部通栏，尺寸468×60
6.内页顶部通栏，尺寸760×60
7.内页左上，尺寸150×60或300×300
8.下载地址页面，尺寸560×60或468×60
9.内页底部通栏，尺寸760×60
10.左漂浮，尺寸80×80或100×100
11.右漂浮，尺寸80×80或100×100
以上几种说法可能有点小的出入，大家可以探讨一下。
拓展阅读：网页设计防止页面被撑开的方法
一、直接在网页里设置图片大小，比如代码：img src="/uploads/allimg/200907/20090701160532188.jpg" width="600" height="500" border="0"，这样虽然可以限制了图片大小，但是需要在上传图片之前手动修改图片大小，否则上传的图片就会变形。
二、使用如下代码：img src="/uploads/allimg/200907/20090701160532188.jpg" onload="javascript:if(this.width600}{this.resized=truethis.style.width=600}"
这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。
三、我们可以针对表格的'属性来限制大小防止被撑开，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代码“”，其中“table-layout:fixed”是为了将表格布局固定住，就可以有效地防止表格被撑开，“word-wrap:break-word”是控制换行的，也就是强制执行换行，这个在文本内容较多的情况下需要使用到，特别是重复的内容出现，不执行换行的话，表格就被撑开了；而“word-break: break-all”可以解决IE的框架被英文（非亚洲语言文本行）撑开的问题，但是不会强制换行，只显示表格宽度里的内容。一般情况下只要用到“”就可以。当然，上面调用的语句可以定义在css里，比如
table {
table-layout: fixed
word-wrap:break-word
}
四、用css控制图片自适应大小，代码如：
img {
max-width: 600px
width:expression(this.width 600 ? "600px" : this.width)
overflow:hidden
}
其中 max-width:600px在IE7、FireFox等其他非IE浏览器下最大宽度为600px，但在IE6中无效；width:600px在所有浏览器中图片的大小为600px，当图片大小大于600px，自动缩小为600px，在IE6中有效；而 overflow:hidden指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。
五、最后总结一下最实用的代码：
如果是表格，请用：
table {
table-layout: fixed
word-break: break-all
}
如果是div层，请用：
div {
table-layout: fixed
word-wrap: break-word
width: 加上宽度
overflow: hidden(让多出来的不显示。)
}
网页设计标准尺寸：800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。
当这些请求到达服务器端，htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
通过液态网格和液态图片技术，并且在正确的地方使用了正确的HTML标记。
响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。
包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率。
百度统计流量研究院对于2017年上半年的分辨率使用情况统计得出。
排名第一的是360×640，这是竖屏，一般在医院、学校中才能见到，暂且不谈。
排名第二的是1920×1080，占比13.07%。
1366×768排第三，占比6.32%。这说明现在主流的电脑分辨率是1920×1080。
排名第七的分辨率，1024×768，是最小的电脑尺寸了，仅占3.13%，很少有人使用。在做pc端的网页设计时，不用考虑这个尺寸，而应在做pad端和手机端的适配时，将其纳入考虑。
而更高级的响应式网站应该是在严格的栅格规范下，适应于不同宽度，确保各宽度下的展示效果。但这样的成本也会相应增加，在开发网站时，需综合考虑实际需求和开发成本。time（《时代周刊》官网）是个很好的响应式网页案例。
扩展资料
网页设计中的注意事项：
1、网页设计的尺寸标准：
面向1024-768显示器分辨率开发的网页尺寸，宽910px；
面向800-600显示器分辨率开发的网页尺寸，宽778px；
2、网页设计中的画布设定：
尤其注意分辨率为72 像素/英寸。
3、设计中的网页字体问题
中文字体：尤其注意“设置消除锯齿的方法”选项要选择“无”。
宋体是最常用的网页字体，12px 是中文操作系统可以表现的最小的字体，内容。
文字大小一-般用两种，12px 或14px(现在的新的vista据说能表现10px的中文字，但现在使用并不多)。
英文字体：其中英文字体最小表现为10px 字verdana字体是大多数网页使用的英文字体，比起arial字体更美观和均衡。
效果图：
网页效果图中的网页字体，虽然在最后制作网页的过程中不需要裁剪。但做为设计中不可分割的重要元素，一定要认真使用，因为你不单要设计文字与整体网页的关系，还要设计字体的样式表颜色。
全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域，内容限时区域在好控制在1000px-1200px。
网页的.宽度
现在比较流行的网页宽度是950px，网页两边留出少许白边，简洁又大方。 1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615
之间.就不会出现水平滚动条和垂直滚动条。 网页设计中常用的广告尺寸
BUTTON
120*60
215*50
通栏
760*100
430*50
超级通栏 760*100或者760*200 巨幅广告
336*280
585*120
竖边广告 130*300 全屏广告 800*600 弹出窗口 400*300 BANNER 468*60 悬停按钮 80*80 流媒体
300*200
国际标准的网页BANNER大小规格 横幅广告(Banner)
文件大小：gif:14K/swf:16K
广告尺寸：468*60像素
广告位置：页面顶部
按钮广告(Button)
文件大小：gif:6K/swf:8K
广告尺寸：170*60/120*60像素 广告位置：第一屏 第二屏
备注：触发式LOGO，弹出图片尺寸为160*160 文件大小gif:9K/swf:12K
弹出窗口广告(Pop up)
文件大小：gif:18K/swf:20K
广告尺寸：360*300像素
广告位置：第一屏
通栏广告(Full collumn)
文件大小：gif:20K/swf:25K
广告尺寸：770*100像素
广告位置：第一屏 第二屏
流媒体(Flash layer)
文件大小：swf:25K
广告尺寸：200*150像素
广告位置：第一屏
形式：浏览打开页面，该广告放映8秒后消失
画中画(PIP)
文件大小：gif:20K/swf:25K
广告尺寸：360*300像素
广告位置：新闻最终页面
浮动标识(Float box)
文件大小：gif/swf/flash<8k
广告尺寸：80*80像素
广告位置：第一屏右侧
全屏收缩广告 (Full screen)
文件大小：gif:20K
广告尺寸：750*550像素
广告位置：第一屏
形式：打开浏览页面前该广告以全屏形式出现3-5秒，随后消失 擎天柱(Sky-scraper)
文件大小：gif:15K/swf:17K
广告尺寸：130*200像素
广告位置：第一屏 第二屏
视频广告
文件大小：gif/swf/flash<8k
广告尺寸：300*250像素
广告位置：第一屏两侧
文字链接(Text link)
规格：不超过10个汉字
广告位置：第一屏 第二屏
备注:文字链接长度以不折行为准
网页设计LOGO的标准尺寸
120×120 这种广告规格适用于产品或新闻照片展示。 120×60 这种广告规格主要用于做LOGO使用。 120×90 主要应用于产品演示或大型LOGO。 88×31
主要用于网页底部友情链接中的LOGO，或网站小型LOGO。
其实答案并不是固定的，可以做成1920，也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。
这是广告公司AdDuplex送出的统计大数据
市面上的电脑屏幕尺寸多种多样，不过大部分都集中在这几种：
1920-1080：目前常用设备中最大的尺寸（Mac 5K屏除外）
1440-900：15寸MacBook Pro为代表，很多UI设计师首选
1366-768：普通的PC电脑
1280-800：13寸MacBook Pro为代表
在以上设备中，13寸和15寸Mac Book，虽然实际分辨率非常大，但由于是Retina屏幕，视觉展示上还属于以上范围。
所以，网站的内容显示宽度大部分都在1200px以内，确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px，不过由于屏幕越来越大，目前比较少。
在了解过电脑屏幕尺寸后，网页设计尺寸（本文专指宽度，高度不限）选哪个也很清楚了：选哪个都不会错。
事实上很多设计师是这么做的：用小于1920的屏幕去设计1920的网页。
这样设计没错，而且是很多培训机构、学校的标准定义：网页设计宽度尺寸是1920。
但是如果你用了这个神器的Sketch插件，就不会按照之前的结论来设计了。
以前黑客有介绍过。 点击查看
设计师在做界面的过程中需要经常查看设计稿，以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸，否则我们的设计尺寸和屏幕尺寸不相同，就会导致预览的界面偏移，需手动调节居中。
如果设计的尺寸和屏幕尺寸保持一致，那么插件预览的效果就会完美，不用每次都要去调节。
本质上网页设计尺寸选哪个都是正确的，关键在于怎么方便、快捷地帮助我们预览、展示设计稿。
在利用sketch插件频繁预览的前提下，黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸，这会节约你很多时间。在设计后台类的界面时，这个方法的优势会更加明显。
最后有一点需要注意，在进行切图的时候，如果遇到全屏的图，需要把切图修改成1920，否则在1920电脑中切图宽度会不足。不过到了切图这一步，就属于设计工作的后期了，我们只需要花点时间把对应切图改成1920即可。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网 http://www.uihacker.com/
UI黑客论坛 http://bbs.uihacker.com/
