HTML静态页制作规范_第1页
HTML静态页制作规范_第2页
HTML静态页制作规范_第3页
HTML静态页制作规范_第4页
HTML静态页制作规范_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML静态页制作规范 一、总则21.1 目的及效力21.2页面制作工作的原则2二、文件及文件夹22.1 文件夹32.2 图片文件32.3 页面文件32.4样式表文件42.5 JavaScript文件4三、代码规范43.1 样式表43.2 HTML代码5四、页面内容54.1 页面布局54.2形象页、页头页尾64.3内容显示64.4表单74.4链接74.5 英文字体74.6 积极沟通8五、标准代码8附录一9按住CTRL并单击目录可直接定位一、总则1.1 目的及效力1. 制订本规范的目的是使静态页面制作工作标准化，便于阅读、理解和程序合成，实现流水化作业，以期提高代码质量、提升开发效率、减少错误。

2、 2. 页面制作人员必须严格遵守此规范。3. 本规范应用于2015年9月1日以后制作的项目中，不溯及以往。4. 本规范随时根据需要修订，请注意版本号的变化。当前为2.0版。1.2页面制作工作的原则1. 页面制作人员应有手写代码的能力。2. 页面制作必须在规定的时间内完成。3. 页面制作必须按照合同规定完成，如使用table/div布局等。4. 页面制作要遵循设计人员制作的效果标准，对设计效果有疑问的要和设计师协商明确，不得随意更改设计效果。页面制作完成后需检查是否与设计效果一致，然后提交设计师确认，确认完毕后安排程序制作。5. 设计人员设计的所有页面效果都必须制作成静态页面，不得缺漏。6. 所

3、有网站中需要用到的功能性页面都必须制作，不得缺漏。7. 多语言版网站，所有语言版的页面都必须制作，不得缺漏。8. 使用统一的样式表文件、统一的文件和文件夹命名，标准模块使用公司统一的静态代码。9. 页面制作时使用的文字和图片资料尽量使用客户的真实信息。无法获得客户相关资料的，可以使用安徽安搜信息技术有限公司的相关资料代替。页面中严禁出现其他客户的名称、标志及联系方式等信息。10. 页面制作必须要保证在多分辨率下的显示效果。11. 页面制作必须要保证在多浏览器下的现实效果。至少保证在IE6.0，IE7.0，IE8.0，FireFox，360等常用浏览器下的显示效果。12. 页面制作时必须考虑到以

4、后维护内容时可能出现的各种特殊情况，如：新闻或栏目名称标题较长、暂无内容或内容较少、页数较多、日期长短不一等。13. 在不增加代码复杂度、不降低显示效果的情况下，应尽量缩减图片和页面尺寸。14. 必须遵守互联网相关法律法规，如备案信息的处理、网页内容的健康等。二、文件及文件夹2.1 文件夹1. 静态页面制作完成后，所有的工作结果需放置在一个项目文件夹内。2. 项目文件夹命名：中文拼音首字母_中文名，其中字母一律小写。3. 图片文件、flash文件统一放置在images文件夹内，css样式表文件放在css文件夹内，js放在js文件夹内。普通企业网站原则上不再分设子文件夹；对于复杂的门户型网站，根

5、据需要将图片放在images文件夹的不同子文件夹内。所有测试图片均放于uploads文件夹。2.2 图片文件1. 图片文件的命名应清晰、明了，有明确含义。2. 严禁使用中文字符、纯数字序列、汉语拼音、单个字母、含义不明确的缩写等命名图片。3. 在保证图片质量的前提下，尽量减小图片的文件大小, 以减少加载时间。依据实际情况灵活使用jpg，gif，png格式，透明图片可以使用png。4. 尽量避免使用半透明的png图片。5. 图片命名要有规律，避免后来增补的图片直接更新会覆盖原有图片的情况。6. 图片命名的一般原则，【位置单词_功能单词_文件单词_数字.扩展名】常用单词有 head、to

6、p、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技术集中小的背景图或图

7、标， 减小页面http请求。2.3 页面文件1. 页面文件统一使用UTF-8编码保存，请在软件工具中做好设置。2. 页面文件依据其内容和功能，尽量使用标准文件名。没有标准文件名的，可取用含义贴切的英文单词，或取用页面效果的文件名。严禁使用中文或拼音命名文件。注意除news外，其他英文单词结尾一般不加s，如使用product.html，不使用products.html。3. 页面文件使用html为后缀名。4. 形象页： default.html5. 首页：index.html6. 关于我们、公司介绍：about.html7. 新闻列表：news.html8. 新闻内容：news_con

8、tent.html9. 产品列表：product.html10. 产品内容：product_content.html11. 产品订购：order.html12. 联系部门：contact.html13. 留言本：message.html14. 招聘职位：hr.html15. 购物车：order.html16. 搜索结果：search.html17. 客户案例：case.html18. 所有网站中需要用到的功能性页面都必须制作，不得缺漏。如形象页、搜索结果页、网站地图页等。19. 如用about页兼任content页，必须要设计好新闻标题和发布日期的样式。2.4样式表文件1. 样式表文件统一使用

9、UTF-8编码保存。2. 样式表文件第一行声明如下：charset "utf-8"3. 样式表文件统一命名为 style.css ，并存放于css文件夹内。对大型网站和有换肤功能的网站，要根据实际情况灵活处理。4. 一般设计站推荐使用三个css。全站公用部分css，可以命名为base.css。首页命名成home.css。内页部分命名为inside.css。5. 网站使用比较复杂的特效时所用的css，可以独立成一个css文件。2.5 JavaScript文件1. JavaScript文件统一使用UTF-8编码保存。2. Jquery库文件放在所有js文件最前面，比如jquer

10、y-1.4.1.min.js。3. 常用JavaScript全部统一放在同一个文件中。并命名为common.js，并放在所有JavaScript文件最后。4. 引入JavaScript库文件, 文件名须包含库名称及版本号及是否为压缩版。比如jquery-1.4.1.min.js。 引入插件, 文件名格式为库名称+插件名称。比如jQuery.cookie.js。三、代码规范3.1 样式表1. 样式表中中文字体名, 请务必使用英文表示法，或者转码成unicode码, 以避免编码错误时乱码， 如宋体可以使用SimSun。2. 如果出现页面调整，需将新增的样式放在样式表末

11、位，并做注释（标明修改的日期），防止程序员改过样式。注意和程序员积极沟通，保持双方样式表文件内容的一致性。3. 样式表中禁止统一设置 table margin-left:auto; margin-right:auto;，这将导致后台设置的图片居左、居右没有效果。可在需要的样式中单独设置。4. 导航、页码等链接的当前状态统一使用class="current"，不得命名为position等其他名字。5. 样式禁止使用id选择符，可能会和js程序冲突，也不方便复制使用。6. style.css 文件中应包含统一公共样式，具体样式内容见demo项目中的 style.css。7. 样

12、式表注释；样式表应适当加注释，不同模块之间要适当换行，方便日后修改。8. 对于样式的书写，横排竖排均可，但建议使用横排。9. 书写代码前, 考虑并提高样式重复使用率。3.2 HTML代码1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html> 编码统一为<meta charset=”utf-8 />, 书写时利用IDE实现层次分明的缩进。2. 非特殊情况下样式文件、JavaScript文件必须外链至<head></head>之间，为了兼容低版本ie浏览器的JavaScript文件可以页面底部。3. 语义化html, 如

13、标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素。4. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p><

14、 /div>。5. 重要图片必须加上alt属性， 给重要的元素和截断的元素加上title。6. 特殊符号使用: 尽可能使用代码替代: 比如 <(&lt) >(&gt) 空格(&nbsp )等等;7. 能做成文字的尽量做成文字，不要做成图片。8. 避免在Dreamware中自动生成垃圾代码。9. 应使用尽可能少的代码达成页面效果，不得有无用的和无效的代码。避免在代码中产生多余的空行和空格。10. 除标准代码外，其他html标签及其属性值一律使用小写字母。11. html标签应拼写正确，属性值应使用双引号括起来，不得出现错误。12. html标签应完整成对

15、，正确闭合。独立标签使用 / 闭合时，/ 前要留一个空格。13. 复制其他网站的代码时需仔细检查，不得出现多余代码、多余样式、标签未闭合、标签错误、多余的JS函数调用等情况。14. 代码缩进，缩进大小为1个制表位，制表位大小为4个空格。提前在Dreamweaver中的：“首选参数”“代码格式”中做好设置，制作完页面后，在代码视图下格式化代码。 四、页面内容4.1 页面布局1. 页面各个模块之间可以根据需要进行class命名，具体命名法则见附录一。2. 尽量减少Table的嵌套层数，一般不要超过3层。头部和底部内容应和中间主体部分代码分开，方便做成包含。尤其要尽量避免将整个页面放在一个Table

16、中的情况，特别是首页，应尽量按其效果切成多行，而不是多列。 3. 避免对同一级别的对象分别使用百分比和象素值控制宽度。4. 严禁使用rowspan合并表格。（仅限用table做页面布局）5. 排版应使用 &nbsp; 留空，严禁使用中文全角空格。较多的空格，或内容与边界之间无意义的空格，应使用样式定义。6. 间距尽量使用 margin 和 padding 控制，不要使用table占位。亦不得使用如<div style=”height:10px;”></div>这样的空标签占位，尽量用类似margin-top:10px; 的方式实现。7. 避免为包含后期维护内容的

17、容器设置高度。因为当内容超出容器时，IE浏览器会将容器自动撑开；而FF浏览器会保持容器大小，内容显示到容器之外。4.2形象页、页头页尾1. 形象页一定要有备案号链接。2. 形象页页尾尽可能和内页保持一致。“进入网站”、“备案号”等内容应做到FLASH之外。3. 主导航栏的链接样式变化不得使用JS，应使用样式表a的几个状态变化来实现。4. 主导航栏各栏目宽度一般应保持一致。5. CopyRight中应使用 &copy; 符号表示。6. 页尾要有备案号链接、要有 技术支持:安徽安搜 的链接，必须要链接到正确的网址并在新窗口中打开。7. 页面声明及<head>部分使用统一标准代码

18、。8. 页尾的联系信息应制作在一个相对独立的模块中。4.3内容显示1. 首页动画文件使用标准插入FLASH代码实现，必须要有替换显示图片。2. 页面栏目文字应和设计效果保持一致。3. 文字标题所在的容器尽量不要控制宽度，防止出现栏目名过长，导致变形。背景尽量做成可重复、自适应的，不要做成固定长度的特殊背景。类似 首页 -> 关于我们 -> 公司概况 这样的导航要考虑到二级栏目名称较长时不会换行，如果定义了宽度，建议加上overflow:hidden样式。4. 需要显示日期的，要注意留有足够的空间，一定要测试类似 2009-12-28 这样的日期是否可以正常显示。5. 内容、新闻列表

19、、图片列表等显示模式必须使用标准div代码来处理，禁止再使用table布局。6. 新闻列表页，在文字标题超长换行时，也要保证显示效果。尤其在交替行换色时，注意保持交替行的行高一致性。7. 图片列表中要至少有一个图片显示为“暂无图片”，可以根据实际情况选择使用文字或图片达成效果。无图时建议加个细线边框，效果更美观。8. 所有带边框修饰的图片，其边框或修饰背景不得与图片切为一张整图，且样式最好不要定义到img标签上，建议定义到外层容器上。9. 要避免在图片数量不固定，特别是不能占满一行时，图片列表变形。10. 缩略图在网站各个显示的地方要大小一致，最低限度也要保持比例一致。如效果相差太大，应同设计

20、师协商处理。11. 可维护的图片长宽尽量取整数，并尽量将长宽比保持在4比3。12. 一般在内页不截取标题，所以在内页一定要处理好新闻标题或图片标题过长时导致换行的情况，尤其是背景要处理好。13. 纯色直角边框、纯色背景、纯色的实线、虚线等用样式就可以处理的地方，不要用高度1的表格或div来做线，更不要使用图片处理。14. 可用1像素背景图平铺的，不得切成一张大图。15. 后台编辑器维护的文字块内容，不要把默认文字样式加在p标签上，而是定义在 td p，或div p 上，因为编辑器会在维护的文字内容外自动生成p标签。4.4表单1. 页面上出现的<select>选择框，应定义其宽度。2

21、. 表单必须使用<form>标签实现。3. 表单中的提交、重置等按钮效果为图片时，必须使用<input type=”submit”>标签形式实现，不得做成<a>标签，也不得做成<input type=”image”>标签。4. 几个常规功能，包括在线留言、人才招聘、联系我们、在线订购的表单，要使用标准代码。5. 登陆表单的密码输入框必须使用<input type=”password”>实现，注意保持用户名和密码两个输入框的宽度一致。6. 单行文本输入框中的文字必须要保持垂直居中。7. 单行文本框(text)和多行文本框(textare

22、a)中的文字要保持字体一致、颜色一致。4.4链接1. 链接的活动样式颜色应向设计师询问清楚。2. 在静态页面间要通过导航可以互相链接。3. 首页各功能模块要链接到相应栏目页。不确定其对应栏目的，要咨询设计师。4. 网站上明显应有链接的图片和标题，一定要处理好链接的样式。5. 列表页面的第一条信息必须链接到详细页面。功能性按钮或文字链接（如：订购）要能链接到相应的功能页面。6. 网站上链接到其他网站时必须在新窗口中打开，从列表页面进入详细页面时也必须在新窗口打开，从有主导航栏的页面进入没有主导航栏的页面时也必须在新窗口打开。7. 二级菜单、分页数字等必须要设置好当前样式。4.5 英文字体1. 其

23、他语言网站上不允许出现直接使用的汉字、全角空格、全角数字、汉字标点和其他全角符号。2. 样式表默认第一字体应是英文字体，第二字体才是中文字体。因为即使是中文版，在如公司介绍等详细内容中也可能出现英文。3. 中文网站上出现的英文，如CopyRight和Email地址要使用英文字体。4.6 积极沟通出现以下情况时，应积极与页面设计人员沟通解决：1. 设计要点、是否使用统一的详细页，是否有较特殊的页面，是否有制作时需要特别注意的地方，是否有客户特殊要求与关注点，是否有效果图上未能表达的动画/js效果。2. 缺少搜索结果等功能性页面、缺少英文版页面。3. 页面尾部缺少 技术支持：安徽安搜 的链接。4.

24、 形象页设计不符合规范。5. 如两个页面只有细微差别，需咨询设计师是否属于设计上的特殊要求，如不是应尽量保持代码一致。6. 如果不影响显示效果，应尽可能使用 年-月-日 的标准短日期格式。7. 底部导航和顶部导航数量不一致、名称不一致。8. 首页不能明确其相应内页面的功能模块，应向设计师了解清楚其功能，链接到相应内页。五、标准代码1、 标准代码详见html_demo项目文件。2、 标准代码中已有的功能，必须使用标准代码来实现。3、 对标准代码有疑问的，请发邮件给hudenghui并抄送给danliping，严禁擅自修改标准代码。附录一做网页时，常会因为不会命名和命名重复而造成好多不必要的麻烦，正确的命名的确很重要，我这里收集整理一些命名规则：(一)页面命名一览表:(1)页面结构容器: container页头：hea

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论