《Discuz之全方位讲解DIY制作教程》由会员分享,可在线阅读,更多相关《Discuz之全方位讲解DIY制作教程(66页珍藏版)》请在金锄头文库上搜索。
1、 .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
2、 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 上传下载附件
3、(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) 点击获取会填充模块内相
4、应的数据字段 (此处的数据字段会根据模块样式的不同有所变化,请注意)完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据 首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示2010-9-27 13:15 上传下载附件 (31.44 KB) 如上图所示 选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了 如下图所示 2010-9-27 13:21 上传下载附件 (10.65 KB) 完成五、首页多格或首页四格如何DIY
5、出来 我们以论坛首页为例 (在任何页面都可以) 来制作一个首页四格首先在论坛首页拖一个 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) 此时我们可以去掉框架的标题 ,同时为
6、每一个模块增加一个标题 如下图所示 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) 选择要编辑的框架或者模块,点击编辑-样式 选择外边距,勾选分别设置
7、 ,在右边距中写入合适的数字就可以了 例如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
8、 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) 在弹出的层中 ,选择边框的分别设置 ,
9、在边框的“左” 大小 设置为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) 大家可以根据实际情况调整 内、外边
10、距的大小与边框的设置 ,灵活使用四、如何将一个文章模块转换为一个帖子模块 比如官方提供的门户及频道都是文章类模块 ,我们如何转换为帖子类 编辑模块的属性把其中的模块分类进行切换如下图所示 2010-10-11 16:37 上传下载附件 (12.89 KB) 选择帖子模块就可以变换这里要注意切换之后,原来的模块样式将变成私有的(自定义样式) 修改显示样式只能通过模块模板进行修改 五、如何在模板(官方发布的频道及门户)里面插入DIY区域,如下图所示2010-10-11 17:39 上传下载附件 (454.37 KB) 首先打开 模板文件 例如亲子模板, 打开templatedefaultporta
11、llist_baby.htm文件找到这两段代码的之间插入一行代码 1. 复制代码其中 “guanggao” 可以任意取名,注意 不可与本模板中其它重名,必须保证唯一性 如下图所示 2010-10-11 17:53 上传下载附件 (7.55 KB) 完成教你如何把切割好的html页面转换成可供DIY的页面(高级教程)天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面请跟随教程一步一步操作如有疑问请提出 以下以家居频道为例为大家讲解我们常见的切割好的html页面包含这么几个元素 如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面2010-9-26
12、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