网页设计中的页面尺寸标准参考

　　网页设计中的页面尺寸会根据不同的功能有不同的标准，下面是小编整理的网页页面的尺寸标准介绍吧，欢迎阅读！

　　对于固定宽度的网站布局，设计师常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px这样的分辨率。

　　页面最大化、满屏化的网站看着的确是舒服，但过高的分辨率在设计师显示器上合适，并不代表在浏览者的显示器上也合适。现在用的最多的分辨率还是1024x768，在这种分辨率下，含滚动条的页面最大宽度应不超过994px，所以一般页面宽度定位在990px以内比较适宜。

　　这一讲主要来说说网页设计的标准尺寸

　　一、在800x600分辨率下，页面宽度应在778px以内，这样不会出现横向滚动条，高度可以依据版面和内容而定。

　　二、在1024x768分辨率下，页面宽度应在1003px以内，如果仅一屏显示的页面，高度在612px～615px之间，这样横向和纵向滚动条都不会出现。

　　三、在photoshop中做800x600分辨率下仅一屏的网页时，尺寸可以设为740x560左右。

　　页面标准按800x600分辨率制作，尺寸为778pxx434px

　　页面长度一般不要超过三屏，宽度不宜出现横向滚动条为宜

　　每个标准页面为A4幅面大小，即8.5x11英寸

　　全尺寸banner为468pxx60px，半尺寸banner为234pxx60px，小banner为88pxx31px

　　小图标的标准尺寸还有120pxx90px、120pxx60px等

　　每个非首页静态页面含图片字节不超过60K，全尺寸banner不宜超过14k

　　标准网页广告尺寸规格

　　1、120x120，这种广告规格适用于产品或新闻照片展示。

　　2、120x60，这种广告规格主要用于做LOGO使用。

　　3、120x90，主要应用于产品演示或大型LOGO。

　　4、125x125，这种规格适于表现照片效果的图像广告。

　　5、234x60，这种规格适用于框架或左右形式主页的广告链接。

　　6、392x72，主要用于有较多图片展示的'广告条，用于页眉或页脚。

　　7、468x60，应用最为广泛的广告条尺寸，用于页眉或页脚。

　　8、88x31，主要用于网页链接，或网站小型LOGO。

　　广告形式像素大小最大尺寸备注

　　BUTTON 120x60(必须用gif) 7K

　　215x50(必须用gif) 7K

　　通栏 760x100 25K 静态图片或减少运动效果

　　430x50 15K

　　超级通栏 760x100 to 760x200 共40K 静态图片或减少运动效果

　　巨幅广告 336x280 35K

　　585x120

　　竖边广告 130x300 25K

　　全屏广告 800x600 40K 必须为静态图片，FLASH格式

　　图文混排各频道不同 15K

　　弹出窗口 400x300(尽量用gif) 40K

　　BANNER 468x60(尽量用gif) 18K

　　悬停按钮 80x80(必须用gif) 7K

　　流媒体 300x200

　　(可做不规则形状但尺寸不能超过300x200) 30K 播放时间小于5秒60帧(1秒/12帧)

　　网页中的广告尺寸

　　1.首页右上，尺寸120x60

　　2.首页顶部通栏，尺寸468x60

　　3.首页顶部通栏，尺寸760x60

　　4.首页中部通栏，尺寸580x60

　　5.内页顶部通栏，尺寸468x60

　　6.内页顶部通栏，尺寸760x60

　　7.内页左上，尺寸150x60或300x300

　　8.下载地址页面，尺寸560x60或468x60

　　9.内页底部通栏，尺寸760x60

　　10.左漂浮，尺寸80x80或100x100

　　11.右漂浮，尺寸80x80或100x100

　　以上几种说法可能有点小的出入，大家可以探讨一下。

　　IAB和EIAA发布新的网络广告尺寸标准

　　在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160×600, 300×250, 180×150及728×90，还包括新公布的468×60 和120×600(擎天柱)2种。

　　拓展阅读：网页设计防止页面被撑开的方法

　　一、直接在网页里设置图片大小，比如代码：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=true;this.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里。

【网页设计中的页面尺寸标准参考】相关文章：