请选择 进入手机版 | 继续访问电脑版
 找回密码
 免费注册
搜索

Web UI制作规范

0
回复
3446
查看
[复制链接]

300

主题

301

帖子

1543

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1543
2014-11-16 19:39:43 显示全部楼层 |阅读模式
本帖最后由 hk 于 2014-11-16 19:40 编辑

Web UI制作规范

一、 Web 目录结构规范:
l 目录建立的原则:以最少的层次提供最清晰简便的访问结构。
l 目录的命名以小写英文字母,下划线组成。
l 根目录一般只存放index.htm以及其他必须的系统文件
l 根目录下的images用于存放各页面都要使用的公用图片。
l 所有JS等脚本存放在根目录下的scripts或js目录
l 所有CSS文件存放在根目录下style或css目录
l 多语言版本存放于独立的目录。例如:简体中文存放在cn目录下, 繁体中文存放在 tw目录下,英文存放在en目录下等。
l 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录下。

二、 Web UI设计命名规范:
2.1 Web 界面设计最佳尺寸
960网格系统——web界面设计最佳尺寸
目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。

2.2 网站设计及基本框架结构

l Container
“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.
l Header
“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
l Navbar
“navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
l Menu
“Menu”区域包含一般的链接和菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”.
l Main
“Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
l Sidebar
“Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
l Footer
“Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“

2.3命名规则注意几点
l 尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
如:red/left/big等。
l 组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search、登录表单:form-login、新闻列表:list-news。
l 涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停::hover   点击:click   已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

2.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

三、 Web UI图片命名规范:
l 图片名称分为头尾两两部分,用下划线隔开。
l 头部分表示此图片的大类性质。
例如: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner ;标志性的图片我们取名为:logo ;在页面上位置不固定并且带有链接的小图片我们取名为button ;在页面上做栏目链接的图片我们取名:menu ;不带链接表示标题的图片我们取名:title ;装饰用的照片我们取名:pic ;依照此原则类推。
l 尾部分用来表示图片的具体含义,用英文字母表示。例如:banner_lntu.gif  logo_lntu.gif  button_next.gif  menu_aboutus.gif  title_news.gif  pic_people.jpg
l 有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。
l 多语言的图片应放到多语言目录下

四、 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最大缺点是代码臃肿,你至少需要写下 <table><tr><td>这三个标签之后,才能开始真正的内容,另外,Table 的各种标签中还包含了复杂的属性定义,而 Div 只需 <div>一个标签。
页面渲染性能问题:浏览器需要将整个表格完全读完后才会开始渲染。
不利于搜索引擎优化:搜索引擎喜欢内容与修饰分开。
可访问性差:屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。
不够语义(Semantic):我们需要语义的 Web。
一般table 只用做于数据处理。

五、 CSS样式书写规范及优化:
5.1.CSS文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;

5.2.常用类/ID命名规范
页 眉:header
内 容:content
容 器:container
页 脚:footer
注 释:note
……(更多参照2.4常用命名汇总)
1、常用类的命名规则:
应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……
2、辅助图片用背影图处理:
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

5.3结构与样式分离:
在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

5.4、文档的结构化书写:
页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:
<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>

/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/

5.5注释书写规范
1、行间注释:
直接写于属性值后面,如:
.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}
2、整段注释:
分别在开始及结束地方加入注释,如:
/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

5.6 CSS样式属性代码优化缩写
1、不同类有相同属性及属性值的缩写:
对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}

两个不同类的属性值有重复之处,刚可以缩写为:
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}

2、同一属性的缩写:
同一属性根据它的属性值也可以进行简写,如:
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}

3、内外侧边框的缩写:
在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
则可缩写为:
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
缩写为:.btn {margin:10px 5px;}
而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
缩写为:.btn{margin:10px;}

4、颜色值的缩写:
当RGB三个颜色值数值相同时,可缩写颜色值代码。如:
.menu { color:#ff3333;}
可缩写为:.menu {color:#f33;}

5.7 CSS各浏览器解决不兼容问题
因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。
1、 IE6、IE7、Firefox之间的兼容写法:
写法一:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
根据上述表达,同一类/ID下的CSS  hack可写为:
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为:FF、IE7、IE6.
写法二:
IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

写法三:
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/
屏蔽IE浏览器:
select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/
IE6可识别:
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
select { display /*IE6不识别*/:none;}
IE的if条件hack写法:
所有的IE可识别:
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮动:
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}



六、 其他规范:
l js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js.
l 所有的CSS的尽量采用外部调用.
l 所有的javascript脚本尽量采取外部调用.
l Web 页面编码一律统一用 UTF-8编码:UTF-8是世界性通用代码,也完美的支持中文编码,如果我们做的网站能让国外用户正常的访问,就最好用UTF-8。
l 字体符号用像素px来定义,px使用中文宋体12px 和14px黑体
字体采用:Arial, Helvetica, sans-serif,宋体。
l 所有连接使用相对路径/images/,切记不可使用绝对路径。如:../images/
l 所有文件,目录,图片全部以小写字母命名,禁止用中文命名。
l 清理无效的链接和图片

七、 常用的一些工具:
l CSS在线优化及压缩:
http://www.mb5u.com/tool/cssjianfei/
l HTML5和CSS3工具资源汇总
http://blog.bingo929.com/html5-and-css3-tools-list.html
l Web前端开发必备手册下载
http://blog.bingo929.com/cheat-sheets-for-web-develop.html
l 300+Jquery, CSS, MooTools 和 JS的导航菜单资源
http://blog.bingo929.com/300-jquery-css-mootools-js-navigation-menus.html
l 用户体验
http://ucdchina.com/VD?p=4


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册