DZ论坛DIY模块模板教程.doc-资源下载-咨信网-让知识获取变得高效

DZ论坛DIY模块模板教程.doc

1、DZ论坛DIY模块模板教程在使用DIY过程中的一些技巧与方法仔细阅读，受益匪浅一、如何在模块中增加“标题”及 “更多”的链接如下图样式 2010-9-27 10:02 上传下载附件 (21.58 KB) 方法：通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示 2010-9-27 09:50 上传下载附件 (22.02 KB) 之后点击标题 2010-9-27 09:59 上传下载附件 (2.28 KB) 在弹出的层中可以添加

2、标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小 2010-9-27 10:08 上传下载附件 (9.69 KB) 接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右” 2010-9-27 10:15 上传下载附件 (13.22 KB) 完成，这样框架就有了标题及更多，模块的方法同上二、DIY的模块中如何调整链接的颜色如下图

3、样式 2010-9-27 10:26 上传下载附件 (28.05 KB) 方法：选中要修改的模块，点击编辑，选择数据如下图所示 2010-9-27 10:42 上传下载附件 (20.86 KB) 在弹出层中选择编辑如下图所示 2010-9-27 10:45 上传下载附件 (20.49 KB) 在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作 2010-9-27 12:17 上传下载附件 (15 KB) 完成三、如何在现有的模块中添加新的数据

4、选中要添加数据的模块点击编辑--数据如下图所示在弹出的层中选择任意一条数据点击编辑如下图所示点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示 2010-9-27 12:58 上传下载附件 (15.02 KB) 点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方

5、程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示 2010-9-27 13:15 上传下载附件 (31.44 KB) 如上图所示选择数据来源为“自定义HTML” 一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了如下图所示 2010-9-27 13:21 上传下载附件 (10.65 KB) 完成五、首页多格或首页四格如何DIY出来我们以论坛首页为例（在任何页面都可以）来制作一个首页四格首先在论坛

6、首页拖一个 1:1的框架如下图所示 2010-9-27 13:36 上传下载附件 (47.78 KB) 接下来向已拖好的1-1框架的框架里左侧的1 里面拖入一个1:1的框架如下图所示 2010-9-27 13:41 上传下载附件 (48.89 KB) 接下来向右侧的1里面也拖入一个1:1的框架如下图所示 2010-9-27 13:52 上传下载附件 (41.48 KB) 接下来我们就可以通过拖拽模块到框架中去了 2010-9-27 14:44 上传下载附件 (28.15 KB)

7、此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示 2010-9-27 14:48 上传下载附件 (16.51 KB) 你可以通过不同的模块样式或者CSS来美化这里完成六、如何修改整个模块的链接样式比如下图 2010-9-27 15:04 上传下载附件 (10.25 KB) 方法：选中要编辑的模块，点击编辑--样式进行修改如下图所示 2010-9-27 15:09 上传下载附件 (13.95 KB) 以上修改针对整个模块完成

8、七、如何修改两个模块或两个框架之间的距离如下图样式 2010-9-27 15:45 上传下载附件 (5.19 KB) 选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10 如下图所示 2010-9-27 15:51 上传下载附件 (9.93 KB) 完成后的效果如下图样式 2010-9-27 15:53 上传下载附件 (4.74 KB) 全方位立体式讲解DIY技巧集锦第二弹一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）

9、如下图中的效果如何实现 2010-10-11 09:53 上传下载附件 (5.3 KB) 实现方法：拖一个TAB框架到页面中，点编辑，选择标题如下图所示 2010-10-11 09:53 上传下载附件 (4.01 KB) 在弹出的窗口中选择切换类型如下图所示。 2010-10-11 09:53 上传下载附件 (9.4 KB) 你可以根据你的需要选择是点击还是滑过完成二、在DIY模块中的模块数据中固定是什么意思，如下图 2010-10-11 10:

10、50 上传下载附件 (18.17 KB) 解答：当勾选固定后此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉三、如何实现两个模块中间一条竖线的效果，如下图效果 2010-10-11 15:13 上传下载附件 (19.99 KB) 实现方法选中要操作的DIY模块选择样式如下图所示 2010-10-11 15:41 上传下载附件 (23.98 KB) 在弹出的层中，选择边框的分别设置，在边框的“左” 大小设置为1px，“样式”选择实线

11、颜色”选择灰色，如下图所示 2010-10-11 15:37 上传下载附件 (12.51 KB) 这样设置后我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示 2010-10-11 15:47 上传下载附件 (14.77 KB) 接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层选择“内边距” 点分别设置在“左”中添加10px 2010-10-11 16:17 上传下载附件 (13.06 KB) 调整后如下图所示 2010-10-11 16:20 上传下载附件

12、 (14.98 KB) 大家可以根据实际情况调整内、外边距的大小与边框的设置，灵活使用四、如何将一个文章模块转换为一个帖子模块比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类编辑模块的属性把其中的模块分类进行切换如下图所示 2010-10-11 16:37 上传下载附件 (12.89 KB) 选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改五、如何在模板（官方发布的频道及门户

13、里面插入DIY区域，如下图所示 2010-10-11 17:39 上传下载附件 (454.37 KB) 首先打开模板文件例如亲子模板，打开template\default\portal\list_baby.htm 文件找到这两段代码的之间插入一行代码 1.

复制代码其中 “guanggao” 可以任意取名，注意不可与本模板中其它重名，必须保证唯一性如下图所示 2010-10-1

14、1 17:53 上传下载附件 (7.55 KB) [功能介绍] 教你如何把切割好的html页面转换成可供DIY的页面（高级教程）今天给大家讲讲如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面请跟随教程一步一步操作如有疑问请提出以下以家居频道为例为大家讲解我们常见的切割好的html页面包含这么几个元素如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面 2010-9-26 10:14 上传下载附件 (2.65 KB) 大家看下页面效果 2010-9-26 10:32

15、上传下载附件 (1.61 MB) 接下来，我们就把这个页面转换成DIY页面首页我们用编辑工具打开 index.html页面我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除如下图所示 2010-9-26 10:50 上传下载附件 (79.28 KB) 把系统头部（header）引入进来引用代码 1. 复制代码如下图所示 2010-9-26 10:53 上传下载附件

16、 (14.82 KB) 给新的模板起个名字如下代码 1. 复制代码如下图所示 2010-9-26 11:22 上传下载附件 (15.25 KB) 接下来增加可供DIY的CSS样式表如下代码 1. 复制代码如下图所示 2010-9-26 11:27 上传下载附件 (16.22 KB) 头部接下来更换底部代码找到底部代码删除掉

17、换成系统内置的通用底部代码如下图所示 2010-9-26 11:44 上传下载附件 (22.92 KB) 增加如下代码 1. 复制代码如下图所示 2010-9-26 11:47 上传下载附件 (5.03 KB) 到此基本改造完成接下来我们把改造好的文件放在系统目录中去首先我们把index.html文件改名把index.html改成list_home.htm 此处一定要注意频道模板必须以list_开头，后缀名为.htm

18、把改好名的list_home.htm文件拷贝到 template\default\portal 目录下同时在template\default\portal 目录新建一个home文件夹用来放家居频道的图片及样式表此时复制原来的文件夹 2010-9-26 11:58 上传下载附件 (4.5 KB) 到template\default\portal 目录的home文件夹如下图所示 2010-9-26 13:11 上传下载附件 (7.52 KB) 接下来用编辑器打开list_home.htm文件引入样式表文件代码如

19、下 1. 复制代码如下图所示 2010-9-26 13:20 上传下载附件 (12.99 KB) 同进查找

20、/home/ 这个目录下就可以了接下来我们进入后台创建一个频道模板名选择 “家居频道模板” 如下图 2010-9-26 13:45 上传下载附件 (30.21 KB) 创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成DIY区域用编辑器打开list_home.htm文件大家会看到有类似的如下代码 1.

23、ul> 10.

复制代码把其中的 1.

复制代码换成 1.

25、>

复制代码完成后是这个样子 1.

复制代码其中的 [diy=diy1] 和 div id="diy1" 要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是 [diy=diy2] 和 div id="diy2" 或者 [diy=hom

26、e] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一个页面内不重复随你怎么写都可以如下图所示 2010-9-26 14:15 上传下载附件 (13.47 KB) 此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活此处的结构是这样子的如下图 2010-9-26 14:21 上传下载附件 (17.3 KB) 实现它的代码是这样子的 1.

玩转极简主义构造冷色系居室空间

今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]

30、

13.

14.

复制代码我们可以把整个区域做为一个DIY区域接下来我们进入后台--》门户--》模块模板--》点击添加，这里我们以文章为例，选择文章类进行提交为模板起个名称比如 “首页中间列表” 删除代码框里面的内容拷贝上面的代码进来 1.

玩转极简主义构造冷色系居室空间

31、 3.

今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]

[装修资讯] 七步改造计为夏日客厅换新颜

32、

33、

13.

14.

复制代码如下图所示 2010-9-

34、26 14:31 上传下载附件 (39.54 KB) 接下来把代码框中的代码进行转换把以下代码 1.

玩转极简主义构造冷色系居室空间

今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]

35、"list"> 5.

13.

14.

复制代码改造成如下代码 1.

2. 3. [index=1] 4.

{title}

38、

{summary}[详细]

6. [/index] 7. 8.

[{catname}] {title}

39、

14.

15.

复制代码其中 {title} 表示标题， {url} 表示链接， {target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明其中 [index=1]... [/index]表示第一条数据 1. [index=1] 2.

{title}

{summary}

40、>[详细]

4. [/index] 复制代码其中 [loop]...[/loop] 表示循环 1. [loop] 2.

[{catname}] {title}

3. [/loop] 复制代码现在模块模板就制作完成了接下来我们在频道的前台进行调用在频道的前台页面点DIY 会看到中间部分没有内容会多出一个浅色的条便是DIY区域如下图 2010-9-26 14:

41、53 上传下载附件 (13.36 KB) 我们在DIY区域里面拖入一个100%的框架把标题去掉如下图 2010-9-26 14:56 上传下载附件 (6.87 KB) 接下来选择样式把边框设为0PX ，外边距也设为0PX 如下图 2010-9-26 15:00 上传下载附件 (8.07 KB) 完成后在此框架内拖入一个文章模块并选择刚才创建的模块样式，如下图 2010-9-26 15:04 上传下载附件 (18.15 KB) 完成后选择样式把边框、外边距、内边距都设为0PX

42、如下图 2010-9-26 15:09 上传下载附件 (11.22 KB) 到此模板的制作就完成了，其它内容可仿造以上设置进行制作 [功能介绍] 百变幻灯片，完全DIY（高级教程）在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片请跟随教程从头到尾仔细阅读，你将收获不小第一步制作幻灯片：后台--》门户--》模块模板点击添加按扭如下图所示 2010-9-25 10:48 上传下载附件 (12.23 KB) 此处可以可以选择不同的模块分类如附件类、帖子类、文章类、图片类等等可以根据

43、你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类点提交如下图所示，为新建的模块起个名字如 “百变幻灯片” 把代码框里面的内容全部删除 2010-9-25 10:56 上传下载附件 (27.19 KB) 接下来我们输入代码首先在代码框里面输入 1.

复制代码其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class="slidebox"的属性如下面代码所示，只有包含在有class="slide

44、box"属性的标签里面的内容才是幻灯片，切记如下图所示 2010-9-25 11:07 上传下载附件 (13.58 KB) 接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用属性必须为class="slideshow"的标签 1.

复制代码上面的代码必须放在 class="slidebox"的属性的标签里面上面已经讲过，完整代码如下 1.

2. 3.

4. 5.

45、

复制代码接下来我们来增加“滑动”、“点击”的代码 1.

复制代码上面的代码必须放在 class="slidebox"的属性的标签里面上面已经讲过，完整代码如下 1.

2. 3.

4. 5.

6. 7.

46、复制代码以上代码已完成幻灯片的框架接下来我们为幻灯片添加数据代码在

代码中间插入图片显示代码如下代码 1.

复制代码其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量接下来为图片增加循环代码如下代码 1. [loop] 2.

47、mg src="{pic}" width="{picwidth}" height="{picheight}" /> 3. [/loop] 复制代码完整代码如下 1.

3. [loop] 4.

5. [/loop] 6.

7. 8.

48、 9.

复制代码接下来为滑动条增加数字在

中增加娄字变量如下代码 1.

2. [loop1]{currentorder}[/loop1] 3.

复制代码其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、

49、loop2、loop3 以此类推来实现多处循环的目的最后增加脚本代码如下以下代码放在模块代码的最后 1. 复制代码此时一个简单的幻灯片就完成了，幻灯片的完整代码如下 1.

3. [loop] 4.

5. [/loop] 6.

7. 8.

9. [loop1]{currentorder}[/loop1] 10.

11.

12. 13. 复制代码如下图所示 2010-9-25 12:01 上传下载附件 (16.1

邮箱/手机：
温馨提示：	快捷下载时，用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）。如填写123，账号就是123，密码也是123。
特别说明：	请自助下载，系统不会自动发送文件的哦；如果您已付费，想二次下载，请登录后访问：我的下载记录
支付方式：
验证码：	换一换

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

DZ论坛DIY模块模板教程.doc