DIY多格教程!~

一：制作创意三、四格或者多格

展示：


（AD展示：http://bbs.ai021.com）

这个我已经发布了，用户可以在论坛自己找下。
将全面解析这个DIY的制作全过程，让各位站长都了解下原理。

教程随后附上
方法一：
利用DZ论坛自带的模块制作，这个比较有局限性。
第一步:  加入一个 3-1 框架



在3-1的框架里 3比例的那里加入一个 1：1的框架

然后在选框架样式 把边框 间距都设置为0

然后用户可以自己算下
3：1 如果是960px宽度的话
960px除以4等于240px 那就有左边和右边的宽度为 720px 和 240px

我们在3比例这里又加入了一个1：1框架 那就是实际宽度 360px 和 360px

那这个DIY 3个区块的实际大小在 360px 360px 240px
那我们可以往里面添加实际内容了

第一个区块可以放幻灯片
1、选择模块-帖子模块


2、选择要调用的板块数据
显示方式 — 选择幻灯片
缩略图大小 — 按照自己刚才设定的宽度大小设置自己合适的 宽度与高度


3、图片加个边框
这个有2个实现方式
①可以用CSS边框代码实现 这个代码只在图片周围一个边框
②用模块样式里的边框 这个是整个帖子模块的边框

1. padding:1px; border:1px #e4e4e4 solid;

复制代码

padding 内边距 border 边框
代码含义：图片内边距1PX 间隔1个像素  边框1个像素 颜色E4E4E4 实线


4、选择模块样式 把内外边距都设置为0 具体可按照自己的需求设置

幻灯片模块 就完成了 你会发现幻灯片

第二个区块调用3-4条热门或者精华的帖子
我们先来看下第2个区块的结构图


1、添加模块-帖子模块 拖到中间那个位置
2、设置调用参数—显示样式一定要选择帖子图文展示
缩略图大小 按自己设计的设置
调用数量等设置 按自己的需求 自己设置 我不多说了
（说明：帖子图文展示中包含有图片、标题、简介 正好适合我们的设计需求）

3、美化效果
①选择模块模板 里面有代码模式
②写入自己的DIV
可按设计图 代码头部加个图片
如图：

1. width:350px; height:30px; background:url({IMGDIR}/jd.png);

复制代码

div宽度 高度 背景图片
也可用<img src=“”>写个插入图片

内容调用效果
先把单条内容的宽度、高度算出来 图片的大小 最好都算好 记好

写个DIV 是内容调用的整体大小
如：

1. width:350px; height:320px;

复制代码

调用内容的DIV样式—单个调用内容的 宽度、高度 顶部间距 一般写间距最好用内间距 因为用外间距在IE6下容易出现错位

1. width:350px; height:70px; padding-top:20px;

复制代码

图片的DIV—高度 宽度 DIV居左

1. width:110px; height:70px; float:left;

复制代码

标题和简介的DIV—高度 宽度 DIV居右 行距17像素

1. width:230px; height:70px; float:right; line-height:17px;

复制代码

全部的CSS代码

1. .rdjuj {width:350px; height:320px;}
   
2. .rdjuj_t {width:350px; height:30px; background:url({IMGDIR}/jd.png);}
   
3. .rdjuj_dl {width:350px; height:70px; padding-top:20px;}
   
4. .rdjuj_dd {width:110px; height:70px; float:left;}
   
5. .rdjuj_dt {width:230px; height:70px; float:right; line-height:17px;}
   
6. .rdjuj_dt p {padding-top:4px; color:#666;}

复制代码

模块的代码

1. <div class="rdjuj">
   
2. <div class="rdjuj_t"></div>
   
3. [loop]
   
4. <dl class="rdjuj_dl">
   
5. <dd class="rdjuj_dd"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></dd>
   
6. <dt class="rdjuj_dt"><a href="{url}" title="{title}"{target}><b>{title}</b></a><p>{summary}</p></dt>
   
7. </dl>
   
8. [/loop]
   
9. </div>

复制代码

解释下模块的代码：
第一行 DIV 是整体的大小 因为我们要把他控制好 最好写个整体的 也用不了多少代码
第二行 是模块中最上面的一个图片 也就是这个模块的标题
第三行 [loop]是循环的意思 也就是从这里 调用正式开始
第四行 调用内容的一个宽度高度控制 把他限制住
第五行 是调用图片 图片的地址 图片带连接 所有也用到了href 图片的宽度 高度 都是可以设置的 所以使用了{picwidth}和{picheight}代码

下面就是调用标题和帖子的简介
<a href="{url}" title="{title}"{target}><b>{title}</b></a><p>{summary}</p>
标题{title} 连接{url} 打开方式{target}
简介{summary} 因为要在标题下面一行 所以要用<p>来做换行处理
<p>{summary}</p>

这些都OK了 然后把这个模块 样式里设置下 整个模块的内外边距

如果下面有多余的 可以加入一个 展示模块 可以自由发挥

最右边那块最简单了
可以自由发挥
我这里是做了几个图片按钮
你也可以调用帖子== 方法同上
我的方法是：模块 展示模块 HTML 插入一段HTML 就完成了

展示下代码：
模块中的代码

1. <div class="ai_bbs_l">
   
2. <ul>
   
3. <li><img src="http://www.ai021.com/img/dp.png" border="0"></li>
   
4. <li><img src="http://www.ai021.com/img/dh.png" border="0"></li>
   
5. <li><img src="http://www.ai021.com/img/cx.png" border="0"></li>
   
6. <li><img src="http://www.ai021.com/img/dy.png" border="0"></li>
   
7. </ul>
   
8. </div>
   
9. <div><img src="http://www.ai021.com/img/zm.png"></div>

复制代码

CSS代码：
.ai_bbs_l {width:240px; height:220px; background-color:#fff2c2; padding-top:5px;}
.ai_bbs_l ul li{height:55px;}
这个就不多解释了

关注~ 坐等啦~

关注，我也在上海

路过，学习

前排支持

康河娱乐： http://www.yangxi888.com 申请友链

不知道啊，不知道。

坐等直播！