列表模板制作范例

2024-01-27 17:06 小编
实现如下效果:
image.png
1、制作列表模板:使用Dreamweaver制作列表模板
image.png
2. 在制作好的界面加入模板标签及变量:
页面标题变量:[!--pagetitle--],调用位置如下图①③所示;
导航条变量[!--newsnav--]:调用位置如下图②所示。
分页导行(下拉式)变量:[!--show.page--],调用位置如下图⑤所示;
插入列表模板内容变量:即列表页所有信息的显示样式变量,如“<!--list.var1-->(每行显示1条信息)”、“<!--list.var2-->(每行显示2条信息)”等,调用位置如下图④所示。
格式:列表头[!--empirenews.listtemp--]列表内容[!--empirenews.listtemp--]列表尾
图1:设计视图
image.png
图2: 代码模式
image.png
3、制作列表内容模板:即内容变量<!--list.var1-->所显示的内容。代表每条信息的显示样式。
如“·台"金援外交"丑闻涉案人遭到恐吓 警方加强保护 (2008-05-04)”,
该样式包括:标题,发布时间,标题链接三部分,分别对应的变量标签为[!--title--]、[!--newstime--]、[!--titleurl--],
则该信息样式可写为:(Dreamweaver可视化制作)
图1:设计视图
image.png
图2: 代码模式
image.png
4、将制作好的列表模板代码拷贝到系统后台“列表模板”中:
(1)、单击“模板”菜单 》列表模板-“管理列表模板”,选择右侧的默认新闻列表模板,单击“修改”:
image.png
(2)、进入修改默认新闻列表模板界面,将制作好的列表模板代码拷贝进去:
image.png
5、修改模板后,刷新栏目页面,最终列表模板的预览效果:
image.png
5、附上面例子模板代码:
列表页面模板代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>[!--pagetitle--]</title>


<style>

td {font-size: 10pt;line-height: 14pt;}

.line{font-size: 10pt;line-height: 14pt;}

A:link {text-decoration: none; color:#000000}

A:visited {text-decoration: none; color: #000000} 

A:active {text-decoration: underline; color: #000000 } 

A:hover {text-decoration: underline;        color: #FF0000;}

</style>

</head>


<body topmargin="0">

<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">


  <tr>

    <td height="60"> 

      <div align="center"><font size="4"><strong>帝国CMS测试站点</strong></font></div></td>


  </tr>

  <tr>

    <td height="25" bgcolor="#FFFFFF"> 

      <div align="center"><a href="/">网站首页</a> | <a href="/news/china/">国内新闻</a> 

        | <a href="/news/world/">国际新闻</a> | <a href="/news/ent/">娱乐新闻</a> | <a href="/news/sports/">体育新闻</a></div></td>


  </tr>

</table>

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">


  <tr> 

    <td width="50%" height="25">当前位置:[!--newsnav--]</td>

  </tr>

</table>

<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">


  <tr> 

    <td height="23"><a href="/php"><strong>[!--pagetitle--]</strong></a></td>

  </tr>

  <tr> 

    <td bgcolor="#FFFFFF"><br>


<table width="100%" border="0" cellspacing="0" cellpadding="0">

        [!--empirenews.listtemp--] 

        <tr> 

          <td height="23"> 

            <!--list.var1-->


          </td>

        </tr>

        [!--empirenews.listtemp--] 

</table>     

    </td>

  </tr>

  <tr>


    <td height="23" bgcolor="#FFFFFF">[!--show.page--]</td>

  </tr>

</table>

<br>

<table width="700" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#CEEEFB">


  <tr>

    <td height="23">

<div align="center">Powered by <a href="http://www.phome.net">EmpireCMS</a> © 

        2002-2011 Phome.net Corporation<br>


      </div></td>

  </tr>

</table>

</body>

</html>

列表内容模板(list.var) ·<a href="[!--titleurl--]" target="_blank">[!--title--]</a> (<font color="#666666">[!--newstime--]</font>)


Tag: 制作 模板 价格
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码