网页html制作目录文件及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等……
 
 
 
第二部分：结构（XHTML）
网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读，布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0 Transtitonal。
并遵循以下原则：
 
1.        DDT类型：XHTML 1.0 Transitional
2.        编码：utf-8
3.        元标记必须项：
<meta name="keywords" content="" /> 该页面的关键词概况
<meta name="description" content="" /> 该页面的简要描述
<meta name="robots" content="all" />
具体内容根据SEO要求设置
4.        Html代码中的所有标签遵循XHTML 1.0的书写规范，包括：
a)        标签全部使用小写；
b)        标签全部闭合；
c)         所有属性必须有值而且用双引号；
d)        把所有<和&特殊符号用编码表示；
e)        所有的标签必须合理嵌套；
f)          注释中不要使用 --------  如这样写是错误的：<!-- 注释------------注释 -->；
5.        标签有语意：
a)        布局排版用<div>；
b)        标题用<h1>——<h6>；
c)         段落用<p>；无序列表用<ul>，有序列表用<ol>；
6.        放弃不被IE支持的标签，如<abbr；放弃不被w3c推荐的html4标签，如：<center><font><b>等等；
7.        title的合理应用：<a>标签必须用title；<img>必须赋予alt值；<div>可以用title说明；
8.        根据网站的结构，对HTML进行模块化，比如：信息页面的头部尾部的通用文件，功能页面的头部尾部的通用文件，分页文件，可以模块化的信息列表模块。
9.        JS：页面中的JS处理成外部文件，不能在页面中使用大量JS脚本，同时注意js文件调用的位置，比如统计代码跟页面的加载没有任何关系，必须放在页面最底部；
10.    尽量不要使用框架；
11.    为表单添加<lable>标签；
12.    所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的
13.    图片采用gif, jpg,png压缩格式，以减小页面下载数据量，<img>标记要有width,height属性
 
第三部分：表现（CSS）
1.        CSS文件作为外部链接，在页面的<head>区链接调用，位置在元标记结束下一行，JS调用的上一行。视情况可以在页面中书写内联样式<style></style>，用于定义此页面特殊的样式和覆盖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格式
 
 
第四部分：UE指导原则
 
1.        网站LOGO的视觉统一，网站主体的视觉风格、文本颜色、链接颜色、修饰图片风格以及按钮和表单控件的视觉进行统一；
2.        为每一个页面设定一个最合适的标题<title>，使用户和搜索引擎一目了然知道页面的主题；
3.        为大部分页面加入元标记，即<meta>相关内容，描述页面属性；在最终页<link>加入具有亲和力的版权说明、免责声明、交互设计说明文档的链接地址；
4.        页面中必须有回到“首页”的链接——一般做法是将站点LOGO加上首页的链接，最好还是有回到首页的文字链接；
5.        如果网站栏目很多，要让用户知道所处的页面属于哪个栏目之下，以及很轻松的可以回到上一级栏目——标签是一种不错的方法；
6.        现在位置。如果上一条原则处理的很好，“现在位置”可以去掉；
7.        搜索。合理的放置搜索表单，最好在首屏，并且确保搜索结果的准确性；
 
 
表单设计原则:
1.        面向菜鸟和专业用户，填写项尽量精简，做简单的填写说明，仅放置与填写表单相关的链接，避免用户通过其他链接转移视线到别的地方，从而放弃填写表单
2.        清晰的验证——告诉用户为什么出现错误，并引导正确的填写；
3.        如果完成表单任务需要多个步骤，需要用图形或文字表明所需的步骤，以及当前正在进行的步骤——使用户知道离成功还有多远；
4.        如果可能，尽量先放置input、 textaera等需要键盘输入的项，再放置下拉、单选、复选等键盘操作的项，紧接着是“提交”按钮——就是说，减少键盘操作被鼠标操作打断的次数；
5.        文本域允许更改内容的文本格式，比如加粗、字体大小、超链接、图片等等，而且，尽量让此内容与用户完成发布以后的内容格式相同；
6.        提供将表单保存为草稿的功能；
7.        设计符合习惯的表单。
 
 
个人总结
Web 开发的分散性和交互性，决定了 Web 开发必须遵从一定的开发规范和技术约定，只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通，仅供个人参考
posted @ 2012-03-19 09:38  前望  阅读(2101)  评论(0)  编辑  收藏  举报