web基准化页面制作方法.docVIP

WEB标准化页面制作指南 —— 页面制作方法指南 V1.0 目 录 1. 引言 5 1.1. 编写目的 5 1.2. 适用的人员范围 5 1.3. 适用的产品范围 6 2. 制作页面的方法 6 2.1. 整站页面风格要保持一致 6 2.2. 文件目录名称的命名 6 2.3. 站点目录结构 6 2.4. 站点文件的管理 7 2.5. 页面采用的结构形式 7 2.5.1. Frame框架： 7 2.5.2. Templates模板： 8 2.5.3. Library库文件 8 2.6. 页面采用的宽度定义 8 2.6.1. 采用百分比定义页面宽度（单位：%） 8 2.6.2. 采用固定值定义页面宽度（单位：px） 9 2.7. 内容对宽屏分辨率的适应 9 2.7.1. 正常改变区域： 9 2.7.2. 有限改变区域： 10 2.7.3. 不可改变区域部分： 11 2.8. 文字内容制作 11 2.9. 超级连接直观有效 12 2.10. 图片制作事项 14 2.10.1. 图片的命名规则 14 2.10.2. 图片的应用格式 14 2.10.3. 图片的切割 15 2.10.3.1. 主题类的图片切割 15 2.10.3.2. 标题类的图片切割 15 2.10.3.3. 背景类的图片切割 16 2.10.3.4. 图标类的图片切割 16 2.10.3.5. 圆角矩形类的图片切割 17 2.10.3.6. 渐变效果类的图片切割 17 2.11. 背景图片 18 2.11.1. 普通背景图片： 18 2.11.2. 渐变背景图片 19 2.12. 图片的字节数大小 19 2.13. 图片的优化 20 2.14. Flash动画的制作 21 2.14.1. Flash制作方法注意事项： 21 2.14.2. Flash优化工具——Flash Optimizer 22 2.14.3. Flash制作过程中的问题汇总 22 2.15. 搜索引擎优化（SEO） 22 2.15.1. 站点外的SEO： 22 2.15.2. 站点内的SEO： 23 3. 意见反馈 23 文档修订记录： 日期 被修改的章节 修改类型* 修改描述 修改人 审核人 版本 修改类型分为 A - ADDED M - MODIFIED D – DELETED 引言 编写目的 本文档给出了有关页面制作时的思路和解决方法，从而保障页面制作的规范性，使得制作人员能形成良好的思考习惯和制作习惯，提高整个集团的制作水平和产品质量，保障所制作出的产品有更好更持续的发展。 本文档可以作为页面制作方法的一个指导性文件，各部门可以根据自己的实际情况对本文档进行完善和增加，以建立起适合本部门的制作规范。 适用的人员范围 本文档主要面对WEB页面制作人员页面设计，阅读本文档需要掌握相关基础知识： 掌握html4.0和Xhtml1.0相关标准和用法； 掌握css2.0相关标准和属性； 对script脚本的作用和用法有一定程度的了解。技术和技术知识做详细描述阅读相关技术文档。本文档适用于基于HTML页面的产品。 整站页面风格要保持一致 在制作网页时，要严格按照设计师的图稿样式做，同时网页上所有的图像、文字，包括背景图、背景颜色、区分线、字体、字体大小、颜色、标题、注脚什么的，都要按照设计图来统一整体风格，始终贯穿全站。 文件目录名称的命名 文件目录命名的指导思想是：使得你自己和工作组的每一个成员能够方便的理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。 文件目录名称英文单词或拼音长度不超过20个字符如果需要加数字，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符文件目录的名称。 文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。和移植有着重要的影响。css文件目录： 存放CSS 样式文件 flash文件目录： 存放.swf文件 html 文件目录： 存放分栏目内容页面 images文件目录： 存放图片文件 javascript文件目录：存放JS文件 language文件目录： 存放多种语言文件 library文件目录： 存放库文件 templates文件目录： 存放模板页面 站点文件的管理 利用工具软件Dreamweaver进行站点管理 可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同时也可以对框架、模板、库文件、图片、动画等进行管理。 页面采用的结构形式 Frame框架： 框架是