discuz模版教程Word文件下载.docx
《discuz模版教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《discuz模版教程Word文件下载.docx（50页珍藏版）》请在冰豆网上搜索。
取色器，方便实用，仿站最好工具，需要的请下载！
第二课：
教你如何DIY左边的（郁闷，花了半小时打好的，一卡死得重打，哎，DZ的保存没用的）
效果如下：
=====================================================
第一步：
点击拉好的1:
1红框架的样式，出如如下图：
为了和右边的框架相符合，所以设置了4PX的边线（粉红色的）
外边距为最大化（即是0）
第二步：
拉好幻灯片及主题和分割线（如下图所示）
详细说明1：
幻灯片
外边距为最大化！
为了美观及与周边的框架相对齐，因此设置了非整数。
一定要减-10，否则即便你IE8正常，IE6有可能会将右边的框架顶下去（除非你图片够窄）-10是刚好减到该图片的边缘~
（*注明：
请善用负数来调试在IE6.7.8下对齐的问题，这就是为什么有些新手说在IE8下正常，IE6下错位的了）
详细说明2：
主题调用的样式（请选择好主题+摘要的调用方式）
出现样式后看：
18PX说明主题的标题是18PX大小的字体，颜色是橙色！
全是0是最大化，左是25表示与幻灯片相隔25PX
为了与周边的框架对齐所以设置非整数！
详细说明3：
分割线（如下图）
只是为了与周边框架及上下主题对齐而设置的，你自己看着设吧！
详细说明4：
标题（如下图）
并非是空，不要相信你的眼睛，这一步请参阅第一课的第七步！
完成；
最后点击保存后出现下图一样的效果：
第三课：
教你如何DIY广播台（效果如下）
演示：
第三课开始：
=======================================
先拉好两个框架。
一个100%的一个1:
1的。
将1:
1的框架放入到100%的框架中（如图）
点击打开那个100%框架的样式，出现下图：
这是边框线，请选择1PX。
颜色看自己爱好！
除下边距是10外全为0。
因为要和帖子保持10PX的距离，因此下边距要填10PX。
其它别填！
第三步：
点击1:
1框架的样式，出现下图所示：
就是淡粉红色的边线，要粗一点，所以我设置了4PX。
为何第一个是0边距，其它的是1？
请参阅第一课的第4步！
请看箭头指向的，那就是DIY好后的出现在左边的热点回顾图片背景！
请选为不平铺！
第四步：
看下图，注意看箭头的指向，自己理解其关系！
外边距最大化。
则填0
为何上是10下是0则因为你旁边还有调用帖子，在帖子的内边距下填10即可，不用两边填，所以这是0，上是10PX即是表示和上的边框线保持10PX距离。
左边何是32PX？
是因为左边有个【热点回顾】这个背景图片，所以得设的距离远一点，要不会挡住该背景图片，右为何是-10（负数）请参阅之前讲过的。
不知在哪讲过自己看吧！
第五步：
拉个调用帖子的蓝框到右边的1:
1的红框中，请选回复数调用后点击该样式，如下图所示：
字体大小为14PX（请不要选13PX。
就算选12PX也不要选13PX。
原因是13PX在IE下和14PX差不多，但在IE8下有所不同，为了美观请在12PX或14PX两者间选择）。
最大化则是0
全离10PX。
因为这里不用考虑任何对齐不对齐的问题，只有一个框架。
如何做到请看下一步说明！
第六步：
调用个性化，请看清箭头指向，如图所示：
调用的代码，看不懂，请看图中2的说明！
代码变量说明。
往下拉更多！
在标题前加多个版块名称外加[]括号，这是为了美观！
图中5：
加多几个中文，为了知道这些数字是啥意思。
。
OK。
第三课讲完。
第四课预览，请看下图：
第四课开始：
课前分析：
图中1所示，之前有讲过，在这就不讲了。
这课来讲如何DIY图中2和3~
先拉一个100%的红框架放好。
再拉一个【展示类】--【静态模块】选择【HTML】自己写好HTML代码放入（连HTML都不会你还做什么网站呢？
自己学吧，我就不提供了）
如下图所示：
箭头所指的就是之前已拉好的100%红框体，你无需再拉（下图说明：
无边框线。
框架最大化。
那就是靠最左边的背景图像。
第一步的静态模块设置，如下图：
字体颜色，你只需在链接字体填入字体颜色即可，不用学我哈，我是忘了删除的！
连红，淡灰就行~
左为152，为什么要这么多？
因为左边的背景图片这么宽，所以为了不挡住他才拉这么远。
背景图片，1PX宽的，所以要横向铺平。
看箭头理解！
边框线。
边距。
背景色！
【查看更多】的标题。
标题不是空的，是V+1（智能ABC下打出来的）详情请看之前的课程！
点击后的链接。
查看更多的图标，我这是为了好看才用图标来，你也可以不用这么搞，直接给标题输入查看更多。
但效果不是很好看哈！
是【朋友聊什么】的背景图片。
为不平铺！
搜索群组的代码！
第七步：
搜索的设置，如下图：
外边距为最大化。
内边距上下为10，左28只是为了考虑对齐其周边环境！
请用QQ截图较正！
背景色。
第四课完成。
下一课教大家如何DIY钦州港72泾网【朋友圈子】的【谁是泾男&
泾女】
演示如下图，或点击：
第五课开始：
--------------------------------------======》》
说明一下。
这一节我就不再详细教了，必竟DIY这段比较复杂，除了用到PLUS这个工具外还要插入其它的一些HTML。
不懂HTML的话看也看不懂，所以这一节课我大概分析一下我的框架就OK。
其它的自己去理解！
请看图中标题的数字后再看下面的说明：
图中整体框架：
在3:
1的基础上再放入1:
1的框架，分上下两部份，现在说一下上部份，背景图片为向下平铺！
内外边距要求控制比较麻烦，请用QQ截图正行较正！
那是背景图片~
有图中1一样是标题！
不是标题，而是展示类的静态模版的图片~
HTML~
标题左~
图中6：
标题右~
图中7：
图中8：
图中9：
图中10：
图中11：
图中12：
图中13：
Plus调用~
图中14：
泾女那一段和泾男的一样。
你可以导出红框再导入就OK了。
不用再重D。
完成~~~这一节不细讲哈，重点讲下一节，有朋友点名要讲这一节，以后就不自己在这自言自语了，自己点播吧，去
下一节预览（网友点播），详细教你DIY这一段：
第六课开始：
------------》》
看图，让我们先分析一下框架。
图中所示：
是先放入一个3:
1的框架再放入一个1:
1的框架到左边。
先看左边的，都是重复的。
所以在这我只讲一边。
另一边也是一样的方法。
他们之间的关系如下图所示，我就不多说了~
图文的调用
标题不能太长，20表示10个汉字或20个字母或数字，自己算算能显示多少就填多少！
内容的长度和标度一样，字数不要太多，要不会拉长页面，这样就不美观了。
图片的大小，请根据实际情况设置！
给图片加边框。
注意看图中的下划红线~那就是给图片加边框的，当然这种方法对新手而言较麻烦，您可以用以下这种方法给图片加边框！
style="
padding:
1px;
border:
1pxsolid#CCC;
background:
#FFF;
"
/>
将以上这段代码插入到类似于
<
imgsrc="
{pic}"
width="
{picwidth}"
height="
{picheight}"
在这里空一格，然后将以上代码添加到这。
/这个符号就不要多，一个就好/>
主题调用，在这我说明一下红框中为何是401，其实你可以打一万，官方默认是40的。
所以我加多个1意思是主题显示最长化~~~要不默认40的话，21个汉字时就会显示...（这一招只限主题调用，图文啥的不要这样做，或你把<
li>
换成<
p>
也不要这样做。
第七课预览：
（教您DIY以下内容）--自己动手制作人才频道！
！
按我说的去做你做出来的效果会如下链接过去的演示站一样：
课前准备：
到后台---》【论坛】---》【分类信息】---》添加分类---》取名为【企业招聘】然后给该分类信息取好名称及相应的变量名和类型！
设置好分类信息好将以下代码插入到该分类的【企业招聘-分类信息模块调用显示模板】中
1<
divclass="
moduleclxlxl1"
>
2<
ul>
3<
em>
{dateline}<
/em>
[url]<
FONTcolor=#FB6C03>
b>
在这插入您要调用的变量即可<
/b>
/FONT>
FONTcolor=#23a2c7>
（可在这加上几个字，如招聘：
）然后在这插入您要调用的变量即可[/url]<
/li>
4<
/ul>
5<
/div>
复制代码
后台我就不截图了，对于一位站长而言，你可以不熟悉HTML，也可以不用学什么PHP或啥的鸟东东，但管理后台你一定得熟，假如不知道在哪，我劝你再多多熟悉熟悉一下后台，相对PW8
的后台，DX的后台是很简洁的，我一进去找知道啥东西在哪个位置，而PW8的我每次进去，进了不下N次都长不到东南西北，而且每点一点又重新打开小窗口，很烦，所以你用DX你该谢天谢地
了，要不你去玩下PW的后台试试？
好了，废话话不多说，正式开课……
=================================================================
先拉好一个3:
1的框架，然后在左边的框架中拉入【静态模块】如下图所示：
选择自定义HTML，将以下代码插入！
6<
ahref="
#"
target="
_blank>
您的图片路径"
102"
26"
/a>
&
nbsp;
7<
8<
9<
10<
第一步已拉好了3:
1的框架，你只需再在右边拉入【静态模块】如下图所示：
选择自定义HTML，将您版块的搜索代码插入（在这我就不提供代码了，必竟给你的只能搜索我的版块，你要自己到您分类信息所调用的版块内右键看源码）
再拉一个1:
3的框架，然后在框架的右边拉入【静态模块】选择【分类信息】，再选择您要调用的分类信息，如下图所示：
为背景图片，自己做一个背景图片插入，如下图所示的位置：
左边的【工作职位分类】很简单，用HTML代码实现的，如下图所示：
代码如下：
11<
divstyle="
letter-spacing:
2pt;
line-height:
25px;
12<
P>
Ahref="
target=_blank>
网管/技术/收银<
/A>
/P>
13<
保安/物管/防损<
14<
后勤/文员/仓管<
15<
管理/财务/人事<
16<
销售/业务/市场<
17<
导游/家政/客服<
18<
律师/文案/摄影<
19<
广告/设计/策划<
20<
司机/物流/采购<
21<
报关/单证/贸易<
22<
生产/制造/加工<
23<
百货/连锁/零售<
24<
医疗/生物/化工<
25<
农/林/牧/渔业<
26<
教师/培训/翻译<
27<
美容/美发/保健<
28<
餐饮酒店/服务员<
29<
兼职/其它职位<
30<
和第四步一样的方法！
很多人会想，为什么不在标题前加个小图标就OK了？
为什么要这样？
我曾试过。
在标题前加个小图片会在IE6和IE8下显示将完全不一样。
为了避免错免，只能
采取这小白的方法，当然，你有比我更好的方法请告诉本人，谢谢，一起交流交流DIY！
【个人求职推荐】没啥好说的，就一个主题调用！
完毕！
下课，说得不是很详细，稍懂HTML的人都能做得出，不懂的话我也没办法了。
好好学习，天天DIY~~~
第八课预览：
教您DIY个性的论坛版块，打破DX的默认论坛！
我的DIY心得：
一、再次严重声明：
请在DIY时善用QQ截图功能（请设置您最常用的快键）功能：
可以量像素，对齐边框线，截图等，用处多多！
二、再次重申：
请在调用图片时请在内边距的右边距设置为-10【注：
是负数10，而不是正10】作用：
解决IE8显示正常，IE6下却错位的情况！
三、同第二心得一样，请DIY时要常用到负数来控制边距，这样你的DIY将很完美！
四、发挥您的想像力，用多框架多重组合，没有做不到，只有你想不到！
五、掌握以上四种方法，你将成为DIY达人！
美化主题显示，看图自己理解其中的关化，我之前的课程有说过了！
看图中数字对照以下说明。
字体，即是没有链接的字体大小~
带链接的字体~
最大化就填0~你留空和填0是不同的效果！
内边距，一般设为10。
下是5是因为下边框本身就有默认值~不心过大，设不设都无所谓~但最好设置一下，设小一点就行~
第八步：
会员展示模块。
第九步：
给会员头像加上边框，请参照第四步做法~
第十步：
记得右边距减10，之前有说过，当然你可以不减，你不减我不能保证你在IE6下不会错位。
下一节教你如何DIY人才频道！
（官方没有的哦）该教程请关注三楼！
开始上课，以下全由图文说明，其实光看图片就能会了。
只要你悟性够高，不用看文字都懂了，注意看箭头就OK。
先上我论坛的DIY风格图片演示：
（赏脸的点这里的链接给我送个IP，看真实的演示最好）
图片有点长哈，下面我们先来分析一下DIY制作方法！
看下图！
图一：
分析
图一说明：
1、先看红框框住的，我分析一下！
先拉一个100%的框架，再拉一个1：
1的框架，再拉多一个1：
1的框架放在左边，同样也拉一个1：
1的框架到右边。
这样就形成了四个容器（我也不懂用什么语来表达了，就是可以放四个调用内容的东东，我在这说成容器吧--！
）
2、那个蓝框框住的。
就是上面1所说的100%的框架，拉出来这个后你要再拉多一个100%的框架放进去，然后再继续以上的操作，要不你先拉好的1：
1框架到时再拉100%的架框你很难放对位置，我也不懂怎么说了，放哪个框架先都有讲究，放对了一次性搞定，放不对的你再拉来放，很难放进去。
哈哈，到时你可以试试看。
看图中的框架布置理解吧。
3、那个绿色框架，很简单。
我就不说了。
看图就懂了！
图二：
图片调用设置
图二说明：
1、说一下放幻灯片，先拉【附件模块】放到拉好的四个容器中的第一个里！
拉下后会出现【属性】选择好显示方式为【附件图片幻灯展示】再设置好高宽，为与周边调用协调，所以我设置了图中的宽度好高度，这样才与旁边的对齐，再往下看边框，可以不设置，我习惯设置为0。
你设不设无所谓，不影响。
但像100%框架、1：
1框架，此类框架一定要设置为0，要不就会默认显示边框线！
且还要设置外边距为0（意思为最大化）
2、再补充一点，我想你注意到了，你看到了这图片的样式设置中的【外边距】中的【上】设置为【-1】是负一，你看到这里或许会问：
这是为什么呢？
这个，你可以试下不设置，那样你就和旁边的调用对不齐了，差1PX，肉眼看不出，你要把你的眼球贴到屏幕前才看出来，你可以用QQ截图功能看看（使用方法请参阅我之前的教程）
3、再往下看仔细看教程的人不难发现，【内边距】中的【上】为14？
怎么不是整数10？
或5或别的，怎么偏偏是14？
？
难道楼主喜欢14这数字？
我只能说你不仔细看教程了，请参阅以上说明，为了与周边调用对齐，整体效果！
你又T~M~D【右】设置【-10】负十？
为什么不是正十或0？
我只能说你N~N~D没仔细看我教程，这个请参阅我以上说明，再远点来说请参阅我之前的程程，我就不再解释了！
图三：
帖子调用设置
图三说明：
不好意思，在写说明前发现图片中有遗漏很多，我就用文字说明吧，先说图片上框住的！
1、拉个【帖子模块】到容器2、3、4中，当然一个一个来，设置都是一样的，拉下来时会自动弹出【属性】显示样式中为什么是自定义的？
你会发现你那里没有这个，哈哈，何为【自定义模块】？
就是自己写的喽，请看图中的箭头，看【模块模板】点进去，里面有语法和语句，自己写吧。
我写的只是在原基础上多加了下划虚线，代码如下，你可以直接复制进去就OK了！
3[loop]
style>
5.red-underspanne{
6border-bottom:
dash
升级会员 