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

开发部Web界面设计规范 版本修订历史 起止日期 作者/修订人 更改章节 修改描述 版本/状态 目录结构规范 目录建立原则：以最少的层次提供最清晰的访问结构。 目录的命名以小写英文字母、下划线组成。 根目录一般只放index.html已经其他必须的系统文件。 根目录下的images用于存放各页面都要使用的公用图片。 所有JS等脚本存放在根目录下的scripts或js目录。 所有CSS文件存放在根目录下的style或css目录。 设计命名规范 页面基本框架结构 container header navbar menu main sidebar footer container—就是将页面中的所有元素包在一起的部分 header—是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素 navbar—等同于横向的导航栏，是最典型的页面元素，也可以命名为nav menu—此区域包含一般的链接和菜单，也可以命名为subNav,links main—是网站的主要区域，也可以命名为content sidebar—此区域包含网站的次要内容，例如最近更新内容列表等。 footer—包含一些附加信息，也可以命名为copyright 命名规则注意点 尽量考虑为元素命名其本身的作用或用意，达到语义化不要使用表面形式命名，如：red/left/big等 组合命名规则：[元素类型]-[元素作用/内容]。如搜索按钮btn-search、登录表单form-login。 凡涉及交互行为的元素通常会有正常、悬停、点击和已经浏览等不同样式。参考：搜索按钮btn-search、btn-search-hover、btn-search-visited 常用命名汇总 名称 命名规范 页头 header top 登录条 loginbar 标志 logo 侧栏 sidebar 导航 nav 子导航 subNav 菜单 menu 子菜单 submenu 工具条 toolbar 表单 form 栏目 column 箭头 arrow 搜索 search 滚动条 scroll 内容 content 标签页 tab 列表 list 提示 tips 栏目标题 title 链接 links 页脚 footer end 服务 service 下载 download 注册 register reg 状态 status 按钮 btn 上传 upload 登录 login 合作伙伴 partner 版权 copyright 网站地图 sitemap 图片命名规则 图片名称分为头尾两部分，用下划线隔开。禁止用中文名。 头部分表示此图片的大类性质。例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。 尾部分用来表示图片的具体含义，用英文字母表示，如banner_ad.gif logo_firefox.gif button_next.gif menu_aboutus.gif title_news.gif pic_people.jpg 有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。 布局规范 推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。优势如下： 表现和内容相分离，将布局放在一个独立的样式文件中，html文件只存放文本信息。 提高页面浏览速度，采用CSS+DIV结构的页面容量比table的页面容量小得多，且table标签要等/table下载完后才可以显示，而使用CSS+DIV标签不用等待/div下载好就可以显示，所有速度快。 易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站