HTML静态页制作规范

HTML静态页制作规范

一、总则 (2)

1.1 目的及效力 (2)

1.2页面制作工作的原则 (2)

二、文件及文件夹 (2)

2.1 文件夹 (2)

2.2 图片文件 (3)

2.3 页面文件 (3)

2.4样式表文件 (4)

2.5 JavaScript文件 (4)

三、代码规范 (4)

3.1 样式表 (4)

3.2 HTML代码 (5)

四、页面内容 (5)

4.1 页面布局 (5)

4.2形象页、页头页尾 (6)

4.3内容显示 (6)

4.4表单 (7)

4.4链接 (7)

4.5 英文字体 (7)

4.6 积极沟通 (7)

五、标准代码 (8)

附录一 (8)

按住CTRL并单击目录可直接定位

一、总则

1.1 目的及效力

1.制订本规范的目的是使静态页面制作工作标准化，便于阅读、理解和程序合成，实现流水

化作业，以期提高代码质量、提升开发效率、减少错误。

2.页面制作人员必须严格遵守此规范。

3.本规范应用于2015年9月1日以后制作的项目中，不溯及以往。

4.本规范随时根据需要修订，请注意版本号的变化。当前为2.0版。

1.2页面制作工作的原则

1.页面制作人员应有手写代码的能力。

2.页面制作必须在规定的时间内完成。

3.页面制作必须按照合同规定完成，如使用table/div布局等。

4.页面制作要遵循设计人员制作的效果标准，对设计效果有疑问的要和设计师协商明确，不

得随意更改设计效果。页面制作完成后需检查是否与设计效果一致，然后提交设计师确认，确认完毕后安排程序制作。

5.设计人员设计的所有页面效果都必须制作成静态页面，不得缺漏。

6.所有网站中需要用到的功能性页面都必须制作，不得缺漏。

7.多语言版网站，所有语言版的页面都必须制作，不得缺漏。

8.使用统一的样式表文件、统一的文件和文件夹命名，标准模块使用公司统一的静态代码。

9.页面制作时使用的文字和图片资料尽量使用客户的真实信息。无法获得客户相关资料的，

可以使用安徽安搜信息技术有限公司的相关资料代替。页面中严禁出现其他客户的名称、标志及联系方式等信息。

10.页面制作必须要保证在多分辨率下的显示效果。

11.页面制作必须要保证在多浏览器下的现实效果。至少保证在IE6.0，IE7.0，IE8.0，

FireFox，360等常用浏览器下的显示效果。

12.页面制作时必须考虑到以后维护内容时可能出现的各种特殊情况，如：新闻或栏目名

称标题较长、暂无内容或内容较少、页数较多、日期长短不一等。

13.在不增加代码复杂度、不降低显示效果的情况下，应尽量缩减图片和页面尺寸。

14.必须遵守互联网相关法律法规，如备案信息的处理、网页内容的健康等。

二、文件及文件夹

2.1 文件夹

1.静态页面制作完成后，所有的工作结果需放置在一个项目文件夹内。

2.项目文件夹命名：中文拼音首字母_中文名，其中字母一律小写。

3.图片文件、flash文件统一放置在images文件夹内，css样式表文件放在css文件夹内，

js放在js文件夹内。普通企业网站原则上不再分设子文件夹；对于复杂的门户型网站，根据需要将图片放在images文件夹的不同子文件夹内。所有测试图片均放于uploads 文件夹。

2.2 图片文件

1.图片文件的命名应清晰、明了，有明确含义。

2.严禁使用中文字符、纯数字序列、汉语拼音、单个字母、含义不明确的缩写等命名图片。

3.在保证图片质量的前提下，尽量减小图片的文件大小, 以减少加载时间。依据实际情况灵

活使用jpg，gif，png格式，透明图片可以使用png。

4.尽量避免使用半透明的png图片。

5.图片命名要有规律，避免后来增补的图片直接更新会覆盖原有图片的情况。

6.图片命名的一般原则，【位置单词_功能单词_文件单词_数字.扩展名】

常用单词有head、top、left、right、bottom、footer、banner、nav、title、menu、logo、pic、bg、btn、ico等等；

对网页中后台可维护的图片，可以简单取用p1、p2、p3等名称。

对不同文件中相同位置、相同功能的图片，名称应保持一致性，如：

left_menu_about.jpg、left_menu_news.jpg、left_menu_contact.jpg；

banner_about.jpg、banner_news.jpg；

导航图片的替换图：默认状态为banner01.jpg当前状态为banner1.jpg。

7.运用css sprite技术集中小的背景图或图标，减小页面http请求。

2.3 页面文件

1.页面文件统一使用UTF-8编码保存，请在软件工具中做好设置。

2.页面文件依据其内容和功能，尽量使用标准文件名。没有标准文件名的，可取用含义贴切

的英文单词，或取用页面效果的文件名。严禁使用中文或拼音命名文件。注意除news外，其他英文单词结尾一般不加s，如使用product.html，不使用products.html。

3.页面文件使用html为后缀名。

4.形象页：default.html

5.首页：index.html

6.关于我们、公司介绍：about.html

7.新闻列表：news.html

8.新闻内容：news_content.html

9.产品列表：product.html

10.产品内容：product_content.html

11.产品订购：order.html

12.联系部门：contact.html

13.留言本：message.html

14.招聘职位：hr.html

15.购物车：order.html

16.搜索结果：search.html