网站专题栏目模版 - 首页 制作步骤

---

一、另存网页

1. 根据需求部门提供的网页地址，把网页保存到本地文件夹。

注意：保存网页时，注意选择格式 【网页 全部】

2. 打开下载的网页文件，检查网页中样式和图片的引用情况，如果网页有显示不全的图片，打开 css 样式文件，替换 css 样式文件中图片资源的引用路径。把本地的路径，替换为网站路径。

./images/xxx.jpg ./ 开头表示当前文件夹下的 images 文件夹
../images/xxx.jpg ../ 开头表示当前文件的 上级 文件夹下的 images 文件夹

二、创建服务器模版文件

1. 在 default\_files\zhuanti 目录下，创建专题栏目的文件夹，命名为四位数字。例如：7008

文件夹名称任意，为方便引用，用四位数字命名

2. 组织 7008 的目录结构，创建 css、js、images 文件夹。

目录结构任意，为方便管理，推荐三个文件夹

3. 拷贝下载的资源文件。

4. 在 default 目录下，创建专题栏目的页面主文件，命名为：zhuanti7008_index.html

文件名任意，为了和其他网页区分和辨识，以 zhuanti 编号开头

三、在网站后台创建栏目模型

1. 在网站管理后台，【系统】-【模型管理】-【栏目模型】中，复制一份专题-首页，修改名称为：[专题]职代会2019版-首页。

2. 【修改】专题-首页 【封面页默认模板】参数为上面创建的 zhuanti7008_index.html

四、在网站栏目管理中创建专题栏目

1. 在网站管理后台【栏目】管理中，选中【专题栏目】文件夹，点右侧【新增】连接，选择【栏目模型】为刚才创建的栏目模型名称：“[专题]职代会2019版-首页”。

2. 给栏目起名字：“2019职代会”，保存之后，返回列表，得到ID的数字，例如：ID 为 456。

3. 在浏览器中打开任意一个栏目页面，修改网址 node 之后的数字位 ID 的值为 456，回车可以看到网页效果。

五、制作专题栏目首页 - 简化模版内容

1. 把下载的网页源代码，复制到服务器 zhuanti7008_index.html 文件中，在浏览器中查看网页效果。
2. 在 html 文件中，替换资料引用的路径，把资源文件名前的路径，替换为 _files/zhuanti/7008/images/
3. 消除网页中，重复的 html 元素。

六、[小知识] 网页与后台文件的关系

• 前台网页网址 http://portal.xxxx.com.cn/node/456.jspx 中包含 node 的，是 栏目 ，在网站管理后台，栏目 中进行管理，node 后面的数字，对应栏目的 ID。
• 前台网页网址 http://portal.xxxx.com.cn/info/5678.jspx 中包含 info 的，是 文档 ，在网站管理后台，文档 中进行管理，info后面的数字，对应栏目的 ID。
• 在网站管理后台，栏目 中找到对应 ID 的 栏目名称，点 修改，记住所引用的 栏目模型 的名称，例如：[专题]党建网-主站-首页
• 在网站管理后台， 系统-栏目管理-栏目模型 中找到这个引用的 [专题]党建网-主站-首页 对应模型，点 修改 ，能看到 封面页默认模版 参数为 /zhuanti7007_index.html ，这是栏目模型所指向的磁盘文件，文件保存在 default 文件夹；通常栏目模型的依赖文件，例如图片、样式和脚本文件，保存在 default\_files\7007 文件夹。

七、处理首页 - 替换头部大图

1. 从其他专题模版的 zhuantixxxx_inc_header.html 文件中，复制网页题头部分的代码。例如：

网页题头图片的代码：

#assign 表示变量赋值
#if #else 是条件判断的分支结构
basenode.customs['ISINDEX'] 是网站栏目的自定义属性

  [#assign basenode = node/]
  [#if basenode.customs['ISINDEX']??]
      [#assign indexnode = basenode/]
  [#else]
    [#list basenode.hierarchy as n]
      [#if n.customs['ISINDEX']??]
        [#assign indexnode = n/]
      [/#if]
    [/#list]
  [/#if]

  <div class="header">
    <div class="logo" [#if indexnode.largeImage??]style="background-image:url('${indexnode.largeImage}')"[/#if]>
    </div>
  </div>

【注意】：在使用 [#assign basenode = node/] 这样的脚本语法的页面，页面第一行 和 最后一行，必须增加一行代码 [#escape x as (x)!?html] [/#escape]。

[#escape x as (x)!?html]

[/#escape]

八、处理首页 - 顶部导航

1. 找一个带有顶部导航的网页，根据网页地址中的 node 和 ID 到后台查看所对应的 zhuanti 栏目后台文件，打开专题的 inc_header.html 文件，找到与导航 nav 相关的代码，例如：

<div class="nav">
    <ul>
        <li [#if indexnode.id=basenode.id]class="a1"[/#if]><a href="${indexnode.url}">首页</a></li>
        [@NodeList parentId = indexnode.id;nodelist]
            [#list nodelist as n]
            <li style="*margin-top:-19px;" [#if n.id=basenode.id] class="a1"[/#if]><a href="${n.url}">${n.title}</a></li>
            [/#list]
        [/@NodeList]
    </ul>
</div>

2. 复制代码到7008模版的头部位置，根据模版的标签元素结构，替换代码。

网页导航面包屑代码

<div class="navi2">
  <div class="navi2_title">
    <a href="#" class="navigation_style"></a>
    [#list basenode.hierarchy as n]
      <a href="${n.url}">${n.name}</a>
      [#if n_has_next]
        <span class="crumbs_line">&gt;</span>
      [/#if]
    [/#list]
  </div>
</div>

到此首页的框架基本完成。
接下来需要创建子栏目模版。
子栏目模版的创建过程，与首页模版创建过程基本一致，只是名称和文件名称规则有区别。子栏目模版的磁盘文件名 通常为：zhuantixxxx_list.html

九、创建子栏目模版的过程

1. 打开参考网站的网页，另存到本地，替换资源的引用路径，确认网页在本地浏览器中打开后显示正常效果。
2. 在服务器 default 目录中创建 zhuanti7008_list.html，把下载的网页源代码，复制粘贴到这个文件中。
3. 在网站管理后台，【系统】-【模型管理】-【栏目模型】中，复制一份专题-列表，修改名称为：[专题]职代会2019版-列表。
4. 在网站管理后台 栏目 管理中，在 2019职代会 文件夹下，创建子栏目，命名为 会议报道 ，【栏目模型】选择刚创建的模版：[专题]职代会2019版-列表
5. 此时在网站前台刷新网页，在导航栏能够看到新增的子栏目。