首页 资讯 电脑入门 操作系统 上网 办公 技巧 硬件 软件 网络 图像 多媒体 程序 数据库 网页网站 网游 安全 加密 企业

巧妙利用帝国cms末班标签制作多样化的栏目导航效果

巧巧电脑网络 2012-02-20     收藏此文 
7新增的带模板的导航标签可以实现 页面模板内容:[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] 列表内容模板(list.var)。利用ecms制作网站,如果在栏目页显示的是当前栏目的导航。

利用ecms制作网站,你都不可避免滴反复修改模板,一旦出现一个小小的不足,修改就要修改全部的模板,这的确是一件非常累人的事情,有没有比较方便的方法呢?答案是肯定的,有,请看下面的文字。

一、使用公共模板变量定义通用部分
一般可建立[!--temp.header--]   ,[!--temp.footer--],[!--temp.sitename--],[!--temp.search--]之类的常用部分。然后在页面需要插入的地方直接插入。好处是修改时只需要修改这个变量,不必每个模板页去都去改。

注意:动态页面,如搜索,评论等不支持公共模板变量

二、网站通用导航(所有一级栏目)
在3.7版本以前,只能手工设定,3.7新增的带模板的导航标签可以实现

页面模板内容:
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

列表内容模板
(list.var)  


<a   href="[!--classurl--]"   title="[!--classname--]">[!--classname--]</a>   |   


标签调用   [showclasstemp]0,标签模板ID,0[/showclasstemp]

注意:如果在栏目页显示的是当前栏目的导航,可以加上单引号'0'——我是这样做的。如果ID号填的是为某个栏目的ID,则为特定栏目的导航

上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图一)

二、还是导航,在大栏目里显示小栏目。和上面差不多,但有点不同,加了个更多的链接

标签调用
[showclasstemp]父栏目ID,标签模板ID,是否显示栏目信息数[/showclasstemp]

页面模板内容:


<div>民间传统</div><div> [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]   <a   href="[!--bclassurl--]">更多&gt;&gt;</a></div>


列表内容模板
(list.var)  


<a   href="[!--classurl--]"   title="[!--classname--]">[!--classname--]</a>   |   


上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图二)

三、导航技巧真多,再告诉你一个用在栏目页和列表页的导航效果

页面调用

<ul   class="column">[showclasstemp]'selfinfo',标签模板ID,0[/showclasstemp]</ul>

页面模板内容:


[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]code]

列表内容模板
(list.var)  
<li><a   href="[!--classurl--]">[!--classname--]</a></li>


为什么要用li呢?主要是方便修改样式,你想让它怎么显示就怎么显示,包括加边框,背景之类的
在你的样式表里这样定义
ul   {
padding:   0;
margin:   0;
}
.column   li   {
width:   49%;
padding:   0px;
margin:   0px;
float:   left;
list-style:   none;
background:   url(icon_li4.gif)   no-repeat   left   center;/*用背景图定义前面的小图标*/
}

这样它显示的就是一行二个栏目,如果是要它显示一行一个,则这样定义
.column   li   {
padding:   0px;
margin:   0px;
list-style:   none;
background:   url(icon_li4.gif)   no-repeat   left   center;/*用背景图定义前面的小图标*/
}
如果要它是横向显示,则可以这样
.column   li   {
padding:   2px   4px;
margin:   0px;
display:   inline;
list-style:   none;
}

上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图三)

四、多用'selfinfo'
在栏目页和列表页,用'selfinfo'代替具体的ID号(你需要特别指定的除外)
[phomenews]、[ecmsinfo]、[phomeautopic]等都可以用这个。

五、善用循环子栏目数据标签   
这个是值得推荐的。像下面的效果图,在以前是需要一个个自己定义,但有了这个标签,我们只需要一个标签调用就可以搞定,而且以后增加、删除子栏目都不需要再手动去改

标签调用:   [listsonclass]'selfinfo',显示条数,标题截取数,是否显示栏目名,操作类型,模板ID,只显示有标题图片[/listsonclass]
页面模板内容:


<div   class="c1">
<div   class="pad-all">
<div   class="title2">【[!--the.classname--]
】</div>
</div>
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
   </ul>
<div   class="more"><a   href="[!--the.classurl--]">更多&gt;&gt;</a></div>
</div>


列表内容模板
(list.var)  


<li><a   href="[!--titleurl--]"   title="[!--oldtitle--]">[!--title--]</a>   <span   class="date">([!--newstime--])</span></li>


上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图四)

"自动化"其实就是'selfinfo'和循环标签,以及带模板的导航标签这三个.....好好利用,可以做出你想要的各种效果,比如现在的站点地图不怎么亲,你就可以结合导航标签来做....开拓你的想像.帝国,一切皆有可能

下面说的就是一些常见问题和网页优化的技巧(个人观点,仅供参考)

六、图片在左,标题和简介在右的类似混排效果
经常有人问帝国怎么实现类似的效果,WC每次都只回答用万能标签...........好人做到底,弄个出来吧

标签调用:   [ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,模板ID,1[/ecmsinfo]

页面模板内容
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

列表内容模板
(list.var)  


<table   cellspacing="0"   cellpadding="0"   width="290"   border="0">
   <tbody>  
<tr>
  <td   width="140"   rowspan="2"   align="center"   heiht="100"><div><a   href="[!--titleurl--]"><img   src="[!--titlepic--]"   art="[!--oldtitle--]"   width="130"   height="92"   /></a></div></td>
  <td   width="210"><a   href="[!--titleurl--]">[!--title--]</a></td>
</tr>
<tr>
  <td><a   href="[!--titleurl--]">[!--smalltext--]</a></td>
</tr>
   </tbody>
</table>


上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图五)

现在DIV+CSS比较流行,说一下用li来做文字标题列表.你不一定非要去用DIV构造网页,因为不是每个人都对这个熟悉,但你不应该放弃用li来做列表........代码会省很多,也很容易控制

标签调用:   <ul>[ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,模板ID,0[/ecmsinfo]</ul>
样式
ul{
padding:0;
margin:0;
}
li{
padding:0px;
margin:0px;
list-style:none;
background:url(icon_li4.gif)no-repeatleftcenter;/*用背景图定义前面的小图标    */
}
ul不放在磁面模板里,主要是为了方便控制不同的显示效果,某部分不同,只需要指定个ID或者class就可以了.这里以带时间的无序列表为例

页面模板内容
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]

列表内容模板
(list.var)  


<li><a   href="[!--titleurl--]"   title="[!--oldtitle--]">[!--title--]</a>   <span   class="date">([!--newstime--])</span></li>


如果是需要时间是放在右侧对齐的,则改为


<span   class="date">([!--newstime--])</span><li><a   href="[!--titleurl--]"   title="[!--oldtitle--]">[!--title--]</a></li>


定义一个样式
.date   {
   float:   right;
}


七、一行二列的比较简单的实现方法(CSS控制)

模板标签和上面说的一样
下面是调用的代码
<table   width="100%"   border="0"   cellspacing="4"   cellpadding="0">
   <tr>
<td   width="27%"   align="center"><div   class="mar-t_s">   <a   href="http://hongxiu.msn.com.cn/a/a/01293/1292849.shtml"><img   src="images/03.jpg"   width="135"   height="90"   /></a>
   <div><a   href="http://hongxiu.msn.com.cn/a/a/01293/1292849.shtml">花花生活圈</a& gt;</div>
</div></td>
<td><ul   class="li_float">[ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,模板 ID,0[/ecmsinfo]</ul></td>
   </tr>
 </table>

ul{
padding:0;
margin:0;
}
.li_float   li{
width:49%;
padding:0px;
margin:0px;
float:left;
list-style:none;
background:url(icon_li4.gif)no-repeatleftcenter;/*用背景图定义前面的小图标    */
}

上面最后说的那个效果如图所示

上传以下图片:
巧妙利用帝国cms末班标签制作多样化的栏目导航效果(图六)

相关文章:标签-->logic-->iterate

Iterate主要用来处理 在页面上输出集合类,集合一般来说是下列之一:1、 java对象的数组2、ArrayList、Vector、HashMap等 具体用法请参考struts文档,这里不作详细介绍现在定义一个class,User.java 把它编译成User.classpackage example; import java.io.Serializable; public final class User implements Serializable {private String name = null。

本类最热图文
Google
巧巧电脑网络编辑信箱  告诉我们您想看的专题或文章