网页设计规范

网页设计规范

网页设计标准尺寸:

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值,1024*768页面的标准大小是955*600,照着它的尺寸做就行了)

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到

２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象.

页面标准按800*600分辨率制作，实际尺寸为778*434px

页面长度原则上不超过3屏，宽度不超过1屏

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

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过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。

网页中的广告尺寸

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

网页设计前端页面制作的规范要求和注意事项

1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。这样以减少http请求，从而降底网站的下载速度。

2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。什么样的图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。

1）页面代码，做到精简，逻辑性清楚；公用部位可以引入进来，比如头部，脚部。

2）CSS逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。CSS 样式每个页面引入不超过两个文件，一个是COMMON：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的CSS。CSS文件引入在2个之内，减少http请求避免CSS的表达式。

3．将脚本放在底部。这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。配合程序开发人员我们需要注意的（xhtml）：

1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。根据需求来定位控制，

以保证页面的稳定显示。如图片，需了解：

1）宽度是否是固定大小，

2）宽度最大限度，

3）大小不一样时的居中显示如文字，需了解：

1)文字的最大长度。及加“…”省略号区域,

2)在测试中经常也会碰到英文无空格情况，得用overflow:hidden的方法隐藏溢出部分。

2．每个页面加上正确显示的TITLE。

3．在页面中尽量完成每步交互效果，包括既时响应的。

4．提交程序员的DEMO必须是连贯的，交互效里齐全，而且经过自已在

IE6.0，IE7.0，FIREFOX一次以上的整体测试。设计师需要注意的几点：

1.尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或”用意用意用意用意”，，，，达到语义化达到语义化达到语义化达到语义化。不要使用表面形式的命名。如:

red/left/big等。

2.组合命名规则组合命名规则组合命名规则组合命名规则:[元素类型]-[元素作用/内容]

如:搜索按钮:btn-search登录表单:form-login新闻列表:list-news

3.涉及到交互行为的元素命名涉及到交互行为的元素命名涉及到交互行为的元素命名涉及

到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等

不同样式，命名可参考以下规则:

鼠标悬停:：hover点击：click已浏览：visited

如:搜索按钮:btn-search、btn-search-hover、btn-search-visited

4.用户体验方面需要注意的用户体验方面需要注意的用户体验方面需要注意的用户体验方面需要注意的：

1）每个连接，按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download 变化的那张图片，这样会出现那个按钮无图的间隔；

2）input有个label，可以让用户在点击字时，光标自动跳入相应input中；

3）图片应该有alt属性，以备图片阻止时，文字的替换