网页设计中页面尺寸标准
对于固定宽度的网站布局,设计师常用的分辨率有: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=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里,比如
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; (让多出来的不显示。)
}
网页设计的宽度一般为多少?应该怎么把握?
排名第一的是360×640,这是竖屏,一般在医院、学校中才能见到,暂且不谈。排名第二的是1920×1080,占比13.07%。1366×768排第三,占比6.32%。这说明现在主流的电脑分辨率是1920×1080。排名第七的分辨率,1024×768,是最小的电脑尺寸了,仅占3.13%,很少有人使用。在做pc端的网页设计时,不...
IOS界面设计尺寸标准规范
三、设置界面的图标高度和开关滑动按钮的高度:58px 四、可点击高度规范 在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。五、搜索栏高度规范 搜索栏的高度,在iPhone6的原型图上,统一成58px。六、界面元素之间的距离规范 在iPhone6设计稿中,界面元素之间的常用距离...
我是学平面设计的,想知道关于平面设计中的印刷和排版的事项?
我也去答题访问个人页 关注 展开全部 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm 普通宣传册 标准尺寸: (A4)210mm x 285mm 文件封套 标准尺寸:220mm x 305mm 招贴画: 标准尺寸:540mm x 380mm 挂旗标准尺寸:8开 376mm x 265mm 4开 540mm x 380mm 手提袋: 标准尺寸:400mm ...
网页设计合适的页面尺寸是多少
网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本...
如何用蓝湖选择UI设计标注尺寸
提示:如何一键同时下载多个设计图的所有裁剪图?在画布页面上,按住Shift+鼠标左键选择多个设计图,或者用鼠标右键拖动选择设计图;选中该框后,右键单击菜单并选择下载切口,一次单击即可下载多个设计图中的所有切口。好的尺寸标注,高效率的生产研发团队!选择尺寸标注,做好以上三个步骤。小细节对团队开发...
网页设计中banner设计尺寸是多少
760X70;1000X70像素。当前标准 随着大屏幕的显示器出现,banner的表现尺寸越来越大,760X70;1000X70像素的大尺寸banner也悄然出现。Internet Advertising Bureau (IAB,国际广告局)的"标准和管理委员会"联合Coalition for Advertising Supported Informatiln and (CASIE,广告支持信息和娱乐联合会)联合推出了一...
三折页标准尺寸是多少
A4三折页的设计尺寸是: 216mm*291mm ,印刷成品展开尺寸是: 210mm *285mm ,折后的成品尺寸是: 210mm *95mm。A3三折页的设计尺寸是: 426mm*291mm ,印刷成品的展开尺寸是: 420mm*285mm ,折叠后的成品尺寸是: 140mm*285mm。
m5内页尺寸
m5内页尺寸宽度1680,高度2900。网页设计标准尺寸:1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间,就不会出现水平滚动条和垂直滚动条。3、在ps里面做网页可以在800*600状态下显示...
三折页标准尺寸是多少?
常规的A4三折页的设计尺寸是216mm*291mm,印刷成品展开尺寸是210mm *285mm,折叠后的成品尺寸是210mm *95mm。A3三折页的设计尺寸通常是426mm*291mm,印刷成品的展开尺寸是420mm*285mm,折叠后的成品尺寸是140mm*285mm。三折页排版设计时都需要分栏,区分页面的主次顺序,按照主次顺序区分内容和产品。
网页设计页面尺寸
换成CM 是 35.28*42.33 不过在屏幕显示的东东大多都是用PX(像素)来计算的 参考资料:www.cdfeiyu.cn
骑科桂利: 对于一个设计人员来说,没有什么固定的东西.就是一种习惯,好的习惯 现在的显示器分辨率都在1024*768以上了.800*600基本全部被淘汰掉了. 1024*768下.全屏下采用1003px宽就好了. 面对现在的显示分辨率大部分是960px宽的 当然还有很多是采用800px宽的 一个网页的宽度.根据实际要做的页面而定. 不要局限在一个标准内.
阿坝县15811543975: 网页设计 网页尺寸 - ?
骑科桂利: 宽度全屏的话一般设置成1003像素,高度可以不固定
阿坝县15811543975: 网页设计合适的页面尺寸是多少? - ?
骑科桂利: 其实也没有硬性规定,但是为了兼容大多数浏览器一般是设置960px,随着现在浏览器分辨率的变化,已开始向着1000px,1200px宽度发展,例如淘宝(1000px)京东商城(1200px).如果需要兼容不同浏览器尺寸,现在比较流行的做法是做成...
阿坝县15811543975: 现在主流的网页尺寸多大一屏的高宽是多少 ?
骑科桂利: 网页设计标准尺寸: 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定. 2、1024*768下,网页宽度保持在1002以内,如果满...
阿坝县15811543975: 网页设计的宽度一般为多少?应该怎么把握? - ?
骑科桂利: 百度统计流量研究院对于2017年上半年的分辨率使用情况统计得出.排名第一的是360*640,这是竖屏,一般在医院、学校中才能见到,暂且不谈.排名第二的是1920*1080,占比13.07%.1366*768排第三,占比6.32%.这说明现在主流的电...
阿坝县15811543975: 网页设计最合适的页面尺寸是多少??
骑科桂利: 满屏的页面宽度一般是1004px,高度随便定义
阿坝县15811543975: 网页制作中常见的页面尺寸是多少??
骑科桂利: 用IE6不加载任何插件的情况下一般800*600分辨率的页面宽度为778*434px;而1024*768分辨率的页面宽度为1003px*615; 用IE7不加载任何插件的情况下一般800*600分辨率的页面宽度为778*425px;而1024*768分辨率的页面宽度为1003px*608; 如楼上所说的.其它的如楼上所说.
阿坝县15811543975: 网页的标准规格是多少 - ?
骑科桂利: 现在网页普遍的尺寸在1024*768,当然大屏幕也来在上升的自趋势 其实现在很多网页都是自适应的如果是1024*768,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚知动条和垂直滚动条.(在dw里面有设定好的标道准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)
阿坝县15811543975: 网页设计以及平面设计的标准尺寸??
骑科桂利: 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定. 2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条. 3、在ps里面做网页可...
阿坝县15811543975: 网页制作的尺寸一般是多少呀? - ?
骑科桂利: 我一般定的尺寸都是 宽980 *600(长度这个根据内容) 我觉得这个尺寸做出来的网站适合各种尺寸的电脑显示屏,我是做网页设计的,你要是还有其他问题,可以找我呀~~