模板文件组成
图1-1
如图1-1，基本模板文件包含 main.htm,listcolumn.htm, displayinfo.htm (三个HTML文件是必须的)，和
样式表文件 style.css、缩略图summary.jpg以及存放一些图片images文件夹。
模板页面布局结构
3个模板文件，结构默认为三个部分分别为页头(header)、主体(container)和页脚(footer)
图2-1
图2-2
如图2-1，三块部分彼此独立，又有共性。在样式表（图2-2）中全局定义了页面宽度 为1000px
当然，也可以独立定义某个部分的宽度，以适合宽屏或满屏设计。如，
#header .inner {width:100%;} 即设置页头宽度为100%全屏布局。
下面将以通用模板来说明。看下图：
图2-3-1（首页main.htm）
图2-3-2（列表页listcolumn.htm）
图2-3-3（文章页displayinfo.htm）
【注：HTML结构都有对应样式，在样式表中有标出，对照style.css文件看文档】
页头（header）部分
图3-1（页头）
图3-2（页头HTML结构）
如图该通用模板页头部分包含2个窗口，分别是站点名称和导航
站点名称
图3-3（站点名称HTML结构）
对应样式表文件：
图3-4（站点名称样式）
导航
图3-5（导航HTML结构）
导航使用系统默认，因此窗口写法简单，最新版本直接在后台可以配置样式。
对应用样式表：
图3-6（导航样式）
页脚（footer）部分
图4-1（页脚）
如图4-1，页脚部分比较简单，主要为站点版权及地址等信息。
图4-2（页脚站点信息窗口HTML结构）
窗口说明：该窗口类型（portletmode）为站点属性(simpleSiteAttri),标签写法看图4-2，
更多支持的字段标签
{站点ID}, {站点名称}, {站点URL}, {站点标题}, {站点简介}, {站点Logo}, {站点LogoURL}, {站点电话}, {站点Email}, {浏览次数}, {站点版权},{技术支持}, {站点地址}, {备案证书}, {站点链接}, {站点传真}, {扩展字段1}, {扩展字段2}, {扩展字段3}, {扩展字段4}, {扩展字段5}
站点信息：在后台建站管理中维护，如下图
图4-3（后台站点信息维护）
注：站点信息一般是不变的，也可以直接写进模板。
主体（container）部分
1)、首页
图5 -1(首页主体为三列布局，采用2-2分割方式)
HTML结构：
图5 -2（首页三列布局HTML结构）
CSS样式：
图5 -3（首页三列布局CSS样式）
A、自定义新闻列表
图5-A-1（自定义新闻列表，带标题栏）
图5-A-2(自定义新闻列表HTML结构)
图5-A-3（自定义新闻列表CSS样式）
HTML结构：
<div class="post post-5 mbox" frag="窗口5">
<div class="tt">
<h3 class="tit"><span class="title" frag="标题"><span frag="标题内容">标题5</span></span></h3>
<div class="more_btn" frag="按钮" type="更多"><span class="more_text" frag="按钮内容">更多>></span></div>
</div>
<div class="con">
<div frag="窗口内容">
<ul class="news_list">
<!--[InfoCycleBegin]-->
<li class="news n{序号值} clearfix"><span class="news_title">{标题}</span><span class="news_meta post_time">{发布时间}</span></li>
<!--[InfoCycleEnd]-->
</ul>
</div>
</div>
</div>
以上标注的是一条新闻完整的循环结构。
B、系统默认新闻列表
图5-B-1(系统默认新闻结构)
图5-B-2（HTML结构，因为采用系统默认所以窗口内容结构简单）
CSS样式：
2）、列表页
图6-1（列表页主体）
如图6-1，列表页的主体分左右两列，主要包括，位置栏目，栏目列表，当前栏目名称，当前位置以及文章列表
A、位置栏目（相当于1里的位置名称）
图6-A-1（位置栏目）
HTML结构：
图6-A-2（位置栏目HTML结构）
CSS样式表：
图6-A-3（位置栏目CSS样式）
栏目列表
栏目列表采用系统默认窗口结构，最多五级栏目输出，在后台配置输出栏目级数。如图6-B-1
图6-B-1(栏目列表)
HTML结构：
CSS样式：
栏目列表样式结构复杂些，所以CSS样式多，但层级清晰。
.col_list .wp_listcolumn { border-top:1px solid #2867A0; border-bottom:1px solid #fff; }
.col_list .wp_listcolumn .wp_column a { color:#fff; background:#52B4EB url(images/icon_column_1.gif) no-repeat 6px 12px; border-top:1px solid #fff; border-bottom:1px solid #2867A0;} /**一级子栏目**/
.col_list .wp_listcolumn .wp_column a:hover,.col_list .wp_listcolumn .wp_column a.selected { color:#000; background-image:url(images/icon_column_1_hover.gif);} /**鼠标经过或选中一级子栏目**/
.col_list .wp_listcolumn .wp_column a.selected span.column-name{ color:#124D83;}
C、栏目名称（当前的栏目名称）
图6-C-1（栏目名称）
图6-C-2（栏目名称HTML结构）
D、当前位置（与栏目名称都属于栏目属性类，因此可以合并一个窗口写）
图6-D-1（当前位置）
图6-D-2（当前位置HTML结构）
CSS样式：
图6-D-3（当前栏目名称及当前位置CSS）
.col_metas .col_title { display:inline-block; float:left; height:30px; line-height:30px; background:#0f6ab3 url(images/col_title.gif) no-repeat right bottom;} /**当前栏目**/
.col_metas .col_title h2 { display:inline-block; font-size:18px; font-weight:bold; color:#fff; padding:0 50px 0 25px;} /**当前栏目名称**/
.col_metas .col_path { display:inline-block; float:right; white-space:nowrap; height:18px; line-height:18px; margin-top:5px;} /**当前位置**/
E、文章列表
图6-E-1（列表页文章列表）
列表页文章列表采用系统默认窗口结构，看下图6-E-2
图6-E-2（列表页栏目新闻列表）
CSS样式：
图6-E-3(列表页栏目新闻列表CSS)
说明：列表页新闻列表，常改的地方是，下线线和前面的小图标。
F、文章内容（单篇文章时）
CSS样式：
图6-F-1(文章内容CSS)
注：这里主要修改的地方是，字体大小，颜色，以及图片的最大宽度设置。
只有当前栏目为一篇文章时，默认显示文章内容。
图6-F-2（文章内容）
3）、文章页
文章页的结构简单，一列一窗口显示文章属性。主要是标题，发布属性以及文章内容
A、文章标题
B、文章发布属性
C、文章内容
<div class="article" frag="窗口3" portletmode="simpleArticleAttri">
<div frag="窗口内容">
<h1 class="arti_title">{标题}</h1>
<p class="arti_metas"><span class="arti_publisher">发布者：{发布者}</span><span class="arti_update">发布时间：{发布时间}</span><span class="arti_views">浏览次数：{浏览次数}</span></p>
<div class="entry">
<div class="read">{内容}</div>
</div>
</div>
</div>
{序号值}, {序号}, {文章ID}, {标题}, {文章URL}, {发布时间}, {发布者}, {责任编辑}, {浏览次数}, {动态浏览次数}, {缩略图}, {缩略图路径}, {发布部门}, {栏目}, {短标题}, {副标题}, {简介}, {内容}, {作者}, {文章来源}, {文章分类}, {创建者}, {创建时间}, {创建部门}, {图片}, {图片路径}, {附件}, {附件路径}, {视频}, {视频路径}, {热门图标}, {最新图标}, {图示图标}, {视频图标}, {音频图标}, {扩展字段1}, {扩展字段2}, {扩展字段3}, {扩展字段4}, {扩展字段5}, {扩展字段6}, {扩展字段7}, {扩展字段8}, {扩展字段9}, {扩展字段10}
文章属性支持的字段标签有：
自定义窗口内容结构 — 循环标签【完全自定义写法，扩展了解部分】
前面第五项的首页部分有介绍过自定义新闻列表样式，有默认窗口内容，和自定义的窗口内容形式。
现在详细讲说明下，自定义内容循环标签。以下面的例子讲解：
<div frag=”窗口1”>
<div frag=”窗口内容”>
<ul>
<!--[InfoCycleBegin]-->
<li>{标题}{发布时间}</li>
<!--[InfoCycleEnd]-->
</ul>
</div>
</div>
内容循环体部分，可以使用的标签就是文章属性有所提供的标签，看第五项目最后。
按照上面的写法，当绑定某个栏目后，假如设置了显示5篇文章，则输出如下结构。
<div frag=”窗口1”>
<ul>
<li>枯叶奔跑吉时口檽村2014-3-2</li>
<li>顶戴戴跑城口檽村2014-3-2</li>
<li>礵相去甚远吉时口檽村2014-3-2</li>
<li>若干天皇跑顶若干檽村2014-3-2</li>
<li>期刊正理跑吉时口顶戴楏革檽村2014-3-2</li>
</ul>
</div>