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

  1. 站点的模板文件及生成的静态页面一般位于ZCMS工程的wwwroot目录下,建议(非强制)的目录结构如下:
 wwwroot
    └ ZCMSDemo (站点默认发布目录)
        ├ css     (样式文件目录)
        ├ html  (静态页面目录)
        ├ design  (原型或设计稿目录)
        ├ images  (图片或flash文件目录)
        ├ js      (脚本文件目录)
        └ template(默认模板文件目录)
  1. web文件的“换行符类型”为“unix换行符-LF”;编码为“UTF-8”。 考虑到不同web服务器下的兼容性,web文件的文件名不能为中文,并且要区分大小写。

  2. 不同的文档声明影响页面元素的渲染效果,第一行必须加文档声明 。以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。

  1. 即使系统里安装有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" />
  1. 引入前台会员相关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内置演示站的模板。
  1. 考虑到页头页脚将会制作成包含文件,所以<body>区的内容至少要分散到三个独立div内。

  2. 考虑到一些交互脚本需要向页面内插入新的DOM元素,并设置坐标,所以不要给<body>设置宽度及内外边距。

  3. 综上所述,页面的基本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>
  1. 如果要作响应式布局,以适应多终端,可以引入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>
  1. 准备一个所有页面都要引用的样式文件common.css,里面定义好整个网站都要用到的风格,如普通文字的字体、字大小、字颜色、字行距、外边距,然后在定义其他样式时尽量不要再去定义字体、字大小、字颜色、字行距、外边距,以利于网站网络的统一。

  2. 考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置,所以建议前端页面的样式定义里不要(在全局上)对 body,textarea,select,button,之外的标签重新设置字体大小;并且建议不要(在全局上)对body,textarea,td之外的标签重设行高。考虑到和bootstrap等常用UI框架的兼容,也不要设置(在全局上)ul标签的margin-bottommargin-top的值。

  3. 综上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;}
  1. 建议页面制作时,首先在在Chrome45以上版本、IE9.0以上版本及Firefox52以上版本测试,然后再测试IE8、Safari11.1等浏览器,至少要保证在Chrome最新版本及IE9、IE11、Edge15这四个浏览器内正常显示(符合预期效果,页面布局无错位、载入及交互时无JS错误……)。

  2. 页面布局,编写html时尽量不要对元素进行ID命名, 亦即尽量少使用css中的ID选择器, 对元素ID命名主要用在编写js脚本时通过ID获取页面元素进行,

  3. 经验:使用浮动布局时,注意清除浮动、及定义浮动元素宽度,可以减少由浮动引发的潜在bug。