TRS WCM V6.0 模板制作 北京拓尔思信息技术股份有限公司.

Presentation on theme: "TRS WCM V6.0 模板制作 北京拓尔思信息技术股份有限公司."— Presentation transcript:

1 TRS WCM V6.0 模板制作 北京拓尔思信息技术股份有限公司

2 内容提要 一、TRSWCM概述、模板的作用概述 二、TRSWCM模板置标 三、WCM内模板管理和模板编辑方法
四、Dreamweaver模板编辑插件和模板制作方法 五、常见应用示例模板代码

3 第一章：概述WCM及模板

4 WCM工作原理 数据库服务器，比如Oracle，SQLServer等存储网站数据。 内容协作平台服务器(WCM) 数据存储过程 数据发布过程
网站管理、维护人员通过浏览器访问内容管理平台，进行系统和数据的管理 内容协作平台服务器(WCM) 数据库服务器，比如Oracle，SQLServer等存储网站数据。 数据存储过程 数据发布过程 发布出 静态网页 Web Server 网站的最终用户

5 Web Content Management，WCM
网站建设流程 1，创建站点 3，创建模板(包括概览模板、细览模板），并使用到频道上 创建频道 2，创建频道（多层频道树） 4，网站数据采集、编审 5，网站发布 站点 结构 规划 内容； 风格； 栏目； 页面； Web Content Management，WCM

6 模板 模板的作用 模板的组成 模板的类型 负责页面的显示风格和显示内容 模板由HTML置标和TRS置标组成。（含有TRS置标的HTML文件）
概览模板：主页模板和各栏目的概览模板 细览模板：各栏目的细览模板 嵌套模板：可嵌套的通用模板

7 模板发布原理－数据＋模板 单篇发布 频道发布

8 模板和页面 频道文档列表

9 频道数据、模板、页面的关系 频道 模板 访问用户 Html页 发布

10 第二章：TRSWCM模板置标

11 置标种类 TRS_DOCUMENTS: 文档列表 TRS_RELNEWS: 相关新闻列表 TRS_CHANNELS: 频道列表
TRS_RECORD： 分组显示 概览置标 TRS_DOCUMENT: 文档详细信息（标题、作者、正文、图片…） TRS_CHANNEL: 频道详细信息 TRS_APPENDIX: 文档附件 TRS_CURPAGE: 当前位置 TRS_REPLACE: 替换内容 TRS_DATETIME: 发布时间 细览置标 TRS_TEMPLATE： 嵌套模板

12 TRS_ROLLDOCUMENTS：滚动新闻列表 TRS_NEWICON：显示最新新闻标志 TRS_CONDDITION：条件置标
TRS_ECHO：在当前置标位置输出指定内容 TRS_VARIABLE：变量声明 TRS_ENUM：声明变量枚举值 特殊应用置标

13 频道列表： 每个频道，都需配置概览和细览模板才允许被发布。

14 TRS置标说明 TRS置标说明 置标的主要作用是控制数据在模板中的表现形式，将数据与表现分开。主要思路是TRS置标处理数据的内容，存放的位置以及如何存放等，数据的表现形式则由标准的html语言描述，例如： <FONT COLOR=RED> <TRS_DOCUMENT FIELD=”DOCTITLE”>这里放置文档标题</TRS_DOCUMENT> </FONT> 其中：红色是TRS置标，蓝色部分是标准的HTML置标。TRS置标表明要在该位置放置字段名为“标题”的字段内容。

15 第三章：模板管理和编辑

16 WCM内模板管理 选站点或栏目 模板列表，可分类显示 模板操作 配置模板。 需发布的站点、栏目必须配置模板和存放位置 选模板分类

17 新建模板 输入名称，选择类型（必须） 利用置标向导生成置标代码，粘帖到鼠标位置

18 导出、导入模板 导出成ZIP文件。将模板html文件、图片、js等同步导出。 支持导入html、zip等格式。
如模板中有图片需要导入，需将模板html文件和图片css等文件夹一起打包成zip文件，然后导入。

19 模板校验语法错误（1） 模板保存时，WCM将自动校验置标书写语法，如有错误，将显示提示。

20 模板校验语法错误（2） 在模板列表界面，可批量校验选中的模板

21 同步模板附件 模板图片存放在WCM服务器目录/wcmdata/template/里面。当站点或栏目预览或发布后，模板图片、js文件、css文件等将自动分发到/wcmdata/preview或/wcmdata/pub/下面。 同步模板附件，由手工确保这种附件的分发。

22 模板配置到栏目 选择栏目后，可以在栏目信息页面直接配置。

23 第四章：Dreamweaver模板插件、模板制作

24 插件登录WCM 登录用户：同登录WCM的用户和密码
服务器地址： 注意：需要将其中的 :8080/wcm 替换成实际使用的WCM访问地址 点此按钮，进行离线编辑

25 制作模板过程 1,设置本地站点和WCM站点对应关系 2,创建、编辑模板 3,上传模板

26 第五章：常见应用示例模板

27 图片新闻-图片切换显示 替换其中置标的频道名称即可： <TRS_DOCUMENTS NUM="5" ID="图片">
<table> <script language='JavaScript'> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; var kk = 1; var filepath_liucp=""; <TRS_DOCUMENTS NUM="5" ID="图片"> filepath_liucp='<TRS_recpath></trs_recpath>'; filepath_liucp = filepath_liucp.substring(0,filepath_liucp.lastIndexOf("/")+1); imgUrl[kk] =filepath_liucp + '<TRS_APPENDIX INDEX="0" MODE="PIC" FIELD="APPFILE"></TRS_APPENDIX>'; imgLink[kk] = '<trs_recpath></trs_recpath>'; imgTz[kk] = '<a href="<TRS_recpath></trs_recpath>" target="_blank"><font color=#CC0000><TRS_DOCUMENT AUTOLINK="false" FIELD="doctitle" NUM="42"></TRS_DOCUMENT></font></a>'; kk++; </TRS_DOCUMENTS> kk--; var imgPre=new Array(); var j=0; for (i=1;i<=5;i++) { if( (imgUrl[i]!="") && (imgLink[i]!="") ) { j++; } else { break; } function playTran(){ if (document.all) imgInit.filters.revealTrans.play();

28 图片新闻-图片切换显示 var key=0; function nextAd(){ if(adNum<j)adNum++ ;
else adNum=1; if( key==0 ){ key=1; } else if (document.all){ imgInit.filters.revealTrans.Transition=6; /* transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除。 8 : 纵向百叶窗转换。 9 : 横向百叶窗转换。 10 : 国际象棋棋盘横向转换。 11 : 国际象棋棋盘纵向转换。 12 : 随机杂点干扰转换。 13 : 左右关门效果转换。 14 : 左右开门效果转换。 15 : 上下关门效果转换。 16 : 上下开门效果转换。 17 : 从右上角到左下角的锯齿边覆盖效果转换。 18 : 从右下角到左上角的锯齿边覆盖效果转换。 19 : 从左上角到右下角的锯齿边覆盖效果转换。 20 : 从左下角到右上角的锯齿边覆盖效果转换。 21 : 随机横线条转换。 22 : 随机竖线条转换。 23 : 随机使用上面可能的值转换。 */ imgInit.filters.revealTrans.apply(); playTran(); } document.images.imgInit.src=imgUrl[adNum]; document.getElementById('tpxw').innerHTML='<a href="' + imgLink[adNum] + '" target="_blank">' + imgTz[adNum] + '</a>'; theTimer=setTimeout("nextAd()", 6000); //转换间隔时间

29 图片新闻-图片切换显示 function goUrl(){ jumpUrl=imgLink[adNum];
jumpTarget='_blank'; if (jumpUrl != ''){ if (jumpTarget != '') window.open(jumpUrl,jumpTarget); else location.href=jumpUrl; } </script> <tr class="14txt22"> <td bgcolor="#F0F0E8"><a href="javascript:goUrl()"><img style='FILTER: revealTrans(duration=2,transition=1)' src='javascript:nextAd()' border='0' width='243' height='168' class='img01' name='imgInit'></a></td> </tr> <tr> <td class="14txt22"><center><font color="#CC0000"><span id='tpxw'>标题</span></font></center></td> </table>

30 概览分页 代码： 内容显示： <!--循环开始-->
<TRS_DOCUMENTS NUM="500" PAGESIZE="4" AUTOMORE="FALSE"> <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0"> <tr> <td>·<TRS_DOCUMENT FIELD="DOCTITLE" EXTRA="class='10ptb'" TARGET="_blank"> 标题放于此处 </TRS_DOCUMENT><font style='color:#ADADAD'>[<TRS_DOCUMENT FIELD="DOCRELTIME" EXTRA="class='10ptb' style='color:#ADADAD'" DATEFORMAT="yyyy/MM/dd"> 标题放于此处 </TRS_DOCUMENT>]</font></td> </tr> </table> </TRS_DOCUMENTS> <!--循环结束--> 分页脚本script： <SCRIPT LANGUAGE="JavaScript"> //createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}"); var currentPage = ${PAGE_INDEX};//所在页从0开始 //var headPage = "${PAGE_NAME}"+"."+"${PAGE_EXT}";//首页 //var tailPage = "${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}"//尾页 var prevPage = currentPage-1//上一页 var nextPage = currentPage+1//下一页 var countPage = ${PAGE_COUNT}//共多少页 document.write("共"+countPage+"页  "); //设置上一页代码 if(countPage>1&&currentPage!=0&&currentPage!=1) document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页</a> <a href=\"${PAGE_NAME}"+"_" + prevPage + "."+"${PAGE_EXT}\">上一页</a> "); else if(countPage>1&&currentPage!=0&&currentPage==1) document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页</a> <a href=\"${PAGE_NAME}.${PAGE_EXT}\">上一页</a> "); else document.write("首页 上一页 ");

31 概览分页 //循环 var num = 5; for(var i=0+(currentPage-1-(currentPage-1)%num) ; i<=(num+(currentPage-1-(currentPage-1)%num))&&(i<countPage) ; i++){ if(currentPage==i) document.write((i+1)+" "); else if(i==0){ document.write("<a href=\"${PAGE_NAME}"+"."+"${PAGE_EXT}\">"+1+"</a> ");} else document.write("<a href=\"${PAGE_NAME}"+"_" + i + "."+"${PAGE_EXT}\">"+(i+1)+"</a> "); } //设置下一页代码 if(countPage>1&&currentPage!=(countPage-1)) document.write("<a href=\"${PAGE_NAME}"+"_" + nextPage + "."+"${PAGE_EXT}\">下一页</a> <a href=\"${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}\">尾页</a> "); document.write("下一页 尾页 "); //跳转页面 document.write("<font class='9ptb'>转到第<input type='text' id='num' value="+(currentPage+1)+" style='width:30px'>页"+ " <input type='submit' value='提交' onClick=javacript:toPage()></font>"); function toPage(){ var _num = document.getElementById("num").value; var str = "${PAGE_NAME}"+"_"+(_num-1)+"."+"${PAGE_EXT}"; var url = location.href.substring(0,location.href.lastIndexOf("/")+1); if(_num<=1||_num==null) location.href = url+"${PAGE_NAME}"+"."+"${PAGE_EXT}"; else if(_num>countPage) alert("本频道最多"+countPage+"页"); location.href = url+str; </SCRIPT>

32 文章内容分页 文章内容分页需要两处设置： 1，采编文章时，在需要分页处插入分页符 2，细览模板中写入分页代码

33 文章内容分页 将以下代码拷贝到细览模板的需要放置分页页码处： <SCRIPT LANGUAGE="JavaScript">
<!-- function createPageHTML(_nPageCount, _nCurrIndex, _sPageName, _sPageExt){ if(_nPageCount == null || _nPageCount<=1){ return; } var nCurrIndex = _nCurrIndex || 0; if(nCurrIndex == 0) document.write("1 "); else document.write("<a href=\""+_sPageName+"."+_sPageExt+"\">1</a> "); for(var i=1; i<_nPageCount; i++){ if(nCurrIndex == i) document.write((i+1) + " "); document.write("<a href=\""+_sPageName+"_" + i + "."+_sPageExt+"\">"+(i+1)+"</a> "); //WCM置标 createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}"); //--> </SCRIPT> 将以下代码拷贝到细览模板的需要放置分页页码处：