wcm改首页html,TRSWCM前端模板制作规范

引入样式必须加type属性

html中引入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的：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的：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.首页把页面

2.首页把等放入嵌套模板

3.概览把页面

4.细缆把页面

5.细缆把文章关键词文章正文或摘要240个字符等放入嵌套模板

模板制作

1.建议采用$root方式

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！