命名规范
# 文件命名规则
文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符; 命名原则的指导思想,一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义, 二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
# HTML的命名原则
引文件统一使用index.htm index.html index.asp文件名(小写) 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。 例如: 关于我们 :aboutus 信息反馈 :feedback 产 品 :product
如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示; 每一个目录中应该包含一个html 文件,文件名统一用index.htm index.html index.asp;
# 图片的命名原则
图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质 例如:广告、标志、菜单、按钮等等。 放置在页面顶部的广告、装饰图案等长方形的图片取名: banner 标志性的图片取名为: logo 在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu 装饰用的照片我们取名: pic 不带链接表示标题的图片我们取名: title 例:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg 鼠标感应效果图片命名规范为"图片名+_+on/off"。 例如:menu1_on.gif menu1_off.gif
# javascript的命名原则
例如:广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.js
# 动态语言文件命名原则
以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。 例:register_form.asp register_post.asp topic_lock.asp
# 文件存放位置规范
cn | 存放中文HTML文件 |
en | 存放英文HTML文件 |
flash | 存放Flash文件 |
images | 存放图片文件 |
imagestudio | 存放PSD源文件 |
flashstudio | 存放flash源文件 |
inc | 存放include文件 |
library | 存放DW库文件 |
media | 存放多媒体文件 |
project | 存放工程项目资料 |
temp | 存放客户原始资料 |
js | 存放JavaScript脚本 |
css | 存放CSS文件 |
# 图片规范
- 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
- 图片格式仅限于gif || png || jpg;
- 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
- 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
- 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);在使用半透明时,会发生Color blending现象。在渲染的时候,为了得到某个像素的最终的颜色值,系统将不得不将当前Layer和它下方的Layer进行颜色的混合,这样就增加了计算量。如果非透明,那么系统只需要根据当前Layer,就能得到最终的颜色值。
- 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.
# JavaScript书写规范
书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);
库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.
类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
函数命名: 首字母小写驼峰式命名. 如iTaoLun();
命名语义化, 尽可能利用英文单词或其缩写;
尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
代码结构明了, 加适量注释. 提高函数重用率;
注重与html分离, 减小reflow, 注重性能.
# CSS 书写规范
# 注意细则
- class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是分发框架文件时命名的, 为JavaScript预留钩子的除外
- 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
- 减少使用影响性能的属性, 比如position:absolute or float ;
# 类命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
# id的命名
页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
# 基本样式
重定义的最先,伪类其次,自定义最后
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;
}
# html 书写规范
# head区代码规范
必须加入的标签
a) 公司版权注释 <!--- The site is designed by EHM,Inc 07/2005 --->
b) 网页显示字符集
简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 语:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
c) 网页制作者信息 <META name="author" content="webmaster@maketown.com">
d) 网站简介<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
e) 搜索关键字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
f) 网页的css规范 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
g) 网页标题<title>xxxxxxxxxxxxxxxxxx</title>
可以选择加入的标签
a) 设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
b) 禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
c) 用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
d) 自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒
e) 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
f) 收藏夹图标
<link rel = "Shortcut Icon" href="console.png">
g) 所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
h) 附
标签 标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景``# 字体
1. 在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 标记。
**2.**在网页中中文应首选使用宋体,不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt 和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。英文和数字首选使用verdana 和arial 两种字体。
3. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br>
来人工干预分段。
**4.**不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
5. 请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
6. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.
7. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上
标记,注意,一般情况下,请不要省略
结束标记 。# 链接
1. 网站中的链接路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样: 而应该这样:,所有内页指向首页的链接写成
2. 在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码“javascript:void(null)”代替原来的“#”标记
# 下载速度
首页Flash 网页大小应限定在 200K 以下,尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右,尽可能的使用背景颜色替换大块同色图片。
# include
asp标准写法 <!--#include file="inc/index_top.asp" -->
jsp 标准写法 <%@ include file="../inc/index_top..jsp" %>
# Alt和Title
都是提示性语言标签,请注意它们之间的区别。
在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
用法如下:
<p Title="给链接文字提示">文字</p>
<a href="#" Title="给链接文字提示">文字</a>
<img src="图片.gif" alt="给图片提示">
# 缓存
网页不会被缓存
HTM网页
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
# 浏览器兼容性
创建站点时,应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下,尽可能将站点设计为具有最大的浏览器兼容性。目前使用的 Web 浏览器有二十多种,大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户,但您应明确并不是每个人都在使用这两种浏览器的最新版本。
您的站点越复杂(在布局、动画、多媒体内容和交互方面),跨浏览器兼容的可能性就越小。例如,并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示,但比起有效地使用图形、布局和交互的页面,这样的页面在美感上可能要差得多。所以,应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。
# banner
全尺寸banner为468X60px,半尺寸banner为234X60px,小banner为88X31px。 另外120X90,120X60也是小图标的标准尺寸。全尺寸banner不超过14K。 普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140 次级页的pip尺寸360X300,336X280 游标:100X100或120X120
# LOGO的国际标准规范
为了便于INTERNET上信息的传播,一个统一的国际标准是需要的。
实际上已经有了这样的一整套标准。其中关于网站的LOGO,目前有三种规格:
8831 这是互联网上最普遍的LOGO规格。
120*
60 这种规格用于一般大小的LOGO。
120*90 这种规格用于大型LOGO。