建立CMS模版

实验八建立CMS模板1实验目的1)了解什么是模板页；2)掌握PHP的一些基本语法；3)掌握模板页的基本制作方法。

2实验内容1)设计模板页的结构；2)将内容与样式分离；3)熟悉SHLCMS的模板制作流程；4)熟悉SHLCMS模板PHP标签的调用；5)掌握一些基本的PHP知识。

3实验仪器、设备1)PC机最低配置：2G Hz以上CPU；1G以上内存；1G自由硬盘空间；2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器；3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3；4)SHLCMS4.0内容管理系统。

4实验要求1)设计模板页的结构；2)确定网站基本模板首页和内容页；3)掌握一些基本的PHP知识。

5实验步骤5.1什么是模板页？模板页也称为母版页(Master Page)，在Web应用开发中一个网站的各个页面应当具有统一的页面排版布局风格，比如：各个页面具有相同的标题、页脚、导航等功能区域。

我们当然可以在每个页面上不厌其烦的重复开发制作，但这样太没效率。

模板页是这样一种技术，把一个网站中各个页面所具有的公共部分提取出来，放到一个页面上进行开发制作而特定页面的内容留白不予处理。

对于各个特定的页面（简称内容页）只要开发制作其特有的内容，公共部分可以自动同具体页面的内容合并共同形成一个完整的页面。

这样包含公共部分的页面就叫模板页。

有了模板页开发人员就不需要在各个页面上重复制作相同的内容了。

我们前边制作的网站如果将实际的内容去除，看看是否有什么相同部分。

一般会有相同的导航、样式等。

各个子页面中去除内容后，发现它们实际上是一样的（可能子导航不同）。

这时我们的页面可以归纳为2个基本页面：首页和子页面（即内容页），实际上也就是一个简单的模板页。

5.2模板静态页的准备对于任何CMS来说，它基本的作用都是将我们页面中的静态内容转换为动态内容。

也就是说将我们模板中写死的导航、内容等，采用数据库存储，并用某种WEB技术转换为动态的内容。

这时我们需要将导航、内容等使用“标签”或“函数”来表示，是不是有点晕？没关系，让我们动手试一下就很容易理解了。

首先需要准备一套静态的模板页面，这个和我们前几次实验完成的网页一样，没有什么分别。

这里我们准备了2个页面：首页和内容页，也就是说网站除了首页，各个子页面的样子完全相同。

有点单调嘛！？还是先拿简单的学习吧，不管子页面的样式再多，它们的基本原理还是一样的。

组织好的首页结构如下图，命名为index.html。

组织好的内容页结构如下图，命名为common.html。

目录结构如下，images目录下使用到的图片，CSS.CSS文件中存放着全部的样式。

5.3导入模板页到CMS在SHLCMS系统目录中wwwRoot\Deepthroat\skins下建立目录“myfirst”。

OK！SHLCMS模板中还需要一些附属文件如：模块，插件等。

我们还不会编写，没关系可以先借用已有的。

将前面我们建立的静态页及相关的css、images 文件夹拷贝过去。

然后，将wwwRoot\Deepthroat\skins\model_104模板下的common 、index、parts、preview文件夹、config.xml拷贝到“myfirst”文件夹内。

在“myfirst”文件夹下建立目录“CSS”，将wwwRoot\Deepthroat\skins\model_104\css下的parts.css文件拷贝到“myfirst”文件夹下的css文件夹内(parts.css文件主要是对内容页面样式的控制)。

将preview目下的原有文件删除，把“效果.jpg”重命名为“index.jpg”，拷贝到preview目下。

这个目录和文件的作用，是在系统中提供样式的效果图。

5.4修改模板配置文件打开“myfirst”文件夹下的config.xml文件，如下图所示：这是该模板的详细信息，包括模板名称、模板文件名、作者、日期、模板特点、模板简介、以及模板后台预览图片，我们需要根据模板的具体特点对该文件进行修改。

下面我们定义的我们模板的基本信息，具体修改如下：5.5修改模板图片、样式路径将index.htm、common.htm文件后缀该为index.php、common.php，然后进入后台的模板管理栏目，此时我们会发现模板管理中增加的“myfirst”图标及其信息，如下图所示：的网站是一个网站样式、图片丢失后的网站，如下图所示：那么，是什么原因造成网站的样式、图片丢失的呢？原因很简单，模板建立后必须让系统找到所使用的图片、css样式，这里我们只需要修改一下文件路径，在相关的图片、css路径前加上<?php echo get_skin_root()?>标签，该标签含义为站点模板的路径。

分别打开index.php、common.php页面修改全部图片、css路径，如下图所示，注意要把全部图片的路径进行修改。

<?php echo get_skin_root()?>css.css<?php echo get_skin_root()?>images/logo.jpg此时，刷新再次浏览页面，我们会发现首页页面已经正常显示。

如果还有图片没有显示，注意在CSS文件中图片使用的路径是否正确。

5.6插入主导航标签网站首页正常显示后，我们还需要为网站插入导航标签，打开index.php页面，我们原有的导航条如下：使用CMS的标签修改导航信息，让我们的栏目数据动态生成，如下所示：我们注意到了主要的变化，使用了一个“main_menu()”的方法调用栏目信息。

<?php main_menu('','') ?> 常见用法：<?php main_menu('<li>||</li>','<li id="selected">||</li>','<span style="">') ?>第一个参数('<li>||</li>')中的||为分割符，用来给定导航左右两边的标签，表示栏目的文字使用<li>标签包围；第二个参数为，选中时的代码；第三个参数可以设置主导航频道的显示样式，在这里用户可以引用设置的css样式。

可以这样简单理解：CMS系统会使用栏目的信息替换这里的“||”。

在修改模板中我们会使用很多类似的标签，大家可以参考/instruction-manual/上的帮助说明。

5.7修改内容页标签经过以上的修改，我们发现内容页中的内容和子导航都是相同的，此时我们还需要为内容页中的内容和子导航加上标签。

其中为网站加上子导航。

删除内容页中的<ul>列表内容，替换为<?php sub_menu('<li>||</li>','<liid="selected">||</li>') ?>的标签，如下所示：然后删除内容页中<div id="main">中的内容，替换为<?php layout_part() ?>内容的标签，将网站位置提示替换为“<?php echo get_location() ?>”，如下所示：修改的具体内容如下：完成以上步骤后，浏览一下网站，看看网站是否符合要求，链接是否正确？点击子导航后内容是否跟着改变。

如果一切没问题，OK！大功告成！我们设计的模板正确导入到CMS，进入到后台修改一下栏目或信息，前台也变了，很方便吧。

这时可以随时调整模板的样式或更丰富一些，都会随时反映到网站上。

5.8首页调用标签现在我们的首页显示的导航使用CMS的标签，但我们的首页显示的内容一些部分还是静态的，需要也使用CMS的标签来动态显示。

CMS首页调用是非常灵活的，用户可以根据自己需要调用自己所写的样式。

例如我们这里要将首页中的“公司简介”中的静态文字变为调用栏目“团队文化”。

我们先通过后台的“构建网站”查询出“团队文化”的ID是“6”，这是该栏目的唯一标识，我们需要使用它。

原有“公司简介”的代码如下：使用<?php echo get_root_path() ?>/?p=6替换“#”，这里的“?p=6”代表告诉服务器需要跳转到ID为6的栏目。

使用首页调用图文标签<?phpdt_cn_article(6,210) ?>替换原有的静态文字，dt_cn_article(6,210)中第一个参数“6”表示调用频道或栏目ID；第2个参数“210”指定栏目显示中文字符数量。

修改后代码如下：看一看网站的首页该部分内容是否改变了，与我们的要求的一致。

OK除了调用栏目的内容，有时我们还可能需要在首页显示某个栏目的更新列表如：新闻条目等。

现在我们再来看看如何调用CMS列表的标签，现在我们的首页有一个列表“公司新闻”，代码如下：我们想把它替换为“专题新闻”的最新列表，同样我们查到“专题新闻”的ID是“3”，在首页显示5条最新的新闻，代码如下：这里使用了<?php echo dt_list(3,5,20,0,0,true) ?>列表调用标签（注意要调用栏目的模块类型必须为“list”）。

参数说明如下：1)调用频道或栏目ID；2)调用新闻显示条数；3)指定新闻标题的显示字符数量；4)指定新闻内容的显示字符数量；5)调用文件名为list_0、list_1、list_2……的php样式文件，其保存于模板下的index文件夹下，表示list的不同显示样式；6)指定新闻字符末尾是否显示省略号，当为“false”或为“true”且第3个参数大于标题字数时不显示省略号，当为“true”且第3个参数小于标题字数时则显示省略号。

登录到管理后台加一个新的新闻试一试，首页是否显示了新的新闻。

OK！到此一些基本的功能我们完成，基本符合我们的要求。

同样还可以调用下载、图片等类型的栏目，本质上是相同的，这里需要大家自己多琢磨一下，浏览官方论坛你会做出更绚丽的网站。

5.9动手试一试到现在，我们掌握了简单模板制作的方法，看起来还不错。

现在试一试将前边实验你不断完善的网站，将栏目、页面进行规划，制作模板，导入到CMS中，同时丰富它的内容，实现你自己的动态网站。

如果想让你的网站更绚丽，实现更多的功能，请多多研究SHLCMS系统，熟练掌握它。