开发部web界面设计规范

《开发部web界面设计规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、开发部Web界面设计规范版本修订历史起止日期作者/修订人更改章节修改描述版本/状态121.目录结构规范1)目录建立原则：以最少的层次提供最清晰的访问结构。2)目录的命名以小写英文字母、下划线组成。3)根目录一般只放index.html已经其他必须的系统文件。4)根目录下的images用于存放各页面都要使用的公用图片。5)所有JS等脚本存放在根目录下的scripts或js目录。6)所有CSS文件存放在根目录下的style或css目录。2.设计命名规范页面基本框架结构containerheader45132navbarmenu6mainsidebar7footercon

2、tainer—就是将页面中的所有元素包在一起的部分header—是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素navbar—等同于横向的导航栏，是最典型的页面元素，也可以命名为navmenu—此区域包含一般的链接和菜单，也可以命名为subNav,linksmain—是网站的主要区域，也可以命名为contentsidebar—此区域包含网站的次要内容，例如最近更新内容列表等。footer—包含一些附加信息，也可以命名为copyright命名规则注意点1)尽量考虑为元素命名其本身的作用或用意，达到语义化不要使用表面形式命名，如：red/left/big等

3、2)组合命名规则：[元素类型]-[元素作用/内容]。如搜索按钮btn-search、登录表单form-login。3)凡涉及交互行为的元素通常会有正常、悬停、点击和已经浏览等不同样式。参考：搜索按钮btn-search、btn-search-hover、btn-search-visited12常用命名汇总名称命名规范页头headertop登录条loginbar标志logo侧栏sidebar导航nav子导航subNav菜单menu子菜单submenu工具条toolbar表单form栏目column箭头arrow搜索search滚动条scroll内容content标签页

4、tab列表list提示tips栏目标题title链接links页脚footerend服务service下载download注册registerreg状态status按钮btn上传upload登录login合作伙伴partner版权copyright网站地图sitemap图片命名规则1)图片名称分为头尾两部分，用下划线隔开。禁止用中文名。2)头部分表示此图片的大类性质。例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pi

5、c；等。3)尾部分用来表示图片的具体含义，用英文字母表示，如banner_ad.giflogo_firefox.gifbutton_next.gifmenu_aboutus.giftitle_news.gifpic_people.jpg4)有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。121.布局规范推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。优势如下：1.表现和内容相分离，将布局放在一个独立的样式文件中，html文件只存放文本信息。2.提高页面浏览速度，采用CSS+DIV结构的页面容量比table

6、的页面容量小得多，且