基于6.0版网站生成系统模板编写规范.docVIP

6.0版网站生成系统模板编写规范 文件目录结构规范 切割后的成果文件夹参照如下规范，注意所有文件一律采用utf-8编码格式。(dw新建文件默认为utf-8，其他编辑器请将编码转成“utf-8无bom格式编码”) Index.html ， 更多页.html ， 新闻页.html *除首页外，建议使用中文，与设计稿名称一致 Css：public.css由网站系统提供(不可更改)； mystyle.css为自定义样式表，一般一个网站只需一个。 Images：存放各模板所需的图片、动画，规则如下： 图片格式仅限于gif /png /jpg; 存放多媒体文件，flash、视频、音频等； 命名全部用小写英文字母/数字/_ 的组合,如header_bg.png 运用sprite技术集中小的背景图或图标,将同名psd文件也放入images目录 Jquery.js (默认为jQuery v1.10.1压缩版,不可更改) myscript.js(自定义脚本) 注，网站的3个生成引擎页面自动已加载jquery.js和public.css，嵌套时不必重复引用。 模板的html结构规范 *不同类型的页面用不同的类区分 wrapper-index（首页） wrapper-news（新闻页） wrapper-more（更多页） wrapper-channel（二级页） 重要内容应考虑优先加载； 如果设计复杂，可以添加header-inner等层来支持布局； 首页（wrapper-index）布局结构： 模块(module)布局结构： 模块最外层统一使用类名为module的div包裹，不同类的样式使用style01~0n区分，每个模块加上特别的类名（如：zdtj）便于后期维护。 .hd中标题为图片时h3上加上fn-altxt类，隐藏文字，模块的更多可以直接将模块中的nsy-amore定位到相应位置，或者手动添加连接。 .bd高度随模块内容变化，嵌套前先不设定高度（建议使用min-height）。 .model内注明栏目类型等信息，model在后台编辑器内会有橙色的虚线，便于嵌套栏目。 .ft 一般情况不需要使用。 二级页（wrapper-channel）/更多页（wrapper-more）布局结构： 二级页模块组合 二级页会有不同长度或样式的模块组成，如下图。 XL=100%;L=60%;M=50%；S=40%。 fn-fl 左边；fn-fr 右边。（复制添加时要特别注意） 对应的布局结构 新闻页（wrapper-news）布局结构： 命名参考： 总体结构： 功能： 整体布局 wrapper 标志 logo 页头 header 广告 banner 导航 nav 登陆 login banner 登录条 loginbar 内容 content/container 注册 regsiter 页面主体 main 搜索 search 侧栏 side 标题 title 页尾 footer 按钮 btn list 模块： 提示信息 msg 模块 module 当前 cur 头部 hd 图标 icon 模块标题 module-title 新闻 news module-more 合作伙伴 partner bd 友情链接 link 栏目模型 model 标签 tabs 尾部 ft 标签内容 tab_pane 文件目录内文件说明 CSS public.css（不可更改） 分以下三部分： normalize 和reset类似，但不重置所有的css样式，保留了有用的默认值，只会对那些会产生浏览器兼容性问题的的html元素样式进行调整。 公用功能样式（如fn-fl） fn-altxt 隐藏文字 fn-hide 隐藏，display:none fn-clearfix 从父级元素上清除浮动 fn-clr 从元素结尾处清除浮动 fn-fl 向左浮动，float: left; fn-fr 向右浮动，float: right; fn-tl 左对齐，text-align:left; fn-tc 中间对齐，text-align: center; fn-tr 右对齐，text-align: right; fn-mt10 margin-top: 10px; fn-mb10 margin-bottom: 10px; 常用样式 body,a,a:hover等。 mystyle.css（网站模板样式及栏目扩展样式）: 公共样式 /*== public ==*/ 模块样式 /*== module ==*/ 不同模块保持独立性，便于多人合作开发与维护。 模板框架样式 /*== layout ==*/ 样式顺序根据html框架的