当前位置：文档之家› DEDE织梦仿站实例系列教程(花钱培训自学最终整理完整版)_仿拳击网

DEDE织梦仿站实例系列教程(花钱培训自学最终整理完整版)_仿拳击网

DEDE织梦仿站实例系列教程(花钱培训自学最终整理完整版)_仿拳击网
DEDE织梦仿站实例系列教程(花钱培训自学最终整理完整版)_仿拳击网

DEDE织梦仿站实例系列教程第一讲——准备工作

首先，我们找一个目标网站，以便我们来仿制。

经过福星网络的寻找，确定以拳击在线(https://www.doczj.com/doc/0817130211.html,)为目标站来完成织梦模板的仿制教程。

其次，关于以后教程的一些说明：

1、将目标站网页另存为，会得到一个网站，及相关的文件夹。里面有相关的图片，样式和JS文件。我们需要将这些文件复制到织梦模板的相关文件夹下。在这个系列教程中，此文件夹为templets\fuxing5。

2、我们会制作一个通用的头部和底部，以便全站调用。所以我们会优先制作头部和底部。

3、朋友们需要有HTML知识，还有DIV+CSS的一些知识才行。

4、不断更新。。。

最后，希望朋友们跟着我们一步一步的做，学会织梦的仿站。呵呵，别人的教程可是收费的哦!

DEDE织梦仿站实例系列教程第二讲——首页框架

首先，打开目标站拳击在线(https://www.doczj.com/doc/0817130211.html,)，然后将网页保存到本地。如图：

保存类型选择网页，全部(*.htm;*.html)。如下图所示：

将织梦(DEDECMS)的默认模板文件夹复制一份，以备做在模板制作时做为代码参考。

然后打开保存文件夹，如下图中箭头所指的文件夹：

将文件夹中的文件归类，将CSS文件拷贝到templets\default\style目录下，将JS文件拷贝到templets\default\js，将图片文件拷贝到templets\default\images。

接着用网页编辑器软件FrontPage或者Dreamweaver打开刚刚保存的拳击在线网页文件和templets\default目录下的index.htm(首页)、head.htm(通用头部)、footer.htm(通用底部)。还要打开刚刚备份的默认模板首页文件templets\复件default\index.htm。

先清空index.htm文件，将拳击在线网页代码拷贝到里面。

接下来，就是正式的代码修改了。一行一行的来修改。

首先将CSS样式表的路径修改成织梦的CSS路径代码(从备份的默认首页文件中拷贝)，如下图所示：

保存网页，进入织梦后台，在后台的右上部，点击网站主页，查看前台演示：

通过上图可以看出，样式是正确了，但好多图片没有显示，这主要的原因是好多图片没有下载下来，或者是图片路径没有修改，这些我们在下一讲中进行替换。

DEDE织梦仿站实例系列教程第三讲——路径问题

在第二讲中，前台预览时，好多图片不显示，造成不显示的原因是有两个：一是网页里调用图片的路径问题；一是样式表里调用图片的路径问题。

1.{dede:global.cfg_templets_skin/}/images/logo.gif

{dede:global.cfg_templets_skin/}/即网站设置的当前模板的目录，即default。为了利于区别，我们将default重命名为fuxing5。然后进入织梦后台，依次点击系统->系统基本参数。在右侧处的模板默认风格输入框里的内容修改为fuxing5。如图所示：

点击确定，更新缓存。

用编辑软件打开第二讲中的所有文件，修改里面的图片路径，可以使用替换功能来批量替换图片路径，用如下代码

1.src="{dede:global.cfg_templets_skin/}/images/

替换

1.src="拳击在线%20-%20QuanJi_Cn%20%20致力于打造最大最全拳击门户！_files/

保存网页，查看前台。不好，提示找不到模板文件。我们忘记修改首页默认模板文件了！

依次点击生成->更新主页HTML。在选择主页模板后面点击浏览，选择fuxing5目录下的index.htm。如下图所示：

点击更新主页HTML。再次查看前台，刷新一次！

呵呵，有点意思了，下面就缺样式表里的图片了。打开样式表，将样式表里的图片路径由

1.BACKGROUND: url(yg_bg.gif)

修改为

1.BACKGROUND: url(../images/yg_bg.gif)

我们是以此图片为例，大家不要误解啊，是在图片名前加../images/。批量替换后，再次查看前台，你会奇怪，怎么和目标站还是有区别呢？这里告诉大家一个不幸的消息，模板里所需要的大量的图片没有下载下来，需要我们一个一个的下载下来。最简单的方法是，在目标网站上点击右键，选择背景另存为。这个图片的下载方法不用我教了吧？

当所有图片都下载到templets\fuxing5\images目录下后，再将刷新一下前台。看下效果吧！差不多都显示了！

好了，我们这第三讲也就结束了，第四讲开始真正意义上的仿站的代码修改了。

DEDE织梦仿站实例系列教程第四讲——首页页首代码

今天，我们接上一讲，继续开始我们的仿站之路。

这一讲分两个部分，第一部分，修改首页的页首代码，即之间的代码。

有网页标题title、网页关键字keywords、网页描述description，织梦的这三项是（单指首页）：

1.{dede:global.cfg_webname/}

2.

3.

4.

代码解释：

网页标题调用的是网站名称，后台->系统->系统参数设置，如下图所示：

网页关键字和网页描述调用的是站点默认关键字和站点描述，后台->系统->系统参数设置。如下图所示：

这一节内容不多，很简单。大家不要着急，心急吃不了热豆腐。慢慢来，下一讲我们讲通用头部的制作。

DEDE织梦仿站实例系列教程第五讲——通用头部（一）

上一讲修改了页首的代码，这一讲，我们讲通用头部的制作。

首先找到全站共用部分，然后把共用部分放在通用头部head.htm文件中，这样我们可以节省很多的工作量。

开始工作，查找共用部分。我们打开拳击在线，发现全部共用部分是从最顶部到网站搜索那一行，如图所示：

我们在网页代码中查找这一部分代码，将其覆盖到head.htm文件中，替换掉的代码。查找代码这部分任务，需要有一定的HTML知识了，大家有时间还是要看一些HTML的基础知识。

别忘记了，把共用部分复制到head.htm以后，将index.htm文件中的这部分共用代码用

1.{dede:include filename="head.htm"/}

来替换。然后查看一下前台。如果前台乱了，说明你刚才的步骤出错了，需要重新来过。如果和第三讲时的效果一样，说明你成功了，可以继续仿站工作了。

网页文件的目录中，如下图所示：

打开后，我们发现，这个是个JS文件，我们将其转化业html文件格式。这个好多站长工具提供此服务。

将转换后的代码复制到head.htm中，覆盖如下代码：

1.

接下来就要修改这段代码使之成为织梦的登陆框代码了，这个有点复杂，我们放在下一节单独讲解。

往下走，是加入收藏等链链。找到下面的代码：

1.

修改为：

1.

代码解释：

{dede:global.cfg_basehost/} 站点根网址在后台系统->系统参数设置->站点根网址处设置。

{dede:global.cfg_webname/} 网站名称在后台系统->系统参数设置->网站名称处设置

联系我们这个链接之所以写为#，是因为我们还没有建这个页面。我们如果添加一个栏目联系我们，那么此处的链接是：

其中的数字10是联系我们这个栏目的ID。

好了，这一讲内容就到这里了，下一讲说说织梦登陆框。

DEDE织梦仿站实例系列教程第六讲——通用头部（二）会员登陆框(上) 这一讲，主要讲解一下登陆框的制作。首先看拳击在线的登陆框代码：

用户名： 

密码： 

验证码：

 

 

修改为织梦登陆框代码：

用户名： 

密码： 

{dede:php}

if(preg_match("#2#", $safe_gdopen))

{

echo '

验证码：

看不清？点击更换</p><p> 

';

}

{/dede:php}

 

" class="inputSub" onclick="window.open('{dede:global.cfg_memberurl/}/index_do.php?fmdo =user&dopost=regnew');" />

此处代码的意思我就不解释了，呵呵！因为我们有更重要的工作要作。

下面大家看前台演示。如下图所示：

显示正常，不对！此时我登陆了啊，为何不显示为登陆后的状态啊？对了，忘记添加JS文件了。在head.htm文件顶部位置添加如下代码：

再次查看前台，已显示登陆后的状态，但有问题，如下图所示：

由上图可以看出，当我们登陆后，会出来错位，因为织梦程序默认登陆后的页因不是横向的。我们需要修改一下登陆后的页面样式。

关于登陆后的样式我们放在下一讲再说吧，手有些累了。：）

DEDE织梦仿站实例系列教程第七讲——通用头部（三）会员登陆框(下)

今天主要讲一下登陆后的样式。登陆后的样式文件是member\ajax_loginsta.php。打开这个文件，找到以下代码：

1.

2.

你好：

M_UserName; ?>，欢迎登录

3.

4.

6.

7.

15.

16.

17.会员中心 |

18.资料 |

19.空间 |

20.退出登录

21.

22.

将上面的代码修改为：

1.

2.

3.

4.

11.

12.

你好：M_UserName; ?>，欢迎登录

5.会员中心 |

6.空间 |

7.发表文章

|

8.资料

|

9.

退出登录

10.

为了节约时间，在这里我用表格修改了一下，站长朋友们可以自己修改下CSS样式，此样式文件为

templets\default\style\page.css。

再次查看前台：

效果还不错，不满意大家自己动手写样式。呵呵，下一讲我们讲LOGO与横幅广告。

DEDE织梦仿站实例系列教程第八讲——通用头部（四）LOGO与BANNER

这一讲内容不多，很轻松就可以学好并完成它。

首页是LOGO，查看head.htm里的LOGO代码：

1.

替换成织梦的LOGO代码：

1.

代码解释：

{dede:global.cfg_templets_skin/} 是默认模板的目录，当前即emplets\fuxing5。

{dede:global.cfg_basehost/} 已解释过了，参看第五讲：织梦仿站系列教程第五讲——通用头部（一）

可以看到以上两段代码中，LOGO图片地址代码相同，这主要是因为我们在第三讲：DEDE织梦仿站实例系列教程第三讲——路径问题中修改过了。

下面修改BANNER广告代码，首先查看拳击在线，LOGO右边第一个BANNER是图片广告，通过查看图片属性，我们得到了此广告位的宽度为468，高度为60。第二个广告位不能通过此方法，可以通过截图工具，但不太准确；也可以通过

我们查看下head.htm代码，看到第二个广告位的CSS标记名为ssyg_r，我们以此为关键词，搜索CSS文件css.css。得到其宽度为264，高度为62，除去边框，高度为60，宽度为262。得到宽度和高度后，我们可以添加广告位了。具体步骤如下：

1、进入后台，依次点击模块-广告管理-增加一个新的广告；

2、照下图输入参数：

广告位标识可以随意填写，但须符合后面的规则，此处我们是以图片广告为例，至于广告的详细操作，我们会以后专门讲解。

点击确定以后，再点击代码，如下图：

得到两种调用方式：

JS调用代码

1.

2.

两者的区别是：织梦CMS标签调用代码每次修改都需要生成静态页才可以看到效果，而JS则不需要再次生成静态页。此教程我们选择JS调用代码。

将上面的JS调用代码覆盖以下代码：

1.

查看前台：

广告已显示正常。第二个广告参考第一个广告位的制作方法。好了，这一讲结束了。我要休息一下了。下一讲主要讲导航代码，下一讲再见！

DEDE织梦仿站实例系列教程第九讲——通用头部（五）导航栏

今天这一讲，主要讲织梦模板导航栏的制作。

首先打开通用头部文件head.htm。找到以下代码：

1.

  • 首页

    • 2.

  • 拳击新闻

    • 3.

  • 文章中心

    • 4.

  • 拳击图片

    • 6.

  • 拳击视频

    • 7.

  • 拳击游戏

    • 8.

  • 拳击商城

    • 9.

  • 拳迷论坛

    • 10.

  • 拳迷家园

    • 11.

  • 拳赛直播

    修改为：

    1.

  • 首页

    • 2.{dede:channel type='top'row='10'}

    3.

  • [field:typename/]

    • 4.{/dede:channel}

    代码解释：

    第2行到第4行，是channel|频道标签。该标签的用法如下：

    标记简介：织梦常用标记，通常用于网站顶部以获取站点栏目信息，方便网站会员分类浏览整站信息

    功能说明：用于获取栏目列表

    适用范围：全局使用

    基本语法：

    1.{dede:channel type='top'row='8'currentstyle="

  • ~typename~
    • "}

    2.

  • [field:typename/]

    • 3.{/dede:channel}

    参数说明：

    typeid = '0' 栏目ID

    reid = '0' 上级栏目ID

    row = '100' 调用栏目数

    col = '1' 分多少列显示(默认为单列)

    type = 'son | sun' son表示下级栏目,self表示同级栏目,top顶级栏目

    currentstyle = '' 应用样式

    底层模板字段：

    ID(同id),typeid, typelink, typename, typeurl,typedir(仅表示栏目的网址)

    1.{dede:channel type='top'}

    2.[field:typename/]

    3.{/dede:channel}

    注：在没有指定typeid的情况下，type标记与模板的环境有关，如，模板生成到栏目一，那么type='son'就表示栏目一的所有子类

    织梦标签使用手册：https://www.doczj.com/doc/0817130211.html,/v53/archives/tag/

    多看看织梦手册，有助于你熟练的应用织梦系统（DEDECMS）。

    今天这一讲的内容就讲完了，最后加一点，把LOGO修改成福星网络的LOGO。用PS打开templets\fuxing5\images目录下的logo.gif，修改一下下，这个就要看你的PS功力了！完成后查看前台：

    好了，这一讲就结束了，我们下一讲再见。

    DEDE织梦仿站实例系列教程第十讲——通用头部（六）搜索框

    1.

    2.

    站内搜索：

    3.

    4.

    5.

    6.

    15.

    type=image>

    16.高级搜索

    17.

    18.

    修改为织梦的搜索框代码：

    1.

    2.

    站内搜索：

    3.

    4.

    5.

    9.

    type=image>

    10.高级搜

    索

    11.

    12.

    查看前台，搜索一个关键词测试一下搜索框。输入关键词css，点击搜索按钮，一切正常。

    再往下看代码，是一个JS文件调用，原来是拳击在线搜索框右部的本站动态滚动，我们把这里改为调用织梦的某个特定的栏目，我们暂定这个栏目的ID为1。先看原来的代码：

    1.

    修改为：

    1.

    2.{dede:arclist typeid='1'row='1'titlelen='60'}

    3.[field:title/]

    4.{/dede:arclist}

    5.

    查看前台演示：

    滚动起来了。呵呵，本节成功结束，庆祝一下。通用头部也就结束了。下一节是讲幻灯片代码呢还是通用底部呢？我要想一想啊！不要猜了，到了下一讲就知道了。:)

    DEDE织梦仿站实例系列教程第十一讲——幻灯片的制作

    我们还是顺着做吧，这一讲说说幻灯片代码的制作。

    首先打开index.htm文档，找到幻灯片部分的代码。就是下面这段代码：

    1.

    2.

    3.

    4.

      5.

    • 6.

    • 7.

    • 8.

    9.

    11.

    12.

      13.

    • 14.

      梅威瑟VS奥提兹纽约召开新闻发布会

      28号早些时候，保持不败的P4P冠军弗罗伊德.梅威瑟与

      WBC次中量级冠军维克多.奥提兹在纽约城的胡德逊剧场召开了一场新闻发布会，正式宣布9月17日二人在拉斯维加斯米...

      15.

      16.

    • 17.

      帕奎奥12回合点数完胜莫斯利(附视频)

      在刚刚结束的一场次中量级拳王争霸战中，“亚洲驱逐

      舰”帕奎奥十二回合点数完胜三个级别的五度世界拳王“糖块”莫斯利，一边倒的赢得了胜利。...

      18.

      19.

    • 20.

      “幽灵”帕弗里克10回合点胜洛佩兹(附视频)

      刚刚在美国米高梅大酒店进行的一场10回合

      超中量级比赛中，前中量级冠军，美国&ldquo;幽灵&rdquo;凯利.帕弗里克（37-2，32KO）以点数95-95、98-92、99-91战胜...

      21.

      22.

      23.

    24.

    31.

    代码有些长，此段代码可分为三段，大图部分、标题和简介部分、小图部分。

    我们将上面这段代码修改为织梦模板的代码：

    1.

    2.

    3.

    4.

    相关文档 最新文档