Web前端开发规范手册Word文档格式.docx
《Web前端开发规范手册Word文档格式.docx》由会员分享,可在线阅读,更多相关《Web前端开发规范手册Word文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
cn
存放中文HTML文件
en
存放英文HTML文件
flash
存放Flash文件
images
存放图片文件
imagestudio
存放PSD源文件
flashstudio
存放flash源文件
inc
存放include文件
library
存放DW库文件
media
存放多媒体文件
project
存放工程项目资料
temp
存放客户原始资料
js
存放JavaScript脚本
css
存放CSS文件
2.3CSS书写规范
基本原则:
CSS样式可细分为3类:
自定义样式、重新定义HTML样式、链接状态样式。
1.样式为设计师自定义的新CSS样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。
样式名“.”+“相应样式效果描述的单词或缩写”例:
“.shadow”
2.文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:
“.no12”、“.no12-24”
2.义HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。
样式名“HTML标签”例:
hr{border:
1pxdotted#333333}
3.态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。
该样式写法有2种:
a.nav:
linknav.a:
link第一种只能修饰<
a>
标签中;
第二种可以修饰所有包含有<
标签的其他标签。
页面内的样式加载必须用链接方式<
linkrel="
stylesheet"
type="
text/css"
href="
style/style.css"
>
注意细则:
1.协作开发及分工:
i会根据各个模块,同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&
表现&
行为;
共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改;
2.class与id的使用:
id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;
id原则上都是由我分发框架文件时命名的,为JavaScript预留钩子的除外;
3.为JavaScript预留钩子的命名,请以js_起始,比如:
js_hide,js_show;
4.class与id命名:
大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&
数字&
_来组合命名,如i_comment,fontred,width200;
避免使用中文拼音,尽量使用简易的单词组合;
总之,命名要语义化,简明化.
5.规避class与id命名(此条重要,若有不明白请及时与i沟通):
a,通过从属写法规避,示例见d;
b,取父级元素id/class命名部分命名,示例见d;
c,重复使用率高的命名,请以自己代号加下划线起始,比如i_clear;
d,a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码<
divid="
mainnav"
<
/div>
中加入新的div元素,
按a命名法则:
<
divclass="
firstnav"
...<
样式写法:
#mainnav.firstnav{.......}
按b命名法则:
main_firstnav"
.main_firstnav{.......}
6.css属性书写顺序,建议遵循布局定位属性-->
自身属性-->
文本属性-->
其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:
布局定位属性主要包括:
margin、padding、float(包括clear)、position(相应的top,right,bottom,left)、display、visibility、overflow等;
自身属性主要包括:
width&
height&
background&
border;
文本属性主要包括:
font、color、text-align、text-decoration、text-indent等;
其他属性包括:
list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序)、zoom等.我所列出的这些属性只是最常用到的,并不代表全部;
7.书写代码前,考虑并提高样式重复使用率;
8.充分利用html自身属性及样式继承原理减少代码量,比如:
ulclass="
list"
li>
这儿是标题列表<
span>
2010-09-15<
/span>
/ul>
定义ul.listli{position:
relative}ul.listlispan{position:
absolute;
right:
0}
即可实现日期居右显示
9.样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码;
10.背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作;
11.使用table标签时(尽量避免使用table标签),请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope;
(cellspaing及cellpadding的css控制方法:
table{border:
0;
margin:
border-collapse:
collapse;
}tableth,tabletd{padding:
},base.css文件中我会初始化表格样式)
12.杜绝使用<
metahttp-equiv="
X-UA-Compatible"
content="
IE=7"
/>
兼容ie8;
13.用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:
14.避免兼容性属性的使用,比如text-shadow||css3的相关属性;
15.减少使用影响性能的属性,比如position:
absolute||float;
16.必须为大区块样式添加注释,小区块适量注释;
17.代码缩进与格式:
建议单行书写,可根据自身习惯,后期优化i会统一处理;
命名规则:
头:
header
内容:
content/container
尾:
footer
导航:
nav
侧栏:
sidebar
栏目:
column
页面外围控制整体布局宽度:
wrapper
左右中:
leftrightcenter
登录条:
loginbar
标志:
logo
广告:
banner
页面主体:
main
热点:
hot
新闻:
news
下载:
download
子导航:
subnav
菜单:
menu
子菜单:
submenu
搜索:
search
友情链接:
friendlink
页脚:
版权:
copyright
滚动:
scroll
content
标签页:
tab
文章列表:
list
提示信息:
msg
小技巧:
tips
栏目标题:
title
加入:
joinus
指南:
guild
服务:
service
注册:
regsiter
状态:
status
投票:
vote
合作伙伴:
partner
(二)注释的写法:
/*Footer*/
内容区
/*EndFooter*/
(三)id的命名:
(1)页面结构
容器:
container
页头:
页尾:
导航:
(2)导航
主导航:
mainbav
顶导航:
topnav
边导航:
左导航:
leftsidebar
右导航:
rightsidebar
标题:
title
摘要:
summary
(3)功能
登陆:
login
功能区:
shop
标题:
按钮:
btn
当前的:
current
图标:
icon
注释:
note
link
copyright\
基本样式:
/*CSSDocument*/
body{margin:
padding:
font:
12px"
\5B8B\4F53"
san-serif;
background:
#fff;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:
margin:
}
table,td,tr,th{font-size:
12px;
li{list-style-type:
none;
img{vertical-align:
top;
border:
ol,ul{list-style:
h1,h2,h3,h4,h5,h6{font-size:
font-weight:
normal;
address,cite,code,em,th{font-weight:
font-style:
.fB{font-weight:
bold;
.f12px{font-size:
.f14px{font-size:
14px;
.left{float:
left;
.right{float:
right;
a{color:
#2b2b2b;
text-decoration:
a:
visited{text-decoration:
hover{color:
#ba2636;
text-decoration:
underline;
active{color:
重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!
不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt
和11pt,px一般使用中文宋体12px
和14.7px
这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt
的字号比较合适。
中英文混排时,我们尽可能的将英文和数字定义为verdana
和arial
两种字体。
2.4html书写规范
1.网页制作细节----head区代码规范
head区是指HTML代码的<
head>
和<
/head>
之间的内容。
必须加入的标签
a)公司版权注释<
!
---ThesiteisdesignedbyEHM,Inc07/2005--->
b)网页显示字符集
简体中文:
METAHTTP-EQUIV="
Content-Type"
CONTENT="
text/html;
charset=gb2312"
繁体中文:
charset=utf-8"
英语:
c)网页制作者信息
d)网站简介<
METANAME="
DESCRIPTION"
xxxxxxxxxxxxxxxxxxxxxxxxxx"
e)搜索关键字<
keywords"
xxxx,xxxx,xxx,xxxxx,xxxx,"
f)网页的css规范<
LINKhref="
../css/style.css"
rel="
g)网页标题<
title>
xxxxxxxxxxxxxxxxxx<
/title>
可以选择加入的标签
a)设定网页的到期时间。
一旦网页过期,必须到服务器上重新调阅。
expires"
Wed,26Feb199708:
21:
57GMT"
b)禁止浏览器从本地机的缓存中调阅页面内容。
Pragma"
no-cache"
c)用来防止别人在框架里调用你的页面。
Window-target"
_top"
d)自动跳转。
Refresh"
5;
URL=http:
5指时间停留5秒
e)网页搜索机器人向导。
用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
robots"
none"
CONTENT的参数有all,none,index,noindex,follow,nofollow。
默认是all。
f)收藏夹图标<
linkrel="
ShortcutIcon"
favicon.ico"
g)所有的javascript的调用尽量采取外部调用.
SCRIPTLANGUAGE="
JavaScript"
SRC="
script/xxxxx.js"
/SCRIPT>
h)附<
body>
标签:
标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<
bodybgcolor="
#FFFFFF"
2.网页制作细节----字体
3.1.在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。
禁止在页面中出现<
fontsize=?
标记。
4.
5.2.在网页中中文应首选使用宋体。
英文和数字首选使用verdana
一般使用中文宋体的9pt
和11pt或12px
6.
7.3.为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<
br>
来人工干预分段。
8.
9.4.不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
10.
11.5.请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。
12.
13.6.行距建议用百分比来定义,常用的两个行距的值是line-height:
120%/150%.
14.
15.7.排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:
2em;
}然后给每一段加上<
p>
标记,注意,一般情况下,请不要省略<
/p>
结束标记。
16.网页制作细节----链接
17.1.网站中的链接路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:
ahref=”aboutus/index.htm”>
而应该这样:
ahref=”aboutus/”>
,所有内页指向首页的链接写成<
ahref=”/”>
18.
19.2.在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:
void(null)”代替原来的“#”标记
20.
21.
22.网页制作细节----表格
23.1px表格style="
collapse"
24.实例如下:
25.<
tableborder="
1"
cellspacing="
0"
width="
32"
height="
style="
26.bordercolor="
#000000"
cellpadding="
27.<
tr>
28.<
td>
/td>
29.<
/tr>
30.<
/table>
31.设置亮、暗边框颜色
32.表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性可以对表格样式设置。
33.<
500"
bordercolorlight="
bordercolordark="
34.
35.在写<
table>
互相嵌套时,严格按照的规范,对于单独的一个<
来说,<
对齐,<
缩进两个半角空格,<
中如果还有嵌套的表格,<
也缩进两个半角空格,如果<
中没有任何嵌套的表格,<
结束标记应该与<
处于同一行,不要换行,
36.如我们注意在源代码中不应有这样的代码:
37.<
imgsrc=”../images/sample.gif”>
38.<
39.而应该是这样的:
40.<
41.这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:
42.<
43.
44.一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。
如果必须这样做,请使用<
tbody>
标记,以便能够使这个大表格分块显示
45.
46.网页制作细节----下载速度
47.首页Flash网页大小应限定在200K以下,尽可能的使用矢量图形和Action来减小动画大小。
非首页静态页面含图片大小应限定在70K左右,尽可能的使用背景颜色替换大块同色图片。
48.网页制