程序架构

当前位置/ 首页/ 程序架构/ 正文

phpwind9.0门户开发教程(五):格子铺的制作流程演示DEMO


本节将以导入模式制作一个完整的自定义页面
 
一:用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/>是否可用,不勾先,模版里的这三个标签将无使用效果

三、以门户设计权限的帐号(注意不一定是用户组的管理员)登陆并进入刚才创建的页面的编辑模式
四、在顶部工具栏右侧导入之前压缩的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
 

相关热词搜索:phpwind9.0 门户 开发

分享到:

我要评论

微信订阅

打开微信,点击底部的“通讯录”,点击右上角的 “添加” 搜号码 andk_in 或查找公众号 莎龙 即可。