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

教你如何把切割好的教你如何把切割好的 html 页面转换成可供页面转换成可供 DIY 的页面的页面 今天给大家讲讲 如何把已经切割好的 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 文件 大家会看到有类似的如下代码 装修资讯 七步改造计 为夏日客厅换新颜 行业资讯 拆改承重墙 如同醉驾需缴费 装修资讯 玩转极简主 义 构造冷色系居室空间 家居风水 周星驰于文 凤分手 防小三家居风水 装修资讯 小身材大味 道 边角料再利用 装修资讯 茶几布局 随 性设计耐保养 复制代码 把其中的 装修资讯 七步改造计 为夏日客厅换新颜 行业资讯 拆改承重墙如同醉驾需缴费 装修资讯 玩转极简主义 构造冷色系居室空间 家居风水 周星驰于文凤分手 防小三家居风水 装修资讯 小身材大味道 边角料再利用 装修资讯 茶几布局 随性设计耐保养 复制代码 换成 复制代码 完成后是这个样子 复制代码 其中的 diy diy1 和 div id diy1 要匹配 且 在一个页面中不能重复 如果要在第二 个区域里面使用的话就应该是 diy diy2 和 div id diy2 或者 diy home 和 div id home 或者 diy discuz 和 div id discuz 只要在一个页面内不重复 随你怎么写都可以 如下图所示 此时就完成了占位数据 转换成 DIY 区域的过程 在上面的过程中 这样的替换并不是最优 化的 我们接下来进行改进 让 DIY 更加灵活 此处的结构是这样子的 如下图 实现它的代码是这样子的 玩转极简主义 构造冷色系居室空间 今夏最流行的设计当属极简主义 色彩也从华丽深沉转变为了优雅素净 玻璃 金属 木质等较能体现简单特性的材质 详细 装修资讯 七步改造计 为夏日客厅换新颜 行业资讯 拆改承重墙 如同醉驾需缴费 装修资讯 玩转极简主 义 构造冷色系居室空间 家居风水 周星驰于文 凤分手 防小三家居风水 装修资讯 小身材大味 道 边角料再利用 装修资讯 茶几布局 随 性设计耐保养 复制代码 我们可以把整个区域做为一个 DIY 区域 接下来 我们进入后台 门户 模块模板 点击添加 这里我们以文章为例 选择文章类 进行提交 为模板起个名称 比如 首页中间列表 删除代码框里面的内容 拷贝上面的代码进来 玩转极简主义 构造冷色系居室空间 今夏最流行的设计当属极简主义 色彩也从华丽深沉转变为了优雅素净 玻璃 金属 木质等较能体现简单特性的材质 详细 装修资讯 七步改造计 为夏日客厅换新颜 行业资讯 拆改承重墙 如同醉驾需缴费 装修资讯 玩转极简主 义 构造冷色系居室空间 家居风水 周星驰于文 凤分手 防小三家居风水 装修资讯 小身材大味 道 边角料再利用 装修资讯 茶几布局 随 性设计耐保养 复制代码 如下图所示 接下来把代码框中的代码进行转换 把 以下代码 玩转极简主义 构造冷色系居室空间 今夏最流行的设计当属极简主义 色彩也从华丽深沉转变为了优雅素净 玻璃 金属 木质等较能体现简单特性的材质 详细 装修资讯 七步改造计 为夏日客厅换新颜 行业资讯 拆改承重墙 如同醉驾需缴费 装修资讯 玩转极简主 义 构造冷色系居室空间 家居风水 周星驰于文 凤分手 防小三家居风水 装修资讯 小身材大味 道 边角料再利用 装修资讯 茶几布局 随 性设计耐保养 复制代码 改造成如下代码 index 1 title summary 详细 index loop catname title loop 复制代码 其中 title 表示标题 url 表示 链接 target 表示链接打开的方式 summary 表示文章的简介 其它内容请参考说明 其中 index 1 index 表示第一条数据 index 1 title summary 详细 index 复制代码 其中 loop loop 表示循环 loop catname title loop 复制代码 现在模块模板就制作完成了 接下来 我们在频道的前台进行调用 在频道的前台页面 点 DIY 会看到中间部分没有内容 会多出一个浅色的条 便是 DIY 区 域 如下图 我们在 DIY 区域里面拖入一个 100