Web_UI_制作规范

WebUI制作规范2012-8-17:初稿深圳发票网提供：目录一、Web目录结构规范.....................................................................................................................二、WebUI设计命名规范..................................................................................................................2.1Web界面设计最佳尺寸..........................................................................................................2.2网站设计及基本框架结构.......................................................................................................2.3命名规则注意几点...................................................................................................................2.4常用命名汇总............................................................................................................................三、WebUI图片规范..........................................................................................................................3.1webUI图片命名规范....................................................................................................3.2webUI图片处理规范...................................................................................................3.3webUI图片优化规范...................................................................................................四、Web基本框架布局规范................................................................................................................4.1常用到的Div和Table...................................................................................................4.2页面信息交互...................................................................................................................五、CSS样式书写规范及优化.............................................................................................................5.1CSS文件命名规范...................................................................................................................5.2常用类/ID命名规范................................................................................................................5.3结构与样式分离.......................................................................................................................5.4文档的结构化书写...................................................................................................................5.5注释书写规范............................................................................................................................5.6CSS样式属性代码优化缩写..................................................................................................5.7CSS各浏览器解决不兼容问题..............................................................................................六、文字编排与设计..............................................................................................................................七、常用的一些工具..............................................................................................................................八、需要关注的体验理念.................................................................................................................九、其他规范........................................................................................................................十、seo优化规范...............................................................一、Web目录结构规范：目录建立的原则：以最少的层次提供最清晰简便的访问结构。目录的命名以小写英文字母，下划线组成。根目录一般只存放index.htm以及其他必须的系统文件根目录下的images用于存放各页面都要使用的公用图片。所有JS等脚本存放在根目录下的scripts或js目录所有CSS文件存放在根目录下style或css目录多语言版本存放于独立的目录。例如：简体中文存放在cn目录下，繁体中文存放在tw目录下，英文存放在en目录下等。所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录下。二、WebUI设计命名规范：2.1Web界面设计最佳尺寸960网格系统——web界面设计最佳尺寸目前绝大多数显示器都支持1024x768及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。2.2网站设计及基本框架结构Container“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“,“wrap“,“page“.Header“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header”(或pageHeader).Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”,“navigation”,“nav-wrapper”.Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为:“subNav“,“links“，“sidebar-main”.Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为:“content“,“main-content”(或“mainContent”)。Sidebar“Sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为:“subNav“,“side-panel“,“secondary-content“.Footer“Footer”包含网站的一些附加信息，这部分还可以命名为:“copyright“2.3命名规则注意几点尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.如:red/left/big等。组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮:btn-search、登录表单:form-login、新闻列表:list-news。涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover点击：click已浏览：visited如:搜索按钮:btn-search、btn-search-hover、btn-search-visited2.4常用命名汇总名称命名规范页头header、top登录条loginbar标志logo侧栏sidebar广告条banner导航:nav子导航:subNav菜单:menu子菜单:subMenu下拉菜单:dropMenu工具条:toolbar表单:form栏目:column箭头:arrow搜索:search搜索按钮:btn-search滚动条:scroll内容:content标签页:tab文章列表:list小技巧:tips栏目标题:title链接:links页脚:footer、end服务:service热点:hot新闻:news下载:download注册:Register、reg状态:status按钮:btn上传:upload登陆:login投票:vote合作伙伴:partner版权:copyright网站地图:sitemap三、WebUI图片规范：3.1webUI图片命名规范图片名称分为头尾两两部分，用下划线隔开。头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在