html 说明文档样式,通用模板说明文档

模板文件组成

7572e542-2cf9-44cd-8fef-4e889c9633ee.png

图1-1

如图1-1,基本模板文件包含main.htm,listcolumn.htm,displayinfo.htm(三个HTML文件是必须的),和

样式表文件style.css、缩略图summary.jpg以及存放一些图片images文件夹。

模板页面布局结构

3个模板文件,结构默认为三个部分分别为页头(header)、主体(container)和页脚(footer)

c75785ef-f79c-4fab-b31e-2ed2529f4851.png

图2-1

b11f94cb-65e4-4d83-9dfa-e7b8f7c46320.png

图2-2

如图2-1,三块部分彼此独立,又有共性。在样式表(图2-2)中全局定义了页面宽度为1000px

当然,也可以独立定义某个部分的宽度,以适合宽屏或满屏设计。如,

#header .inner {width:100%;}即设置页头宽度为100%全屏布局。

下面将以通用模板来说明。看下图:

f38777a2-ad99-4cd9-a27e-1f05fc6f33c7.png

图2-3-1(首页main.htm)

e14299bc-3359-4829-986a-ccc246840228.png

图2-3-2(列表页listcolumn.htm)

7f66ef27-aa81-4a1c-b2cf-d6982260563b.png

图2-3-3(文章页displayinfo.htm)

【注:HTML结构都有对应样式,在样式表中有标出,对照style.css文件看文档】页头(header)部分

3801ddf3-4e89-49bd-9cc2-2cc76147087b.png

图3-1(页头)

1c75b6be-ba4a-44fc-ab90-2a0a85c63950.png图3-2(页头HTML结构)

如图该通用模板页头部分包含2个窗口,分别是站点名称和导航

站点名称

f7d89187-4de6-4792-be79-06a6ae44ff4b.png

图3-3(站点名称HTML结构)

对应样式表文件:

833d73a2-d3ac-4d68-a927-38881ec3b8e1.png

图3-4(站点名称样式)导航

a239235c-8694-4202-b2d3-7dad3a1906e6.png图3-5(导航HTML结构)

导航使用系统默认,因此窗口写法简单,最新版本直接在后台可以配置样式。

对应用样式表:

7e3b1b37-ae30-4653-af01-a454cbae7742.png

图3-6(导航样式)

页脚(footer)部分

92dc616e-0175-4adf-a571-893967a8a75b.png

图4-1(页脚)

如图4-1,页脚部分比较简单,主要为站点版权及地址等信息。

574c0fc1-696c-4bfb-91b3-f837321f2821.png

图4-2(页脚站点信息窗口HTML结构)

窗口说明:该窗口类型(portletmode)为站点属性(simpleSiteAttri),标签写法看图4-2,

更多支持的字段标签

{站点ID}, {站点名称}, {站点URL}, {站点标题}, {站点简介}, {站点Logo}, {站点LogoURL}, {站点电话}, {站点Email}, {浏览次数}, {站点版权},{技术支持}, {站点地址}, {备案证书}, {站点链接}, {站点传真}, {扩展字段1}, {扩展字段2}, {扩展字段3}, {扩展字段4}, {扩展字段5}

站点信息:在后台建站管理中维护,如下图

5e511a20-7a3f-4250-8881-68eb75440247.png

图4-3(后台站点信息维护)

注:站点信息一般是不变的,也可以直接写进模板。

主体(container)部分

1)、首页

bad282b6-b1b7-4a7a-b8f2-e4a63cf7ca22.png

图5 -1(首页主体为三列布局,采用2-2分割方式)

HTML结构:

30a49be9-a70d-4ec2-be24-35594d0124c3.png图5 -2(首页三列布局HTML结构)

CSS样式:

2ecc9bf5-840f-48ec-b358-cd807476e437.png

图5 -3(首页三列布局CSS样式)

A、自定义新闻列表

67aa5142-a7c9-4b8b-a675-b606d83c011b.png图5-A-1(自定义新闻列表,带标题栏)

306a7d7b-4500-4804-b3b3-665d939e419f.png

图5-A-2(自定义新闻列表HTML结构)

3af086c4-18ef-4ea5-90d3-b1b0721dc3e7.png

图5-A-3(自定义新闻列表CSS样式)

HTML结构:

标题5

更多>>
  • {标题}{发布时间}

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

B、系统默认新闻列表

54b49455-baa5-452a-8808-36d301615805.png图5-B-1(系统默认新闻结构)

1b0282de-2792-4dff-82be-f75563a8c46b.png

图5-B-2(HTML结构,因为采用系统默认所以窗口内容结构简单)

CSS样式:

1ede0ec3-1847-41c5-ade1-d63dc3607af3.png

2)、列表页

24ae9f0d-4d82-4edf-a95e-16628c98af33.png

图6-1(列表页主体)

如图6-1,列表页的主体分左右两列,主要包括,位置栏目,栏目列表,当前栏目名称,当前位置以及文章列表

A、位置栏目(相当于1里的位置名称)

28f48a56-a39d-4641-a9c0-d39f30b1cdee.png图6-A-1(位置栏目)

HTML结构:

e402b1f5-7a06-4f43-b6ee-3812879a2ca0.png

图6-A-2(位置栏目HTML结构)

CSS样式表:

d4da8e37-c86c-452c-8a56-33238c1a1cf0.png

图6-A-3(位置栏目CSS样式)

栏目列表

栏目列表采用系统默认窗口结构,最多五级栏目输出,在后台配置输出栏目级数。如图6-B-1

fb352a75-ec46-467b-9757-76307e48fa21.png图6-B-1(栏目列表)

HTML结构:

7751d7cc-154d-49bf-a40e-774bfb7bb41a.png

CSS样式:

f24b736d-43b7-4ed9-b46e-85d6597423da.png

栏目列表样式结构复杂些,所以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、栏目名称(当前的栏目名称)

a392759d-fa1c-4a18-9cfc-2b8f27928f65.png

图6-C-1(栏目名称)

f7fe8397-f3e8-4e6b-b035-124fba1e1127.png

图6-C-2(栏目名称HTML结构)

D、当前位置(与栏目名称都属于栏目属性类,因此可以合并一个窗口写)

58fc4d6e-30ba-489a-9970-9fc454c58588.png

图6-D-1(当前位置)

f7fe8397-f3e8-4e6b-b035-124fba1e1127.png

图6-D-2(当前位置HTML结构)

CSS样式:

254c82b0-dea1-4a2e-953a-96bfe2a50793.png

图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、文章列表

3ebab7ba-8d25-4d21-ba19-f46025719a75.png

图6-E-1(列表页文章列表)

列表页文章列表采用系统默认窗口结构,看下图6-E-2

f7bd4ecf-d395-44ab-a0bb-90c17c3808a1.png

图6-E-2(列表页栏目新闻列表)

CSS样式:

707506a3-125c-4dde-838f-c2b74553b747.png

图6-E-3(列表页栏目新闻列表CSS)

说明:列表页新闻列表,常改的地方是,下线线和前面的小图标。

F、文章内容(单篇文章时)

CSS样式:

3af7bdbb-f5d0-4aae-9518-7f40057b9fcb.png

图6-F-1(文章内容CSS)

注:这里主要修改的地方是,字体大小,颜色,以及图片的最大宽度设置。

只有当前栏目为一篇文章时,默认显示文章内容。

1fde8dbf-2512-4a4b-b1a5-fda83c11de95.png

图6-F-2(文章内容)

3)、文章页

文章页的结构简单,一列一窗口显示文章属性。主要是标题,发布属性以及文章内容

A、文章标题

B、文章发布属性

C、文章内容

fc6dfc37-bedc-4322-8dc2-5b97e816a55b.png

{标题}

发布者:{发布者}发布时间:{发布时间}浏览次数:{浏览次数}

{内容}

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

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

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

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

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

  • {标题}{发布时间}

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

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

  • 枯叶奔跑吉时口檽村2014-3-2
  • 顶戴戴跑城口檽村2014-3-2
  • 礵相去甚远吉时口檽村2014-3-2
  • 若干天皇跑顶若干檽村2014-3-2
  • 期刊正理跑吉时口顶戴楏革檽村2014-3-2
  • 1
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值