1. 说明与编写规范

    1. html 必须是标准且完整的,必须有<!DOCTYPE><html><head><body>元素。
    2. html 里所有标签必须闭合。
    3. html 文件必须与 page 文件在同一目录,且文件名相同(大小写敏感),否则报错
    4. html 文件必须使用 utf-8 的文件格式
    5. 所有开发的 JavaScript 脚本必须放在</body>之后</html>之前,即</body><script type="text/javascript">...</script></html>
  2. 标准模板

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head jwcid="@Head"></head>
    <body jwcid="@Body">
    <div class="m_wrapper"><div class="m_wrapper2">
    <!-- 
    m_wrapper 控制外部滚动条
    m_wrapper2 控制整体边距
    只有使用特殊布局方法时,如:l_fixed、l_middle,才可以去掉 wrapper。
    -->
    
    
    
    <div class="c_box"><!-- 每一组内容必须有一个 div[class="c_box"] -->
    <!-- ECL 组件1 -->
    <!-- ECL 组件2 -->
    <!-- ... -->
    </div>
    <div class="c_box">
    <!-- ECL 组件3 -->
    <!-- ECL 组件4 -->
    <!-- ECL 组件5 -->
    <!-- ... -->
    </div>
    <!-- ... -->
    
    
    
    </div></div>
    <!-- ECL 组件X(某些浮动组件要放在这个位置) -->
    </body>
    <script type="text/javascript">
    ...
    </script>
    </html>
    
  3. 示例

    以下以活动办理的页面为例,描述一个完整页面的构建过程。

    1. 原型设计

      首先我们根据用户的需求,设计出界面的原型,使用各种原型绘制工具,划分出页面大致的模块与其位置。

    2. 复制标准模版

      页面上是 5 大块,所以需要 5 个 div[class="c_box"],并写上区域注释。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head jwcid="@Head"></head>
      <body jwcid="@Body">
      <div class="m_wrapper"><div class="m_wrapper2">
      
      
      
      <!-- 用户鉴权 开始 -->
      <div class="c_box">
      </div>
      <!-- 用户鉴权 结束 -->
      
      <!-- 活动列表 开始 -->
      <div class="c_box">
      </div>
      <!-- 活动列表 结束 -->
      
      <!-- 活动详情 开始 -->
      <div class="c_box">
      </div>
      <!-- 活动详情 结束 -->
      
      <!-- 经办人信息 开始 -->
      <div class="c_box">
      </div>
      <!-- 经办人信息 结束 -->
      
      <!-- 提交 开始 -->
      <div class="c_box">
      </div>
      <!-- 提交 结束 -->
      
      
      
      </div></div>
      </body>
      </html>
      

    3. 布局

      从当前的效果可以看出,几个 div[class="c_box"] 是从上而下顺序排列的,我们需要通过布局方法来改变各 div[class="c_box"] 的呈现位置。布局方法请参考文档中:“静态模板(ECL)>布局” 一节。

      根据原型,我们需要在第一个 div[class="c_box"] 之后划分出两列:
      左侧固定宽度,放置 “活动列表”
      右侧根据窗体宽度自适应,放置 “活动详情” 与 “经办人信息”。

      我们使用分列布局即可:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head jwcid="@Head"></head>
      <body jwcid="@Body">
      <div class="m_wrapper"><div class="m_wrapper2">
      
      
      
      <!-- 用户鉴权 开始 -->
      <div class="c_box">
      </div>
      <!-- 用户鉴权 结束 -->
      
      <div class="l_col">
      	<div class="l_left">
      
      		<!-- 活动列表 开始 -->
      		<div class="c_box">
      		</div>
      		<!-- 活动列表 结束 -->
      
      	</div>
      	<div class="l_auto">
      
      		<!-- 活动详情 开始 -->
      		<div class="c_box">
      		</div>
      		<!-- 活动详情 结束 -->
      
      		<!-- 经办人信息 开始 -->
      		<div class="c_box">
      		</div>
      		<!-- 经办人信息 结束 -->
      
      	</div>
      </div>
      
      <!-- 提交 开始 -->
      <div class="c_box">
      </div>
      <!-- 提交 结束 -->
      
      
      
      </div></div>
      </body>
      </html>
      

    4. 置入 ECL 组件

      ECL 组件就像一些功能不同的积木,我们只需要把它们依次放入盒子(div[class="c_box"])即可,切记不能相互嵌套!只有容器性质的组件(如弹窗、下拉选项等)或文档中有特别说明的,才允许放置其他组件。

      1. 用户鉴权部分

        这是一个简单的表单组件,我们从 ECL 的文档中(ECL > 组件 > c_form 表单)复制其基本结构,并加上查询按钮。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head jwcid="@Head"></head>
        <body jwcid="@Body">
        <div class="m_wrapper"><div class="m_wrapper2">
        
        
        
        <!-- 用户鉴权 开始 -->
        <div class="c_box">
        	<div class="c_form">
        		<ul class="ul">
        			<li class="li">
        				<span class="label">提示文字:</span>
        				<span class="e_input"><span><input type="text" /></span></span>
        			</li>
        			<li class="li">
        				<span class="label">提示文字:</span>
        				<span class="e_input"><span><input type="text" /></span></span>
        			</li>
        		</ul>
        		<div class="submitPlace"></div>
        		<div class="submit"><button class="e_button-form"><i class="e_ico-search"></i><span>查询</span></button></div>
        	</div>
        </div>
        <!-- 用户鉴权 结束 -->
        
        <div class="l_col">
        	<div class="l_left">
        
        		<!-- 活动列表 开始 -->
        		<div class="c_box">
        		</div>
        		<!-- 活动列表 结束 -->
        
        	</div>
        	<div class="l_auto">
        
        		<!-- 活动详情 开始 -->
        		<div class="c_box">
        		</div>
        		<!-- 活动详情 结束 -->
        
        		<!-- 经办人信息 开始 -->
        		<div class="c_box">
        		</div>
        		<!-- 经办人信息 结束 -->
        
        	</div>
        </div>
        
        <!-- 提交 开始 -->
        <div class="c_box">
        </div>
        <!-- 提交 结束 -->
        
        
        
        </div></div>
        </body>
        </html>
        

      2. 活动列表部分

        活动列表是一个多层级的列表,使用树结构比较合适,同时应给该区域增加一个标题,在代码中,我们依次加入 c_title、c_tree 组件。
        在内容中添加一些假数据可以使页面更接近真实场景。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head jwcid="@Head"></head>
        <body jwcid="@Body">
        <div class="m_wrapper"><div class="m_wrapper2">
        
        
        
        <!-- 用户鉴权 开始 -->
        <div class="c_box">
        	<div class="c_form">
        		...
        	</div>
        </div>
        <!-- 用户鉴权 结束 -->
        
        <div class="l_col">
        	<div class="l_left">
        
        		<!-- 活动列表 开始 -->
        		<div class="c_box">
        			<div class="c_title">
        				...
        			</div>
        			<div class="c_tree">
        				...
        			</div>
        		</div>
        		<!-- 活动列表 结束 -->
        
        	</div>
        	<div class="l_auto">
        
        		<!-- 活动详情 开始 -->
        		<div class="c_box">
        		</div>
        		<!-- 活动详情 结束 -->
        
        		<!-- 经办人信息 开始 -->
        		<div class="c_box">
        		</div>
        		<!-- 经办人信息 结束 -->
        
        	</div>
        </div>
        
        <!-- 提交 开始 -->
        <div class="c_box">
        </div>
        <!-- 提交 结束 -->
        
        
        
        </div></div>
        </body>
        </html>
        

      3. 其他部分

        其他部分也按照同样的方法,将组件加入进来,必要时填充一些假数据使页面更接近真实效果。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head jwcid="@Head"></head>
        <body jwcid="@Body">
        <div class="m_wrapper"><div class="m_wrapper2">
        
        
        
        <!-- 用户鉴权 开始 -->
        <div class="c_box">
        	<div class="c_form">
        		...
        	</div>
        </div>
        <!-- 用户鉴权 结束 -->
        
        <div class="l_col">
        	<div class="l_left">
        
        		<!-- 活动列表 开始 -->
        		<div class="c_box">
        			<div class="c_title">
        				...
        			</div>
        			<div class="c_tree">
        				...
        			</div>
        		</div>
        		<!-- 活动列表 结束 -->
        
        	</div>
        	<div class="l_auto">
        
        		<!-- 活动详情 开始 -->
        		<div class="c_box">
        			<div class="c_title">
        				...
        			</div>
        			<div class="c_title c_title-2">
        				...
        			</div>
        			<div class="c_table">
        				...
        			</div>
        			<div class="c_title c_title-2">
        				...
        			</div>
        			<div class="c_table">
        				...
        			</div>
        			<div class="c_title c_title-2">
        				...
        			</div>
        			<div class="c_table">
        				...
        			</div>
        		</div>
        		<!-- 活动详情 结束 -->
        
        		<!-- 经办人信息 开始 -->
        		<div class="c_box">
        			<div class="c_title c_title-2">
        				...
        			</div>
        			<div class="c_form">
        				...
        			</div>
        		</div>
        		<!-- 经办人信息 结束 -->
        
        	</div>
        </div>
        
        <!-- 提交 开始 -->
        <div class="c_box">
        	<div class="c_submit">
        		...
        	</div>
        </div>
        <!-- 提交 结束 -->
        
        
        
        </div></div>
        </body>
        </html>
        

    5. 细化

      界面的的雏形大致出来了,接下来将需要逐个设置组件的参数、更替静态内容。
      以 “经办人信息” 部分为例,我们需要做以下工作完成静态界面:

      · 更替标题文字
      · 更替提示文字
      · 更替表单元素
      ---------------
      · 设置表单为 2 列模式
      · 设置表单标签宽度为 7

      <!-- 经办人信息 开始 -->
      <div class="c_box">
      	<div class="c_title">
      		<div class="text">经办人信息</div>
      	</div>
      	<div class="c_form c_form-label-7 c_form-col-2">
      		<ul class="ul">
      			<li class="li">
      				<span class="label">经办人姓名:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      			<li class="li">
      				<span class="label">经办人证件号码:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      			<li class="li">
      				<span class="label">合同编码:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      			<li class="li">
      				<span class="label">合同起始时间:</span>
      				<span class="e_elements">
      					<button class="e_button-right"><i class="e_ico-date"></i><span></span></button>
      					<span class="e_input e_input-left"><span><input type="text" /></span></span>
      				</span>
      			</li>
      			<li class="li">
      				<span class="label">合同终止时间:</span>
      				<span class="e_elements">
      					<button class="e_button-right"><i class="e_ico-date"></i><span></span></button>
      					<span class="e_input e_input-left"><span><input type="text" /></span></span>
      				</span>
      			</li>
      			<li class="li">
      				<span class="label">备注:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      			<li class="li">
      				<span class="label">门店名称:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      			<li class="li">
      				<span class="label">渠道属性:</span>
      				<span class="e_elements">
      					<button class="e_button-right"><i class="e_ico-search"></i><span></span></button>
      					<span class="e_input e_input-left"><span><input type="text" /></span></span>
      				</span>
      			</li>
      			<li class="li">
      				<span class="label">归属片区:</span>
      				<span class="e_elements">
      					<button class="e_button-right"><i class="e_ico-search"></i><span></span></button>
      					<span class="e_input e_input-left"><span><input type="text" /></span></span>
      				</span>
      			</li>
      			<li class="li">
      				<span class="label">门店地址:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      		</ul>
      	</div>
      </div>
      <!-- 经办人信息 结束 -->
      

      接下来完善其他部分的细节,静态界面部分完成。

  4. (辛勤续写中……)