约克内容管理系统/模板制作流程
来自站长百科
约克内容管理系统 | 安装与升级 | 系统使用 | 模板制作及使用 | YorkCMS流程概要体系 |
模板制作概述
1. 准备静态页面
- 制作静态页面时,可以直接保存互联网上的比较好的现有网页,如上章5.1中图例5-1和图例5-2那样的内容页和索引页,也可用Dreamweaver等自己制作。
2.在源码状态下清理静态页面
- 可使用Dreamweaver等工具去掉页面中的各种内容,同时保留相应的标签,以清理如下代码为例:
<tr> <td>123456</td> <td>654321</td> <td>88888</td> </tr>
- 去掉文章列表的内容,保留相关html标签以后为:
3. 代码分析和页面分拆
<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
样式目录:
- http://skin.yorkbbs.ca/templates/yorknet/images/模板风格名/js/*.js 用于放样式所需要的js效果脚本文件
模板制作中图片等的调用路径
- 约克内容管理系统(York CMS)采用了发布层和表现层分离的架构,因而不管是静态发布还是动态发布,在模板制作中涉及到的图片、css、js以及论坛路径等调用请使用模板变量中设置的路径。如:模板变量中默认的模板图片路径变量为http://skin.yorkbbs.ca/templates/yorknet/images/,则可以在模板变量管理中对该变量进行设置。我们需要在模板制作中使用该变量代替实际的模板相关文件的路径,使用模板时要将图片、css、js等文件上传到模板图片路径变量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使用手册导航 | |||||||
---|---|---|---|---|---|---|---|
|