Discuz之全方位讲解DIY制作教程.docVIP

1. 全方位立体式讲解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) 在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小 2010-9-27 10:08 上传下载附件 (9.69 KB) 接下来增加“更多”的链接点击弹出层的添加新标题按扭 如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右” 2010-9-27 10:15 上传下载附件 (13.22 KB) 完成，这样框架就有了标题及更多 ，模块的方法同上 二、DIY的模块中如何调整链接的颜色 如下图样式 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) 完成 三、如何在现有的模块中添加新的数据选中要添加数据的模块 点击编辑-数据如下图所示 在弹出的层中 选择任意一条数据点击编辑如下图所示 点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据 如下图所示 2010-9-27 12:58 上传下载附件 (15.02 KB) 点击获取会填充模块内相应的数据字段 （此处的数据字段会根据模块样式的不同有所变化，请注意）完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据 首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示2010-9-27 13:15 上传下载附件 (31.44 KB) 如上图所示 选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了 如下图所示 2010-9-27 13:21 上传下载附件 (10.65 KB) 完成五、首页多格或首页四格如何DIY出来 我们以论坛首页为例 （在任何页面都可以） 来制作一个首页四格首先在论坛首页拖一个 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) 此时我们可以去掉框架的标题 ，同时为每一个模块增加一个标题 如下图所示 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) 以上修改针对整个模块 完成七、如何修改两个模块或两个框架之间的距离如下图样式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框架如果切换点击方式（鼠标点击与鼠标滑过） 如下图中的效果如何实现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:50 上传下载附件 (18.17 KB) 解答： 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉三、如何实现两个模块中间一条竖线的效果，如下图效果2010-10-11 15:13 上传下载附件 (19.99 KB) 实现方法 选中要操作的DIY模块 选择样式如下图所示2010-10-11 15:41 上传下载附件 (23.98 KB) 在弹出的层中 ，选择边框的分别设置 ，在边框的“左” 大小 设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示2010-10-11 15:37 上传下载附件 (12.51 KB) 这样设置后 我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示2010-10-11 15:47 上传下载附件 (14.77 KB) 接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层 选择“内边距” 点分别设置 在“左”中添加10px2010-10-11 16:17 上传下载附件 (13.06 KB) 调整后如下图所示2010-10-11 16:20 上传下载附件 (14.98 KB) 大家可以根据实际情况调整 内、外边距的大小与边框的设置 ，灵活使用四、如何将一个文章模块转换为一个帖子模块 比如官方提供的门户及频道都是文章类模块 ，我们如何转换为帖子类 编辑模块的属性把其中的模块分类进行切换如下图所示 2010-10-11 16:37 上传下载附件 (12.89 KB) 选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式） 修改显示样式只能通过模块模板进行修改 五、如何在模板（官方发布的频道及门户）里面插入DIY区域，如下图所示2010-10-11 17:39 上传下载附件 (454.37 KB) 首先打开 模板文件 例如亲子模板， 打开templatedefaultportallist_baby.htm文件找到这两段代码的之间插入一行代码 1. 复制代码其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下图所示 2010-10-11 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 上传下载附件 (1.61 MB) 接下来，我们就把这个页面转换成DIY页面首页我们用编辑工具打开 index.html页面我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除如下图所示2010-9-26 10:50 上传下载附件 (79.28 KB) 把系统头部（header）引入进来 引用代码 1. 复制代码如下图所示 2010-9-26 10:53 上传下载附件 (14.82 KB) 给新的模板起个名字 如下代码 1. 复制代码如下图所示2010-9-26 11:22 上传下载附件 (15.25 KB) 接下来增加可供DIY的CSS样式表如下代码 1. 复制代码如下图所示2010-9-26 11:27 上传下载附件 (16.22 KB) 头部接下来更换底部代码找到底部代码删除掉 换成系统内置的通用底部代码 如下图所示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把改好名的list_home.htm文件拷贝到 templatedefaultportal 目录下同时在templatedefaultportal 目录新建一个home文件夹 用来放家居频道的图片及样式表 此时复制 原来的文件夹 2010-9-26 11:58 上传下载附件 (4.5 KB) 到templatedefaultportal 目录的home文件夹 如下图所示 2010-9-26 13:11 上传下载附件 (7.52 KB) 接下来 用编辑器打开list_home.htm文件引入样式表文件代码如下 1. 复制代码如下图所示2010-9-26 13:20 上传下载附件 (12.99 KB) 同进查找img src=images/ 替换成 img src=template/default/portal/home/images/把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了接下来 我们进入后台创建一个频道模板名选择 “家居频道模板” 如下图2010-9-26 13:45 上传下载附件 (30.21 KB) 创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域 用编辑器打开list_home.htm文件大家会看到有类似的如下代码 1. 2. 3. 装修资讯 七步改造计 为夏日客厅换新颜4. 行业资讯 拆改承重墙如同醉驾需缴费5. 装修资讯 玩转极简主义 构造冷色系居室空间6. 家居风水 周星驰于文凤分手 防小三家居风水7. 装修资讯 小身材大味道 边角料再利用8. 装修资讯 茶几布局 随性设计耐保养9. 10. 复制代码把其中的 1. 2. 装修资讯 七步改造计 为夏日客厅换新颜3. 行业资讯 拆改承重墙如同醉驾需缴费4. 装修资讯 玩转极简主义 构造冷色系居室空间5. 家居风水 周星驰于文凤分手 防小三家居风水6. 装修资讯 小身材大味道 边角料再利用7. 装修资讯 茶几布局 随性设计耐保养8. 复制代码换成 1. 复制代码完成后是这个样子 1. 2. 3. 复制代码其中的 diy=diy1 和 div id=diy1要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是 diy=diy2 和 div id=diy2 或者diy=home 和 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. 2. 玩转极简主义 构造冷色系居室空间3. 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细4. 5. 6. 装修资讯 七步改造计 为夏日客厅换新颜7. 行业资讯 拆改承重墙如同醉驾需缴费8. 装修资讯 玩转极简主义 构造冷色系居室空间9. 家居风水 周星驰于文凤分手 防小三家居风水10. 装修资讯 小身材大味道 边角料再利用11. 装修资讯 茶几布局 随性设计耐保养12. 13. 14. 复制代码我们可以把整个区域做为一个DIY区域接下来 我们进入后台-门户-模块模板-点击添加，这里我们以文章为例，选择文章类 进行提交为模板起个名称比如“首页中间列表”删除代码框里面的内容 拷贝上面的代码进来 1. 2. 玩转极简主义 构造冷色系居室空间3. 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细4. 5. 6. 装修资讯 七步改造计 为夏日客厅换新颜7. 行业资讯 拆改承重墙如同醉驾需缴费8. 装修资讯 玩转极简主义 构造冷色系居室空间9. 家居风水 周星驰于文凤分手 防小三家居风水10. 装修资讯 小身材大味道 边角料再利用11. 装修资讯 茶几布局 随性设计耐保养12. 13. 14. 复制代码如下图所示 2010-9-26 14:31 上传下载附件 (39.54 KB) 接下来把代码框中的代码进行转换把以下代码 1. 2. 玩转极简主义 构造冷色系居室空间3. 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细4. 5. 6. 装修资讯 七步改造计 为夏日客厅换新颜7. 行业资讯 拆改承重墙如同醉驾需缴费8. 装修资讯 玩转极简主义 构造冷色系居室空间9. 家居风水 周星驰于文凤分手 防小三家居风水10. 装修资讯 小身材大味道 边角料再利用11. 装修资讯 茶几布局 随性设计耐保养12. 13. 14. 复制代码改造成如下代码 1. 2.3. index=14. title5. summary详细6. /index7.8. 9. 10. loop11. catname title12. /loop13. 14. 15. 复制代码其中 title 表示标题，url 表示 链接，target 表示链接打开的方式，summary表示文章的简介。其它内容请参考说明其中index=1. /index表示第一条数据 1. index=12. title3. summary详细4. /index复制代码其中 loop./loop表示循环 1. loop2. catname title3. /loop复制代码现在模块模板就制作完成了接下来 我们在频道的前台进行调用 在频道的前台页面 点DIY会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域如下图2010-9-26 14: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如下图2010-9-26 15:09 上传下载附件 (11.22 KB) 到此模板的制作就完成了，其它内容可仿造以上设置 进行制作百变幻灯片，完全DIY（高级教程）在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片 请跟随教程从头到尾仔细阅读，你将收获不小第一步制作幻灯片：后台-门户-模块模板点击 添加按扭 如下图所示2010-9-25 10:48 上传下载附件 (12.23 KB) 此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”把代码框里面的内容全部删除 2010-9-25 10:56 上传下载附件 (27.19 KB) 接下来 我们输入代码 首先在代码框里面输入 1. 复制代码其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class=slidebox的属性 如下面代码所示 ，只有包含在有class=slidebox属性的标签里面的内容才是幻灯片 ，切记如下图所示2010-9-25 11:07 上传下载附件 (13.58 KB) 接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用 属性必须为class=slideshow的标签1. 复制代码上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下1. 2.3. 4.5. 复制代码接下来我们来增加“滑动”、“点击”的代码 1. 复制代码上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下1. 2.3. 4.5. 6.7. 复制代码以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 在 代码中间插入图片显示代码如下代码 1. 复制代码其中pic 为图片地址变量， picwidth为图片宽度变量，picheight为图片高度变量接下来为图片增加循环代码 如下代码1. loop2. 3. /loop复制代码完整代码如下1. 2. 3. loop4. 5. /loop6. 7. 8. 9. 复制代码接下来 为滑动条增加数字 在 中增加娄字变量 如下代码1. 2. loop1currentorder/loop13. 复制代码其中currentorder 是当前显示的顺序数字,其中loop1./loop1 为循环，你可能注意到了，这里用了loop1 ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的 最后增加脚本代码 如下以下代码放在模块代码的最后1. 2. runslideshow();3. 复制代码此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下1. 2. 3. loop4. 5. /loop6. 7. 8. 9. loop1currentorder/loop110. 11. 12.13. 14. runslideshow();15. 复制代码如下图所示 2010-9-25 12:01 上传下载附件 (16.18 KB) 此时我们就可以通过前台DIY调用了 如下图所示 调用2010-9-25 13:46 上传下载附件 (13.82 KB) 显示效果2010-9-25 13:46 上传下载附件 (38.19 KB) 至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下 下面讲解一些高级参数 1、滑动条如何控制让用户点击还是滑动 在 中加入参数（鼠标滑动）mevent=mouseover或 （鼠标点击）mevent=click 完整代码如下以下代码实现 点击后变换1. 2. loop1currentorder/loop13. 复制代码2、如何实现上一个 下一个的效果 如下图样式 2010-9-25 12:18 上传下载附件 (759 Bytes) 添加如下代码即可实现1. 2. up3. 4.5. 6. down7. 复制代码标签为 class=slidebarup 的为上一个 标签为class=slidebardown的为下一个3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法在需要展示的地方增加如下代码1