Zving模板页面制作规范及注意事项
为了保持页面开发规范、避免错误，加快学习和开发效率，下面列出泽元软件前端开发中CSS的一些规范及注意事项，此规范适用于为泽元网站内容管理系统（ZCMS）制作前端模板页面。
1.站点的模板文件及生成的静态页面一般位于ZCMS工程的wwwroot目录下，建议（非强制）如下目录结构：
wwwroot
  └ ZCMSDemo （站点默认发布目录）
        ├ css    （样式文件目录）
        ├ design  （静态页面或设计稿目录）
        ├ images  （图片或flash文件目录）
        ├ js      （脚本文件目录）
        ├ jsp    （jsp文件目录）
        └ template（默认模板文件目录）
2.web文件的“换行符类型”为“windows换行符-CR/LF”；编码为“UTF-8”（在GBK版本的ZCMS里或在需要与只支持GBK编码的控件交互的情况下，使用“GBK”编码）。
考虑到不同web服务器下的兼容性，web文件的文件名不能为中文，并且要区分大小写。
3.不同的文档声明影响页面元素的渲染效果，第一行必须加文档声明 ，以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
或 HTML5
<!doctype html>
4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器），仍然采用IE7的内核渲染，使用上面这一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。
5.考虑到页头页脚将会制作成包含文件，所以<body>区的内容至少要分散到三个独立div内。
6.考虑到一些交互脚本需要向页面内插入新的DOM元素，并设置坐标，所以不要给<body>设置宽度及内外边距。
7.综上所述，页面的基本HTML代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
</title>
<link href="../css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
html5标签区分大小写
<div id="header" class="pageWidth header">
……
</div>
<div id="main" class="pageWidth main">
……
</div>
<div id="footer" class="pageWidth footer">
……
</div>
<script src="../js/common.js" type="text/javascript">
</script>
</body>
</html>
8.考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要对 body、textarea、select、button之外的标签重新设置字体大小；并且建议不要对body、textarea、td之外的标签重设行高。
9.所以基本的css设定（reset.css）可以如下，（仅示例，请视情况修改或扩展）：
1
2
3
4
5
6
7
8
9
10
/* reset.css */
body {background-color:#fff;color: #222;}
a { color: #06a; text-decoration: none; }
a:hover { color: #f90; text-decoration: underline; }
body,div,q,iframe,form,
ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0;}
img,fieldset{border: none 0;}
body,td,textarea{word-break: break-all; line-height:1.5;}
body,input,textarea,select,button{margin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td{ font-size:1em; font-family:inherit; line-height:inherit;}
10.建议页面制作时，首先在在Firefox3.6以上版本、IE8.0以上版本及Chrome13以上版本测试，然后再测试 IE7、iE6、Safari等浏览器，至少要保证在Chrome最新版本及IE6/7/8这四个浏览器内正常显示（符合预期效果，页面布局无错位、载入 及交互时无JS错误……）。
11.允许使用css hack，以提高制作效率，如
1
2
.fl{ float:left; _display:inline;}
.fr{ float:right; _display:inline;}
12.页面布局，编写html时尽量不要对元素进行ID命名， 亦即尽量少使用css中的ID选择器，对元素ID命名可以在编写js交互脚本时进行。
13.使用Dreamweaver CS 以上版本：在页面制作时注意清除浮动、及定义浮动元素宽度，可以让页面在Dreamweaver里的“设计视图”下接近最终浏览效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。