5U CMS 实战教程

=============================

邱嵩松教你扒皮---如何扣下喜欢的网页模板

扒皮是比较形象的扣模板说法，或者说仿站的说法。一般对于建站者来说，网站程序部分，分为后台和

前台。后台主管实现各种功能，前台就是大家看到的外观。

对于建站爱好者，尤其是初学者，没有经过专业的培训与经验积累，设计出一个好看的版面无异于天

方夜谭。在这个信息爆炸的互联网时代。网站的样式也是层出不穷，其中还出现了很多经典样式，引无数

美工竞效仿。

那么如何扒皮呢？扒皮我觉得分两种，第一种，直接扒，啥玩意都存下来；第二种，截个图回去，按

自己想法改好，然后DIV切图，写CSS，自己做成模板。第二种需要有一定的PS和CSS基础，这里暂不讨论

。我们来谈谈快速的第一种方法。

首先，我们要确定一个目标，比如说，www.qiusongsong.com/edu/ 这个网址。打开各种工具软件，

如DREAMWARE或FRONTPAGE，迅雷、网站整站下载器等等。

第二步，分析网页，你需要哪些模板。对于一个网站来说，很多部分都是重复的。我们一般分为首页

，列表页，内容页，通用页。那我们就根据所使用的后台程序来相应地制作这些页面。 第三步，下载。以首页为例，很简单地，在浏览器左上角找到 文件 选项，另存为，保存选项为网页

，全部。只有这样，才能存下网页和他带的图片。一般存下来之后，DW就能打开修改了，最简单的网页就

是改改图，改改字，一个简单的页面就扣下来了。

第四步，遇到问题。为什么不能保存？保存时提示XX网页不存在。这一般是在网页中添加了不存在的

框架代码，不过我们可以用网站整站下载器来下载它。关于下载器的用法很简单，设定网址，设定下载层

数，就是下几级目录的东西，建议3层即可。如果没有这东西，我们还有别的办法，放在下一步中一起讲

。

第五步，缺文件。有些文件是不会随着另存为而被下载下来的。如css文件中的图片，不存在的框架

网页，FLASH动画等。对于不存在的框架网页，我们不用管，一般也用不上，如果有用，找到路径，单独

打开下载便是。至于FLASH，也是找到路径，用下载工具下载。CSS文件中的图片，和第四步中我们谈到的

无法另存为的情况，我们另有妙计。首先，将CSS文件复制一份出来，改后缀为.htm或.html。然后，编辑

它。会发现很多代码，如 url(../images/line_02.gif); 我们用替换法进行修改，先确定CSS文件在目标

网站中的路径，如www.qiusongsong.com/edu/template/css/stycle.css ，那么我们就将 url(../images

替换成

，再替换图片后缀为jpg,png,bmp的，统一转成链接样式。然后在浏览器中打开，在链接上点右键，

选择用迅雷下载全部链接，选择弹出选项中的图片格式文件，然后下载，存到你模板的图片目录 中即可 。

第六步，修正模板。以5UCMS举例，默认模板，如首页，应该是index.html，其下设有js、css、

images文件夹，我们将相对应的文件放到这三个目录下，修改index.html中的相应路径，这样，一个模板

就顺利地仿下来了。如果还是不对，就查查路径和有没因为缺少文件你没下载。

总结，扒皮是件很简单的事，唯一麻烦的地方就是CSS文件的处理。难点在于路径的理解，在网页中

，一般../代表需要跳到上一级目录，可以叠加使用，而/代表从网站根目录开始计算路径。这些基础的内

容，算作是课后作业，大家自己找资料学习。有问题，欢迎到我博客讨论！

邱嵩松5UCMS标签、模板与仿站教程 1-0

这一章先不谈技术上的问题，所以心急的站长们可以跳过。

仿站，是学习的一个过程，就像写作文，书读百遍，其意自现。记得初中时，一数学老师教我们做证明题

，啥都不说，写的题目，写上答案，让我们抄，抄了很多次，然后就会答证明题了。

可以说，模仿不是可耻的，我们要抱着学习与仰慕的心态去模仿，学会了整个流程，才能创造出属于自己

的原创漂亮的网站。希望大家能在这条路上，努力走下去，即使学会了仿站，也不用洋洋得意，因为，能

做到这一步的站长，相当之多。

那么，也许会有朋友问了，这个学习过程长么，困难不？我觉得难度是有的，时间也是需要的，但很多事

做了，反而就成了；不做，就只能一直在害怕他，站长是吓不倒的。尤其是像我们这样的草根站长，这只

是梦想开始的第一步。

在这里我先发个免责申明，大家如果通过我的教程学会了仿站，但请不要去做违法、或损害别人版权的事

，否则，一切责任由您本人承担，本人不负任何责任，要么，请绕行此教程。 呵呵，刚话说的太严肃了，不过没办法，官司这玩艺落谁头上，都让人难受的。 最后，感谢无忧作者做出如此造福我等草根的大作！祝大家事业与网站齐旺盛！

邱嵩松5UCMS标签、模板与仿站教程 1-1

什么是5U模板？从哪里获得模板？如何使用模板？ 邱嵩松5UCMS标签、模板与仿站教程 1-1

什么是5U模板？

用百度搜索＂什么是网页模板＂，我们来看一下搜到的答案是什么： ＂网页模板是一个预先设计好的网站。利用它可以进行快速和高品质的网站开发。只需要添加您的文本和

图片，就可以得到一个功能完整的高品质网站。＂

让我吃惊，什么人给的答案，太不负责任了！这个答案是不对的的，或者说误导了一部分刚刚接触网页制

作的初学者。被误导者认为只要找到一个网页模板，就可以利用它快速建立网站。认为只要添加文本和图

片，就可以建立一个网站。所以，当他(她)用很少的付出得到一个网页模板时，然后才发现事实并非如此

，就会埋怨，怎么还要做这么多工作呀，被骗啦，甚至还要求网页模板的提供者帮他(她)用这个网页模板

做一个网站，不然就投诉！退款？！

在这里我要对网页模板这个概念重新做一个定义： 网页模板的组成：网页模板包含两个部分，

第一部分，网页模板的展示部分：由一组相关联的html文档及其图片文件组成，有动画成果的网页模板还

会有swf文档，有时候，也用网页捉图来展示网页模板的成果；

第二部分，可用来进行网页设计制作的PSD分层图片源文件，有动画成果的还包含有fla源文件；

(通常一个网页模板是由这两个部分组成的，但也是个别网页模板只有其中一个部分。) 网页模板的用途：

网页模板给网页设计制作提供了一个美工方面的参考，或者说模仿，有了网页模板，还需要用到网页制作

软件，如Dreamweaver、Firework、 Flash等，如果需要制作交互式动态网页，还需要掌握ASP或PHP等编

程知识，这样在网页模板的基础上进行再创作才能做好一个网站。

对于5U仿站来说，一般我们用到的只是第一部分，即网页直接展示出来的。当然PSD也有PSD的好处，这里

仅做了解，有兴趣的站长们可以搜索下满足好奇心。我对5U模板的理解就是，一种通用的HTML页面，绝大

部分网站都包含了这样三种页面，首页、列表页、内容页，那么，这三种页面下载下来，就能称之为模板

，再经过一系列的处理，就能被5U系统使用。在5U程序下有个TEMPLATE目录，里面的文件就全部是5U的模

板文件了，通过对它们的修改，就可以做出丰富多彩的网站来了！

邱嵩松5UCMS标签、模板与仿站教程 1-1

从哪里获得模板？

1、可以到5U的官方网站及其论坛上下载现成的，做好的，放在程序里就可以使用；到其他5U资源站下载

，需要百度一下。

2、模仿，看到好看的网站怎么办？有句行话，扒皮！嘿嘿，扒下来自己用嘛，这就是仿站的一个过程。

3、如果看到网站是用5U做的，那么有个简单的方法快速的将它的模板下载下来，前提是这个网站站长比

较懒，模板文件没改路径。默认的几个页面路径是（这里拿阜阳校内网打个比方）： 首页：http://www.fyxiaonei.com/secret/template/index.html 小类列表页：http://www.fyxiaonei.com/secret/template/list.html 文章内容页：http://www.fyxiaonei.com/secret/template/article.html

当然，这种情况并不多，一般站长都会修改一下。你也可以从它的CSS文件路径，图片路径中推测下模板

路径，因为模板文件的名称是可改的，所以看你运气啦！ 如何使用模板？

当模板按照一定的格式制作完成后，或直接下载回来一个5U专用的模板后，直接覆盖到程序目录template

中就可以了，如果你想做一下简单的防盗，可以再新建一个目录，比如fyxiaonei目录新建到template下

，在后台配置中有个 模板路径 ，填上fyxiaonei即可，不建议用多级，没啥意义，最后更新缓存，打开

首页即可看到效果。首发于邱嵩松博客，如本文有不妥的地方，请大家多多批评指正！ 教程列表：http://www.fyxiaonei.com/bbs/viewthread.php?tid=5258 常见问题：

UTF-8和GB2321啥区别？

这个是仿站过程中的常见问题，一定要知道和解决它！在网页的源码中，HEAD区域一般会有这样的东西：

这东西指的是网页所用的字符编码格式，具体啥东西呢？百度一下，呵呵，内容比较多，了解即可。简单

的大家需要知道的就是，这东西要和程序相对应，大家下载程序的时候也发现有两种格式的下载了吧？如

果不对应，出来的页面就会乱码的，非常难看。一般邱嵩松比较懒，目标网站是啥格式的，我就用啥格式

的5U程序来套它。

那有没有方法转码呢？有时必须用某种编码的时候怎么办呢？方法很简单哦，用Dreamweaver打开模板，

空白处右键，页面属性，标题编码，在编码下拉中选好你要转的，最后确定即可。有提示说啥字符丢失的

就别管它，基本上就能用。

不过如果更改过后，网页结构变化地厉害，你不懂的如何修改CSS、优化的话，劝你还是还原它。

如何判断程序是不是5U做的？

首先，查看首页的链接，看看有没有ASP的，如果带PHP，基本上就不是5U做的了。然后，有ASP？那看看

它的搜索、留言等插件的目录，如果搜索的路径有类似这样/plus/search/，留言的有类

似/plus/guestbook/ 并且看起来跟你熟悉的5U很像，那就基本能判定是5U系统啦！当然还有其他的一些

细节，大家可以慢慢摸索掌握，经验是积累出来的。

邱嵩松5UCMS标签、模板与仿站教程 1-2

什么是5U标签？如何使用5U标签？编写5U标签？ 邱嵩松5UCMS标签、模板与仿站教程 1-2

什么是5U标签？

这个标签指的不是TAG（关键词），而是替代数据库查询语句的一种替代形式。为什么要做替代呢？简单的说，就是为了简便，比方说，你把文章名称存放在数据库中，那么，调用的语句应该为 select * from * where ** 这样的东西，而用在5U中使用标签的话，只要用{field:title}来表示即可。其他像调用文章列表、分页页码、广告等内容也可以用相应的标签来表示，这样在使用新的模板的时候，做变动将会非常容易。就像网页中使用了CSS一样，可以一对多地进行控制。这段内容需要大家仔细琢磨一下，理解了再继续看下去。如果不理解，建议大家先去了解一下，HTML、CSS、ASP+ACCESS这样的基础教程。

那么如何使用5U标签呢，其实上一段已举了一个例子，大家在网站源码中经常可以看到这么一句代码：

.....

一般中网页的头部，对吧，不信大家随意找个页面，干脆就这个页面吧，空白处点右键，查看源代码，看头部的内容，发现了吗？ 那么在5U模板中，我们写成这样：

..... 发现不同了吗？{field:title}就是5U的固有标签的一种，代表的是 标题 名称。 这就是简单的固有标签的替换，另外还有像 系统标签：

（1）网站名称 {Sys:Webname} （2）系统安装目录 {Sys:Installdir} （3）网站首页名称 {Sys:Indexname}

（4）网站首页访问地址（链接） {Sys:Indexview} （5）站内链接前缀 {Sys:Httpurl} 特殊标签：

文章浏览页：

当前路径 {tag:sitepath} 上一篇文章 {tag:pre} 下一篇文章 {tag:next} 文章分页链接 {tag:page} 列表页：

当前路径 {tag:sitepath} 列表分页链接 {tag:page}

时间标签：{field:modifytime $format=yy-mm-dd hh:nn:ss}

在模板中需要修改的地方，把原来的内容替换成标签，就成啦！很简单吧！ 编写5U标签？

而自定义标签更加简单随意，后台菜单中新建，填上内容，记下名称，再复制到模板中相应位置，即可生效。以后修改直接在后台改好即可。

最复杂的是列表的调用，这些标签一般是多种内容的组合，里面会涉及到修改一些参数，在后台的标签生成器中可以生成大部分大家需要在标签组，但还有些不常用的调用就需要大家掌握一些SQL语句，初期可以收集一下别人编写的5U标签语句，用的时候复制粘贴，后面慢慢懂了，就可以自己写了。关于这些我们将在具体的实站教程中向大家介绍！如本文有不妥的地方，请大家多多批评指正！

教程列表：http://www.fyxiaonei.com/bbs/viewthread.php?tid=5258 常见问题：

1、修改了没反应：注意更新缓存，有时候需要三次以上。

2、修改了有反应，但提示不正确：仔细检查标签书写格式，有没写错。

邱嵩松5UCMS标签、模板与仿站教程 2-1

关于HTML与CSS 邱嵩松5UCMS标签、模板与仿站教程 2-1 首先我们来了解一下HTML的定义：

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 详情：http://baike.http://www.njliaohua.com//view/692.htm CSS:Cascading Style Sheet(层叠样式表、级联样式表)的缩写。

w3c给予的说明是：它是一种简单的对于web文档增加样式（诸如：字体、颜色、间隔等）的机制（Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts,

colors, spacing) to Web documents. ）。标准技术文档参见W3C的文档说明。

本人认为样式表的作用就是web设计中文档设计与表现分离的需要。打个比方，整个web程序就像一个人，人有头、四肢等，这是人的基本构架，也是最基本的，没有这些，人就不能称之为人；同样web文档结构就是web程序中最基本的东东。那样式表就好像人的衣服，它是web文档的衣装，有了它，web网页才显现出千姿百态。有人要问了，那以前没有CSS说法时，web页面设计也是各式各样的啊。不错，但是注意那时文档结构和表现形式是没有分离的，就好比你的文身，刺在你的肉中（也许不是很恰当，人穿上衣服可以遮住的），没法和你分开了。文档结构和表现混和就不利于web程序的继承、再开发，因为每一次web重新设计就是一次新的项目开发了。所以我们要选择web文档结构和表现形式的分离，所以我们选择了CSS（当然，CSS主要是针对web程序的；还有XSL是针对所有的文档结构类型之间的相互转换，也更为通用了，XSL也可以用于web设计）。 那么为什么会有CSS呢？ 做网站的人都知道，很多时候我们都要去在表现层消耗大量的精力和时间，起主要原因是因为代码的混浊，美工的配合不到位，如何才能更好的达到美工和程序配合呢！如果单纯依靠HTML去实现，我想那样是一件很糟糕的事情，起码会叫程序员和美工都会哭！所以这个时候出现了色彩斑斓的CSS语言，其实HTML里边的表格主要不是用来定位的，主要是用来显示数据的，但是当CSS出现之前，人们用HTML最多的是用来定位网页，有了CSS，我们就可以控制网页外观并且将文档的表现部分与内容分离开来。例如我们可以用CSS直接控制布局，而不是没有语义的表格。总之，CSS让以前复杂难懂的Html变得简单，有意义。

关于详细的HTML和CSS的教程，网上有很多，这里重复也没什么意思，大家在仿站之前起码要做到能看的懂这些代码的意思，脑子中能浮现出代码被浏览器解释后的样子。慢慢大家就直接能写出来了！

邱嵩松5UCMS标签、模板与仿站教程 2-2

如何获取他人网页？仿站的一般流程

在网上冲浪的时候看见一个很漂亮的网站是不是很心动呢，是不是想把它占为己有呢?其实仿站是很简单的，只要看懂HTML、CSS和熟悉你使用5U系统标签，仿个站是没问题的，下面邱嵩松来给大家介绍一下仿站的基本流程，下一课我们再来具体实战的！

第一步，找好你要仿的网站，我就用这个www.fyxiaonei.com/secret/，阜阳校内网旗下的荷包蛋网站来介绍一下一般流程。

第二步，找以下三个页面，随意找即可，首页，列表页，内容页，我们仿这3个页面就可以了，在桌面（或其他你习惯的位置，方便就好）创建个文件夹，打开要仿的首页：点击网站左上的文件→另为存（选择 网页，全部(*.htm,*.html)），保存到创建的文件夹里，列表页和内容页一样的方法保存下来。每个页面保存都有两个文件一个是网页的代码，一个是文件夹里面有CSS和图片等，这些就是我们所需要在东西。 .

第三步，处理CSS，打开CSS文件（如果没有此文件请跳过此步骤），在里面分别搜索JPG，GIF，PNG三种字符，这是网页常用的三种图片，当然BMP的也可能有，但在CSS里不常见到。如果找到，复制好这个图片的名称，然后在浏览器里打开具体路径，打开，另存到这个CSS文件所在的文件夹里。

第四步，替换标签，5U里有大量的标签可以使用，替换成你需要的地方，按下载下来的网页的原有格式。

第五步，将这三个页面：首页，列表页，内容页改好之后，分别修改成index.html,list.html,article.html，文件夹统一修改成images并合并到一块儿，因为一般网站的CSS和图片都是通用的，我们可以合并，要是有区别，个别的进行修改即可。这之中注意好路径，错了可能无法显示，这时候怎么查呢？ 第六步，修正阶段，后台更新缓存后，如果页面显示正常，那么恭喜您，仿站成功！如果显示错乱，一点CSS效果都没有，别急，查看下源文件，看看路径是不是能链到CSS文件，如果不是，修改一下。如果网页中一些图片显示不正常，那么除了查看源文件外，再看看CSS文件，相信你能很快找到原因！

这一节，我们大致地介绍了一下5U的基本教程，如果对HTML和CSS比较精通的同学，可以重点看一看关于5U标签的那节教程。实战部分可以略过。下面几课，邱嵩松向您介绍具体的页面模仿过程，和不同页面中常见的标签和问题。

邱嵩松5UCMS标签、模板与仿站教程 2-3 如何用标签替换需要修改的内容

我们知道了什么是5U标签后，在有一点儿HTML和CSS的知识，就可以着手开始替换了。标签替换是在上一节的基础上才能进行的，也就是说你将目标网页的全部内容已下载回你的电脑上了。

用DW打开相关页面，找到