网页制作的目录文件及CSS命名规范

网页制作的目录文件及CSS命名规范

第一部分：目录、文件、CSS命名方式：

文件夹与文件名称、CSS样式命名、程序中的一些控件等等：

名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主（不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂）。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

例如：images(图形文件)，flash（Flash文件）等。

命名方式：（性质_描素_位置_分类_数量）项相结合，采用简写、组合的方式形成通用规则。

例如：

news (性质)

news_title (性质_描素)

news_title_top (性质_描素_位置)

news_title_top_01 (性质_描素_位置_数量)

news_title_top_a_01 (性质_描素_位置_分类_数量)

news_title_top_b_01 (性质_描素_位置_分类_数量)

常用目录名：

data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式)等……

常用CSS名：

页面外围控制整体布局宽度：wrapper；头：header；内容：content/container；页面主体：main；侧栏：sidebar；尾：footer等……,更多命名查看: 《div+css 命名规则》

第二部分：结构（XHTML）

网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读，布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0 Transtitonal。

并遵循以下原则：

1. DDT类型：XHTML 1.0 Transitional

2. 编码：utf-8

3. 元标记必须项：

该页面的关键词概况；

该页面的简要描述；

具体内容根据SEO要求设置

4. Html代码中的所有标签遵循XHTML 1.0的书写规范，包括：

a) 、标签全部使用小写；

b)、标签全部闭合；

c)、所有属性必须有值而且用双引号；

d)、把所有<和&特殊符号用编码表示；

e)、所有的标签必须合理嵌套；

f)、注释中不要使用 -------- 如这样写是错误的：；

5.标签有语意：

a)、布局排版用

；

b)、标题用

——

；

c)、段落用

；无序列表用

，有序列表用
；

6. 放弃不被IE支持的标签，如等等；

7. title的合理应用：标签必须用title；必须赋予alt值；

可以用title说明；

8.根据网站的结构，对HTML进行模块化，比如：信息页面的头部尾部的通用文件，功能页面的头部尾部的通用文件，分页文件，可以模块化的信息列表模块。

9. JS：页面中的JS处理成外部文件，不能在页面中使用大量JS脚本，同时注意js文件调用的位置，比如统计代码跟页面的加载没有任何关系，必须放在页面最底部；

10. 尽量不要使用框架；

11.为表单添加标签；

12.所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的

13.图片采用gif, jpg,png压缩格式，以减小页面下载数据量，标记要有width,height属性

第三部分：表现（CSS）：

1. CSS文件作为外部链接，在页面的区链接调用，位置在元标记结束下一行，JS调用的上一行。视情况可以在页面中书写内联样式，用于定义此页面特殊的样式和覆盖CSS样式库中一定需要更改覆盖的样式，位置在外部链接样式表的下一行；

2. CSS文件视重要程度添加注释，方法为 /* 注释 */ ；

3. CSS选择器命名书写规范：

#idname , .classname {

width: %或px\em;

height: %或px\em;

margin:

border:

padding:

---------------------------------------------------------容器

长宽确定

background: #fff url() repeat left bottom fixed 1px 2px;

color:

"FONT-SIZE: 9.5pt;">宋体”, Arial, Helvetica,sans-serif;

font-size:

line-height:

---------------------------------------------------------容器内容格式

display:

visibility:

overflow:

position:

top:

right:

bottom:

left:

float:

clear:

---------------------------------------------------------容器布局

}

每一个属性结尾都必须写分号，其中有的值如果不需要，可以不写，大体上是这样的顺序，也符合思考的顺序。

4. 有几点注意事项：

a) "FONT-SIZE: 9.5pt;">必须以sans-serif字体做结尾；

b)减少样式数量，尽量重复使用；

c)必须清除float；

d)单位：使用像素（px）；

e)颜色值：使用#RRGGBB格式