教你如何把切割好的html页面转换成可供DIY的页面（高级教程）
今天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面请跟随教程一步一步操作如有疑问请提出
以下以家居频道为例为大家讲解
我们常见的切割好的html页面包含这么几个元素
如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
http://www.discuz.net/data/attachment/forum/201009/26/101432cjeyp2yj5aryeq8e.gif
2010-9-26 10:14 上载
下载附件
(2.65 KB)
大家看下页面效果
http://www.discuz.net/data/attachment/forum/201009/26/103209xai54gg4xs5kgkg5.png.thumb.jpg
2010-9-26 10:32 上载
下载附件
(1.61 MB)
接下来，我们就把这个页面转换成DIY页面
首页我们用编辑工具打开 index.html页面
我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/105000dsqxnyr4zp3qurru.png.thumb.jpg
2010-9-26 10:50 上载
下载附件
(79.28 KB)
把系统头部（header）引入进来
引用代码
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/105333dxxgaagmxouagxu5.png.thumb.jpg
2010-9-26 10:53 上载
下载附件
(14.82 KB)
给新的模板起个名字
如下代码
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/112247kzpzid44kh2ah4zc.png.thumb.jpg
2010-9-26 11:22 上载
下载附件
(15.25 KB)
接下来增加可供DIY的CSS样式表
如下代码
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/112731amcjnjm0b02523pp.png.thumb.jpg
2010-9-26 11:27 上载
下载附件
(16.22 KB)
头部
接下来更换底部代码
找到底部代码删除掉 换成系统内置的通用底部代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/114419r1z4rps8bee4bqs3.png.thumb.jpg
2010-9-26 11:44 上载
下载附件
(22.92 KB)
增加如下代码
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/1147049vlduvd7rg10kr05.png.thumb.jpg
2010-9-26 11:47 上载
下载附件
(5.03 KB)
到此基本改造完成 接下来我们把改造好的文件放在系统目录中去
首先我们把index.html文件改名
把index.html改成list_home.htm 此处一定要注意频道模板必须以list_开头，后缀名为.htm
把改好名的list_home.htm文件拷贝到 template\default\portal 目录下
同时在template\default\portal 目录新建一个home文件夹 用来放家居频道的图片及样式表
此时复制 原来的文件夹
http://www.discuz.net/data/attachment/forum/201009/26/115817eg815ncf8p1lnl93.png
2010-9-26 11:58 上载
下载附件
(4.5 KB)
到template\default\portal 目录的home文件夹 如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/131101y2x5d581xybd4816.png
2010-9-26 13:11 上载
下载附件
(7.52 KB)
接下来 用编辑器打开list_home.htm文件引入样式表文件
代码如下
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/13205864jj9xwv5w36366f.png.thumb.jpg
2010-9-26 13:20 上载
下载附件
(12.99 KB)
同进查找
2010-9-26 13:45 上载
下载附件
(30.21 KB)
创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域
用编辑器打开list_home.htm文件大家会看到有类似的如下代码
[装修资讯] 七步改造计 为夏日客厅换新颜
[行业资讯] 拆改承重墙如同醉驾需缴费
[装修资讯] 玩转极简主义 构造冷色系居室空间
[家居风水] 周星驰于文凤分手 防小三家居风水
[装修资讯] 小身材大味道 边角料再利用
[装修资讯] 茶几布局 随性设计耐保养
复制代码
把其中的
[装修资讯] 七步改造计 为夏日客厅换新颜
[行业资讯] 拆改承重墙如同醉驾需缴费
[装修资讯] 玩转极简主义 构造冷色系居室空间
[家居风水] 周星驰于文凤分手 防小三家居风水
[装修资讯] 小身材大味道 边角料再利用
[装修资讯] 茶几布局 随性设计耐保养
复制代码
换成
复制代码
完成后是这个样子
复制代码
其中的 和 div id="diy1"要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是
和 div id="diy2" 或者 和 div id="home" 或者 和 div id="discuz" 只要在一个页面内不重复 随你怎么写都可以
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/141549pdorooz8lfiszoqx.png.thumb.jpg
2010-9-26 14:15 上载
下载附件
(13.47 KB)
此时就完成了占位数据 转换成DIY区域的过程在上面的过程中 这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活
此处的结构是这样子的如下图
http://www.discuz.net/data/attachment/forum/201009/26/142110vfx1y3y3s7y7asa3.png
2010-9-26 14:21 上载
下载附件
(17.3 KB)
实现它的代码是这样子的
玩转极简主义 构造冷色系居室空间
今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]
[装修资讯] 七步改造计 为夏日客厅换新颜
[行业资讯] 拆改承重墙如同醉驾需缴费
[装修资讯] 玩转极简主义 构造冷色系居室空间
[家居风水] 周星驰于文凤分手 防小三家居风水
[装修资讯] 小身材大味道 边角料再利用
[装修资讯] 茶几布局 随性设计耐保养
复制代码
我们可以把整个区域做为一个DIY区域
接下来 我们进入后台--》门户--》模块模板--》
点击添加，这里我们以文章为例，选择文章类 进行提交
为模板起个名称比如“首页中间列表”
删除代码框里面的内容 拷贝上面的代码进来
玩转极简主义 构造冷色系居室空间
今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]
[装修资讯] 七步改造计 为夏日客厅换新颜
[行业资讯] 拆改承重墙如同醉驾需缴费
[装修资讯] 玩转极简主义 构造冷色系居室空间
[家居风水] 周星驰于文凤分手 防小三家居风水
[装修资讯] 小身材大味道 边角料再利用
[装修资讯] 茶几布局 随性设计耐保养
复制代码
如下图所示
http://www.discuz.net/data/attachment/forum/201009/26/1431075fdggwu445d33b8q.png.thumb.jpg
2010-9-26 14:31 上载
下载附件
(39.54 KB)
接下来把代码框中的代码进行转换
把以下代码
玩转极简主义 构造冷色系居室空间
今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..[详细]
[装修资讯] 七步改造计 为夏日客厅换新颜
[行业资讯] 拆改承重墙如同醉驾需缴费
[装修资讯] 玩转极简主义 构造冷色系居室空间
[家居风水] 周星驰于文凤分手 防小三家居风水
[装修资讯] 小身材大味道 边角料再利用
[装修资讯] 茶几布局 随性设计耐保养
复制代码
改造成如下代码
{title}
{summary}[详细]
[{catname}] {title}
复制代码
其中 {title} 表示标题，{url} 表示 链接，{target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明
其中... 表示第一条数据
{title}
{summary}[详细]
复制代码
其中 ...表示循环
[{catname}] {title}
复制代码
现在模块模板就制作完成了
接下来 我们在频道的前台进行调用
在频道的前台页面 点DIY会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域如下图
http://www.discuz.net/data/attachment/forum/201009/26/145327ps5ygi6ghhyyrzio.png
2010-9-26 14:53 上载
下载附件
(13.36 KB)
我们在DIY区域里面拖入一个100%的框架
把标题去掉如下图
http://www.discuz.net/data/attachment/forum/201009/26/1456477pfqq0ar3pfcaprr.png
2010-9-26 14:56 上载
下载附件
(6.87 KB)
接下来选择样式 把边框设为0PX ，外边距也设为0PX如下图
http://www.discuz.net/data/attachment/forum/201009/26/150019xr787lr70jx784r2.png
2010-9-26 15:00 上载
下载附件
(8.07 KB)
完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式，如下图
http://www.discuz.net/data/attachment/forum/201009/26/150457u6gdgu2e22m2612d.png
2010-9-26 15:04 上载
下载附件
(18.15 KB)
完成后选择样式把边框、外边距、内边距都设为0PX如下图
http://www.discuz.net/data/attachment/forum/201009/26/15091309obbfmlmuf0wzwt.png
2010-9-26 15:09 上载
下载附件
(11.22 KB)
到此模板的制作就完成了，其它内容可仿造以上设置 进行制作
真是太高级了看不下去了 太强大了··········
页:
[1]