织梦仿站系列教程.doc

织梦仿站系列教程第一讲准备工作2011-08-29 17:56:29|分类： dedecms教程 |标签： |字号大中小订阅 首先，我们找一个目标网站，以便我们来仿制。经过福星网络的寻找，确定以拳击在线(QuanJ)为目标站来完成织梦模板的仿制教程。其次，关于以后教程的一些说明：1、将目标站网页另存为，会得到一个网站，及相关的文件夹。里面有相关的图片，样式和JS文件。我们需要将这些文件复制到织梦模板的相关文件夹下。在这个系列教程中，此文件夹为templetsfuxing5。2、我们会制作一个通用的头部和底部，以便全站调用。所以我们会优先制作头部和底部。3、朋友们需要有HTML知识，还有DIV+CSS的一些知识才行。4、不断更新。最后，希望朋友们跟着我们一步一步的做，学会织梦的仿站。呵呵，别人的教程可是收费的哦!织梦仿站系列教程第二讲首页框架2011-08-29 17:57:12|分类： dedecms教程 |标签： |字号大中小订阅 首先，打开目标站拳击在线(QuanJ)，然后将网页保存到本地。如图：保存类型选择网页，全部(*.htm;*.html)。如下图所示：将织梦(DEDECMS)的默认模板文件夹复制一份，以备做在模板制作时做为代码参考。然后打开保存文件夹，如下图中箭头所指的文件夹：将文件夹中的文件归类，将CSS文件拷贝到templetsdefaultstyle目录下，将JS文件拷贝到templetsdefaultjs，将图片文件拷贝到templetsdefaultimages。接着用网页编辑器软件FrontPage或者Dreamweaver打开刚刚保存的拳击在线网页文件和templetsdefault目录下的index.htm(首页)、head.htm(通用头部)、footer.htm(通用底部)。还要打开刚刚备份的默认模板首页文件templets复件 defaultindex.htm。先清空index.htm文件，将拳击在线网页代码拷贝到里面。接下来，就是正式的代码修改了。一行一行的来修改。首先将CSS样式表的路径修改成织梦的CSS路径代码(从备份的默认首页文件中拷贝)，如下图所示： 保存网页，进入织梦后台，在后台的右上部，点击网站主页，查看前台演示：通过上图可以看出，样式是正确了，但好多图片没有显示，这主要的原因是好多图片没有下载下来，或者是图片路径没有修改，这些我们在下一讲中进行替换。织梦仿站系列教程第三讲路径问题2011-08-30 11:22:52|分类： dedecms教程 |标签： |字号大中小订阅 在第二讲中，前台预览时，好多图片不显示，造成不显示的原因是有两个：一是网页里调用图片的路径问题；一是样式表里调用图片的路径问题。网页里的图片路径（在这一讲中说到的图片，是指模板中所用到的图片，不包括网站内容中用到的图片）是这样的：1. dede:global.cfg_templets_skin/images/logo.gifdede: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/。批量替换后，再次查看前台，你会奇怪，怎么和目标站还是有区别呢？这里告诉大家一个不幸的消息，模板里所需要的大量的图片没有下载下来，需要我们一个一个的下载下来。最简单的方法是，在目标网站上点击右键，选择背景另存为。这个图片的下载方法不用我教了吧？当所有图片都下载到templetsfuxing5images目录下后，再将刷新一下前台。看下效果吧！差不多都显示了！好了，我们这第三讲也就结束了，第四讲开始真正意义上的仿站的代码修改了。织梦仿站系列教程第四讲首页页首代码2011-08-31 21:46:34|分类： dedecms教程 |标签： |字号大中小订阅 今天，我们接上一讲，继续开始我们的仿站之路。这一讲分两个部分，第一部分，修改首页的页首代码，即之间的代码。有网页标题title、网页关键字keywords、网页描述description，织梦的这三项是（单指首页）：1. dede:global.cfg_webname/2. 3. 4. 代码解释：网页标题调用的是网站名称，后台-系统-系统参数设置，如下图所示：网页关键字和网页描述调用的是站点默认关键字和站点描述，后台-系统-系统参数设置。如下图所示：这一节内容不多，很简单。大家不要着急，心急吃不了热豆腐。慢慢来，下一讲我们讲通用头部的制作。织梦仿站系列教程第五讲通用头部（一）2011-09-01 20:32:35|分类： dedecms教程 |标签： |字号大中小订阅 上一讲修改了页首的代码，这一讲，我们讲通用头部的制作。首先找到全站共用部分，然后把共用部分放在通用头部head.htm文件中，这样我们可以节省很多的工作量。开始工作，查找共用部分。我们打开拳击在线，发现全部共用部分是从最顶部到网站搜索那一行，如图所示：我们在网页代码中查找这一部分代码，将其覆盖到head.htm文件中，替换掉的代码。查找代码这部分任务，需要有一定的HTML知识了，大家有时间还是要看一些HTML的基础知识。别忘记了，把共用部分复制到head.htm以后，将index.htm文件中的这部分共用代码用1. dede:includefilename=head.htm/来替换。然后查看一下前台。如果前台乱了，说明你刚才的步骤出错了，需要重新来过。如果和第三讲时的效果一样，说明你成功了，可以继续仿站工作了。查看head.htm代码，可以看到，拳击在线的登陆框是调用一个静态文件loginjs.htm，我们找到这个文件。在你保存网页文件的目录中，如下图所示：打开后，我们发现，这个是个JS文件，我们将其转化业html文件格式。这个好多站长工具提供此服务。将转换后的代码复制到head.htm中，覆盖如下代码：1. 接下来就要修改这段代码使之成为织梦的登陆框代码了，这个有点复杂，我们放在下一节单独讲解。往下走，是加入收藏等链链。找到下面的代码：1. 2. 加入收藏| 3. 设为首页| 4. 会员中心| 5. 我要投稿| 6. 联系我们| 7. RSS8. 修改为：1. 2. 加入收藏| 3. 设为首页| 4. 会员中心| 5. 我要投稿| 6. 联系我们| 7. RSS8. 代码解释：dede:global.cfg_basehost/ 站点根网址 在后台系统-系统参数设置-站点根网址处设置。dede:global.cfg_webname/ 网站名称 在后台系统-系统参数设置-网站名称处设置联系我们这个链接之所以写为#，是因为我们还没有建这个页面。我们如果添加一个栏目联系我们，那么此处的链接是：1. dede:typetypeid=10field:typelink/dede:type其中的数字10是联系我们这个栏目的ID。好了，这一讲内容就到这里了，下一讲说说织梦登陆框。织梦仿站系列教程第六讲通用头部（二）会员登陆框(上)2011-09-05 23:42:41|分类： dedecms教程 |标签： |字号大中小订阅 这一讲，主要讲解一下登陆框的制作。首先看拳击在线的登陆框代码：用户名：  密码：  验证码：     修改为织梦登陆框代码：用户名：  密码：  dede:php if(preg_match(#2#,$safe_gdopen) echo 验证码：  ; /dede:php   CheckLogin();此处代码的意思我就不解释了，呵呵！因为我们有更重要的工作要作。下面大家看前台演示。如下图所示：显示正常，不对！此时我登陆了啊，为何不显示为登陆后的状态啊？对了，忘记添加JS文件了。在head.htm文件顶部位置添加如下代码：再次查看前台，已显示登陆后的状态，但有问题，如下图所示：由上图可以看出，当我们登陆后，会出来错位，因为织梦程序默认登陆后的页因不是横向的。我们需要修改一下登陆后的页面样式。关于登陆后的样式我们放在下一讲再说吧，手有些累了。：） 织梦仿站系列教程第七讲通用头部（三）会员登陆框(下)今天主要讲一下登陆后的样式。登陆后的样式文件是memberajax_loginsta.php。打开这个文件，找到以下代码：1. 2. 你好：M_UserName;?，欢迎登录3. 4. ahref=/index.phpimgsrc=width=52height=52/5. 6. 7. 8. ahref=/guestbook_admin.php我的留言9. ahref=/mystow.php我的收藏10. ahref=/article_add.php发表文章11. ahref=/myfriend.php好友管理12. ahref=/visit-history.php访客记录13. ahref=/search.php查找好友14. 15. 16. 17. ahref=/index.php会员中心| 18. ahref=/edit_fullinfo.php资料| 19. ahref=空间| 20. ahref=/index_do.php?fmdo=login&dopost=exit退出登录 21. 22. 将上面的代码修改为：1. 2. 3. ahref=/index.phpimgsrc=width=20height=20/4. 你好：M_UserName;?，欢迎登录 5. ahref=/index.php会员中心| 6. ahref=空间| 7. ahref=/article_add.php发表文章| 8. ahref=/edit_fullinfo.php资料| 9. ahref=/index_do.php?fmdo=login&dopost=exit退出登录 10. 11. 12. 为了节约时间，在这里我用表格修改了一下，站长朋友们可以自己修改下CSS样式，此样式文件为templetsdefaultstylepage.css。再次查看前台：效果还不错，不满意大家自己动手写样式。呵呵，下一讲我们讲LOGO与横幅广告。织梦仿站系列教程第八讲通用头部（四）LOGO与BANNER这一讲内容不多，很轻松就可以学好并完成它。首页是LOGO，查看head.htm里的LOGO代码：1. 2. 3. 替换成织梦的LOGO代码：1. 2. 3. 代码解释：dede:global.cfg_templets_skin/ 是默认模板的目录，当前即empletsfuxing5。dede:global.cfg_basehost/ 已解释过了，参看第五讲：织梦仿站系列教程第五讲通用头部（一）可以看到以上两段代码中，LOGO图片地址代码相同，这主要是因为我们在第三讲：织梦仿站系列教程第三讲路径问题 中修改过了。下面修改BANNER广告代码，首先查看拳击在线，LOGO右边第一个BANNER是图片广告，通过查看图片属性，我们得到了此广告位的宽度为468，高度为60。第二个广告位不能通过此方法，可以通过截图工具，但不太准确；也可以通过查看CSS样式才得到宽高。我们查看下head.htm代码，看到第二个广告位的CSS标记名为ssyg_r，我们以此为关键词，搜索CSS文件css.css。得到其宽度为264，高度为62，除去边框，高度为60，宽度为262。得到宽度和高度后，我们可以添加广告位了。具体步骤如下：1、进入后台，依次点击模块-广告管理-增加一个新的广告；2、照下图输入参数：广告位标识可以随意填写，但须符合后面的规则，此处我们是以图片广告为例，至于广告的详细操作，我们会以后专门讲解。点击确定以后，再点击代码，如下图：得到两种调用方式：织梦CMS标签调用代码1. dede:myadname=banner/JS调用代码1. 2. 两者的区别是：织梦CMS标签调用代码每次修改都需要生成静态页才可以看到效果，而JS则不需要再次生成静态页。此教程我们选择JS调用代码。将上面的JS调用代码覆盖以下代码：1. 查看前台：广告已显示正常。第二个广告参考第一个广告位的制作方法。好了，这一讲结束了。我要休息一下了。下一讲主要讲导航代码，下一讲再见！织梦仿站系列教程第九讲通用头部（五）导航栏今天这一讲，主要讲织梦模板导航栏的制作。首先打开通用头部文件head.htm。找到以下代码：1. 首页2. 拳击新闻3. 文章中心4. 拳击图片5. 拳赛下载6. 拳击视频7. 拳击游戏8. 拳击商城9. 拳迷论坛10. 拳迷家园11. 拳赛直播修改为：1. 首页2. dede:channeltype=toprow=10 3. field:typename/4. /dede:channel代码解释：第2行到第4行，是channel|频道标签。该标签的用法如下：标记简介：织梦常用标记，通常用于网站顶部以获取站点栏目信息，方便网站会员分类浏览整站信息功能说明：用于获取栏目列表适用范围：全局使用基本语法：1. dede:channeltype=toprow=8currentstyle=typename 2. field:typename/3. /dede:channel参数说明：typeid = 0 栏目IDreid = 0 上级栏目IDrow = 100 调用栏目数col = 1 分多少列显示(默认为单列)type = son | sun son表示下级栏目,self表示同级栏目,top顶级栏目currentstyle = 应用样式底层模板字段：ID(同 id),typeid, typelink, typename, typeurl,typedir(仅表示栏目的网址)例：1. dede:channeltype=top 2. field:typename/ 3. /dede:channel注：在没有指定typeid的情况下，type标记与模板的环境有关，如，模板生成到栏目一，那么type=son就表示栏目一的所有子类织梦标签使用手册：/v53/archives/tag/多看看织梦手册，有助于你熟练的应用织梦系统（DEDECMS）。今天这一讲的内容就讲完了，最后加一点，把LOGO修改成福星网络的LOGO。用PS打开templetsfuxing5images目录下的logo.gif，修改一下下，这个就要看你的PS功力了！完成后查看前台：好了，这一讲就结束了，我们下一讲再见。织梦仿站系列教程第十讲通用头部（六）搜索框今天接着上一讲，讲一下搜索框的制作，首先找到head.htm里面拳击在线的搜索代码：1. 2. 站内搜索： 3. 4. 5. 6. 7. 新闻 8. 下载 9. 图库 10. 游戏 11. 视频 12. 商品 13. 文章14. 15. 16. 高级搜索 17. 18. 修改为织梦的搜索框代码：1. 2. 站内搜索： 3. 4. 5. 6. 检索标题7. 智能模糊8. 9. 10. 高级搜索 11. 12. 查看前台，搜索一个关键词测试一下搜索框。输入关键词css，点击搜索按钮，一切正常。再往下看代码，是一个JS文件调用，原来是拳击在线搜索框右部的本站动态滚动，我们把这里改为调用织梦的某个特定的栏目，我们暂定这个栏目的ID为1。先看原来的代码：1. 修改为：1. 2. dede:arclisttypeid=1row=1titlelen=60 3. field:title/4. /dede:arclist 5. 查看前台演示：滚动起来了。呵呵，本节成功结束，庆祝一下。通用头部也就结束了。下一节是讲幻灯片代码呢还是通用底部呢？我要想一想啊！不要猜了，到了下一讲就知道了。:)织梦仿站系列教程第十一讲幻灯片的制作我们还是顺着做吧，这一讲说说幻灯片代码的制作。首先打开index.htm文档，找到幻灯片部分的代码。就是下面这段代码：1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 梅威瑟VS奥提兹纽约召开新闻发布会28号早些时候，保持不败的P4P冠军弗罗伊德.梅威瑟与WBC次中量级冠军维克多.奥提兹在纽约城的胡德逊剧场召开了一场新闻发布会，正式宣布9月17日二人在拉斯维加斯米. 15. 16. 17. 帕奎奥12回合点数完胜莫斯利(附视频)在刚刚结束的一场次中量级拳王争霸战中，“亚洲驱逐舰”帕奎奥十二回合点数完胜三个级别的五度世界拳王“糖块”莫斯利，一边倒的赢得了胜利。. 18. 1