Web前端开发标准手册文档格式.docx
- 文档编号:22580418
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:19
- 大小:77KB
Web前端开发标准手册文档格式.docx
《Web前端开发标准手册文档格式.docx》由会员分享,可在线阅读,更多相关《Web前端开发标准手册文档格式.docx(19页珍藏版)》请在冰豆网上搜索。
存放PSD源文件
flashstudio
存放flash源文件
inc
存放include文件
library
存放DW库文件
media
存放多媒体文件
project
存放工程项目资料
temp
存放客户原始资料
js
存放JavaScript脚本
css
存放CSS文件
CSS书写标准
大体原那么:
CSS样式可细分为3类:
自概念样式、从头概念HTML样式、链接状态样式。
1.样式为设计师自概念的新CSS样式,阻碍被利用本样式的区域,用于完成网页中局部的样式设定。
样式名“.”+“相应样式成效描述的单词或缩写”例:
“.shadow”文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:
“.no12”、“.no12-24”
2.义HTML样式为设计师从头概念已有的HTML标签样式,阻碍全数的被设定标签样式,用于统一网页中某一标签的样式概念。
样式名“HTML标签”例:
hr{border:
1pxdotted#333333}
3.态样式为设计师对链接不同状态设定特殊样式,阻碍被利用本样式区域中的链接。
该样式写法有2种:
:
link:
link第一种只能修饰<
a>
标签中;
第二种能够修饰所有包括有<
标签的其他标签。
页面内的样式加载必需用链接方式<
linkrel="
stylesheet"
type="
text/css"
href="
style/"
>
注意细那么:
1.协作开发及分工:
i会根据各个模块,同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&
表现&
行为;
共用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>
2020-09-15<
/span>
/ul>
概念li{position:
relative}lispan{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:
},文件中我会初始化表格样式)
12.杜绝使用<
metahttp-equiv="
X-UA-Compatible"
content="
IE=7"
/>
兼容ie8;
13.用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景:
background:
none;
_filter:
progid:
src=’img/’);
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;
#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:
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
和
这是通过优化的字号,黑体字或宋体字加粗时,一样选用11pt
的字号比较适合。
中英文混排时,咱们尽可能的将英文和数字概念为verdana
和arial
两种字体。
html书写标准
1.网页制作细节----head区代码标准
head区是指HTML代码的<
head>
和<
/head>
之间的内容。
必需加入的标签
a)公司版权注释<
!
---ThesiteisdesignedbyEHM,Inc07/2005--->
b)网页显示字符集
简体中文:
METAHTTP-EQUIV="
Content-Type"
CONTENT="
text/html;
charset=gb2312"
繁体中文:
charset=utf-8"
英语:
c)网页制作者信息<
METAname="
author"
"
d)网站简介<
METANAME="
DESCRIPTION"
xxxxxxxxxxxxxxxxxxxxxxxxxx"
e)搜索关键字<
keywords"
xxxx,xxxx,xxx,xxxxx,xxxx,"
f)网页的css标准<
LINKhref="
../css/"
rel="
g)网页题目<
title>
xxxxxxxxxxxxxxxxxx<
/title>
能够选择加入的标签
a)设定网页的到期时刻。
一旦网页过时,必需到效劳器上从头调阅。
expires"
Wed,26Feb199708:
21:
57GMT"
b)禁止阅读器从本地机的缓存中调阅页面内容。
Pragma"
no-cache"
c)用来避免他人在框架里挪用你的页面。
Window-target"
_top"
d)自动跳转。
e)<
Refresh"
5;
URL=http:
SCRIPTLANGUAGE="
JavaScript"
SRC="
script/"
/SCRIPT>
f)附<
body>
标签:
标签不属于head区,那个地址强调一下,为了保证阅读器的兼容性,必需设置页面背景<
bodybgcolor="
#FFFFFF"
2.网页制作细节----字体1.在设定字体样式时关于文字字号样式和行间距应必需利用CSS样式表。
禁止在页面中显现<
fontsize=?
标记。
2.在网页中中文应首选利用宋体。
英文和数字首选利用verdana
一样利用中文宋体的9pt
和11pt或12px
3.为了最大程度的发挥阅读器自动排版的功能,在一段完整的文字中请尽可能不要利用<
br>
来人工干与分段。
4.不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号以后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该利用半角括号。
5.请不要在网页中持续显现多于一个的也尽可能少利用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽可能利用text-indent,padding,margin,hspace,vspace和透明的gif图片来实现。
6.行距建议用百分比来概念,经常使用的两个行距的值是line-height:
120%/150%.7.排版中咱们常常会碰到需要进行首行缩进的处置,不要利用或全角空格来达到成效,标准的做法是在样式表中概念p{text-indent:
2em;
}然后给每一段加上<
p>
标记,注意,一样情形下,请不要省略<
/p>
终止标记。
3.网页制作细节----链接1.网站中的链接途径全数采纳相对途径,一样链接到某一目录下的缺省文件的链接途径没必要写全名,如咱们没必要如此:
ahref=”aboutus/”>
而应该如此:
,所有内页指向首页的链接写成<
ahref=”/”>
2.在阅读器里,当咱们点击空链接时,它会自动将当前页面重置到首端,从而阻碍用户正常的阅读内容,咱们用代码“javascript:
void(null)”代替原先的“#”标记
4.网页制作细节----表格1px表格style="
collapse"
实例如下:
tableborder="
1"
cellspacing="
0"
width="
32"
height="
style="
bordercolor="
#000000"
cellpadding="
tr>
td>
/td>
/tr>
/table>
设置亮、暗边框颜色表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性能够对表格样式设置。
500"
bordercolorlight="
bordercolordark="
在写<
table>
相互嵌套时,严格依照的标准,关于单独的一个<
来讲,<
对齐,<
缩进两个半角空格,<
中若是还有嵌套的表格,<
也缩进两个半角空格,若是<
中没有任何嵌套的表格,<
终止标记应该与<
处于同一行,不要换行,如咱们注意在源代码中不该有如此的代码:
imgsrc=”../images/”>
而应该是如此的:
这是因为阅读器以为换行相当于一个半角空格,以上不标准的写法相当于无心中增加一个半角空格,若是确实有必要增加一个半角空格,也应该如此写:
一个网页要尽可能幸免用整个一张大表格,所有的内容都嵌套在那个大表格之内,因为阅读器在说明页面的元素时,是以表格为单位一一显示,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 开发 标准 手册