教你如何把切割好的html页面转换成可供DIY的页面.docx
- 文档编号：23960251
- 上传时间：2023-05-22
- 格式：DOCX
- 页数：18
- 大小：1.49MB
教你如何把切割好的html页面转换成可供DIY的页面.docx
《教你如何把切割好的html页面转换成可供DIY的页面.docx》由会员分享，可在线阅读，更多相关《教你如何把切割好的html页面转换成可供DIY的页面.docx（18页珍藏版）》请在冰豆网上搜索。
教你如何把切割好的html页面转换成可供DIY的页面
教你如何把切割好的html页面转换成可供DIY的页面
今天给大家讲讲如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
请跟随教程一步一步操作
以下以家居频道为例为大家讲解
我们常见的切割好的html页面包含这么几个元素
如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
大家看下页面效果
接下来，我们就把这个页面转换成DIY页面
首页我们用编辑工具打开index.html页面
我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除
如下图所示
把系统头部（header）引入进来
引用代码
1
--{subtemplatecommon/header}-->
复制代码
如下图所示
给新的模板起个名字
如下代码
2
--[name]家居频道模板[/name]-->
复制代码
如下图所示
接下来增加可供DIY的CSS样式表
如下代码
3
复制代码
如下图所示
头部
接下来更换底部代码
找到底部代码删除掉换成系统内置的通用底部代码
如下图所示
增加如下代码
4
--{subtemplatecommon/footer}-->
复制代码
如下图所示
到此基本改造完成接下来我们把改造好的文件放在系统目录中去
首先我们把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文件引入样式表文件
代码如下
5
复制代码
如下图所示
同进查找
7
8
9
10
11
12
13
14
15
复制代码
把其中的
16
17
18
19
20
21
22
23
复制代码
换成
24
--[diy=diy1]-->
--[/diy]-->
复制代码
完成后是这个样子
25
26
--[diy=diy1]-->
--[/diy]-->
27
复制代码
其中的[diy=diy1]和divid="diy1"要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是
[diy=diy2]和divid="diy2"或者[diy=home]和divid="home"或者[diy=discuz]和divid="discuz"只要在一个页面内不重复随你怎么写都可以
如下图所示
此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活
此处的结构是这样子的如下图
实现它的代码是这样子的
28
29
玩转极简主义构造冷色系居室空间
30
今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。
玻璃、金属、木质等较能体现简单特性的材质..
31
32
33
34
35
36
37
38
39
40
《公务员财产申报制度》.docx
