|
|
时间：10月17日晚8：30
主讲：*啊啦哈哩（13607920）
主题：如何使用帝国系统仿你想要的风格
大家好！我是啊啦，第一次讲课，讲得不好大家多包涵！
今天主要是讲看到一个好的风格后如何利用现有的cms把他仿下来！
本来想讲帝国的，不过看到群里很多朋友要DEDE的制作方法，因为我对DEDE的接触不多，第一个接触的就是帝国的，所以就拿帝国的做例子了，
其实基本所有的CMS模版的制作方法都是一样的，只是调用的方式不一样而已，大家用dede,phpcms或是其它的动易，新云等的模版制作方法都是一样的。只要会了其中一种，基本上其它的所有系统都会了。至于不同的就是一些细节和调用方面的问题了。那些就不在今天讨论的范围了，以后有时间再给大家详细讲解！
经常看到有新手朋友要模版，其实做模版很简单的！希望你们听了这课后，能对你们有所帮助！
好了，现在正式开始！首先我们来找个目标！因为准备的有点苍促，所以我们找个简单点的站来做试验！就拿QQ的读书频道吧，布局比较简单，而且有部分地方利用到了DIV+CSS的布局，正好前些天稻草人讲了DIV+CSS的好处，今天正好用到，呵呵，不过出于对新手的考虑我没有选择全DIV+CSS的站来仿！不过只要会仿table表格的了，再来仿div+css的就相对简单多了！
好了，扯远了，我们打开book.qq.com来！大家看到了，他的布局还是比较简洁的，我们先来看看他的源码！有很多朋友可能会直接在网页上点右键然后选查看源代码！我不推荐这种方法，因为如果你点的地方刚好是一个form的话，那就不是整个网页的源码了！所以还是用IE上的查看→源文件来查看！
好了！现在弹出一个记事本，就些代码就是他的首页的源代码了！现在要做的就是把这个代码先保存起来
OK了，然后我再打开Dreamweaver，当然也可以fontpage不过用Dreamweaver的功能和操作性要强些！
现在我们用Dreamweaver把刚刚保存那个源码文件打开！
找到<link href="/css/index910nd.css" rel="stylesheet" type="text/css">这段，这个就是CSS的调用了！到这里，就要用到迅雷或是QQ的超级旋风了，大家可以直接在/css/index910nd.css前面加上http://book.qq.com，然后复制到迅雷里新建任务，然后把http://book.qq.com/css/index910nd.css粘贴到新建任务里，然后下载下来！
再把这个Css文件复制到你的网站目录，比如放在img这个目录下！那么<link href="/css/index910nd.css" rel="stylesheet" type="text/css">这里就要换成<link href="/img/index910nd.css" rel="stylesheet" type="text/css">当然也可以直接新建一个他的目录名css也可以！看个人爱好了！只要记得放到其它目录下的时候，要把路径改对就行了！
OK了，这样，他的css样式表我们就下载下来了！下面就再到book.qq.com上，再次用到迅雷！在网页的空白处点右键，选用迅雷下载全部链接！这样就会看到这个页面上所有的链接都可以被下载，当然也包括图片啦！前面提到的css也可以在这里下载，当然我们不是要他的全部链接，这时就要用到筛选功能了，点筛选按钮，在弹出的对话框里把不要的都去掉！左边是链接的来源，右边是文件的扩展名。这里我只要book.qq.com这个毒命的图片，所以把其它不要的都去掉！左边只留下book.qq.com，右边只留下gif就可以了！点确定。就开始下载了！再把下载的图片全部弄到你的网站目录下，这里就用img目录，好了，第一步已经基本完成了！
现在开始进行深加工，回到Dreamweaver，打开刚刚保存的源码，把图片的路径全部更正，比如book.qq.com上的图片目录是images/img910/,我们就把他全改成自己的目录，我用的是img就全改成/img/124.gif的形式，路径一定要做好！再保存下，在DW里预览下，快捷键是F12，看看跟book.qq.com是不是一模一样了，如果还有部分图片不显示。或是某个表格的背景不一样，那就是用了背景图片，在源代码里找到，并把它下载下来放到网站的图片目录，这个就要自己细心了，就这样一直检查到跟模仿页面完全一致为止，这里建议新手在操作这步的时候先把代码备份一下，要不到时候改错了，就前功尽弃了。
然后把代码里面调用的代码全去掉！像script语句，iframe语句全给他去掉！去完后，再保存下，在DW里预览下，看看页面的整体布局有没有变动，如有变动，就恢复到初始，然后再检查是哪里出错，这里就不细说了！跟前面一样，直到跟模仿页面完全一致为止！好了，做完这步你就已经完成一半了！
现在要做的就是到帝国系统里把调用的标签引入进来就可以了！
因为大家用的系统都不一样，为了照顾到大部分的朋友！我这里就不细说帝国的是如何调用了！至于详细的调用可以到官方去查找，那边都有很详细的说明了！
今天我就拿调用文章列表来做试验！首先在模版上找到你要调用文章列表的地方，比如调用文章排行，那就把相应调用的地方先清理出来！比如QQ的这个
发图
像这个，我们就先找到这个表格所在的位置！在dw里查找关键字喜欢你，OK，找到后会看到很多代码，到这里很多新手朋友都不知道做了，其实很简单！因为在html代码都是一一对应的，比如<td>就一定有个对应的</td>来结束！所以知道这点了就好办了！我们先来看看他的代码
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">周排行</td>
<td width="7" background="http://mat1.qq.com/book/images/img910/bookc27.gif"></td>
</tr>
</table>
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="197" align="left" class="paddind6 fontl22"><table width="174" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" class="paddind6 fontl22">
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/274/index.htm">喜欢你</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/195/index.htm">逃</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3952/index.htm">旧爱新欢</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/233/index.htm">顽童时代</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3812/index.htm">你相信婚姻能拯救吗</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1679/index.htm">职场红楼</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/241/index.htm">白色魔力</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1685/index.htm">玩转三十六计</a><br>
</td></tr></table>
</td>
</tr>
</table>
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25" height="21" background="http://mat1.qq.com/book/images/img910/bookc25.gif"></td>
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">月排行</td>
这里就要找到一个目标代码区，我们选择周排行到月排行之间的这段代码，再来看看如何清掉无用代码而换上我们自己的调用代码！
而在上面的代码中我们可以看到他的文章列表并没有使用html里的表格，所以就好办了！
直接把
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/274/index.htm">喜欢你</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/195/index.htm">逃</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3952/index.htm">旧爱新欢</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/233/index.htm">顽童时代</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/3812/index.htm">你相信婚姻能拯救吗</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1679/index.htm">职场红楼</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/241/index.htm">白色魔力</a><br>
·<a target="_blank" class="blackrednl" href="http://lianzai.book.qq.com/book/1685/index.htm">玩转三十六计</a><br>
这段删掉，然后换上自己的调用代码！就OK了！
这里就用帝国来举例！用帝国的话，建议大家多用万能标签，可以实现很多功能！
好了，他那是周排行！因为我对帝国也不太了解，就用热门排行来代替吧！
这样，修改后的代码就是
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">周排行</td>
<td width="7" background="http://mat1.qq.com/book/images/img910/bookc27.gif"></td>
</tr>
</table>
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="197" align="left" class="paddind6 fontl22"><table width="174" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" class="paddind6 fontl22"> [ecmsinfo]32,10,24,0,1,20,0[/ecmsinfo]
</td></tr></table>
</td>
</tr>
</table>
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25" height="21" background="http://mat1.qq.com/book/images/img910/bookc25.gif"></td>
<td width="142" align="left" valign="bottom" background="http://mat1.qq.com/book/images/img910/bookc26.gif" class="fontbold">月排行</td>
其中，[ecmsinfo]32,10,24,0,1,20,0[/ecmsinfo]这段代码是意思是，调用栏目ID为32下的10篇文章，文章标题为24个字符（英文），不显示栏目名，显示类型为热门文章，调用的是ID为20的模版，显示所有文章！
下面就来看看如果文章调用方面出现了<td>之类的代码，如何把不要的代码清除！因为很多新手朋友不知道怎么判断哪些能删哪些不能删而导致进行代码删减后网页布局混乱！
这里就拿这个来做为例子吧，请大家看图
发图2
好了，我们再来分析一下他的源代码，取调用的第一个文章标题前面的<table代码开始！
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11405/index.shtml">开往侏罗纪的浪漫</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11363/index.shtml">快乐男声：飞越城堡</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11381/index.shtml">女人的私人故事：出轨</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11360/index.shtml">阴谋毁灭的眷恋：绝恋</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11332/index.shtml">花与爱丽丝：忽而今夏</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11335/index.shtml">一直孤单：OL单身日记</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11327/index.shtml">空事：性与爱的追逐</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11295/index.shtml">饶雪漫青春系列：甜酸</a>
</td></tr>
<tr><td width="171" align="left" class="fontl24">
·<a target="_blank" class="blackrednl" href="http://book.qq.com/s/book/0/11/11308/index.shtml">安妮宝贝：素年锦时</a>
</td></tr>
</table>
从这段代码里，我们可以发现每个文章标题前面都有<tr><td width="171" align="left" class="fontl24">这段，而在标题结尾处也有</td></tr>这段。这样前面提到的<tr>和</tr>，<td>和</td>相对应的关系就存在！那么就可以断定关键代码为
<tr><td width="171" align="left" class="fontl24">调用标签</td></tr>
OK了，基本上做模版就大概这样！其它的都需要大家去多多实践了！这里感谢站友群bbs.foradmin.com，感觉KING提供这么好的机会给我学习交流！欢迎大家多多光顾！
好了，今天的课就到这里，希望大家都能做出属于自己的风格。呵呵！
原贴来自：站友网：http://www.foradmin.com/html/46/t-1146.html |
|
发表于 2007-11-15 23:29:23
提升卡
沉默卡
变色卡