转载
http://iciclefire.itpub.net/post/29987/277451
很多网站都有图片新闻,像下图这样。
我用IBM Workplace Web Content Management没事儿闲地做了一个小例子:)
具体实现方法:
- 新建一个菜单组件
- "菜单元素查询"部分,通过条件(编写模板、站点区域等)选择想显示的内容
- 设定一些基本的属性,如排序方式等
- 代码实现
页眉:
<table align="center" cellpadding="5" cellspacing="5">
<tr><td colspan="3" height="28" bgcolor="#666666" align="center" valign="bottom"><font color="#ffffff" style="font-size:22px;font-family: 黑体"><b>NBA专题--爵士86-83火箭 精彩图集</b></font></td></tr>
<tr id="pic1" align="center">
</tr>
<tr id="title1" align="center">
</tr>
<tr id="pic2" align="center">
</tr>
<tr id="title2" align="center">
</tr>
<tr id="pic3" align="center">
</tr>
<tr id="title3" align="center">
</tr>
说明:构建整个页面显示的框架。<tr>中的id属性,在后面搜索结果设计的代码中会被引用。
每个菜单搜索结果的设计:
<script language="JavaScript">
<!--
var n = <Placeholder tag="Listnum"/>;
if( n <= 3 )
{
var cellObj = document.getElementById("pic1").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title1").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
if( n > 3 && n <= 6 )
{
var cellObj = document.getElementById("pic2").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title2").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
if( n > 6 && n <= 9 )
{
var cellObj = document.getElementById("pic3").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title3").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
//-->
</script>
说明:这部分代码是由javascript来实现的。代码通过在页眉部分定义的id属性,判断从WCM中读取的内容序列,来确定该条内容(图片或文字)应放在页面框架中的位置。
脚注:
</table>
本人实践如下附图