Webplus3通用模板说明文档.doc

Webplus3通用模板说明文档
模板文件组成
图1-1
如图1-1,基本模板文件包含 , , (三个HTML文件是必须的),和
样式表文件 、。
模板页面布局结构
3个模板文件,结构默认为三个部分分别为页头(header)、主体(container)和页脚(footer)
图2-1
图2-2
如图2-1,三块部分彼此独立,又有共性。在样式表(图2-2)中全局定义了页面宽度为1000px
当然,也可以独立定义某个部分的宽度,以适合宽屏或满屏设计。如,
#header .inner { width:100%;} 即设置页头宽度为100%全屏布局。
下面将以通用模板来说明。看下图:
图2-3-1()
图2-3-2()
图2-3-3()
【注:HTML结构都有对应样式,在样式表中有标出,】
页头(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="按钮内容">更多&gt;&gt;</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,列表页的主体分左右两列,主要包括,位置栏目,栏