开发部web界面设计规范.doc

资源描述

开发部web界面设计规范.doc

《开发部web界面设计规范.doc》由会员分享，可在线阅读，更多相关《开发部web界面设计规范.doc（12页珍藏版）》请在冰豆网上搜索。

开发部web界面设计规范.doc

开发部Web界面设计规范

版本修订历史

起止日期

作者/修订人

更改章节

修改描述

版本/状态

1.目录结构规范

1）目录建立原则：

以最少的层次提供最清晰的访问结构。

2）目录的命名以小写英文字母、下划线组成。

3）根目录一般只放index.html已经其他必须的系统文件。

4）根目录下的images用于存放各页面都要使用的公用图片。

5）所有JS等脚本存放在根目录下的scripts或js目录。

6）所有CSS文件存放在根目录下的style或css目录。

2.设计命名规范

页面基本框架结构

container

header

navbar

main

sidebar

footer

container—就是将页面中的所有元素包在一起的部分

header—是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素

navbar—等同于横向的导航栏，是最典型的页面元素，也可以命名为nav

menu—此区域包含一般的链接和菜单，也可以命名为subNav,links

main—是网站的主要区域，也可以命名为content

sidebar—此区域包含网站的次要内容，例如最近更新内容列表等。

footer—包含一些附加信息，也可以命名为copyright

命名规则注意点

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

red/left/big等

2）组合命名规则：

[元素类型]-[元素作用/内容]。

如搜索按钮btn-search、登录表单form-login。

3）凡涉及交互行为的元素通常会有正常、悬停、点击和已经浏览等不同样式。

参考：

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

常用命名汇总

名称

命名规范

页头

headertop

登录条

loginbar

标志

logo

侧栏

sidebar

导航

nav

子导航

subNav

菜单

子菜单

submenu

工具条

toolbar

表单

form

栏目

column

箭头

arrow

搜索

滚动条

scroll

内容

content

标签页

tab

列表

list

提示

tips

栏目标题

title

链接

links

页脚

footerend

服务

service

下载

download

registerreg

状态

status

按钮

btn

上传

upload

合作伙伴

partner

版权

sitemap

图片命名规则

1）图片名称分为头尾两部分，用下划线隔开。

禁止用中文名。

2）头部分表示此图片的大类性质。

例如：

放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。

3）尾部分用来表示图片的具体含义，用英文字母表示，如banner_ad.giflogo_firefox.gifbutton_next.gifmenu_aboutus.giftitle_news.gifpic_people.jpg

4）有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。

3.布局规范

推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。

优势如下：

1.表现和内容相分离，将布局放在一个独立的样式文件中，html文件只存放文本信息。

2.提高页面浏览速度，采用CSS+DIV结构的页面容量比table的页面容量小得多，且

标签要等

下载完后才可以显示，而使用CSS+DIV标签不用等待

下载好就可以显示，所有速度快。

3.易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

例如

layout.css

body{font-family:

Verdana;font-size:

14px;margin:

0;}

#container{margin:

0auto;width:

100%;}

#header{height:

100px;background:

#9c6;margin-bottom:

5px;}

#menu{height:

30px;background:

#693;margin-bottom:

5px;}

#mainContent{height:

500px;margin-bottom:

5px;}

#sidebar{float:

left;width:

200px;height:

500px;background:

#cf9;}

#sidebar2{float:

right;width:

200px;height:

500px;background:

#cf9;}

#content{margin:

0205px!

important;margin:

0202px;height:

500px;background:

#ffa;}

#footer{height:

60px;background:

#9c6;}

index.html

ThisistheHeader

页、表格都应该有边距，避免紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。

使用主题颜色外的颜色时最好从主题颜色派生，而不是硬编码颜色值；

4）应当根据对象的重要性来选择颜色，重要对象用醒目的颜色表示；

5）使用颜色的时候应当保持一致性，如错误提示用红色表示就要在其他时候保持一致；

4）当必填项没有填写时，可在光标移走时在文本框后以红色文字提示。

6）关闭弹出提示框提示出错后，要把焦点定位在出错的输入框。

7）只允许输入数字的输入框要控制输入的非法字符，而不是输入非法字符后给予提示。

9）输入内容的长度要限制，默认对应数据库相关字段的长度。

11）只读文本框（灰色）和可输入文本框（白色）在颜色上必须区分。

1）搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度

4）文本框要有标示性文字（即hint提示），颜色为灰色#cccccc，搜索按钮可突出显示

3）提示信息不宜过长，宽度不能超过窗口的1/2，内容可考虑换行，不要滚动显示。

6）选择默认按钮，将最安全的或最常用的选项作为默认按钮。