Discuz教程网

[模板制作] discuz x2门户模板制作教程二

[复制链接]
authicon dly 发表于 2012-8-12 15:22:13 | 显示全部楼层 |阅读模式
上次说到门户模板中间的部分,今天说说两天的部分是如何制作的,最终效果如下图
1325299755474.jpg
基本上分为两部分,左边的和右边的,左下部分和右边的又有点大同小异
有过制作经验或者看过首页N格教程的应该都知道左上的图片幻灯是怎么回事,所以这里就不再说明了。
首先我们看标题框架,蓝底加黑色标题,如下图的三个蓝色框
1325299755389.jpg
这里也只是调用了图片,你也可以做成其他的图片上传到空间在这里调用即可
调用方法是。DIY模式下--框架编辑—背景图片,填上你上传到空间的图片地址,选择不平铺。
其实左下部分就是简单的论坛文章调用,选择帖子模块编辑—属性
1325299755948.jpg
1325299755468.jpg
根据你的需要设置各种属性即可。
右边的部分上下两块是一样的,两个帖子模块被静态模块隔开
静态模块同上一期教程的静态模块是一样的,如下图
1325299755145.jpg
然后是调用的图片文章,属性根据你论坛的内容来调用不同版块带图片的文章
1325299755950.jpg
设置好以后在模块模块里粘贴上下面的代码就可以得到如图所示效果

  1. <div class="module cl ml">
  2. <ul>
  3. [loop]
  4. <li style="width:
  5. {picwidth}px;">
  6. <a
  7. href="{url}"><img src="{pic}"
  8. width="{picwidth}" height="{picheight}"
  9. alt="{title}" /></a>
  10. <p><a
  11. href="{url}"
  12. title="{title}"{target}>{title}</a></p>
  13. </li>
  14. [/loop]
  15. </ul>
  16. </div>
复制代码


下面的文章是调用论坛的内容,可以根据模块属性里的主题排序方式选择你想要的排序方式。
这样就完成了效果图左右两部分的设计。
discuz x2门户模板制作教程一
https://www.discuz.1314study.com/thread-76163-1-1.html

相关word教程下载:
游客,如果您要查看本帖隐藏内容请回复




上一篇:discuz x2门户模板制作教程一
下一篇:图文教程手把手教你创建一套完整独立的Discuz X2模版
authicon Rohlan.Biz 发表于 2012-8-13 03:55:12 | 显示全部楼层
这么好的教程,谢谢你
authicon vip丶mace 发表于 2012-8-14 10:07:17 | 显示全部楼层
来看看下不错
authicon vip丶mace 发表于 2012-8-14 10:07:19 | 显示全部楼层
来看看下不错
authicon vip丶mace 发表于 2012-8-14 10:07:19 | 显示全部楼层
来看看下不错
authicon 858067319 发表于 2013-8-22 01:54:55 | 显示全部楼层
discuz x2门户模板制作教程二discuz x2门户模板制作教程二discuz x2门户模板制作教程二
authicon 175487882 发表于 2014-1-12 14:15:13 | 显示全部楼层
好东西好东西好东西好东西
authicon iikk 发表于 2014-2-4 07:30:55 | 显示全部楼层
{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}{:4_225:}
authicon zhoulin 发表于 2014-2-10 13:29:26 | 显示全部楼层
authicon tswangyan 发表于 2015-2-21 17:07:35 | 显示全部楼层
discuz x2门户模板制作教程二
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 03:26

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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