Web UI 制作规范

WebUI制作规范目录一、Web目录结构规范.....................................................................................................................二、WebUI设计命名规范..................................................................................................................2.1Web界面设计最佳尺寸..........................................................................................................2.2网站设计及基本框架结构.......................................................................................................2.3命名规则注意几点...................................................................................................................2.4常用命名汇总............................................................................................................................三、WebUI图片命名规范..................................................................................................................四、Web基本框架布局规范................................................................................................................五、CSS样式书写规范及优化.............................................................................................................5.1CSS文件命名规范...................................................................................................................5.2常用类/ID命名规范................................................................................................................5.3结构与样式分离.......................................................................................................................5.4文档的结构化书写...................................................................................................................5.5注释书写规范............................................................................................................................5.6CSS样式属性代码优化缩写..................................................................................................5.7CSS各浏览器解决不兼容问题..............................................................................................六、其他规范...........................................................................................................................................七、常用的一些工具..............................................................................................................................一、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图片命名规范：图片名称分为头尾两两部分，用下划线隔开。头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上做栏目链接的图片我们取名：menu；不带链接表示标题的图片我们取名：title；装饰用的照片我们取名：pic；依照此原则类推。尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_lntu.giflogo_lntu.gifbutton_next.gifmenu_aboutus.giftitle_news.gifpic_people.jpg有onmouse效果的图片，两张分别在原有文件名后加_on和_off命名。多语言的图片应放到多语言目录下四、Web基本框架布局规范：Web基本框架布局规范常用到的Div和Table两种采用CSS+DIV对网站重构日趋被大家重视起来，有以下优势：1：表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。2：提高搜索引擎对网页的索引效率用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。3：提高页面浏览速度对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。还有因为table标签是要等/table下载好以后才可以显示的，所以整个网页是一下子跳出来的，这样让人感觉起来显示速度非常的慢。而使用css+div,div标签不用等/div下载好就可以显示里面的内容的,所以让人感觉打开网页的速度非常之快。4：易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。CSS+DIV所以成为目前网页布局主流。Table最大缺点是代码臃肿，你至少需要写下tabletrtd这三个标签之后，才能开始真正的内容，另外，Table的各种标签中还包含了复杂的属性定义，而Div只需div一个标签。页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解Table中的内容。不够语义（Semantic）：我们需要语义的Web。一般table只用做于数据处理。五、