网站集群系统WCMS单元设参统一样式规范.doc

第 1 页 共 26 页 网站集群系统网站集群系统 WCMSWCMS 单元设参统一样式单元设参统一样式 规范规范 第 2 页 共 26 页 订文档历史记录订文档历史记录 定稿日期定稿日期版本版本说明说明文档参与人文档参与人文档审核人文档审核人 2008 4 30V1初始版本 第 3 页 共 26 页 目目 录录 前言前言 4 1 栏目链接栏目链接 4 1 1 栏目链接样式 1 当前栏目标题 不带链接 推荐 4 1 2 栏目链接样式 2 当前栏目标题 带链接 推荐 4 1 3 栏目链接样式 3 带前缀多列显示 推荐 5 1 4 栏目链接样式 4 带前缀多行一列居中 推荐 5 2 标题链接标题链接 6 2 1 标题链接样式 1 标题控制字数并含 更多 推荐 6 2 2 标题链接样式 2 标题控制字数不含 更多 推荐 6 2 3 标题链接样式 3 标题控制字数带 右对齐日期 不含 更多 推荐 7 2 4 标题链接样式 4 标题控制字数带 跟标题日期 含 更多 7 2 5 标题链接样式 5 标题不控制字数并含 更多 8 3 标题链接标题链接 分页分页 9 3 1 标题链接 分页 样式 1 含 信息当前显示 推荐 9 3 2 标题链接 分页 样式 2 不含 信息当前显示 11 3 3 标题链接 分页 样式 3 图片库 图片排列并分页 推荐 13 4 当前位置当前位置 15 4 1 当前位置样式 1 单箭头 15 4 2 当前位置样式 2 双箭头 16 5 图片新闻图片新闻 16 5 1 图片新闻样式 1 图片新闻 FLASH 分页滚动显示 推荐 16 5 2 图片新闻样式 2 单条图片新闻标题控制字数 推荐 17 5 3 图片新闻样式 3 单条图片新闻右侧显示文章摘要 18 5 4 图片新闻样式 4 图片新闻含标题作者时间摘要 19 5 5 图片新闻样式 5 图片新闻不间断滚动 19 6 文章正文文章正文 20 6 1 文章正文样式 1 正文含日期 浏览次数 信息来源 字号 打印本页 关闭窗口 文章评论 推荐 20 6 2 文章正文样式 2 正文含日期 浏览次数 字号 打印本页 关闭窗口 推荐 22 7 相关报道相关报道 23 7 1 相关报道样式 1 标题控制字数带 右对齐日期 推荐 23 7 2 相关报道样式 2 自带 相关信息标识 24 8 多信息栏目多信息栏目 25 8 1 多信息栏目样式 1 标题控制字数带 右对齐日期 推荐 25 8 2 多信息栏目样式 2 标题控制字数 推荐 25 第 4 页 共 26 页 前言前言 本文描述的样式 为项目实施过程单元设参的 常规和常用样式 和 WCMS 版本 为 WCMS2 4 4 及以后版本 默认样式是一一对应的 个性化样式不在本文描述范围内 如发现本文遗漏某些 常规和常用样式 请及时反馈 每个样式都有 注意事项 请仔细阅读 代码中 标注为红色的 class 可进行修改 1 栏目链接栏目链接 1 1 栏目链接样式栏目链接样式 1 当前栏目标题 不带链接 当前栏目标题 不带链接 推荐 推荐 效果源码效果源码 表现形式表现形式 注意事项 注意事项 常用样式 主要用于 单个栏目标识 可在 class 里写 CSS 样式文 件里的样式名 如 bt link bt content 等 以符合实际的设计稿 1 2 栏目链接样式栏目链接样式 2 当前栏目标题 带链接 当前栏目标题 带链接 推荐 推荐 效果源码效果源码 表现形式表现形式 表现形式表现形式 下图右上角的 更多 a href class bt link 第 5 页 共 26 页 注意事项 注意事项 常用样式 主要用于 单个栏目链接 还有一种是 更多 的实现 即 修改 为 更多 如上图所示 可在 class 里写 CSS CSS 样式 文件里的样式名 如 bt link bt content 等 以符合实际的设计稿 1 3 栏目链接样式栏目链接样式 3 带前缀多列显示 推荐 带前缀多列显示 推荐 效果源码效果源码 表现形式表现形式 表现形式表现形式 注意事项 注意事项 常用样式 一般在栏目页使用 显示同级栏目名称 带链接 可添加 栏目前缀 必须是 2 列以上 class 样式名规则 同上 1 4 栏目链接样式栏目链接样式 4 带前缀多行一列居中 带前缀多行一列居中 推荐 推荐 效果源码效果源码 表现形式表现形式 注意事项 注意事项 常用样式 一般用于首页 栏目页的某栏目内容显示 该栏目内容主要 是子栏目链接 可根据实际情况调整 align 可以居中 也可以居左 class 样式名规 则 同上 a href class bt link a href class bt link 第 6 页 共 26 页 2 标题链接标题链接 2 1 标题链接样式标题链接样式 1 标题控制字数并含 标题控制字数并含 更多更多 推荐 推荐 效果源码效果源码 标题控制字数 有 更多 链接 表现形式表现形式 注意事项 注意事项 常用样式 主要用于首页 频道页的栏目文章标题显示 也用于 底层 栏目页 的 非当前栏目 文章标题显示 class 样式名规则 同上 2 2 标题链接样式标题链接样式 2 标题控制字数不含 标题控制字数不含 更多更多 推荐 推荐 效果源码效果源码 标题控制字数 没有 更多 链接 表现形式表现形式 注意事项 注意事项 常用样式 主要用于首页 频道页的栏目文章标题显示 也用于 底层 a href class bt link title target blank a href class bt link title target blank 第 7 页 共 26 页 栏目页 的 非当前栏目 文章标题显示 和 2 1 的区别是没有 更多 目的是为了 栏目文章标题排版更加规整美观 class 样式名规则 同上 2 3 标题链接样式标题链接样式 3 标题控制字数带 标题控制字数带 右对齐日期右对齐日期 不含不含 更多更多 推荐 推荐 效果源码效果源码 标题控制字数 显示信息发布时间并右对齐 表现形式表现形式 注意事项 注意事项 常用样式 主要用于首页 频道页的栏目文章标题显示 如图 重要 会议 通知通告 class 样式名规则 同上 2 4 标题链接样式标题链接样式 4 标题控制字数带 标题控制字数带 跟标题日期跟标题日期 含含 更多更多 效果源码效果源码 a href class bt link title target blank 第 8 页 共 26 页 标题控制字数 显示信息发布时间跟着标题并含 更多 表现形式表现形式 注意事项 注意事项 不常用样式 主要用于首页 频道页的栏目文章标题显示 class 样 式名规则 同上 如要去掉 更多 则把上述代码中 去掉即可 本文不再单独进行样 式描述 2 5 标题链接样式标题链接样式 5 标题不控制字数并含 标题不控制字数并含 更多更多 效果源码效果源码 标题不控制字数 有 更多 链接 表现形式表现形式 a href class bt link title target blank a href class bt link title target blank 第 9 页 共 26 页 注意事项 注意事项 不常用样式 class 样式名规则 同上 3 标题链接标题链接 分页分页 3 1 标题链接标题链接 分页分页 样式样式 1 含 含 信息当前显示信息当前显示 推荐 推荐 效果源码效果源码 第 10 页 共 26 页 var urls new Array var headers new Array var year new Array var month new Array var day new Array var imgstrs new Array var i 0 urls i headers i year i month i day i imgstrs i i var formatstr TITLE YEAR MONTH DAY var pagecount var totalpage Math ceil i pagecount var LastPage 上页 var NextPage 下页 function ReplaceString s OldPattern NewPattern var i var s2 s var len OldPattern length while s2 indexOf OldPattern 0 i s2 indexOf OldPattern s2 s2 substring 0 i NewPattern s2 substring i len s2 length return s2 function chgpage nowpage showNews nowpage function showNews start num start num parseInt start num var j 0 var end num 0 var newshtml var pagehtml var str end num start num pagecount i i 1 start num pagecount 1 for j start num j end num j str formatstr str ReplaceString str URL urls j str ReplaceString str TITLE headers j str ReplaceString str YEAR year j str ReplaceString s tr MONTH month j str ReplaceString str DAY day j str ReplaceString s tr HEAD IMAGE str ReplaceString str IMAGE newshtml newshtml str newshtml newshtml document getElementById newslist innerHTML newshtml newshtml null var currpage start num pagecount 1 pagehtml 共 条 当前显示 i 条 共 totalpage 页 每页 pagecount 条 页次 currpage totalpage 页 if currpage 1 pagehtml 首页 if start num 0 pagehtml LastPage if end num headers length 1 pagehtml NextPage if currpage totalpage pagehtml 尾页 pagehtml pagehtml 跳转到第 for var k 1 k totalpage k var thisnum k 1 pagecount pagehtml k pagehtml 页 document getElementById pagelist innerHTML pagehtml pagehtml null showNews 0 第 11 页 共 26 页 表现形式表现形式 注意事项 注意事项 常用样式 主要用于最底层栏目页的本栏目文章标题显示 当前显示 信息条数 和单元设参中 信息总数 相关 class 样式名规则 同上 3 2 标题链接标题链接 分页分页 样式样式 2 不含 不含 信息当前显示信息当前显示 效果源码效果源码 第 12 页 共 26 页 var urls new Array var headers new Array var year new Array var month new Array var day new Array var imgstrs new Array var i 0 urls i headers i year i month i day i imgstrs i i var formatstr TITLE YEAR MONTH DAY var pagecount var totalpage Math ceil i pagecount var LastPage 上页 var NextPage 下页 function ReplaceString s OldPattern NewPattern var i var s2 s var len OldPattern length while s2 indexOf OldPattern 0 i s2 indexOf OldPattern s2 s2 substring 0 i NewPattern s2 substring i len s2 length return s2 function chgpage nowpage showNews nowpage function showNews start num start num parseInt start num var j 0 var end num 0 var newshtml var pagehtml var str end num start num pagecount i i 1 start num pagecount 1 for j start num j end num j str formatstr str ReplaceString str URL urls j str ReplaceString str TITLE headers j str ReplaceString str YEAR year j str ReplaceString str MONTH month j str ReplaceString str DAY day j str ReplaceString str HEAD IMAGE str ReplaceString str IMAGE newshtml newshtml str newshtml newshtml document getElementById newslist innerHTML newshtml newshtml null var currpage start num pagecount 1 pagehtml 共 条 每页 pagecount 条 页次 currpage totalpage 页 if currpage 1 pagehtml 首页 if start num 0 pagehtml LastPage if end num headers length 1 pagehtml NextPage if currpage totalpage pagehtml 尾页 pagehtml pagehtml 跳转到第 for var k 1 k totalpage k var thisnum k 1 pagecount pagehtml k pagehtml 页 document getElementById pagelist innerHTML pagehtml pagehtml null showNews 0 第 13 页 共 26 页 表现形式表现形式 注意事项 注意事项 不常用样式 主要用于最底层栏目页的本栏目文章标题显示 无 当前 显示信息条数 但单元设参中 信息总数 同样需要设置 class 样式名规则 同上 3 3 标题链接标题链接 分页分页 样式样式 3 图片库 图片排列并分页 图片库 图片排列并分页 推推 荐荐 效果源码效果源码 第 14 页 共 26 页 var CFG ROWS 4 var CFG COLS 4 var CFG WORDS NUM 26 var CFG SIZE new Array var CFG WIDTH Math floor 100 CFG COLS CFG SIZE 0 CFG SIZE 1 width 370 height 280 CFG SIZE 2 width 270 height 170 CFG SIZE 3 width 175 height 118 CFG SIZE 4 width 175 height 118 var urls new Array var headers new Array var store times new Array var imgstrs new Array var i 0 urls i headers i store times i imgstrs i i function shortTitle title wordsnum return title length wordsnum title title substring 0 wordsnum function replace string strOld strNew var regx eval strOld g return string replace regx strNew function chgpage nowpage showNews nowpage function showNews start num start num start num 1 var newshtml var pagehtml var showNum CFG ROWS CFG COLS showNum showNum 1 var formatstr SHORTTITLE var pagecount 16 var totalpage Math ceil i pagecount var LastPage 上页 var NextPage 下页 var j 0 var end num 0 if start num showNum headers length end num headers length 1 else end num start num 1 showNum 1 1 var str for j start num j end num j str formatstr str replace str URL urls j str replace str TITLE headers j str replace str SHORTTITLE shortTitle headers j CFG WORDS NUM str replace str TIME store times j str replace str HEAD IMAGE str replace str IMAGE imgstrs j if j 1 CFG COLS 0 str j 1 end num newshtml str if j CFG COLS 0 str var loop CFG COLS j CFG COLS for var k 1 k loop k str if k loop str newshtml str newshtml newslist innerHTML newshtml var currpage start num pagecount 1 pagehtml 共 i 条 每页 pagecount 条 页次 currpage totalpage 页 if currpage 1 pagehtml 首页 if start num 0 pagehtml LastPage if end num headers length 1 pagehtml NextPage if currpage totalpage pagehtml 尾页 pagehtml 跳转到第 for var k 1 k totalpage k var thisnum k 1 pagecount pagehtml k pagehtml 页 pagelist innerHTML pagehtml showNews 0 第 15 页 共 26 页 表现形式表现形式 注意事项 注意事项 常用样式 主要用于 图片库展示 单元设参中 信息总数 同样需 要设置 上述代码需注意的是 行和列需要根据实际情况进行修改 修改红色标注的 CFG ROWS 和 CFG COLS 图片尺寸根据 列的数值 找相应的 图片数组 进行修改 如列为 3 则 CFG COLS 3 然后修改 图片数组 CFG SIZE 3 的 width 和 height class 样式名规则 同上 4 当前位置当前位置 4 1 当前位置样式当前位置样式 1 单箭头 单箭头 效果源码效果源码 表现形式表现形式 首页 今日温州 政务要闻 a href class bt link 首页 a href class bt link 第 16 页 共 26 页 4 2 当前位置样式当前位置样式 2 双箭头 双箭头 效果源码效果源码 表现形式表现形式 首页 今日温州 政务要闻 5 图片新闻图片新闻 5 1 图片新闻样式图片新闻样式 1 图片新闻 图片新闻 FLASH 分页滚动显示分页滚动显示 推 推 荐 荐 效果源码效果源码 可控制标题字数 带页码翻页 a href class bt link 首页 a href class bt link var width 259 var height 220 var text height 22 var flash height height text height var pic arr new Array var link arr new Array var text arr new Array var i 0 pic arr i link arr i text arr i i var p pic arr join var l link arr join var t text arr join var f jcms24 jcms files jcms1 web1 site flash 0 080326160840 swf jcms24 jcms files jcms1 web1 site flash 0 080326160840 swf document write document write document write document write document write document write 第 17 页 共 26 页 表现形式表现形式 注意事项 注意事项 常用样式 主要用于首页 先上传一个空的 flash 文件 slideshow swf 该文件可在 BBS 上获得 到文档管理 flash 管理某个目录中 然后 获取这个 flash 文件在网站中的实际地址 目前可通过在设置静态单元时插入文件方式 得到该文件地址 然后用实际地址替换上述红色加粗代码部分 flash 的高度和宽度可 调整 5 2 图片新闻样式图片新闻样式 2 单条图片新闻标题控制字数 单条图片新闻标题控制字数 推荐 推荐 效果源码效果源码 固定图片尺寸 图片下显示文章标题并限制字数 图片加 1 个象素的黑色边框 a href target blank img src border 0 width 180 height 160 a href class bt link target blank 第 18 页 共 26 页 表现形式表现形式 注意事项 注意事项 常用样式 主要用于首页 图片 width 和 height 需要根据实际情况 进行调整 class 样式名规则 同上 5 3 图片新闻样式图片新闻样式 3 单条图片新闻右侧显示文章摘要 单条图片新闻右侧显示文章摘要 效果源码效果源码 固定图片尺寸 图片下显示文章标题并限制字数 图片右侧显示文章摘要并控制摘 要字数 表现形式表现形式 a href target blank IMG SRC border 0 width 180 height 120 a href class bt link target blank 第 19 页 共 26 页 注意事项 注意事项 常用样式 主要用于栏目页 如内容为某地区介绍的栏目 图片 width 和 height 需要根据实际情况进行调整 class 样式名规则 同上 5 4 图片新闻样式图片新闻样式 4 图片新闻含标题作者时间摘要 图片新闻含标题作者时间摘要 效果源码效果源码 固定图片尺寸 文章标题控制字数 显示作者 时间和文章摘要 表现形式表现形式 注意事项 注意事项 不常用样式 主要用于栏目页 width 和 height 需要根据实际情况进 行调整 文章必须 图片上传项 上传图片如下图所示 否则列表排版该条文章没有 图片显示会难看 class 样式名规则 同上 5 5 图片新闻样式图片新闻样式 5 图片新闻不间断滚动 图片新闻不间断滚动 效果源码效果源码 a href IMG SRC width 120 height 130 BORDER 0 标题 a href class bt content 作者 时间 摘要 第 20 页 共 26 页 表现形式表现形式 注意事项 注意事项 不常用样式 最外面 div 的宽度要小于设定的每行所有图片宽度的总和 才能看到滚动效果 该栏目图片新闻必须达到一定数量如 8 条以上才可以看到效果 一般用于首页和一级栏目页 class 样式名规则 同上 6 文章正文文章正文 6 1 文章正文样式文章正文样式 1 正文含日期 浏览次数 信息来源 正文含日期 浏览次数 信息来源 字号 打印本页 关闭窗口 文章评论字号 打印本页 关闭窗口 文章评论 推荐 推荐 效果源码效果源码 a href IMG SRC BORDER 0 width 120 height 70 a href class bt link var speed 30 marquePic2 innerHTML marquePic1 innerHTML function Marquee if demo scrollLeft marquePic1 scrollWidth demo scrollLeft 0 else demo scrollLeft var MyMar setInterval Marquee speed demo onmouseover function clearInterval MyMar demo onmouseout function MyMar setInterval Marquee speed 第 21 页 共 26 页 表现形式表现形式 注意事项 注意事项 常用样式 用于文章页文章正文部分 文章评论 可在设参时选择开关 function doZoom size document getElementById zoom style fontSize size px 发布日期