Zving模板页面制作规范及注意事项

    为了保持页面开发规范、避免错误,加快学习和开发效率,下面列出泽元软件前端开发中CSS的一些规范及注意事项,此规范适用于为泽元网站内容管理系统(ZCMS)制作前端模板页面

1. 站点的模板文件及生成的静态页面一般位于ZCMS工程的wwwroot目录下,建议(非强制)如下目录结构:

wwwroot
   └ ZCMSDemo (站点默认发布目录)
        ├ css     (样式文件目录)
        ├ html  (静态页面)
        ├ images  (图片或flash文件目录)
        ├ js      (脚本文件目录)
        └ 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" "http://www.w3.org/TR/html4/loose.dtd">

  或 HTML5

  <!doctype html>

 

4. <script src="../js/zcms_require.js"></script>

ZCMS 2.3.3+ 在新建站点时,会向站点根目录下的js目录下复制若干JS(如zcms_require.js)。请不要在页面中引用jqeury.js,改为引用js/zcms_require.js,zcms_require.js有内置对jqeury1.8.3.js的引用。
zcms_require.js还有内置对一些ZCSM UI控件JS的引用,计有:
  • 后台方法调用(可跨域) server2.0.js
  • 气泡提示 tip.js
  • 消息提示 msgPop.js
  • 表单校验 verify.js
  • 对话框控件 dialog2.0.js
  • 日期选择控件 datePicker.js
  • 等级星控件 rating.js
  • 前台会员登录相关 member.js
  • 前台评论相关 comment.js
  • 前台留言相关 messageBoard.js
控件相关的使用方法请参考知识库《UI框架API手册》,前台相关功能的JS用法请参考对应版本ZCMS内置演示站的模板。

 

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

<meta name="renderer" content="webkit" />

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

 

6.考虑到页头页脚将会制作成包含文件,所以<body>区的内容至少要分散到三个独立div内。

 

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

 

8.综上所述,页面的基本HTML代码如下:        

 

9.考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置,所以建议前端页面的样式定义里不要对 body、textarea、select、button之外的标签重新设置字体大小;并且建议不要对body、textarea、td之外的标签重设行高。

 

10.所以基本的css设定(reset.css)可以如下,(仅示例,请视情况修改或扩展):

 

11.建议页面制作时,首先在在Firefox3.6以上版本、IE8.0以上版本及Chrome13以上版本测试,然后再测试IE7、iE6、Safari等浏览器,至少要保证在Chrome最新版本及IE6/8/9这四个浏览器内正常显示(符合预期效果,页面布局无错位、载入及交互时无JS错误……)。

 

12.允许使用css hack,以提高制作效率,如

 

 

13.页面布局,编写html时尽量不要对元素进行ID命名, 亦即尽量少使用css中的ID选择器,对元素ID命名可以在编写js交互脚本时进行。

 

14.使用Dreamweaver CS 以上版本:在页面制作时注意清除浮动、及定义浮动元素宽度,可以让页面在Dreamweaver里的“设计视图”下接近最终浏览效果。

hackIE