您的位置: 首页 >录像教程>动易2005版进阶提高

自学模板制作心得

  前言:本文制作模板的方法有很多不成熟,甚至是错误的地方。这篇文章的定位不是模板制作教程,而是分享模板制作的思路。具体的说,本文所描述的是一种“模仿”的学习方法。希望本文对所有基础不好的初学者有借鉴之用。

  本文将以我制作的一个网页的模板(我第一次做模板喔^_^)为例,通过两个例子:首页最新文章的调用文章频道内容页(正文)的制作,与网友们交流自学动易网页模板制作的心得。由于我也是初学者,所以有很多问题还没有搞懂,本文的错误在所难免,敬请读者批评指正。

  2005年的暑假,一次偶然的机会在网上发现了一个叫网页设计师的网站 ( ) 。当时只是抱着好奇的心情去逛了一下,然而,就这样走上了学习CSS的道路上来。经过了半个多月CSS的学习,我决定用CSS+XHTML来做个网页,检验一下自己学习的效果。大约在半年前,我就发现了一个叫动易的网站管理系统。当时因为是寒假,假期比较短,所以没有仔细研究过这个系统。在这次的网页制作中,我决定结合这个系统,做一个动态网站,以摆脱我静态网页制作的现状。由于我并没有学过asp,也没有做过模板,所以,这次我决定用“模仿”的方法来制作动易模板。呵呵,开场白说完了,下面就以我做这个模板的过程为例,与网友们分享自学制作模板的心得。

(一)首页最新文章的调用

  在制作模板之前,我要想的第一件事就是:动易的系统与它的模板是什么关系呢?我制作的过程中,模板是一边设计一边与动易系统结合着来做;还是先把模板用静态的语言设计好,最后再与动易系统结合起来呢?我带着疑问进入动易的后台,研究了一下动易自带的默认模板。


图:1-1

  如图1-1,在代码模式下,我发现动易的模板就是在HTML代码的基础上调用动易系统的系统标签与JS代码(个人的理解而已^_^)。发现了这个原理就好,我可以先把首页先用静态语言设计好,最后再调用动易的系统标签与JS文件跟系统结合起来。

  经过三天的努力,终于把网站的首页做好了。大家可以到 察看首页的效果。接着,我的工作就是把这个页面与动易结合起来。由于我的首页是基于CSSXHTML来做的,所以那个CSS文件非常重要,得先把CSS文件导入系统的风格管理。我打开后台的系统设置里的网站风格管理,在上方的管理导航里选添加风格,把我的CSS文件复制过来,覆盖原来的CSS文件(图1-2),并把此风格设为动易的默认风格。最后,我把自己的图片添加到images文件夹。

1-2

  由于我是第一次做,所以没有在动易风格样式的基础上修改。虽然这样并没有影响我的首页版面整体效果,但对于一些我没有定义风格的页面来说,这个简直是灾难。它会导致一些页面显示不正常,所以建议大家在编写CSS风格的时候,最好在动易默认风格的基础上去修改。

  首页的风格设置好了,接下来就要尝试在首页调用标签了。首先打开后台系统设置里的网站通用模板管理,在上方的管理导航里选添加模板,系统会自动在模板内容代码编辑框中写入一些预设的代码。我们就把自己首页的标签中的代码拷贝到代码编辑窗口中来(如图1-8),并在中增加自己模板中相关的信息。最后,我们把这个模板设为动易首页的默认模板。

1-8

  由于不知道动易标签的具体含义,我就想到了用“模仿”的方法。再次打开动易的默认模板,找到了调用最新文章部分的标签代码(图1-3)。与此同时,我下了一个动易的帮助PDF文件对其中的标签内容进行研究。了解了相关参数的含义后,我就在后台添加了几篇文章,并想办法把它们作为最新文章调用到首页中来。

1-3

  首先,在首页上招到适当的版面作为最新文章的位置,我选取了首页Flash的右侧作为最新文章显示的位置(如图1-4)。

1-4

  第二步,把原来显示文字的代码删除(如图1-5)。

1-5

  第三步,在刚才删除内容的位置添加定义好动易的标签(如图1-6)。

1-6

  最后,保存模板,刷新首页查看调用的效果。果然,最新文章在我们预定的位置上,按照我们设置好的参数显示出来了(如图1-7)。但有一点需要注意,由于我是把动易模板的风格全部覆盖了,所以调用出来后,显示的风格效果可能有问题(如:字体大、超链接的样式不对等)。读者可以结合动易标签的三个可选参数(在帮助文档中显示为:aaa, bbb, ccc)在自己的CSS文件上进行修改,直至满意为止。具体方法可以参考动易帮助文档的CSS部分。

1-7

  至此,最新文章在首页模板上调用成功,文章频道、图片频道、下载频道的调用大致与最新文章的调用类似,读者可以仿照动易默认模板的例子,并结合动易帮助进行调用。

[NextPage]

(二)文章频道内容页(正文)的制作

  与制作首页模板的方法相同,我先用静态HTML语言编写了一个内容页网页,然后仿照动易自带的内容页默认模板,对内容页模板进行设计(静态页面:)。

  首先,在相应频道的模板管理中选内容页模板,并添加内容页模板(如图1-9)。然后,像添加首页模板一样,把写好的代码覆盖到一对的标签中(如图1-10)。

1-9

1-10

  接着,就是仿照动易的默认模板把系统的标签替换我们模板原来相应的代码。在内容页中,比较常用的标签有路径:{$ShowPath}、标题:{$ArticleTitle}、作者:{$Author}、文章来源:{$CopyFrom}、点击数:{$Hits}、更新时间:{$UpdateTime}、文章内容:{$ArticleContent}等等。这些标签的具体含义及修改方法请参看动易帮助,在此不作详细说明。

1-11

1-12

  最后,保存模板,刷新内容页查看调用的效果(如图1-20)。但有一点需要注意,由于我是把动易模板的风格全部覆盖了,所以调用出来后,显示的风格效果可能有问题(如:字体大、超链接的样式不对等)。读者可以结合CSS进行修改。

1-20

  下面,我们将讨论网站右侧栏内容的调用。

1-13

  由于考虑到右侧栏前两个栏目的内容经常要做变换而且没有建立相关频道和栏目,所以将用动易的网站广告功能对其进行调用(如图1-13)。

  首先,在系统设置中找到网站广告管理,打开网站广告管理窗口,在管理导航中选添加新版位,并对相应的版位属性进行设置(如图1-14)。具体如果设置版位属性请参考动易帮助文件,在此不做讨论。

1-14

  设置好版位属性后,我们将在相应的版位上添加新广告。在管理导航中选添加新广告,进入添加广告页面。在页面的左侧选择要添加广告的版面,并在右侧设置好其相关属性(如图1-15)。广告的相关属性设置请参看动易帮助手册。

1-15

  最后,回到广告版位管理页面,点击相应广告右侧版位JS栏目下的调用按钮获取相应广告调用的JS代码(如图1-16)。

1-16

  至此,后台部分制作完毕,接下来将转战前台模板对广告的调用。做到这一步就比较简单了,我们像前面调用标签一样,把系统的JS代码替换我们模板原来相应的广告代码(如图1-171-18)。

1-17

1-18

  保存模板后,在浏览器中打开内容页即可看到调用广告的效果。当然,调用出来的图片和文字样式可能与原页面不大相同,这是由于没有具体设置好CSS样式的原因。想要做到何原模板一样还需要对CSS文件进行调整。在此,我们不对这一问题进行讨论。

  接下来编写站内搜索的代码可以模仿动易首页默认模板中站内搜索的代码,只要对相关参数进行适当修改即可。相关文章的调用可以模仿原内容页默认模板进行修改,在此不再讨论。最后的绿色通道就与动易没有关系了,所以也不做讨论。

  下面说明一下文章内容页制作需要注意的几个问题。标签{$ArticleAction}中包含了【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】的项目。如果你想去掉其中一个或几个,你可以修改语言包。具体方法是:打开语言包文件:打开网站目录找到language/gb2312.xml这个文件,用记事本打开这个文件,修改:{$ArticleAction}。另一个问题是怎样把提交评论、完整显示评论在内容页显示。这问题个比较复杂,我的内容页下面的评论也没有实现。但也有解决的方法,大家可以到论坛查看这篇文章:不过个人觉得比较复杂(尤其对于我这种不会asp的,呵呵…)。最后,修改设计频道、栏目、内容页等模板时,必须在你的图片路径前加上:{$InstallDir},比如原来是:src="Images/arrow3.gif",就应该改为:src="{$InstallDir}Images/arrow3.gif"。否则,生成静态HTML页面后,图片会显示不正常。奉劝大家尽量不要像我这样使用XHTML+CSS来编写这些页面。XHTML+CSS构造的页面很多图片都是在CSS中定义的。如果你的编写的页面不生成静态HTML就没有问题,否则,生成以后用CSS定义的全部图片都无法显示!这是因为CSS是不认{$InstallDir}标签的。至今我还没有想到解决这个问题的方法。

  “评论模板”的制作过程,与制作其他模板的方法相似。仿照默认模板把系统的标签替换我们模板原来相应的代码,但不要忽略掉一对【CommentIsShow】标签(如图1-19)。在设计下载栏目时也会有一对【SoftList】标签,大家不要把这些标签遗漏掉了。这些标签插入的位置只要模仿相应的默认模板就可以了。

1-19

  相信经过两个例子的讲解,大家都对这种“模仿”的学习方法有所了解了。其他频道、栏目、搜索等模板都可以按照这个方法来制作。在此,我们就不一一对这些模板进行讲解了。

[NextPage]

后记:

  1、有很多朋友都认为制作模板是一件非常困难的事情。但事实并不是这样,我们只要认真研究一下它的原理,模仿着默认模板来做,同样可以做出一个好的模板来。

  2、“模仿”是一个很实用的学习方法,学习任何知识,都是从模仿开始的。模仿是一个继承他人优点,并在此基础上创新的过程。因此,“模仿”对于初学者来说,是一个必不可少的技能。

  3、有正确的学习态度非常重要。在学习的过程中遇到了问题,不要马上就到讨论群里面去问。要知道,你还有Google、百度、帮助文档以及技术论坛这四位老师。当你遇到问题的时候,应该先向这四位老师讨教。如果仍然找不到答案,才到讨论群去问。有一次,有个朋友在讨论群里面问如何去掉{$ArticleAction}中的几个参数。我已经告诉他论坛有解决方法,但他还想我帮他在论坛里找。我就觉得这种学习态度不可取。毕竟,你搜索过,印象就会更深刻。这样会对你以后的学习有帮助。

  4、由于本人最近要应付比较多的考试,所以这篇文章写得比较仓促。错误和遗漏在所难免,敬请读者批评指正。以后有机会我将会与大家分享更多关于“模仿”的学习技巧,谢谢。

附录:

  以下本文是网站涉及的网页资料,有兴趣的朋友可以试着修改一下。由于我的空间不支持动易组件,所以与动易结合后的页面就无法提供了。

首页原始页面:

内容页原始页面:

评论页原始页面:

频道原始页面:

下载页栏目页面:

下载内容页原始页面:

作者:Samgo 更新时间:2005年12月16日 人气:

本章主要讲解了动易内容管理系统2005版在应用过程中进行快捷修改网站风格、模板导入、使用Dreamweaver MX标签插件、系统升级和迁移等操作的实例教程。