模板文件组成

图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结构：

以上标注的是一条新闻完整的循环结构。

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、文章内容

{序号值}, {序号}, {文章ID}, {标题}, {文章URL}, {发布时间}, {发布者}, {责任编辑}, {浏览次数}, {动态浏览次数}, {缩略图}, {缩略图路径}, {发布部门}, {栏目}, {短标题}, {副标题}, {简介}, {内容}, {作者}, {文章来源}, {文章分类}, {创建者}, {创建时间}, {创建部门}, {图片}, {图片路径}, {附件}, {附件路径}, {视频}, {视频路径}, {热门图标}, {最新图标}, {图示图标}, {视频图标}, {音频图标}, {扩展字段1}, {扩展字段2}, {扩展字段3}, {扩展字段4}, {扩展字段5}, {扩展字段6}, {扩展字段7}, {扩展字段8}, {扩展字段9}, {扩展字段10}

文章属性支持的字段标签有：

自定义窗口内容结构 — 循环标签【完全自定义写法，扩展了解部分】

前面第五项的首页部分有介绍过自定义新闻列表样式，有默认窗口内容，和自定义的窗口内容形式。

现在详细讲说明下，自定义内容循环标签。以下面的例子讲解：

内容循环体部分，可以使用的标签就是文章属性有所提供的标签，看第五项目最后。

按照上面的写法，当绑定某个栏目后，假如设置了显示5篇文章，则输出如下结构。