Zving模板页面制作规范及注意事项.doc

Zving模板页面制作规范及注意事项为了保持页面开发规范、避免错误，加快学习和开发效率，下面列出泽元软件前端开发中CSS的一些规范及注意事项，此规范适用于为泽元网站内容管理系统（ZCMS）制作前端模板页面。1.站点的模板文件及生成的静态页面一般位于ZCMS工程的wwwroot目录下，建议（非强制）如下目录结构：wwwroot ZCMSDemo （站点默认发布目录） css （样式文件目录） design （静态页面或设计稿目录） images （图片或flash文件目录） js （脚本文件目录） jsp （jsp文件目录） template（默认模板文件目录）2.web文件的“换行符类型”为“windows换行符-CR/LF”；编码为“UTF-8”（在GBK版本的ZCMS里或在需要与只支持GBK编码的控件交互的情况下，使用“GBK”编码）。考虑到不同web服务器下的兼容性，web文件的文件名不能为中文，并且要区分大小写。3.不同的文档声明影响页面元素的渲染效果，第一行必须加文档声明 ，以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。HTML 4.01或 HTML54. 即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器），仍然采用IE7的内核渲染，使用上面这一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。5.考虑到页头页脚将会制作成包含文件，所以区的内容至少要分散到三个独立div内。6.考虑到一些交互脚本需要向页面内插入新的DOM元素，并设置坐标，所以不要给设置宽度及内外边距。7.综上所述，页面的基本HTML代码如下： 1234567891011121314151617181920212223 8.考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要对body、textarea、select、button之外的标签重新设置字体大小；并且建议不要对body、textarea、td之外的标签重设行高。9.所以基本的css设定（reset.css）可以如下，（仅示例，请视情况修改或扩展）： 12345678910/* reset.css */body background-color:#fff;color: #222; a color: #06a; text-decoration: none; a:hover color: #f90; text-decoration: underline; body,div,q,iframe,form, ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p margin: 0; padding: 0; img,fieldsetborder: none 0; body,td,textareaword-break: break-all; line-height:1.5; body,input,textarea,select,buttonmargin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif; div,p,table,th,td font-size:1em; font-family:inherit; line-height:inherit;10.建议页面制作时，首先在在Firefox3.6以上版本、IE8.0以上版本及Chrome13以上版本测试，然后再测试 IE7、iE6、Safari等浏览器，至少要保证在Chrome最新版本及IE6/7/8这四个浏览器内正常显示（符合预期效果，页面布局无错位、载入 及交互时无JS错误）。11.允许使用css hack，以提高制作效率，如 12.fl float:left; _display:inline; .fr float:right; _display:inline;12.页面布局，编写html时尽量不要对元素进行ID命名，亦即尽量少使用css中的ID选择器，对元素ID命名可以在编写js交互