WCM样例系列－图片新闻(转)

转载

http://iciclefire.itpub.net/post/29987/277451

 

很多网站都有图片新闻，像下图这样。

我用IBM Workplace Web Content Management没事儿闲地做了一个小例子:)

具体实现方法：

1. 新建一个菜单组件
2. "菜单元素查询"部分，通过条件(编写模板、站点区域等)选择想显示的内容
3. 设定一些基本的属性，如排序方式等
4. 代码实现

页眉：

<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>

 

 

本人实践如下附图