建立CMS模版.doc

西北工业大学软件与微电子学院 综合创作训练实验指导书实验八 建立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系统目录中wwwRootDeepthroatskins下建立目录“myfirst”。OK！SHLCMS模板中还需要一些附属文件如：模块，插件等。我们还不会编写，没关系可以先借用已有的。将前面我们建立的静态页及相关的css、images文件夹拷贝过去。然后，将wwwRootDeepthroatskinsmodel_104模板下的common 、index、parts、preview文件夹、config.xml拷贝到“myfirst”文件夹内。在“myfirst”文件夹下建立目录“CSS”，将wwwRootDeepthroatskinsmodel_104css下的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”图标及其信息，如下图所示：点击选择使用“myfirst”模板，然后选择“预览网站”，此时我们发现形成的网站是一个网站样式、图片丢失后的网站，如下图所示：那么，是什么原因造成网站的样式、图片丢失的呢？原因很简单，模板建立后必须让系统找到所使用的图片、css样式，这里我们只需要修改一下文件路径，在相关的图片、css路径前加上标签，该标签含义为站点模板的路径。分别打开index.php、common.php页面修改全部图片、css路径，如下图所示，注意要把全部图片的路径进行修改。images/logo.jpgcss.css此时，刷新再次浏览页面，我们会发现首页页面已经正常显示。如果还有图片没有显示，注意在CSS文件中图片使用的路径是否正确。5.6 插入主导航标签网站首页正常显示后，我们还需要为网站插入导航标签，打开index.php页面，我们原有的导航条如下：首页公司简介产品与服务常见问题系统下载技术支持关于我们使用CMS的标签修改导航信息，让我们的栏目数据动态生成，如下所示：a href=/首页?php main_menu(|,|,) ?我们注意到了主要的变化，使用了一个“main_menu()”的方法调用栏目信息。 常见用法：?php main_menu(|,|,) ?第一个参数(|)中的|为分割符，用来给定导航左右两边的标签，表示栏目的文字使用标签包围；第二个参数为，选中时的代码；第三个参数可以设置主导航频道的显示样式，在这里用户可以引用设置的css样式。可以这样简单理解：CMS系统会使用栏目的信息替换这里的“|”。在修改模板中我们会使用很多类似的标签，大家可以参考/instruction-manual/ 上的帮助说明。5.7 修改内容页标签经过以上的修改，我们发现内容页中的内容和子导航都是相同的，此时我们还需要为内容页中的内容和子导航加上标签。其中为网站加上子导航。 标签说明 分支机构 在线支持 支援请求 论坛概览 删除内容页中的列表内容，替换为?php sub_menu(|,|) ?的标签，如下所示： ?php sub_menu(|,|) ? 然后删除内容页中中的内容，替换为内容的标签，将网站位置提示替换为“”，如下所示： 首页公司简介 公司简介修改的具体内容如下： 完成以上步骤后，浏览一下网站，看看网站是否符合要求，链接是否正确？点击子导航后内容是否跟着改变。如果一切没问题，OK！大功告成！我们设计的模板正确导入到CMS，进入到后台修改一下栏目或信息，前台也变了，很方便吧。这时可以随时调整模板的样式或更丰富一些，都会随时反映到网站上。5.8 首页调用标签现在我们的首页显示的导航使用CMS的标签，但我们的首页显示的内容一些部分还是静态的，需要也使用CMS的标签来动态显示。CMS首页调用是非常灵活的，用户可以根据自己需要调用自己所写的样式。例如我们这里要将首页中的“公司简介”中的静态文字变为调用栏目“团队文化”。我们先通过后台的“构建网站”查询出“团队文化”的ID是“6”，这是该栏目的唯一标识，我们需要使用它。原有“公司简介”的代码如下：more.img src=images/comp.gif /XMLoL 全称为Extensible Markup Language Online，即:可扩展标记语言在线。XMLoL团队成立于2002年，由多年互联网从业经历的Web工程师和设计师组成，主要致力于电子商务应用技术领域的探索和研发，在几年的时间里，为数千家中小企业提供多层面的电子商务应用服务和信息化建设方案，同时，在端到端的WEB技术方面为多家网络公司和技术团队提供咨询及训练。使用/?p=6替换“#”，这里的“?p=6”代表告诉服务器需要跳转到ID为6的栏目。使用首页调用图文标签替换原有的静态文字，dt_cn_article(6,210)中第一个参数“6”表示调用频道或栏目ID；第2个参数“210”指定栏目显示中文字符数量。修改后代码如下：a href=/?p=6more.img src=images/comp.gif /.看一看网站的首页该部分内容是否改变了，与我们的要求的一致。OK除了调用栏目的内容，有时我们还可能需要在首页显示某个栏目的更新列表如：新闻条目等。现在我们再来看看如何调用CMS列表的标签，现在我们的首页有一个列表“公司新闻”，代码如下：more.img src=images/news.gif /奥运今日开幕：让世界记住这个闪亮的日子梦八提前定中美大战首发布什乘空军1号抵京领导命新聘大学生拼酒 14喝倒1人死 贾静雯携女首曝光 感受老北京生活 我们想把它替换为“专题新闻”的最新列表，同样我们查到“专题新闻”的ID是“3”，在首页显示5条最新的新闻，代码如下：a href=/?p=3more.img src=images/news.gif /这里使用了列表调用标签（注意要调用栏目的模块类型必须为“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系统，熟练掌握它。更多的标签和丰富页面的方法请参考：/，论坛上也有很多不错的教程。6 实验报告要求 1) 详细写出需要自己动手做的实验内容的步骤；2) 给出程序运行过程中各个页面的截屏；3) 将你制作好的模版下全部文件打包；4) 提交文件名格式：班级号-学号-姓名-实验八.rar。7 实验注意事项 1) 看清实验指导书后再动手；2) 按实验指导书动手做实验的过程中要勤于思考；3) 实验中充分利用搜索引擎学习相关知识和解决问题，同时要掌握如何利用高级搜索功能快速找到相关网页。8 思考题 我们使用类似?php sub_menu(|,|) ?这样的标签，你能理解他的含义吗？9 扩展阅读9.1 PHP基本语法在WEB页面中，所有PHP代码都被放置在“”中。此外，用户还可以选择使用诸如等的形式。PHP引擎会自动识别并处理页面中所有位于PHP定界符之间的代码。PHP脚本语言的语法结构与C语言和Perl语言的语法风格非常相似。用户在使用变量前不需要对变量进行声明。使用PHP创建数组的过程也非常简单。PHP还具有基本的面向对象组件功能，可以极大的方便用户有效组织和封装自己编写的代码。即使初次接触PHP的用户也会发现自己对PHP的语法风格并不陌生。例如：显示结果为“Hello！”。PHP中，所有的变量都以标识“$”开头。我们可以对上述代码做如下改动：改变后的代码显示结果不变。PHP中使用“.”符号连接不同的字符串，而其它的算术运算符则继承了流行编程语言的风格。举例如下： 显示结果为“Hello！6 people！”。 PHP对各种运算符及运算规则都有一套完整的规定，如果用户具有C或C+语言的编程背景的话，可以发现一切都得心应手。在PHP中，如果在双引号包含的字符串中含有变量的话，该变量将用相应的变量值替换；如果字符串被单引号包含，则不做替换。例如： 显示结果为： Hello, PETER！ Hello, $name！ （注：上述代码中的“n”为换行符，只能在双引号字符串下使用）。9.2 PHP函数函数是一种可以在任何被需要的时候执行的代码块。创建 PHP 函数：1) 所有的函数都使用关键词 function() 来开始；2) 命名函数 - 函数的名称应该提示出它的功能