今天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
请跟随教程一步一步操作 如有疑问请提出
以下以家居频道为例为大家讲解
我们常见的切割好的html页面包含这么几个元素
如下图 图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
大家看下页面效果
果
接下来,我们就把这个页面转换成DIY页面
首页我们用编辑工具打开 index.html页面
我们为了能够使用统一的头部样式,这里面我们引入系统内置的头部文件(header)把页面中的关于头部的信息删除
如下图所示
把系统头部(header)引入进来
引用代码
如下图所示
给新的模板起个名字
如下代码
如下图所示
接下来增加可供DIY的CSS样式表
如下代码
如下图所示
头部
接下来更换底部代码
找到底部代码删除掉 换成系统内置的通用底部代码
如下图所示
增加如下代码
如下图所示
到此基本改造完成 接下来我们把改造好的文件放在系统目录中去
首先我们把index.html文件改名
把index.html改成list_home.htm 此处一定要注意 频道模板必须以list_开头,后缀名为.htm
把改好名的list_home.htm文件拷贝到 template\default\portal 目录下
同时在template\default\portal 目录新建一个home文件夹 用来放家居频道的图片及样式表
此时复制 原来的文件夹 到template\default\portal 目录的home文件夹 如下图所示
接下来 用编辑器打开list_home.htm文件引入样式表文件
代码如下
如下图所示
同进查找<img src="images/ 替换成 <img src="template/default/portal/home/images/
把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了
接下来 我们进入后台创建一个频道 模板名选择 “家居频道模板” 如下图
创建完成后,点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域
用编辑器打开list_home.htm文件 大家会看到有类似的如下代码
把其中的
- <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
- <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
- <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
- <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
- <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
- <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
- </ul>
复制代码
换成
完成后是这个样子
其中的 [diy=diy1] 和 div id="diy1" 要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是
[diy=diy2] 和 div id="diy2" 或者 [diy=home] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一个页面内不重复 随你怎么写都可以
如下图所示
此时就完成了占位数据 转换成DIY区域的过程 在上面的过程中 这样的替换并不是最优化的,我们接下来进行改进,让DIY更加灵活
此处的结构是这样子的 如下图
实现它的代码是这样子的我们可以把整个区域做为一个DIY区域
接下来 我们进入后台--》门户--》模块模板--》
点击添加,这里我们以文章为例 ,选择文章类 进行提交
为模板起个名称 比如 “首页中间列表”
删除代码框里面的内容 拷贝上面的代码进来如下图所示
接下来把代码框中的代码进行转换
把 以下代码改造成如下代码
<div class="focus_div focustoday">
- [index=1]
- <h2><a href="{url}"{target}>{title}</a></h2>
- <p>{summary}<a href="{url}"{target}>[详细]</a></p>
- [/index]
- <div class="list">
- <ul>
- [loop]
- <li><a href="{caturl}" {target} class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
- [/loop]
- </ul>
- </div>
- </div>
复制代码
其中 {title} 表示标题, {url} 表示 链接, {target} 表示链接打开的方式,{summary}表示文章的简介。其它内容请参考说明
其中 [index=1]... [/index]表示第一条数据其中 [loop]...[/loop] 表示循环
现在模块模板就制作完成了
接下来 我们在频道的前台进行调用
在频道的前台页面 点DIY 会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域 如下图
我们在DIY区域里面拖入一个100%的框架
把标题去掉如下图
接下来选择样式 把边框设为0PX ,外边距也设为0PX 如下图
完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式,如下图
完成后选择样式 把边框、外边距、内边距都设为0PX 如下图
图
到此模板的制作就完成了,其它内容可仿造以上设置 进行制作
延伸阅读:
全方位立体式讲解DIY技巧集锦
http://www.discuz.net/thread-1909461-1-1.html
百变幻灯片,完全DIY(高级教程)
http://www.discuz.net/thread-1906721-1-1.html
教你如何把切割好的html页面转换成可供DIY的页面(高级教程)
http://www.discuz.net/thread-1908115-1-1.html
全方位立体式讲解DIY技巧集锦第二弹
http://www.discuz.net/thread-1925337-1-1.html
轻松运营(1)Discuz!X 1.5二级域名设置
http://www.discuz.net/thread-1879755-1-1.html
Discuz! X1.5运营宝典(二)妙用频道功能,轻松提升媒体价值
http://www.discuz.net/thread-1865090-1-1.html