约克内容管理系统/模板制作流程

来自站长百科
跳转至: 导航、​ 搜索

约克内容管理系统 | 安装与升级 | 系统使用 | 模板制作及使用 | YorkCMS流程概要体系

模板制作概述

1. 准备静态页面

  • 制作静态页面时,可以直接保存互联网上的比较好的现有网页,如上章5.1中图例5-1和图例5-2那样的内容页和索引页,也可用Dreamweaver等自己制作。

2.在源码状态下清理静态页面

  • 可使用Dreamweaver等工具去掉页面中的各种内容,同时保留相应的标签,以清理如下代码为例:
<tr>
<td>123456</td>
<td>654321</td>
<td>88888</td>
</tr>
  • 去掉文章列表的内容,保留相关html标签以后为:

3. 代码分析和页面分拆

  • 清理页面后,需对剩余代码进行分析,比如,可以将上述清理后的列表调用代码替换为约克内容管理系统(York CMS)语法如下:
<CMS action="LIST" return="List" NodeID="1" Num="3" /> <!--调用结点ID为1的前3条记录--><tr>
<LOOP name="List" var="var" key="key">
<td>
<a href="http://cms.yorknet.cn/help/mobanzhizuo/index.html" target="_blank" title="" > </a>
<!--显示文章链接,自动截取标题长度10-->
</td></tr>
</LOOP>

4.分拆出各个模板的共用部分

  • 将共用部分独立出来制作成模板片断,使用时用include包含进来即可。
  • 约克CMS通用模板
  • 通用模板的组成构架

所需要的模板页面:

网站首页(全站首页)

弹出消息通知页(首页弹出性通知或广告)

特别文章页(关于我们/法律声明等特别页)

栏目(频道)首页(列出此栏目的内容块与分块索引)

末级栏目索引页(列出子栏目的内容索引)

内容页(具体内容页)

搜索及结果页(显示搜索结果)

  • 网页布局组成:

网页的整体布局结构可分为:

简单的:公共头部 / 中间内容区 / 公共尾部

复杂的:公共页眉/公共logo小横幅/公共导航条或导航区块/公共或栏目大

        横图区块/左中右小区块/横式区块/大内容区块/公共底部链接条
  • 建议目录结构:

模板文件目录:

  • {yorkcms}/templates/模板风格名/*.html
  • {yorkcms}/templates/模板风格名/不同布局栏目/*.html

样式目录:

模板制作中图片等的调用路径

  • 约克内容管理系统(York CMS)采用了发布层和表现层分离的架构,因而不管是静态发布还是动态发布,在模板制作中涉及到的图片、css、js以及论坛路径等调用请使用模板变量中设置的路径。如:模板变量中默认的模板图片路径变量为http://skin.yorkbbs.ca/templates/yorknet/images/,则可以在模板变量管理中对该变量进行设置。我们需要在模板制作中使用该变量代替实际的模板相关文件的路径,使用模板时要将图片、cssjs等文件上传到模板图片路径变量http://skin.yorkbbs.ca/templates/yorknet/images/对应的目录。

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>模板制作流程</title>
<meta name="description" content="York CMS网站建设的首选利器" />
<link type="text/css" href="http://skin.yorkbbs.ca/templates/yorknet/images/pale_blue_skin/css/css.css" rel="stylesheet" />
<script type="text/javascript" src="http://skin.yorkbbs.ca/templates/yorknet/images/pale_blue_skin/Js/exlink.js"></script>
</head>
<body>
<div id="header">
<div id="top">
<div id="top_flot">
<p id="calendar">
<script type="text/javascript" src="http://skin.yorkbbs.ca/templates/yorknet/images/pale_blue_skin/Js/date.js">
</script> CmsWare
</p>
<p id="banner">
<include file="/pale_blue_html/include/banner1.htm"></p>
</div>
<div id="logo">
<img alt="logo" src="http://skin.yorkbbs.ca/templates/yorknet/images/pale_blue_skin/images/newlogo.gif" />
</div>

YorkCMS使用手册导航

安装与升级

安装环境 | 服务器配置 | YorkCMS安装

系统使用

系统目录结构 | 发布管理 | 插件管理 | 后台登陆 | 站点管理 | 系统管理 | 实链接、虚链接、索引链接

模板制作及使用

模板设计理念概述 | 模板制作流程 | 模板常用函数 | 流程控制语法 | 内容列表List | 内容调用Content | 评论调用 COMMENT | 附加发布 ExtraPublish | 结点信息 | 计算统计 | 结点列表NODELIST | 搜索调用 | 数据库调用

YorkCMS流程概要体系