页面制作注意事项
页面制作注意事项
V1.1
目 录
1. 引言 2
1.1. 编写目的 3
1.2. 适用的工作人员 3
1.3. 编写的范围 3
1.4. 适用的产品范围 3
2. 页面制作注意事项 4
2.1. 代码嵌套合理 4
2.2. 标签的语义化 4
2.3. 注释内容不能使用 “--” 4
2.4. 页面宽度的定义 4
2.4.1. 采用百分比设定页面宽度 4
2.4.2. 采用固定值设定页面宽度 5
2.5. 页面内容分部显示 5
2.6. 其它CSS文件的引入 6
2.7. 属性缩写的规则 6
2.8. Hack使用规则 6
2.9. DIV+CSS中常见问题 6
2.10. CSS文件压缩优化的方法 6
2.11. 站点文件的管理 7
2.12. Frame框架的使用 7
2.13. Templates模板的使用 7
2.14. Library库文件的使用 8
2.15. 超级连接定义 8
2.16. 图片的应用格式 9
2.17. 主题类的图片切割 10
2.18. 标题类的图片切割 10
2.19. 背景类图片切割 11
2.20. 图标类的图片切割 11
2.21. 圆角矩形类的图片切割 11
2.22. 渐变效果类的图片切割 12
2.23. Flash制作方法注意事项 12
2.24. 搜索引擎优化（SEO） 13
2.24.1. 站点外的SEO 13
2.24.2. 站点内的SEO 13
3. 意见反馈 14
文档修订记录：
|
日期 |
被修改的章节 |
修改类型* |
修改描述 |
修改人 |
审核人 |
版本 |
|
2011.11--2012.3 |
2.1--2.24.2 |
M |
将文件的的格式进行了重新修订 |
贺春香 |
|
1.1 |
|
2.5 |
A |
增加了页面内容分部显示定义 |
贺春香 |
|
1.1 |
|
|
2.12 |
M |
Frame正文内容进行了修改，明确了何时应用此内容 |
贺春香 |
|
1.1 |
|
|
2.13 |
M |
Templates正文内容进行了修改，明确了何时应用此内容 |
贺春香 |
|
1.1 |
|
|
2.14 |
M |
Library正文内容进行了修改，明确了何时应用此内容 |
贺春香 |
|
1.1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
修改类型分为 A - ADDED M - MODIFIED D – DELETED
1. 引言
此文档是对制作规范的一个补充，介绍了一些在页面制作时的一些良好的方法和习惯，以及采用什么方法可以规避制作时的一些错误。不具有强制性，但希望大家能认真阅读一下，从而能帮助大家不断的提高工作质量和效率。
页面制作不仅是一堆代码的对砌，页面的制作也是具有艺术性的，除了要忠实的反映交互设计师和视觉设计师的设计意图，同时还要考虑到页面的容量和代码的可读性以及可维护性，并且还要考虑到阅读者的感受，比如页面要快速的载入并呈现给阅读者，在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。另外我们还要不怕麻烦的编写说明性标记（ALT，TITLE等）。制作人员作为一个中间环节的工作者应该为上游和下游的工作人员尽量的提供方便和良好的支持。
通常制作人员不会得到所有页面的设计稿，所以在页面内容制作时，要严格按照需求文档的要求和设计师的意图对内容进行合理的编排和制作表现。
1.1. 编写目的
为了减少页面制作人员在制作时常范的一些错误，明确提出一些良好的解决方法，以此为参考，进一步提高个人的素质和工作质量。
1.2. 适用的工作人员
本文档主要面对WEB页面制作人员，页面设计人员和页面开发人员也可以参阅了解相关内容，阅读本文档需要掌握相关基础知识：
- 掌握html4.0和Xhtml1.0相关标准和用法；
- 掌握css2.0相关标准和属性；
- 对script脚本的作用和用法有一定程度的了解。
1.3. 编写的范围
本文档对代码的编写方法和编写时需要的注意事项进行了罗列，供大家参照使用。
对于本文档中一些需要掌握的技术技能和技术知识本文档不做详细描述，请另外阅读相关技术知识文档。
1.4. 适用的产品范围
本文档适用于基于HTML页面的产品。
2. 页面制作注意事项
2.1. 代码嵌套合理
嵌套代码时请遵循以下原则：语义明确、结构严谨、层次分明、次序合理。
【规则内容】块元素的标签可以嵌套块元素和行元素。
行元素的标签只能嵌套行元素，不能嵌套块素。
【补充说明】如有不明的可以参阅“附件\附件：XHTML嵌套规则.doc”文档。
【示例内容】
|
<div> <a href=”#”>…..</a> </div> |
2.2. 标签的语义化
每一个标签都有自己的语义，所以在定义内容时请正确使用。
【规则内容】使用语义化的标签来定义内容
【补充说明】如有不明的可以参阅“附件\附件：XHTML语义化标签.doc”文档。
【示例内容】
|
<h1>标题</h1>、<table>表格</table>、< ul>无序列表</ul>、< ol>有序列表</ol> |
2.3. 注释内容不能使用 “--”
【规则内容】注释内容中不要使用“--”
【补充说明】无
【示例内容】
|
代码格式：<!--Invalid and so is the classic "separator" below. --> 错误代码：<!--Invalid -- and so is the classic "separator" below. --> |
2.4. 页面宽度的定义
2.5. 采用百分比设定页面宽度
采用%百分比设定页面宽度的页面，可以随着浏览器分辨率的改变而改变。
【规则内容】允许页面自由拉伸时，则采用百分比来定义页面的宽度
【补充说明】
ü 页面分辨率改变时，内容排版要比例协调，不要出现错位现像。
ü 要考虑不同分辨率的显示效果，尤其是宽屏分辨率。
【示例内容】
|
例：width：100%； |
2.6. 采用固定值设定页面宽度
采用固定值设定页面宽度的页面，不会随着浏览器分辨率的改变而改变。
【规则内容】不允许页面自由拉伸时，则采用固定值来定义页面的宽度。
【补充说明】
ü 在宽屏分辨率下，要考虑整体页面是居中、居左、居右显示的问题。
【示例内容】
|
例：width：1004px； |
2.7. 页面内容分部显示
不要把一个页面中的内容全部放在一个table或div等标签中。应该按内容分段排版。
【规则内容】页面内容要一部分一部分的显示，不要等一段时间再全部显示出来
【补充说明】无
【示例内容】
|
错误写法： <div> <div class=”header”>….</div> <div class=”content”>….</div> <div class=”footer”>….</div> </div> 正确写法： <div class=”header”>….</div> <div class=”content”>….</div> <div class=”footer”>….</div> |
2.8. 其它CSS文件的引入
【规则内容】可以将多个CSS文件引入至一个CSS文件中。
【补充说明】代码格式：@import "name.css"；
【示例内容】无
2.9. 属性缩写的规则
通过使用CSS属性缩写以及其他的一些简单技巧，可以在很大程度上减少样式表的大小，从而提高页面加载样式文件的速度，进一步提高网站运行速度。
【规则内容】部分CSS样式定义可以采用缩写格式。
【补充说明】有关CSS属性缩写详细内容请参阅：“附件\附件：CSS常用缩写语法.doc”。
【示例内容】无
2.10. Hack使用规则
由于不同的浏览器，比如IE 6,IE7, Firefox等，对CSS的解析显示不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
【规则内容】可以针对不同的浏览器，分别编写不同的的CSS 代码。
【补充说明】有关CSSHack详细内容请参阅：“附件\附件：CSS Hack汇总.doc”。
【示例内容】无
2.11. DIV+CSS中常见问题
在制作过程中经常会遇到一些问题，我把其中所知的问题汇总一起，方便大家迅速查看，从而能更高效得解决问题，进一步提高工作效率。
【规则内容】汇总了一些DIV制作时常见问题及解决方案。
【补充说明】详细情况请参阅“附件\附件：CSS制作常见问题汇总.doc”文件。
【示例内容】无
2.12. CSS文件压缩优化的方法
采用DIV+CSS 方法制作页面时，一个普遍的问题就是CSS文件增大，但一些定义又是必不可少的，针对以上问题，建议大家可以采用压缩工具进行有效的压缩。
【规则内容】通过压缩的方法降低CSS文件的大小。
【补充说明】
ü 在线压缩工具：http://www.cssdrive.com/index.php/main/csscompressor/
ü 在线编辑工具：http://tool.chinaz.com/CssDesigner/Index.asp (所见即所得)
【示例内容】无
2.13. 站点文件的管理
【规则内容】使用工具软件Dreamweaver进行站点管理
【补充说明】可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同
时也可以对框架、模板、库文件、图片、动画等进行管理。
【示例内容】
2.14. Frame框架的使用
【规则内容】使用框架(Frame)，可以在浏览器窗口同时显示多个网页
【补充说明】
ü 框架是由框架组和子框架组成。框架组只有一个，子框架可以有多个；
ü 每个Frame里设定一个网页，每个Frame里的网页相互独立。
【示例内容】应用场景：社区网站、后台管理网站
2.15. Templates模板的使用
【规则内容】多个页面的整体架构相同，但只有部分内容不同时，可将相同部分内容做成
Templates模板，然后在多个页面中重复使用。
【补充说明】
ü 模板的应用能大大提高网站维护的效率，因为更新模板时，能使所有应用该模板的页面同时自动更新。
【示例内容】中小型企业网站可采用模板形式。
2.16. Library库文件的使用
【规则内容】多个页面中少部分内容相同时，可将相同的部分做成库文件，然后在多个页面中
重复使用。
【补充说明】
ü Library库被设计用来使重复性的工作能更快、更容易并尽可能地无差错完成；
ü 任何网页中的元素，无论文本还是图形均可以做为库元素，用来放置在同一个站点内的任何页面中。
【示例内容】菜单、翻页等页面中重复性高的内容采用库文件形式。
2.17. 超级连接定义
【规则内容】在制作图象或文本超级连接时，尽可能地使用相对超级链接。
【补充说明】
ü 站点内链接采用相对超级链接，这样做网页的可移植性比较强；
ü 站点外内容采用绝对路径。比如：友情链接
ü LOGO可以采用绝对路径或相对路径。
【示例内容】无
2.18. 图片的应用格式
|
|
|
不超过256色的保存为GIF |
【规则内容】图片要采用GIF和JPG格式
【补充说明】
GIF格式
ü GIF（Graphics Interchange Format）图像互换格式
ü 优点：256色值以内的图片，字节数可以压缩到最小、图像像素低、支持动画格式、支持透明图像，同时已经得到所有主流浏览器的支持。
ü 应用场景：图像色彩不丰富，其色值不超过256以内的图片，例：单色LOGO、单色的广告条等图片。
ü 注意：压缩算法是有损压缩，会造成图像画面失真；不适合超过256色的色彩图像。
JPG格式
|
|
|
超过256色的保存为JPG |
ü JPG(Joint Photographic Experts Group File Interchange Format)联合图像专家组文件交换格式
ü 优点：超过256色值的图片，压缩比高、图片字节数小、图像质量高，同时得到所有主流浏览器的支持。
ü 应用场景：图像色彩丰富，其色值超过256的图片，例：绚丽多彩的照片、丰富的页面插图、渐变色的图片等。
注意：把握好图片质量和图片字节大小之间的平衡,通常图片质量为80%比较合适。
以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附件\附件：XHTML文件图片应用格式.doc”文档。
【示例内容】无
2.19. 主题类的图片切割
【规则内容】主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。
【补充说明】无
【示例内容】
如下图所示：
切割方法：
ü 将图片分三段，以白线分割为界，分为左、中、右三部分；
ü 左、中部分切割为JPG格式图片；
ü 右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。
2.20. 标题类的图片切割
【规则内容】标题类的图片切割时，将展示区域和操作区域分开切割。
【补充说明】无
【示例内容】
如下图所示：
切割方法：
ü 展示区域为：
ü 操作区域为：
ü 下面的灰色横线可以用颜色代码进行单独定义。
2.21. 背景类图片切割
【规则内容】有规律的背景图片切割时，依纹理切割成较小的图片来使用。
【补充说明】
有规律的图片：根据其图片纹理切割成较小的GIF格式的图片，进行平铺使用。
整体一张图片：按照需要进行切割，确实需要全图作背景时要将图片的字节数压缩至最小来使用。
【示例内容】无
2.22. 图标类的图片切割
【规则内容】有规律较密集的图标
【补充说明】无
【示例内容】
标题图标类的图片，可以将小图全部切割成一张GIF格式的图，以减少图片下载次数，然后利用css背景定位的方法来使用这张图片。
2.23. 圆角矩形类的图片切割
【规则内容】对于颜色不超过256色的比较规则的矩形图，当长和高都需要扩展的时候可以采
用九宫格的方法进行切割。
【补充说明】无
【示例内容】示例图片样式：
切割方法：
ü 采用九宫格形式来切割图片；
ü 将圆角单独切割使用，不可以平铺；
ü X轴规则图，取 宽1px的图作为背景图平铺使用；
ü Y轴规则图，取 高1px的图作为背景图平铺使用。
2.24. 渐变效果类的图片切割
【规则内容】对于渐变效果的图片，需要扩展的时时候，可以采用1像素高或宽的图
做为背景图平铺使用。
【补充说明】无
【示例内容】切割方法：
ü X轴重复时，取 宽1px的图作为背景图平铺使用；
ü Y轴重复时，取 高1px的图作为背景图平铺使用。
2.25. Flash制作方法注意事项
Flash是一种交互式矢量多媒体技术，因其采用向量运算﹙Vector Graphics﹚的方式生成图像，所以制作出来的影片占用存储空间比较小。
【规则内容】
ü 在规划制作阶段就要明确Flash文件对搜索引擎友好问题；
ü 在制作中删除一些没有用到的元件及图片；
ü 保证导入的图片质量的情况下，图片大小尽量控制在15K以内；
ü 声音要压缩至10K以内；
ü 保持桢动作的连续；
ü 整个Flash文件控制在30K以内。
【补充说明】
ü Flash优化工具——Flash Optimizer
ü Flash制作过程中的问题汇总，详细情况请参阅“附件\附件：Flash制作常见问题汇总.doc”。
【示例内容】应用场景：
ü Banner广告条：可以用来展示简短的企业标语、产品介绍等；
ü 企业宣传画：可以用来制作较大型的企业文件宣传品；
ü 导航条：页面起导引作用的部分，一般在页面的顶部；
ü 菜单条：可用将菜单制作成可伸缩、隐藏等效果；
ü 演示案例：将案例制作成动画进行操作演示；
ü 多媒体播放器：可用来制作播放器，现在WEB上已很多采用此形式。
2.26. 搜索引擎优化（SEO）
2.27. 站点外的SEO
SEO是Search Engine Optimization的缩写，用英文描述是to use some technics to make your website in the top places in Search Engine when somebody is using Search Engine to find something，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。
【规则内容】
ü 提高自身站点内容质量
ü 登记在分类目录网站中
ü 互相交换站点链接
【补充说明】无
【示例内容】无
2.28. 站点内的SEO
【规则内容】
ü 站点结构设计：搜索引擎更喜欢有好的网页结构，无误的代码和明确导航的站点；
ü 在元标签(meta 标签)放入关键词，密度最好在5-20% 之间；
ü 有规律的更新页面内容；
ü 良好的友情链接；
ü 明智的选择域名，尽量包括关键词；
ü 写适宜长度的文章，太短的文章不能获得较高的排名，同时避免内容的重复；
ü 目录的数量越多，搜索引擎搜索的也就越全面
ü 将站点提交到搜索引擎，更快的方法还是得到已经被搜索引擎收录的站点的链接；
ü 关键词应该出现在网页标题标签里面；
ü URL里面有关键词，即目录名文件名可以放上一些关键词；
ü 在网页导出链接的链接文字中包含关键词；
ü 图像ALT标签可以放入关键词；
ü 整个文章中都要包含关键词，但最好在第一段第一句话就放入。
ü 可以自己进行页面评测，详细内容请见“附录：SEO自我检测.doc”
【补充说明】无
【示例内容】无
3. 意见反馈
在使用过程中，如果遇到问题或有任何的意见、建议可按以下方式联系规范编写人员，我们会对您的问题以及意见、建议做出及时的反馈。
实训教研室-产品研究部 ChengYun Yang
电话：15600011157
E-mial：ued111@126.com
