DEDE织梦仿站实例系列教程第一讲——准备工作首先,我们找一个目标网站,以便我们来仿制。
经过福星网络的寻找,确定以拳击在线()为目标站来完成织梦模板的仿制教程。
其次,关于以后教程的一些说明:1、将目标站网页另存为,会得到一个网站,及相关的文件夹。
里面有相关的图片,样式和JS文件。
我们需要将这些文件复制到织梦模板的相关文件夹下。
在这个系列教程中,此文件夹为templets\fuxing5。
2、我们会制作一个通用的头部和底部,以便全站调用。
所以我们会优先制作头部和底部。
3、朋友们需要有HTML知识,还有DIV+CSS的一些知识才行。
4、不断更新。
最后,希望朋友们跟着我们一步一步的做,学会织梦的仿站。
呵呵,别人的教程可是收费的哦!DEDE织梦仿站实例系列教程第二讲——首页框架首先,打开目标站拳击在线(),然后将网页保存到本地。
如图:保存类型选择网页,全部(*.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织梦仿站实例系列教程第四讲——首页页首代码今天,我们接上一讲,继续开始我们的仿站之路。
这一讲分两个部分,第一部分,修改首页的页首代码,即<head></head>之间的代码。
有网页标题title、网页关键字keywords、网页描述description,织梦的这三项是(单指首页):1.<TITLE>{dede:global.cfg_webname/}</TITLE>2.<META content="text/html; charset=gb2312"http-equiv=Content-Type>3.<META name=keywords content={dede:global.cfg_description/}>4.<META name=description content={dede:global.cfg_keywords/}>代码解释:网页标题调用的是网站名称,后台->系统->系统参数设置,如下图所示:网页关键字和网页描述调用的是站点默认关键字和站点描述,后台->系统->系统参数设置。
如下图所示:这一节内容不多,很简单。
大家不要着急,心急吃不了热豆腐。
慢慢来,下一讲我们讲通用头部的制作。
DEDE织梦仿站实例系列教程第五讲——通用头部(一)上一讲修改了页首的代码,这一讲,我们讲通用头部的制作。
首先找到全站共用部分,然后把共用部分放在通用头部head.htm文件中,这样我们可以节省很多的工作量。
开始工作,查找共用部分。
我们打开拳击在线,发现全部共用部分是从最顶部到网站搜索那一行,如图所示:我们在网页代码中查找这一部分代码,将其覆盖到head.htm文件中,替换掉的代码。
查找代码这部分任务,需要有一定的HTML知识了,大家有时间还是要看一些HTML的基础知识。
别忘记了,把共用部分复制到head.htm以后,将index.htm文件中的这部分共用代码用1.{dede:include filename="head.htm"/}来替换。
然后查看一下前台。
如果前台乱了,说明你刚才的步骤出错了,需要重新来过。
如果和第三讲时的效果一样,说明你成功了,可以继续仿站工作了。
查看head.htm代码,可以看到,拳击在线的登陆框是调用一个静态文件loginjs.htm,我们找到这个文件。
在你保存网页文件的目录中,如下图所示:打开后,我们发现,这个是个JS文件,我们将其转化业html文件格式。
这个好多站长工具提供此服务。
将转换后的代码复制到head.htm中,覆盖如下代码:1.<SCRIPT src="{dede:global.cfg_templets_skin/}/images/loginjs.htm"></SCRIPT>接下来就要修改这段代码使之成为织梦的登陆框代码了,这个有点复杂,我们放在下一节单独讲解。
往下走,是加入收藏等链链。
找到下面的代码:1.<DIV class=login_r>2.<A onclick=window.external.addFavorite(location.href,document.title) href="http:///#">加入收藏</A> |3.<A href="/#">设为首页</A> |4.<A href="/e/member/cp/">会员中心</A> |5.<A href="/e/DoInfo/">我要投稿</A> |6.<A href="/e/tool/feedback/?bid=2">联系我们</A> |7.<A href="/e/web/?type=rss2&classid=0">RSS</A>8.</DIV>修改为:1.<DIV class=login_r>2.<A href="javascript:window.external.AddFavorite('{dede:global.cfg_basehost/}','{dede:global.cfg_webname/}')">加入收藏</A> |3.<A href=""onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('{dede:global.cfg_basehost/}');">设为首页</A> |4.<A href="{dede:global.cfg_cmspath/}/member/">会员中心</A> |5.<A href="{dede:global.cfg_cmspath/}/member/article_add.php">我要投稿</A> |6.<A href="#">联系我们</A> |7.<A href="{dede:global.cfg_dataurl/}/rssmap.html">RSS</A>8.</DIV>代码解释:{dede:global.cfg_basehost/} 站点根网址在后台系统->系统参数设置->站点根网址处设置。