Web_UI_制作规范

《Web_UI_制作规范》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、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目录结构规范：l目录建立的原则：以最少的层次提供最清晰简便的访问结构。l目录的命名以小写英文字母，下划线组成。

2、l根目录一般只存放index.htm以及其他必须的系统文件l根目录下的images用于存放各页面都要使用的公用图片。l所有JS等脚本存放在根目录下的scripts或js目录l所有CSS文件存放在根目录下style或css目录l多语言版本存放于独立的目录。例如：简体中文存放在cn目录下，繁体中文存放在tw目录下，英文存放在en目录下等。l所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录下。二、WebUI设计命名规范：2.1Web界面设计最佳尺寸960网格系统——web界面设计最佳尺寸目前绝大多数显示器都支持1024x768及

3、其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。2.2网站设计及基本框架结构lContainer“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“,“wrap“,“page“.lHeader“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header”(或pageHeader).lNavbar“navbar“等同于横向的导航栏，是最典型的网页元素。这

4、部分还可以命名为:“nav”,“navigation”,“nav-wrapper”.lMenu“Menu”区域包含一般的链接和菜单，这部分还可以命名为:“subNav“,“links“，“sidebar-main”.lMain“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为:“content“,“main-content”(或“mainContent”)。lSidebar“Sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为:“subNav“,“side-panel“,“sec

5、ondary-content“.lFooter“Footer”包含网站的一些附加信息，这部分还可以命名为:“copyright“2.3命名规则注意几点l尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.如:red/left/big等。l组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮:btn-search、登录表单:form-login、新闻列表:list-news。l涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover点击：click已浏览：vis

6、ited如:搜索按钮: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链接:link

7、s页脚:footer、end服务:service热点:hot新闻:news下载:download注册:Register、reg状态:status按钮:btn上传:upload登陆:login投票:vote合作伙伴:partner版权:copyright网站地图:sitemap一、WebUI图片命名规范：l图片名称分为头尾两两部分，用下划线隔开。l头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上做栏目链接的图