设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › Discuz! 交流与讨论 › Discuz!-模板 › 【教程】把写好样式的html文件做成模板文件（高级篇,不 ...
123下一页
返回列表 发新帖

[发布] 【教程】把写好样式的html文件做成模板文件（高级篇,不需要DIY）

[复制链接]
addip 发表于 2012-5-16 17:12:21 | 显示全部楼层 |阅读模式
本帖最后由 addip 于 2012-5-16 17:59 编辑

      教程说明：是把自己设计的模板文件做成DISCUZ模板，官方出一个篇把切好的html做成可供DIY的模板，也很详细！下面就看看把html设计文件做成模板（不可DIY）
     下面先看看可DIY模板和不可DIY模板区别！
     这是在设计时切好的HTML文件代码：
  1. <div class="jrdz_news">
  2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
  3. <ul class="gk">
  4. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
  5. <li class="gkxx">
  6. <dl>
  7. <dt><a href="#">木兰家私创大品</a></dt>
  8. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
  9. </dl>
  10. </li>
  11. </ul>
  12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  13. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
  14. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
  15. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
  16. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
  17. </ul>
  18. </div>
复制代码
  我们先看看DIY模板调用出来的代码：实现同样的功能，下面代码可以看出前面多了好多DIV标签，这些就是在DIY是生成的，感觉页面代码太多，不太好，同时用DIY时也比较慢，每个区域都要去改样式，框架标题等！
  1. <div class="jrdz_news">
  2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
  3. <FONT color=red><!--[diy=diy2]-->
  4. <FONT color=red><div id="diy2" class="area">
  5. <div id="frame2gWzw5" class=" frame move-span cl frame-1">
  6. <div id="frame2gWzw5_left" class="column frame-1-c">
  7. <div id="frame2gWzw5_left_temp" class="move-span temp"></div>
  8. <div id="portal_block_1154" class="block move-span">
  9. <div id="portal_block_1154_content" class="dxb_bc"></FONT></FONT>
  10. <ul class="gk"><li class="img"><a href="http://www.yubeihome.com/thread-6371-1-1.html"><img src="data/attachment/forum/201204/06/22255533wjkwmrc14jp30k.jpg" /></a></li>
  11. <li class="gkxx">
  12. <dl>
  13. <dt><a href="http://www.yubeihome.com/thread-6371-1-1.html">[全国文明创建]渝北区创新“七彩教育” 为孩</a></dt>
  14. <dd>
  15. 华龙网4月5日11时讯（记者杨涛、实习生张灿） 课堂上，老师讲解安全 ...
  16. [<a href="http://www.yubeihome.com/thread-6371-1-1.html">更多</a>]</dd>
  17. </dl>
  18. </li>
  19. </ul>
  20. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  21. <li>·<a href="http://www.yubeihome.com/thread-6370-1-1.html">公益电影《古路》来渝北古路取景 漫</a></li>
  22. <li>·<a href="http://www.yubeihome.com/thread-6366-1-1.html">重庆渝北第三届梨花节昨日开幕</a></li><li>·<a href="http://www.yubeihome.com/thread-6360-1-1.html">渝北启动读书月活动 向社会各界赠送7000余</a></li>
  23. <li>·<a href="http://www.yubeihome.com/thread-6224-1-1.html">热烈祝贺渝北社区入围2012重庆市联网协会优</a></li>
  24. </ul>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
复制代码
这是不用DIY直接高出来代码，和切片好的代码一样！
  1. <div class="jrdz_news">
  2. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
  3. <ul class="gk"><li class="img"><a href="http://www.yubeihome.com/thread-5108-1-1.html"><img src="data/attachment/forum/201202/26/140648abwxloi4xwbfosdy.jpg" /></a></li>
  4. <li class="gkxx">
  5. <dl>
  6. <dt><a href="http://www.yubeihome.com/thread-5108-1-1.html">竹林深处女孩为男孩疗伤 能拍下这瞬间，真是</a></dt>
  7. <dd>
  8. 直接上图，不多说！
  9. [<a href="http://www.yubeihome.com/thread-5108-1-1.html">更多</a>]</dd>
  10. </dl>
  11. </li></ul>
  12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  13. <li>·<a href="http://www.yubeihome.com/thread-6384-1-1.html">黄江陆佰号进口二手车行 销售中高档进口车</a></li>
  14. <li>·<a href="http://www.yubeihome.com/thread-6381-1-1.html">中国援建阿尔巴尼亚地下机库如今已全部报废</a></li>
  15. <li>·<a href="http://www.yubeihome.com/thread-6371-1-1.html">[全国文明创建]渝北区创新“七彩教育” 为孩</a></li>
  16. <li>·<a href="http://www.yubeihome.com/thread-6370-1-1.html">公益电影《古路》来渝北古路取景 漫山红枫若</a></li>
  17. </ul></div>
复制代码
从上面三个代码中可以看出，只有不用DIY调用数据，才能保持和切片的模板代码一致！这样做的目的就是为了少一些不必要的代码，对代码进行合理优化的目的！

下面开始讲如何把切好的HTML文件直接调用数据！

我们常见的切割好的html页面包含这么几个元素
如下图  图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面  



大家看下页面效果


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

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

如下图所示









把系统头部（header）引入进来
  1. <!--{subtemplate common/header}-->
复制代码
如下图所示






给新的模板起个名字

如下代码
  1. <!--[name]家居频道模板[/name]-->
复制代码
如下图所示






接下来更换底部代码  

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

如下图所示









增加如下代码
  1. <!--{subtemplate common/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文件引入样式表文件
  1. <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/ 这个目录下就可以了

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




创建完成后，点击查看 就能看到已与系统完全整合的模板了
用编辑器打开list_home.htm文件  大家会看到有类似的如下代码:
  1. <div class="jrdz_news">
  2. <h3><span>今日大竹</span><a href="#">更多>></a></h3>
  3. <ul class="gk">
  4. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
  5. <li class="gkxx">
  6. <dl>
  7. <dt><a href="#">木兰家私创大品</a></dt>
  8. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
  9. </dl>
  10. </li>
  11. </ul>
  12. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  13. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
  14. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
  15. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
  16. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
  17. </ul>
  18. </div>
复制代码
其中的:
  1. <ul class="gk">
  2. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
  3. <li class="gkxx">
  4. <dl>
  5. <dt><a href="#">木兰家私创大品</a></dt>
  6. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
  7. </dl>
  8. </li>
  9. </ul>
  10. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  11. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
  12. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
  13. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
  14. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
  15. </ul>
复制代码
改造成如下代码：后面需要用到！
  1. <ul class="gk">
  2. [index=1]
  3. <li class="img"><a href="{url}"><img src="{pic}" /></a></li>
  4. <li class="gkxx">
  5. <dl>
  6. <dt><a href="{url}">{title}</a></dt>
  7. <dd>{summary}[<a href="{url}">更多</a>]</dd>
  8. </dl>
  9. </li>
  10. [/index]

  12. </ul>
  13. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  14. [loop]
  15. <li>·<a href="{url}">{title}</a></li>
  16. [/loop]

  18. </ul>
复制代码
现在进入后台－－门户－－模块管理－－数据调用：
此处根据自己情况选择所属页面和模块分类


点击添加调用：此处就是DIY时数据一样，设置好后确定！



点击下图中属性



弹出的窗口中选择模块模版，我们把改造后的代码复制进来！



在此处点击下图中内部调用



得到类式如下代码，每加一个调用,block后面的数值不一样！

  1. <!--{block/1204}-->
复制代码

用<!--{block/1204}-->替换切片文件中的如下代码：
  1. <ul class="gk">
  2. <li class="img"><a href="#"><img src="images/hotnews_103.gif" /></a></li>
  3. <li class="gkxx">
  4. <dl>
  5. <dt><a href="#">木兰家私创大品</a></dt>
  6. <dd>木兰家私创大品牌家具最低价~木兰家私创大萨哈克倒萨户口的撒谎卡萨大...[<a href="#">更多</a>]</dd>
  7. </dl>
  8. </li>
  9. </ul>
  10. <ul class="list" style=" border-bottom:1px dashed #CDCCCE;">
  11. <li>·<a href="#">别墅漏水十年维修无果业主怒告开发商管</a></li>
  12. <li>·<a href="#">史上最大退房单:神秘买家退505套房总</a></li>
  13. <li>·<a href="#">爱家家居合同暗藏玄机</a></li>
  14. <li>·<a href="#">定金变身霸王条款 金九楼市凉飕飕</a></li>
  15. </ul>
复制代码
替换后代码如下：

  2. <div class="jrdz_news">
  3. <h3><span>今日渝北</span><a href="#">更多>></a></h3>
  4.          <!--{block/1204}-->
  5. </div>


复制代码
更新缓存，得到最后效果！


     演示站点：http://www.yubeihome.com
                       http://www.yb630.com



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

 楼主| addip 发表于 2012-5-16 18:02:53 | 显示全部楼层
可DIY切片html模板教程：https://discuz.dismall.com/thread-1908115-1-1.html
回复

使用道具 举报

SSAY 发表于 2012-5-16 18:57:17 | 显示全部楼层
真的很不错，值得学习。。。。
回复

使用道具 举报

noobtt 发表于 2012-5-16 19:58:10 | 显示全部楼层
易康论坛前排支持 http://bbs.yeacome.com
回复

使用道具 举报

 楼主| addip 发表于 2012-5-17 11:27:15 | 显示全部楼层
回复

使用道具 举报

 楼主| addip 发表于 2012-5-17 13:54:52 | 显示全部楼层
回复

使用道具 举报

很久以前玩网络 发表于 2012-5-17 16:02:36 | 显示全部楼层
很不错的哦。很有灵感哇
回复

使用道具 举报

蓝猫归来 发表于 2012-5-17 21:28:10 | 显示全部楼层
虽然没看懂，但是表示很给力
回复

使用道具 举报

ilei365 发表于 2012-5-17 21:36:39 | 显示全部楼层
很详细的教程，辛苦了。。。。
回复

使用道具 举报

xfl298 发表于 2012-5-17 21:45:09 | 显示全部楼层
楼主搞那么复杂干嘛？你直接说用内部调用模块就可以了。
懂的人早就懂，不懂的人说那么复杂反而更不懂。

这个方法好处是当然，不过不适合转移。
回复

使用道具 举报

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 13:03 , Processed in 0.045077 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表