Zving模板页面制作规范及注意事项-泽元知识库

为了保持页面规范，避免错误，加快学习和开发效率，以下列出Zving前端开发中的一些规范及注意事项，此规范适用为泽元网站内容管理系统（ZCMS）制作前端模板页面。（2019年3月25日修正）

站点的模板文件及生成的静态页面一般位于ZCMS工程的wwwroot目录下，建议（非强制）的目录结构如下：

 wwwroot
    └ ZCMSDemo （站点默认发布目录）
        ├ css     （样式文件目录）
        ├ html  （静态页面目录）
        ├ design  （原型或设计稿目录）
        ├ images  （图片或flash文件目录）
        ├ js      （脚本文件目录）
        └ template（默认模板文件目录）

web文件的“换行符类型”为“unix换行符-LF”；编码为“UTF-8”。考虑到不同web服务器下的兼容性，web文件的文件名不能为中文，并且要区分大小写。
不同的文档声明影响页面元素的渲染效果，第一行必须加文档声明。以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。

即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器早期版本），仍然采用IE7的内核渲染，使用上面这第一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。第二句使360极速浏览器使用webkit内核。

<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" />
<meta name="renderer" content="webkit" />

引入前台会员相关js

<script src="../js/zcms_common.min.js" contextpath="${FrontAppContext}"></script>
<script src="../js/zcms_frontend.min.js" contextpath="${FrontAppContext}"></script>

ZCMS 2.3.3+ 在新建站点时，会向站点根目录下的js目录下复制若干JS（如zcms_common.min.js）。请不要在页面中引用jqeury.js，改为引用js/zcms_frontend.min.js，zcms_common.min.js有内置对jqeury1.12.4.js的引用。 zcms_common.min.js还有内置对一些ZCSM UI控件JS的引用，计有：

气泡提示 tip.js
消息提示 msgPop.js
表单校验 verify.js
对话框控件 dialog2.0.js
日期选择控件 datePicker.js

zcms_frontend.min.js是演示站需要用到的会员相关的一些js

前台会员登录相关 member.js
前台评论相关 comment.js
前台留言相关 messageBoard.js 控件相关的使用方法请参考知识库《UI框架API手册》，前台相关功能的JS用法请参考对应版本ZCMS内置演示站的模板。

考虑到页头页脚将会制作成包含文件，所以<body>区的内容至少要分散到三个独立div内。
考虑到一些交互脚本需要向页面内插入新的DOM元素，并设置坐标，所以不要给<body>设置宽度及内外边距。
综上所述，页面的基本HTML代码如下（切页面时可暂不引用zcms_common.min.js、zcms_frontend.min.js）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="../css/common.css" rel="stylesheet" type="text/css">
<script src="../js/jqeury.min.js"></script>
<script src="../js/common.js"></script>
</head>
<body>
<div id="header" class="header">
  <div class="container navbar-header">
		……
  </div>
</div>
<div id="main" class="main">
  <div class="container">
		……
  </div>
</div>
<div id="footer" class="footer">
  <div class="container">
		……
  </div>
</div>
</body>
</html>

如果要作响应式布局，以适应多终端，可以引入CSS框架bootstrap，页面的基本HTML代码中会多了对bootstrap的相关引用，如下（切页面时可暂不引用zcms_common.min.js、zcms_frontend.min.js）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/common.css" rel="stylesheet" type="text/css">
<script src="../js/jqeury.min.js"></script>
<!--[if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<![endif]-->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
</head>
<body>
<div id="header" class="header">
  <div class="container navbar-header">
		……
  </div>
  </div>
<div id="main" class="main">
  <div class="container">
		……
  </div>
</div>
<div id="footer" class="footer">
  <div class="container">
		……
  </div>
</div>
</body>
</html>

准备一个所有页面都要引用的样式文件common.css，里面定义好整个网站都要用到的风格，如普通文字的字体、字大小、字颜色、字行距、外边距，然后在定义其他样式时尽量不要再去定义字体、字大小、字颜色、字行距、外边距，以利于网站网络的统一。
考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要（在全局上）对 body,textarea,select,button,之外的标签重新设置字体大小；并且建议不要（在全局上）对body,textarea,td之外的标签重设行高。考虑到和bootstrap等常用UI框架的兼容，也不要设置（在全局上）ul标签的margin-bottom，margin-top的值。
综上common.css内最前面部分样式设置可以如下，（仅示例，请视情况修改或扩展）：

* { box-sizing: border-box; }
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color:#fff; color: #333;font-family: Microsoft YaHei, "微软雅黑", Microsoft JhengHei, "华文细黑", STHeiti, MingLiu;}
a { color: #06a; text-decoration: none; }
a:hover { color: #f90; text-decoration: underline; }
a:focus { outline: thin dotted; }
body, q, iframe, form, 
ul, li, dl, dt, dd{ margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
img { border: 0; max-width: 100%; -ms-interpolation-mode: bicubic; }
body, td, textarea{ word-break: break-all; line-height:1.5;}
button, input, select, textarea {margin: 0; font-size: 100%; font-family:inherit;}
div, p, table, th, td { line-height:inherit;}
textarea, p { *word-break: break-all; word-wrap: break-word;}
code,kbd,pre,samp {	font-family: monospace, Consolas, "Courier New";}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio,canvas,progress,video { display: inline-block; vertical-align: baseline;}
audio:not([controls]) { display: none; height: 0;}
[hidden],template { display: none;}

.fl{ float:left; }
.fr{ float:right; }
.clearfix:after { content: ""; clear: both; display: table; height: 0; }
.justify {text-align: justify;text-justify: inter-ideograph;}

建议页面制作时，首先在在Chrome45以上版本、IE9.0以上版本及Firefox52以上版本测试，然后再测试IE8、Safari11.1等浏览器，至少要保证在Chrome最新版本及IE9、IE11、Edge15这四个浏览器内正常显示（符合预期效果，页面布局无错位、载入及交互时无JS错误……）。
页面布局，编写html时尽量不要对元素进行ID命名，亦即尽量少使用css中的ID选择器，对元素ID命名主要用在编写js脚本时通过ID获取页面元素进行，
经验：使用浮动布局时，注意清除浮动、及定义浮动元素宽度，可以减少由浮动引发的潜在bug。

联系我们