妖巫哥哥
PW官方侠客
PW官方侠客
  • 发帖数184
  • 铜币756两
  • 威望246点
  • 贡献0点
  • 注册日期2012-07-06
  • 最后登录2014-12-31
阅读:33059回复:87

[教程]pw9.0门户开发教程(五):DEMO——格子铺的制作流程

楼主#
更多 发布于:2013-01-08 11:54
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
阅读本节前,请先阅读phpwind9.0门户模版制作教程(四):标签的使用

本节将以导入模式制作一个完整的自定义页面
 

图片:66666.JPG


一:用Dreamweaver打开门户标准模版,如果你还没有,请到懂html就能制作模版——导入方式下载一份
      在index.htm里的“网页设计区域”写上格子铺的静态文件代码,格子铺就两种框:一种是图片,一种是简介,所以只需要定义这两种就可以了,为了在浏览器查看效果,多复制几个.
 
           <!-- 网页设计区域开始 -->
            
            <div class="lattice_list">
                <ul class="cc">

                    <li class="intro">
                        <a href="" target="_blank">
                            <div class="hd">
                                <div class="title">标题标题</div>
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
                        </a>
                    </li>

                    <li class="intro">
                        <a href="" target="_blank">
                            <div class="hd">
                                <div class="title">标题标题</div>
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
                        </a>
                    </li>

                    <li class="intro">
                        <a href="" target="_blank">
                            <div class="hd">
                                <div class="title">标题标题</div>
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
                        </a>
                    </li>
                    

                    
<li class="thumb">
                        <a href="" target="_blank">
                            <div class="hd">            
                                <div class="title">标题标题</div>  
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="bg"></div>
                            <div class="ct"><img src="../images/demo.jpg"></div>
                        </a>
                    </li>

                    <li class="thumb">
                        <a href="" target="_blank">
                            <div class="hd">            
                                <div class="title">标题标题</div>  
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="bg"></div>
                            <div class="ct"><img src="../images/demo.jpg"></div>
                        </a>
                    </li>
                    <li class="intro">
                        <a href="" target="_blank">
                            <div class="hd">
                                <div class="title">标题标题</div>
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
                        </a>
                    </li>

                    <li class="intro">
                        <a href="" target="_blank">
                            <div class="hd">
                                <div class="title">标题标题</div>
                                <div class="time">2012-12-12</div>
                            </div>
                            <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
                        </a>
                    </li>
               <ul>
            </div>

            <!-- 网页设计区域结束 -->
</head>的上面写上CSS样式链接文件,存放在css/style.css里
 
<link href="../css/style.css" rel="stylesheet" />
修改版权文件Manifest.xml文件,写上模板名,你的大名,邮箱等
<?xml
version="1.0" encoding="utf-8" ?>- <manifest>
- <application>
  <name>格子铺</name>   //模板名  
 <alias>lwid_lattice</alias> //模板文件夹,修改为css、template、images目录的上级目录名  
<version>1.0</version>  
<pw-version>9.0</pw-version>  
 <type>style</type>  
<style-type>portal</style-type>  
<description>每一个格子都是一个主题,有图无图都有区别</description> //模版介绍  
<logo>images/preview.jpg</logo> //模板预览图片  
<website />  
<author-name>longwenid</author-name>  //你的大名  
<author-email>longwenid@gmail.com</author-email>  //你的常用邮箱   <author-icon />
  </application>
  </manifest>

浏览器查看效果
二,确定效果后在<ul class="cc">之后加上<pw-list>,  </ul></div><!-- 网页设计区域结束 --> 之前加上</pw-list>
 
<div class="lattice_list">
                 <ul class="cc">
                  <pw-list>
   </pw-list>
      <ul>
             </div>
             <!-- 网页设计区域结束 -->

满意后用压缩软件打包,格式为zip模式,注意,打包的目录为css、template、images目录的上级目录
二,登陆后台,门户->页面管理->自定义页面->添加新页面,创建一个自定义空白页,在创建表单里,
 
附加内容:
站点头部底部页脚面包屑导航
上面三个选择将会影响标准模板中的<pw-head/><pw-navigate/><pw-footer/>是否可用,不勾先,模版里的这三个标签将无使用效果

三、以门户设计权限的帐号(注意不一定是用户组的管理员,具体设置请参考第一节认识pw9的门户)登陆并进入刚才创建的页面的编辑模式
四、在顶部工具栏右侧导入之前压缩的zip文件,如果导入不成功,请检查压缩目录是否正确。
 

图片:7777.JPG





五,鼠标移到格子铺内容的上面,是不是看到了“模块编辑”的图标了?没出现请检查<pw-list></pw-list>是否拼写正确

六、转换静态页为phpwind9.0的动态网页,调用帖子,用户,版块等内容
    1)模块编辑->模板弹窗里是不是看到了被<pw-list></pw-list>包裹的所有html代码了?
    2)添加循环标签:弹窗里确认循环区域,循环开始的地方加上<for:>,结束的地方加上</for>。(弹窗右侧拖拉滚动条可查看标签说明)
    3)添加判断,输出的样式需要有图片时采用图片样式,无图片时采用简介模式,并删除多余的html代码

图片:土地.JPG

完整代码如下:

<for:>
<if:{thumb}>
<li class="intro">
    <a href="" target="_blank">
    <div class="hd">
     <div class="title">标题标题</div>
      <div class="time">2012-12-12</div>
     </div>
    <div class="ct">简介内容简介内容简介内容简介内容简介内容简介内容</div>
       </a>
   </li>
<else:>
  <li class="thumb">
     <a href="" target="_blank">
      <div class="hd">            
          <div class="title">标题标题</div>  
            <div class="time">2012-12-12</div>
        </div>
        <div class="bg"></div>
        <div class="ct"><img src="../images/demo.jpg">  
       </div>
    </a>
   </li>
</if>
</for>
其中<ifXXX>的就是判断标签,具体每个判断标签的用法,可参考本系列教程的最后QA部分
这里使用了一个对值的判断标签<if:{thumb}> 在弹窗右侧的滚动条下有说明:判断某标签为空 <if:标签>...</if>
比如<if:{thumb}> 意思说是如果缩略图存在,如果要判断缩略图不存在(为空)可以用<if:!{thumb}>...</if>
<if:!标签>...</if>
4)修改调用数据时间,标题,图片等为右侧栏的相应标签
<ul class="cc">
<for:>
<if:{thumb}>
<li class="intro">
<a href="{uid}" target="_blank">
<div class="hd">
<div class="title">{title}</div>
<div class="time">{threadTime}</div>
</div>
<div class="ct">
{intro|80}
</div>
</a>
</li>
<else:>
<li class="thumb">
<a href="{uid}" target="_blank">
<div class="hd">
<div class="title">{title|13}</div>
 <div class="time">{threadTime}</div>
</div><div class="bg"></div>
<div class="ct">
<img src="{thumb|220|230}">
</div>
</a>
</li>
</if>
</for>
</ul>
5)多元标签与字符截取
   如上图,{thumb|220|230} 和{title|13}等都使用了属性定义,在phpwind9.0中,任意数据标签都可加“|正整数”来截取长度,当然有些标签截取是没意义的。如前面的{title|10}来表示需要截取10个字

如{thumb|280|100}带两个属性,目前仅用于图片的长宽限制,在phpwind9.0门户系统中,调用的图片都是经过这里定义的长宽截取的,不足大小的会补足大小,所以你可以放心和使用,因为调用的图片就是指定的这么大~~~~~~~
减少很多上下左右基中的CSS和htm代码,为了提高系统性能,图片的缩略为异步缩略
6)数据模型修改与调用条件设置
    提交后在弹窗的"属性"中(帖子数据模型),设置显示条数”为"20"

7)保存当前页面,退出编辑模式,看看效果,~~~~
8)最后,导出模板,分享你的设计~~~~~~zip文件格子铺.zip



 
[妖巫哥哥于2013-01-09 16:52编辑了帖子]
阿牛哥
PW民间侠客
PW民间侠客
  • 发帖数1098
  • 铜币65504两
  • 威望88点
  • 贡献0点
  • 注册日期2010-12-23
  • 最后登录2016-06-13
  • 社区明星
  • 社区居民
  • 忠实会员
沙发#
发布于:2013-01-09 19:40
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
沙发了
yawell
论坛版主
论坛版主
  • 发帖数6777
  • 铜币9352两
  • 威望1068点
  • 贡献473点
  • 注册日期2011-09-03
  • 最后登录2017-06-27
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
板凳#
发布于:2013-01-09 22:15
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
这么好的教材怎么就没人顶呢
abcnic18
四星会员
四星会员
  • 发帖数5503
  • 铜币10142两
  • 威望5458点
  • 贡献0点
  • 注册日期2008-11-25
  • 最后登录2014-12-02
  • 社区居民
  • 忠实会员
  • 最爱沙发
3楼#
发布于:2013-01-10 09:01
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
挺不错的
孙某
一星会员
一星会员
  • 发帖数35
  • 铜币280两
  • 威望31点
  • 贡献0点
  • 注册日期2011-06-29
  • 最后登录2014-09-16
4楼#
发布于:2013-01-10 10:04
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
支持了!留个名儿
duomi524
PW民间侠客
PW民间侠客
  • 发帖数941
  • 铜币6054两
  • 威望8点
  • 贡献0点
  • 注册日期2010-05-10
  • 最后登录2017-09-10
  • 社区居民
  • 忠实会员
5楼#
发布于:2013-01-10 12:47
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
这么好的教材怎么就没人顶呢
sdwf3000
PW moblie内测组
PW moblie内测组
  • 发帖数2052
  • 铜币3032两
  • 威望853点
  • 贡献0点
  • 注册日期2009-01-08
  • 最后登录2015-12-25
  • 最爱沙发
  • 社区明星
  • 忠实会员
  • 社区居民
6楼#
发布于:2013-01-10 14:07
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
先看看,激动一下,慢慢学。
阿wind
一星会员
一星会员
  • 发帖数229
  • 铜币262两
  • 威望15点
  • 贡献0点
  • 注册日期2011-12-10
  • 最后登录2015-04-07
7楼#
发布于:2013-01-10 15:56
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
哎,连下载phpwind9门户标准模版.rar

类型:
售价:0
大小:2KB
下载:0次
描述:
[下载]
的权限都没有,就别说制作格子铺了,让吾等新手和刚准备从DZ转投过来的同志们情以何堪啊
qawx
一星会员
一星会员
  • 发帖数237
  • 铜币217两
  • 威望204点
  • 贡献0点
  • 注册日期2008-03-27
  • 最后登录2013-07-26
  • 社区居民
8楼#
发布于:2013-01-10 16:55
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
好教程就得顶起来
^淡如清风
五星会员
五星会员
  • 发帖数9367
  • 铜币5381两
  • 威望6527点
  • 贡献699点
  • 注册日期2006-07-13
  • 最后登录2016-04-17
  • 社区居民
  • 社区明星
9楼#
发布于:2013-01-11 10:09
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
图片的缩略为异步缩略 @妖巫哥哥 什么时候触发异步缩略
andyli2000
一星会员
一星会员
  • 发帖数62
  • 铜币63两
  • 威望1点
  • 贡献0点
  • 注册日期2010-05-11
  • 最后登录2014-09-10
10楼#
发布于:2013-01-11 10:31
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
不错,顶起来
妖巫哥哥
PW官方侠客
PW官方侠客
  • 发帖数184
  • 铜币756两
  • 威望246点
  • 贡献0点
  • 注册日期2012-07-06
  • 最后登录2014-12-31
11楼#
发布于:2013-01-11 10:44
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
^淡如清风:图片的缩略为异步缩略 @妖巫哥哥 什么时候触发异步缩略回到原帖
异步缩略在第一次展现该图片的时候,成功生成缩略图之后就会直接使用该图片地址
imxcy
一星会员
一星会员
  • 发帖数110
  • 铜币427两
  • 威望30点
  • 贡献0点
  • 注册日期2012-12-26
  • 最后登录2013-04-27
  • 社区居民
12楼#
发布于:2013-01-16 10:16
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
蛮不错的   学习了~~
renlei83624
一星会员
一星会员
  • 发帖数66
  • 铜币363两
  • 威望11点
  • 贡献0点
  • 注册日期2012-05-30
  • 最后登录2014-02-15
13楼#
发布于:2013-01-16 16:40
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
学习中……
wangzi002
禁止发言
禁止发言
  • 发帖数332
  • 铜币565两
  • 威望-123点
  • 贡献0点
  • 注册日期2013-01-02
  • 最后登录2014-07-08
  • 社区居民
14楼#
发布于:2013-01-16 16:41
系统提示:关于phpwind产品的学习与交流已经迁移到阿里云论坛,请访问这里:https://bbs.aliyun.com/fourms.php?m=bbs&cateid=403
用户被禁言,该主题自动屏蔽!
上一页
游客

返回顶部