為了保持頁面規范,避免錯誤,加快學習和開發效率,以下列出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。