6.0版网站生成系统模板的编写规范

《6.0版网站生成系统模板的编写规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、6.0版网站生成系统模板编写规范1．文件目录结构规范切割后的成果文件夹参照如下规范，注意所有文件一律采用utf-8编码格式。(dw新建文件默认为utf-8，其他编辑器请将编码转成“utf-8无bom格式编码”)Index.html，更多页.html，新闻页.html*除首页外，建议使用中文，与设计稿名称一致Css：public.css由网站系统提供(不可更改)；mystyle.css为自定义样式表，一般一个网站只需一个。Images：存放各模板所需的图片、动画，规则如下：l图片格式仅限于gif/png/jpg;l存放多媒体文件，flash、视频、音频

2、等；l命名全部用小写英文字母/数字/_的组合,如header_bg.pngl运用sprite技术集中小的背景图或图标,将同名psd文件也放入images目录lJquery.js(默认为jQueryv1.10.1压缩版,不可更改)lmyscript.js(自定义脚本)注，网站的3个生成引擎页面自动已加载jquery.js和public.css，嵌套时不必重复引用。2．模板的html结构规范*不同类型的页面用不同的类区分wrapper-index（首页）wrapper-news（新闻页）wrapper-more（更多页）wrapper-channel（二

3、级页）a)重要内容应考虑优先加载；b)如果设计复杂，可以添加header-inner等层来支持布局；首页（wrapper-index）布局结构：模块(module)布局结构：a)模块最外层统一使用类名为module的div包裹，不同类的样式使用style01~0n区分，每个模块加上特别的类名（如：zdtj）便于后期维护。b).hd中标题为图片时h3上加上fn-altxt类，隐藏文字，模块的更多可以直接将模块中的nsy-amore定位到相应位置，或者手动添加连接。c).bd高度随模块内容变化，嵌套前先不设定高度（建议使用min-height）。d).m

4、odel内注明栏目类型等信息，model在后台编辑器内会有橙色的虚线，便于嵌套栏目。e).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

5、登录条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_pane1．文件目录内文件说明CSSpublic.css（不可更改）分以下三部分：a)normalize和reset类似，但不重置所有的

6、css样式，保留了有用的默认值，只会对那些会产生浏览器兼容性问题的的html元素样式进行调整。b)公用功能样式（如fn-fl）fn-altxt隐藏文字fn-hide隐藏，display:nonefn-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-mt10margin-top:10px

7、;fn-mb10margin-bottom:10px;c)常用样式body,a,a:hover等。mystyle.css（网站模板样式及栏目扩展样式）:a)公共样式/*==public==*/b)模块样式/*==module==*/不同模块保持独立性，便于多人合作开发与维护。c)模板框架样式/*==layout==*/样式顺序根据html框架的结构顺序进行编写。d)栏目样式配置样式/*==栏目样式配置==*/对栏目默认样式进行覆盖和辅助，遵循层叠覆盖原则，请勿使用！important。e)后期维护样式/*==后期维护==*/f)用户添加样式/*==用

8、户添加==*/除前端工程师外人员写的样式，避免使用内联样式。*样式按显示属性-自身属性-文本属性-css3属