(html页面规范.docxVIP

软件网站页面制作规范1.0版 2011-08-16一、引言21.1 目的21.2交互、设计与前端约束2二、文件及文件夹22.1 文件夹22.2 页面文件32.3 图片文件42.4样式表文件4三、代码规范43.1 HTML代码43.2 CSS5 一、引言1.1 目的制订本规范的目的是使静态页面制作工作标准化，便于阅读、理解和程序合成，实现流水化作业，以期提高代码质量、提升开发效率、减少错误。页面制作人员必须严格遵守此规范。本规范应用于2011年8月16日以后制作的项目中，不溯及以往。本规范随时根据需要修订，请注意版本号的变化。当前为1.0版。1.2交互、设计与前端约束交互稿出来之前，由运营需求经理提出策划稿，与大家共同讨论确定有哪些功能的实现，哪些功能是难点，前端需进行前端需要进行的功能难点的突破。交互稿，最好由该项目的主要设计师来做，如果不是设计师做交互稿，策划、设计师及前端一定要经常交流，确定交互稿。交互稿一定要细化的页面的每个功能点，及页面每个点的现实方式（当需要修改需求是，交互稿要做同步修改），交互稿将作为之后项目的主要引导，以便项目完成查看项目的主要依据。交互稿出来需与运营需求经理确认，确认后发与项目相关人员。设计师严格按照交互稿进行设计。前端可以与设计师同步，根据交互稿开始html的编写，基本功能的实现，待设计效果图出来后，直接把css和js替换，即可显示出设计图效果（注意事项在后面详细写出）。二、文件及文件夹2.1 文件夹 除了首页，每个模块用一个文件夹，文件夹的名称为模块的英文，或缩写英文，比如新闻模块用：News (一般不以复数形式是结尾)News/ 新闻模块Book/ 书店模块Manage/ 个人中心Admin/后台管理（备注，后台中心的样式应该在Admin里面的Style下，这样便于移植）项目文件夹命名：统一首字母大写，用峰驼式。三个特别文件夹：Style：样式文件夹，页面设计所用的图片、flash、css、js都放在Style/下面，其中flash和图片放在Style/Img/下面，这样方面样式图片的统一管理。Topic：专题文件夹，每个专题都放在专题文件夹里面，并且用日期命名。每个专题文件夹里面包含页面及Img。Upload：上传的东西所放的文件夹，用于后台上传图片等资料的文件夹，上面资料也应该用日期命名文件夹，当天的文件应放在该天日期文件夹内。2.2 页面文件页面统一使用UTF-8编码保存，在首选参数 - 新建文档 - 默认编码 里面选择UTF-8。代码格式用缩进Tab健， 在首选参数 - 代码格式 - 缩进 1 tab 健。页面文件根据内容或功能来进行取名，尽量用含义贴切的英文单词。严禁使用中文或者拼音。首页：index.html默认页：default.html新闻页：news.html关于我们：about.html招聘页面：hr.html留言页：message.html2.3 图片文件命名：图片文件名称和文件名一样，应该用英文名，禁止使用中文和拼音。图片格式：常用格式png8/24、gif、jpgpng24时，图片透明支持的非常好，缺点是ie6需要解决方案，比如js或css为背景的是统一解决方式（针对ie6）：_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=../Style/Img/tab1.png);png8，在不做动画的情况下，可以取得gif，还可以比gif大小小一些gif，实现gif动画时使用jpg，一般用打开图片背景时使用大小：用ps切图时，要选择比较小的图片格式保存，比较gif/png/jpg。jpg可以将品质压倒刚清楚的。比如压缩到70等。图片的整合，可以将背景整合到一张图片、按钮整合到一张图等。甚至小的网站可以将所有用的图片都整合在一张上。这样可以减少http请求。备注：但当图片过大，超过30k（暂定）可以分成两个图片，一个图片30k，另一个比较小也没关系，后继的图片可以添加上去2.4样式表文件样式表文件统一使用UTF-8编码保存。样式表文件第一行声明如下：@charset utf-8;整站样式表文件可以用一个公用样式表global.css，当网站比较大一些的时候，除了公用样式表意外，以每个模块建一个css。如：news.css / about.css / college.css如果需要换肤，则命名按色彩来命，比如：red.css / blue.css / green.css三、代码规范3.1 HTML代码根据交互图写出html，严格按照交互图效果排版；按照从上到下、从左到右的优先级排列，重要的放在前面；页面布局要建立清晰的层次关系，且