教你如何把切割好的html页面转换成可供DIY的页面.docx

1、教你如何把切割好的html页面转换成可供DIY的页面教你如何把切割好的html页面转换成可供DIY的页面今天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面请跟随教程一步一步操作以下以家居频道为例为大家讲解我们常见的切割好的html页面包含这么几个元素如下图 图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面 大家看下页面效果接下来，我们就把这个页面转换成DIY页面 首页我们用编辑工具打开 index.html页面我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除如下图所示把系统头部（head

2、er）引入进来引用代码 1 复制代码如下图所示给新的模板起个名字如下代码 2 复制代码如下图所示接下来增加可供DIY的CSS样式表如下代码 3 复制代码如下图所示头部接下来更换底部代码 找到底部代码删除掉 换成系统内置的通用底部代码 如下图所示增加如下代码 4 复制代码如下图所示到此基本改造完成 接下来我们把改造好的文件放在系统目录中去首先我们把index.html文件改名把index.html改成list_home.htm 此处一定要注意 频道模板必须以list_开头，后缀名为.htm 把改好名的list_home.htm文件拷贝到 templatedefaultportal 目录下 同时在

3、templatedefaultportal 目录新建一个home文件夹 用来放家居频道的图片及样式表此时复制 原来的文件夹 到templatedefaultportal 目录的home文件夹 如下图所示接下来 用编辑器打开list_home.htm文件引入样式表文件代码如下 5 复制代码如下图所示同进查找img src=images/ 替换成 img src=template/default/portal/home/images/把其它用到的图片标签全替换成 template/default/portal/home/ 这个目录下就可以了接下来 我们进入后台创建一个频道 模板名选择 “家居频道模

4、板” 如下图创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域用编辑器打开list_home.htm文件 大家会看到有类似的如下代码 6 7 8 装修资讯 七步改造计 为夏日客厅换新颜9 行业资讯 拆改承重墙如同醉驾需缴费10 装修资讯 玩转极简主义 构造冷色系居室空间11 家居风水 周星驰于文凤分手 防小三家居风水12 装修资讯 小身材大味道 边角料再利用13 装修资讯 茶几布局 随性设计耐保养14 15 复制代码把其中的 16 17 装修资讯 七步改造计 为夏日客厅换新颜18 行业资讯 拆改承重墙如同醉驾需缴费19 装修资讯 玩转极简主

5、义 构造冷色系居室空间20 家居风水 周星驰于文凤分手 防小三家居风水21 装修资讯 小身材大味道 边角料再利用22 装修资讯 茶几布局 随性设计耐保养23 复制代码换成 24 复制代码完成后是这个样子 25 26 27 复制代码其中的 diy=diy1 和 div id=diy1 要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是diy=diy2 和 div id=diy2 或者 diy=home 和 div id=home 或者 diy=discuz 和 div id=discuz 只要在一个页面内不重复 随你怎么写都可以如下图所示此时就完成了占位数据 转换成DIY区

6、域的过程 在上面的过程中 这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活此处的结构是这样子的 如下图实现它的代码是这样子的 28 29 玩转极简主义 构造冷色系居室空间30 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细31 32 33 装修资讯 七步改造计 为夏日客厅换新颜34 行业资讯 拆改承重墙如同醉驾需缴费35 装修资讯 玩转极简主义 构造冷色系居室空间36 家居风水 周星驰于文凤分手 防小三家居风水37 装修资讯 小身材大味道 边角料再利用38 装修资讯 茶几布局 随性设计耐保养39 40 41 复制代码

7、我们可以把整个区域做为一个DIY区域 接下来 我们进入后台-门户-模块模板- 点击添加，这里我们以文章为例 ，选择文章类 进行提交为模板起个名称 比如 “首页中间列表”删除代码框里面的内容 拷贝上面的代码进来 42 43 玩转极简主义 构造冷色系居室空间44 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细45 46 47 装修资讯 七步改造计 为夏日客厅换新颜48 行业资讯 拆改承重墙如同醉驾需缴费49 装修资讯 玩转极简主义 构造冷色系居室空间50 家居风水 周星驰于文凤分手 防小三家居风水51 装修资讯 小身材大味道 边角料再

8、利用52 装修资讯 茶几布局 随性设计耐保养53 54 55 复制代码如下图所示接下来把代码框中的代码进行转换 把 以下代码 56 57 玩转极简主义 构造冷色系居室空间58 今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质.详细59 60 61 装修资讯 七步改造计 为夏日客厅换新颜62 行业资讯 拆改承重墙如同醉驾需缴费63 装修资讯 玩转极简主义 构造冷色系居室空间64 家居风水 周星驰于文凤分手 防小三家居风水65 装修资讯 小身材大味道 边角料再利用66 装修资讯 茶几布局 随性设计耐保养67 68 69 复制代码改造成如下代码

9、 70 71 72 index=173 title74 summary详细75 /index76 77 78 79 loop80 catname title81 /loop82 83 84 复制代码其中 title 表示标题， url 表示 链接， target 表示链接打开的方式，summary表示文章的简介。其它内容请参考说明其中 index=1. /index表示第一条数据 85 index=186 title87 summary详细88 /index复制代码其中 loop./loop 表示循环 89 loop90 catname title91 /loop复制代码现在模块模板就制作完成了接下来 我们在频道的前台进行调用在频道的前台页面 点DIY 会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域 如下图我们在DIY区域里面拖入一个100%的框架把标题去掉如下图接下来选择样式 把边框设为0PX ，外边距也设为0PX 如下图完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式，如下图完成后选择样式 把边框、外边距、内边距都设为0PX 如下图到此模板的制作就完成了，其它内容可仿造以上设置 进行制作