Discuz频道首页模板教程Word文件下载.docx
《Discuz频道首页模板教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《Discuz频道首页模板教程Word文件下载.docx（72页珍藏版）》请在冰豆网上搜索。
26上传
下载附件（28.05KB）
选中要修改的模块，点击编辑，选择数据
如下图所示
42上传
下载附件（20.86KB）
在弹出层中选择编辑
45上传
下载附件（20.49KB）
在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作
2010-9-2712:
17上传
下载附件（15KB）
完成
三、如何在现有的模块中添加新的数据
选中要添加数据的模块点击编辑--数据
在弹出的层中选择任意一条数据
点击编辑
点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID来获取数据如下图所示
58上传
下载附件（15.02KB）
点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）
完成
四、DIY时如何调用外部程序的数据
当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据
首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示
2010-9-2713:
下载附件（31.44KB）
如上图所示选择数据来源为“自定义HTML”
一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了
21上传
下载附件（10.65KB）
五、首页多格或首页四格如何DIY出来
我们以论坛首页为例（在任何页面都可以）来制作一个首页四格
首先在论坛首页拖一个1:
1的框架
36上传
下载附件（47.78KB）
接下来向已拖好的1-1框架的框架里左侧的1里面拖入一个1:
1的框架如下图所示
41上传
下载附件（48.89KB）
接下来向右侧的1里面也拖入一个1:
52上传
下载附件（41.48KB）
接下来我们就可以通过拖拽模块到框架中去了
2010-9-2714:
44上传
下载附件（28.15KB）
此时我们可以去掉框架的标题，同时为每一个模块增加一个标题
48上传
下载附件（16.51KB）
你可以通过不同的模块样式或者CSS来美化这里
六、如何修改整个模块的链接样式
比如下图
2010-9-2715:
04上传
下载附件（10.25KB）
选中要编辑的模块
，点击编辑--样式
进行修改如下图所示
09上传
下载附件（13.95KB）
以上修改针对整个模块
七、如何修改两个模块或两个框架之间的距离
如下图样式
下载附件（5.19KB）
选择要编辑的框架或者模块
，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10
51上传
下载附件（9.93KB）
完成后的效果
如下图样式
53上传
下载附件（4.74KB）
全方位立体式讲解DIY技巧集锦第二弹
一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）
如下图中的效果如何实现
2010-10-1109:
下载附件（5.3KB）
实现方法：
拖一个TAB框架到页面中，点编辑，选择标题如下图所示
下载附件（4.01KB）
在弹出的窗口中选择切换类型如下图所示。
下载附件（9.4KB）
你可以根据你的需要选择是点击还是滑过
二、在DIY模块中的模块数据中固定是什么意思，如下图
2010-10-1110:
下载附件（18.17KB）
解答：
当勾选固定后此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉
三、如何实现两个模块中间一条竖线的效果，如下图效果
2010-10-1115:
13上传
下载附件（19.99KB）
实现方法
选中要操作的DIY模块选择样式
如下图所示
下载附件（23.98KB）
在弹出的层中，选择边框的分别设置，在边框的“左”大小设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示
37上传
下载附件（12.51KB）
这样设置后我们就能看到一个边线了
这时你会看到内容与边线挤在了一起
47上传
下载附件（14.77KB）
接下来我们进行调整内边距改变上图中的样式
同理，打开样式编辑层选择“内边距”点分别设置在“左”中添加10px
2010-10-1116:
下载附件（13.06KB）
调整后如下图所示
20上传
下载附件（14.98KB）
大家可以根据实际情况调整内、外边距的大小与边框的设置，灵活使用
四、如何将一个文章模块转换为一个帖子模块
比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类
编辑模块的属性
把其中的模块分类进行切换
下载附件（12.89KB）
选择帖子模块就可以变换
这里要注意
切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改
五、如何在模板（官方发布的频道及门户）里面插入DIY区域
，如下图所示
2010-10-1117:
39上传
下载附件（454.37KB）
首先打开模板文件例如亲子模板，打开template\default\portal\list_baby.htm
文件
找到这两段代码的之间插入一行代码
1.<
!
--[diy=guanggao]-->
<
divid="
guanggao"
class="
area"
>
/div>
--[/diy]-->
复制代码
其中“guanggao”可以任意取名，注意不可与本模板中其它重名，必须保证唯一性如下图所示
下载附件（7.55KB）
教你如何把切割好的html页面转换成可供DIY的页面（高级教程）
天给大家讲讲如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
请跟随教程一步一步操作
如有疑问请提出
以下以家居频道为例为大家讲解
我们常见的切割好的html页面包含这么几个元素
如下图
图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
2010-9-2610:
14上传
下载附件（2.65KB）
大家看下页面效果
32上传
下载附件（1.61MB）
接下来，我们就把这个页面转换成DIY页面
首页我们用编辑工具打开index.html页面
我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除
下载附件（79.28KB）
把系统头部（header）引入进来
引用代码
--{subtemplatecommon/header}-->
下载附件（14.82KB）
给新的模板起个名字
如下代码
--[name]家居频道模板[/name]-->
2010-9-2611:
22上传
下载附件（15.25KB）
接下来增加可供DIY的CSS样式表
styleid="
diy_style"
type="
text/css"
/style>
27上传
下载附件（16.22KB）
头部
接下来更换底部代码
找到底部代码删除掉换成系统内置的通用底部代码
下载附件（22.92KB）
增加如下代码
--{subtemplatecommon/footer}-->
下载附件（5.03KB）
到此基本改造完成接下来我们把改造好的文件放在系统目录中去
首先我们把index.html文件改名
把index.html改成list_home.htm
此处一定要注意
频道模板必须以list_开头，后缀名为.htm
把改好名的list_home.htm文件拷贝到template\default\portal目录下
同时在template\default\portal目录新建一个home文件夹用来放家居频道的图片及样式表
此时复制原来的文件夹
下载附件（4.5KB）
到template\default\portal目录的home文件夹如下图所示
2010-9-2613:
11上传
下载附件（7.52KB）
接下来用编辑器打开list_home.htm文件引入样式表文件
代码如下
linkhref="
$_G['
setting'
]['
csspath'
]template/default/portal/home/style/style.css"
rel="
stylesheet"
/>
下载附件（12.99KB）
同进查找<
imgsrc="
images/
替换成<
template/default/portal/home/images/
把其它用到的图片标签全替换成template/default/portal/home/这个目录下就可以了
接下来我们进入后台创建一个频道
模板名选择“家居频道模板”如下图
下载附件（30.21KB）
创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成DIY区域
用编辑器打开list_home.htm文件
大家会看到有类似的如下代码
divclass="
list"
2.
ul>
3.
li>
ahref="
#"
gray"
[装修资讯]<
/a>
<
七步改造计为夏日客厅换新颜<
/li>
4.
[行业资讯]<
拆改承重墙如同醉驾需缴费<
5.
玩转极简主义构造冷色系居室空间<
6.
[家居风水]<
周星驰于文凤分手防小三家居风水<
7.
小身材大味道边角料再利用<
8.
茶几布局随性设计耐保养<
9.
/ul>
10.
把其中的
2.<
3.<
4.<
5.<
6.<
7.<
8.<
换成
--[diy=diy1]-->
diy1"
完成后是这个样子
其中的[diy=diy1]和divid="
要匹配且在一个页面中不能重复
如果要在第二个区域里面使用的话就应该是
[diy=diy2]和divid="
diy2"
或者
[diy=home]和divid="
home"
[diy=discuz]和divid="
discuz"
只要在一个页面内不重复随你怎么写都可以
2010-9-2614:
下载附件（13.47KB）
此时就完成了占位数据转换成DIY区域的过程
在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活
此处的结构是这样子的
如下图
下载附件（17.3KB）
实现它的代码是这样子的
focus_divfocustoday"
h2>
/h2>
p>
今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。
玻璃、金属、木质等较能体现简单特性的材质..<
[详细]<
/p>
11.
12.
13.
14.
我们可以把整个区域做为一个DIY区域
接下来我们进入后台--》门户--》模块模板--》
点击添加，这里我们以文章为例
，选择文章类进行提交
为模板起个名称
比如
“首页中间列表”
删除代码框里面的内容拷贝上面的代码进来
1.
31上传
下载附件（39.54KB）
接下来把代码框中的代码进行转换
把
以下代码
今夏最流行的设计当属极简主义，色彩也
升级会员 