为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.
文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。a.HTML的命名原则引文件统一使用index.htmindex.htmlindex.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如:关于我们\aboutus信息反馈\feedback产品\product如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;每一个目录中应该包含一个缺省的html文件,文件名统一用index.htmindex.htmlindex.asp;
d.动态语言文件命名原则以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。范例:register_form.aspregister_post.asptopic_lock.asp
基本原则:
CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。
注意细则:
定义ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可实现日期居右显示
命名规则:
(二)注释的写法:/*Footer/内容区/EndFooter*/
(三)id的命名:(1)页面结构容器:container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:leftrightcenter
(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu子菜单:submenu标题:title摘要:summary
基本样式:
/*CSSDocument*/body{margin:0;padding:0;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:0;margin:0;}table,td,tr,th{font-size:12px;}li{list-style-type:none;}img{vertical-align:top;border:0;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}address,cite,code,em,th{font-weight:normal;font-style:normal;}.fB{font-weight:bold;}.f12px{font-size:12px;}.f14px{font-size:14px;}.left{float:left;}.right{float:right;}a{color:#2b2b2b;text-decoration:none;}a:visited{text-decoration:none;}a:hover{color:#ba2636;text-decoration:underline;}a:active{color:#ba2636;}重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!
2.在网页中中文应首选使用宋体。英文和数字首选使用verdana和arial两种字体。一般使用中文宋体的9pt和11pt或12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px的字号比较合适。
4.不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。
行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.
排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上
标记,注意,一般情况下,请不要省略
3.网页制作细节----链接
在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(null)”代替原来的“#”标记
4.网页制作细节----表格1px表格style="border-collapse:collapse"实例如下:
设置亮、暗边框颜色表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性可以对表格样式设置。
5.网页制作细节----下载速度首页Flash网页大小应限定在200K以下,尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在70K左右,尽可能的使用背景颜色替换大块同色图片。
6.网页制作细节----includeasp标准写法jsp标准写法<%@includefile="../inc/index_top..jsp"%>
7.网页制作细节----Alt和Title都是提示性语言标签,请注意它们之间的区别。在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。alt用来给图片来提示的。Title用来给链接文字或普通文字提示的。用法如下:
文字
这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写: