您的位置：首页 > Web前端 > HTML

教你如何把切割好的html页面转换成可供DIY的页面（高级教程

2014-02-28 10:25 309 查看

以下以家居频道为例为大家讲解

我们常见的切割好的html页面包含这么几个元素

如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面

[align=left]大家看下页面效果

[/align]

接下来，我们就把这个页面转换成DIY页面

首页我们用编辑工具打开 index.html页面

我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除

如下图所示

把系统头部（header）引入进来

引用代码



复制代码
如下图所示

给新的模板起个名字

如下代码



复制代码
如下图所示

接下来增加可供DIY的CSS样式表

如下代码

<style id="diy_style" type="text/css"></style>

复制代码
如下图所示

头部

接下来更换底部代码

找到底部代码删除掉换成系统内置的通用底部代码

如下图所示

增加如下代码



复制代码
如下图所示

到此基本改造完成接下来我们把改造好的文件放在系统目录中去

首先我们把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文件引入样式表文件

代码如下

<link href="$_G['setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />

复制代码
如下图所示

同进查找<img src="images/ 替换成 <img src="template/default/portal/home/images/

把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了

接下来我们进入后台创建一个频道模板名选择 “家居频道模板” 如下图

创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成DIY区域

用编辑器打开list_home.htm文件  大家会看到有类似的如下代码

<div class="list">

                  <ul>

                     <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>

            </div>

复制代码
把其中的

<ul>

<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>

复制代码
换成

<div id="diy1" class="area"></div>

复制代码
完成后是这个样子

<div class="list">

                  <div id="diy1" class="area"></div>

            </div>

复制代码
其中的 [diy=diy1] 和 div id="diy1"  要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是

[diy=diy2] 和 div id="diy2" 或者  [diy=home] 和 div id="home" 或者  [diy=discuz] 和 div id="discuz" 只要在一个页面内不重复随你怎么写都可以

如下图所示

此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活

此处的结构是这样子的如下图

实现它的代码是这样子的

<div class="focus_div focustoday">

            <h2><a href="#">玩转极简主义构造冷色系居室空间</a></h2>

            <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>

            <div class="list">

                  <ul>

                     <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>

            </div>

         </div>

复制代码
我们可以把整个区域做为一个DIY区域

接下来我们进入后台--》门户--》模块模板--》

点击添加，这里我们以文章为例  ，选择文章类进行提交

为模板起个名称  比如  “首页中间列表”

删除代码框里面的内容拷贝上面的代码进来

  <div class="focus_div focustoday">

            <h2><a href="#">玩转极简主义构造冷色系居室空间</a></h2>

            <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>

            <div class="list">

                  <ul>

                     <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>

            </div>

         </div>

复制代码
如下图所示

接下来把代码框中的代码进行转换

把  以下代码

  <div class="focus_div focustoday">

            <h2><a href="#">玩转极简主义构造冷色系居室空间</a></h2>

            <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>

            <div class="list">

                  <ul>

                     <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>

            </div>

         </div>

复制代码
改造成如下代码

  <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]表示第一条数据

[index=1]

<h2><a href="{url}"{target}>{title}</a></h2>

<p>{summary}<a href="{url}"{target}>[详细]</a></p>

[/index]

复制代码
其中 [loop]...[/loop]  表示循环

[loop]

<li><a href="{caturl}" {target} class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>

[/loop]

复制代码
现在模块模板就制作完成了

接下来我们在频道的前台进行调用

在频道的前台页面点DIY  会看到中间部分没有内容会多出一个浅色的条便是DIY区域  如下图

我们在DIY区域里面拖入一个100%的框架

把标题去掉如下图

接下来选择样式把边框设为0PX ，外边距也设为0PX 如下图

完成后在此框架内拖入一个文章模块并选择刚才创建的模块样式，如下图

完成后选择样式把边框、外边距、内边距都设为0PX 如下图

22.png (11.22 KB, 下载次数: 200)

下载附件保存到相册

2010-9-26 15:09 上传

到此模板的制作就完成了，其它内容可仿造以上设置进行制作

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： discuz html 布局设计 diy

相关文章推荐

新的分享

章节导航