拓尔思TRSWCM网站管理系统页面模板制作教程

2021-06-24

TRS是一款由JAVA语言开发商用的网站管理系统   百越科技熟悉拓尔思系统并且给多个企事业单位维护过拓尔思系统的网站，设计和制作过拓尔思系统的模板，如果有需要的企事业单位可以联系我们的服务热线 0771-3329383 。

下面是关于拓尔思管理系统模板制作模板制作规范

引入样式必须加type属性

html中引入css，例如：<link href="images/minjian.css" rel="stylesheet" type="text/css" />，若缺少type属性，css中的背景图打包无法同步上传。

tab键用两个空格代替

因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你 自己设定了tab键所占的位置长度）。 每个样式属性或者每句代码后加 ";" 方便压缩工具"断句"。

文件和目录命名约定

一律小写，必须是英文单词或者汉语拼音，以英语单词优先，多个单词以连字符 ( _ ) 连接。只能出现小写引文字母，数字和连字符。 很多浏览器会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。 该命令规范适用于所有前端维护的内容和相关目录。(html, css, js, png, gif, jpg, ico)。

文件编码约定

所有文件统一采用UTF-8（默认）或GB2312（根据项目决定）

id和class命名约定

id 和 class 的命名基本原则:内容优先，表现为辅。
1.首先根据内容来命名，如:#header,#footer,.main-nav.如根据内容无法找到合适的命名，可以再结合表现进行命名，如：col_main, col_sub, col_extra,blue_box
2.id 和 class 的名称一律小写，多个单词以连字符连接，如： main_wrap
3.id 和 class 的名称只能出现，小写字母，数字和连字符( _ )
4.id 和 class 的名称尽量使用英文单词命名,如确实找不到合适的单词，可以使用拼音，如：zhidao_com
5.在不影响语意的情况下，id 和 class 的名称 可以适当使用缩写，如: col, nav, hd, bd, fd(缩写只用来表示结构，不允许写任何样式)。不要自造缩写。

模板命名

1.首页.html
2.新闻中心_首页.html
3.新闻中心_细览.html
4.通用概览.html
5.通用细览.html

站点结构目录存放规则

1.站点根目录命名为web并将页面html文件放到web根目录下，如：web首页.html
2.站点图片命名为images并放到web根目录下，即：webimages
3.CSS附加样式表命名为css并放到web根目录下，即：webcss
4.JS及jquery库附加文件命名为js并放到web根目录下，即：webjs

网页图片格式及大小

网页图片可使用jpg、gif、png格式，在保证图片不失真的情况下灵活选用适合的图片格式将图片大小控制在200k以内，同时如果零碎图片过多为减少服务器响应可将同一区域内的（如：menu）零碎小图片拼成一张大图并采用background-position负值定位法。

css命名

1.避免css.css 2.全局样式（包括全局样式、通用文字样式）使用global.css,布局样式使用layout.css，首页样式文件使用style.css命名。对于小型网站可不使用layout布局样式。

css全局样式初始化

1.对应CSS2的：

1
2
3
4
5
6
7
8
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, table { margin:0; padding:0; border:0; list-style:none;}
div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form { overflow:hidden;}
input { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
a,area{blr:expression(this.onFocus=this.blur())}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
.boxcenter { margin:0 auto;}

2.对应CSS3的：

1
2
3
4
5
6
7
8
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border: 0;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
a,area{blr:expression(this.onFocus=this.blur())}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
html, body { height:100%; *+height:auto; }
div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form { overflow:hidden; list-style:none;}
.boxcenter { margin:0 auto;}


SEO

1.首页把页面<title>网站名称</title>放入嵌套模板
2.首页把<keywords><description>等放入嵌套模板
3.概览把页面<title>栏目名称</title>放入嵌套模板
4.细缆把页面<title>文章标题</title>放入嵌套模板
5.细缆把文章关键词<keywords>文章正文或摘要240个字符<description>等放入嵌套模板


模板制作

1.建议采用$root方式
2.对于概览、细缆内包含需要经常更新的内容，如排行榜、热点推荐等，应采用iframe嵌入方式，避免频繁生成概览及整站文章

拓尔思系统TRSWCM是一个内容管理系统，是由JAVA开发的，网站页面通过模板生成的，那么制作模板是非常关键的，决定了网站的设计风格和展现，那么模板制作难吗？需要页面设计和前端制作，然后根据拓尔思的TagLib置标制作模板，然后通过系统后台导入到系统模板库里，最后设置频道关联的模板文件即可。


分享