标准化页面制作方法指南四v10.doc

《标准化页面制作方法指南四v10.doc》由会员分享，可在线阅读，更多相关《标准化页面制作方法指南四v10.doc（24页珍藏版）》请在三一文库上搜索。

1、WEB 标准化页面制作指南 1 WEB 标准化页面制作指南 页面制作方法指南 V1.0 WEB 标准化页面制作指南 2 目 录 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 模板：模板

2、：.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.

3、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 WEB 标准化页面制作指南 3 2.10.3.6.渐变效果类的图片切割渐变效果类的图片切割17 2.11.背景图片背景图片18 2.11.1.普通背景图片：普通背景图片：18 2.11.

4、2.渐变背景图片渐变背景图片19 2.12.图片的字节数大小图片的字节数大小19 2.13.图片的优化图片的优化20 2.14.FLASH 动画的制作动画的制作21 2.14.1.FLASH 制作方法注意事项：制作方法注意事项：21 2.14.2.FLASH 优化工具优化工具FLASH OPTIMIZER22 2.14.3.FLASH 制作过程中的问题汇总制作过程中的问题汇总22 2.15.搜索引擎优化（搜索引擎优化（SEO）22 2.15.1.站点外的站点外的 SEO：.22 2.15.2.站点内的站点内的 SEO：.23 3.意见反馈意见反馈23 WEB 标准化页面制作指南 4 文档修订记

5、录：文档修订记录： 日期被修改的章节修改类型*修改描述修改人审核人版本 修改类型分为 A - ADDED M - MODIFIED D DELETED WEB 标准化页面制作指南 5 1. 引言引言 页面制作不仅是一堆代码的对砌，页面的制作也是具有艺术性的，除了要忠实的反映 交互设计师和视觉设计师的设计意图，同时还要考虑到页面的容量和代码的可读性以及可 维护性，并且还要考虑到阅读者的感受，比如页面要快速的载入并呈现给阅读者，在不同 的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障 人士的阅读需要，比如文字和图形在需要的时候可以放大。另外我们还要不怕麻烦的编写 说明

6、性标记（ALT，TITLE 等） 。制作人员作为一个中间环节的工作者应该为上游和下游的 工作人员尽量的提供方便和良好的支持。 通常制作人员不会得到所有页面的设计稿，所以在页面内容制作时，要严格按照需求 文档的要求和设计师的意图对内容进行合理的编排和制作表现。 1.1.编写目的编写目的 本文档给出了有关页面制作时的思路和解决方法，从而保障页面制作的规范性，使得 制作人员能形成良好的思考习惯和制作习惯，提高整个集团的制作水平和产品质量，保障 所制作出的产品有更好更持续的发展。 本文档可以作为页面制作方法的一个指导性文件，各部门可以根据自己的实际情况对 本文档进行完善和增加，以建立起适合本部门的制作

7、规范。 1.2.适用的人员范围适用的人员范围 本文档主要面对 WEB 页面制作人员，页面设计人员和页面开发人员也可以参阅了解相 关内容，阅读本文档需要掌握相关基础知识： 掌握 html4.0 和 Xhtml1.0 相关标准和用法； 掌握 css2.0 相关标准和属性； 对 script 脚本的作用和用法有一定程度的了解。 注：由于本文档不对技术技能和技术知识做详细描述，所以有需要者另外阅读相关技 术知识文档。 WEB 标准化页面制作指南 6 1.3.适用的产品范围适用的产品范围 本文档适用于基于 HTML 页面的产品。 2. 制作页面的方法制作页面的方法 以下内容主要用来说明在页面制作过程中的

8、一些思路及工作方法，以供该文档的阅读者参 考和使用。 2.1.整站页面风格要保持一致整站页面风格要保持一致 在制作网页时，要严格按照设计师的图稿样式做，同时网页上所有的图像、文字，包 括背景图、背景颜色、区分线、字体、字体大小、颜色、标题、注脚什么的，都要按照设 计图来统一整体风格，始终贯穿全站。 2.2.文件目录名称的命名文件目录名称的命名 文件目录命名的指导思想是：使得你自己和工作组的每一个成员能够方便的理解和记 忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效 率。 文件目录名称统一用小写的英文单词或拼音，长度不超过 20 个字符。如果需要加数 字和下划线以

9、区分页面文件，可以在单词或拼音后面添加数字和下划线，但是禁止用数字 开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。 文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表 达时，用下划线“_”分开两个单词，最多不要超过三个以上单词，如果单词过长，取其 前三个字母。 2.3.站点目录结构站点目录结构 清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也 有着重要的影响。 以下为站点目录内容： WEB 标准化页面制作指南 7 css 文件目录：存放 CSS 样式文件 flash 文件目录：存放.swf 文件 html 文件目录：存放分栏目内容页面

10、 images 文件目录：存放图片文件 javascript 文件目录：存放 JS 文件 language 文件目录： 存放多种语言文件 library 文件目录：存放库文件 templates 文件目录： 存放模板页面 2.4.站点文件的管理站点文件的管理 利用工具软件利用工具软件 DreamweaverDreamweaver 进行站点管理进行站点管理 可以对文件或目录进行添加、删除、改名、移动， 在操作中能自动更新链接；同时也可以对框架、模板、 库文件、图片、动画等进行管理。 2.5.页面采用的结构形式页面采用的结构形式 2.5.1.Frame 框架：框架： 框架是由框架组和子框架组成。在

11、框架网页里，框架组 只有一个， 网页保存数目等于子框架总数加一。 应用场景：社区网站、后台管理网站 WEB 标准化页面制作指南 8 2.5.2.Templates 模板：模板： 文件类型：fileName.dwt 可根据需要设定固化站点每页都出现的元素，通过利用 模板快速创建 WEB 页，可使整个站点具有统一的风格。 应用场景：中小型企业网站 2.5.3.Library 库文件库文件 文件类型：fileName.lbi Library 库被设计用来使重复性的工作能更快、更容易 并尽可能地无差错完成；任何网页中的元素，无论文本 还是图形均可以指定为库元素，并且可以用来放置在同 一个站点内的任何页

12、面中。 应用场景：菜单、翻页等页面中重复性高的内容。 2.6.页面采用的宽度页面采用的宽度定义定义 2.6.1.采用百分比定义页面宽度（单位：采用百分比定义页面宽度（单位：%） 代码格式： 例：width：100%； 解释说明： 采用%百分比设定页面宽度时，可以随着浏览器宽 度的改变而改变。在制作过程中一定要考虑好页面内容 WEB 标准化页面制作指南 9 的表现，要做到内容在不同宽度浏览器中显示时布局要整齐、内容排版比例协调。 2.6.2.采用固定值定义页面宽度（单位：采用固定值定义页面宽度（单位：px） 代码格式： 例：width：1004px； 解释说明： 采用固定值设定页面宽度时，随着浏

13、览器宽度的改变但 内容不会改变。 2.7.内容对宽屏分辨率的适应内容对宽屏分辨率的适应 现在采用宽屏分辨率的显示器越来越多，所以在制作时一定要考虑宽屏模式。 采用百分比定义页面宽度时，内容会随着浏览器的改变而改变，所以在制作时要特别注意 内容在不同分辨率下的显示情况。 宽屏分辨率下，根据表现的内容可分为正常改变区域正常改变区域、有限改变区域有限改变区域、不可改变区域不可改变区域 三部分。 在制作过程中一定要按上述三种分类来规划好页面中内容表现形式。 2.7.1.正常改变区域：正常改变区域： 内容会随着分辨率的变化而正常变化，同时也符合人的视觉要求，但不会影响内容排 版格式。 如下图红色标注所示

14、： WEB 标准化页面制作指南 10 2.7.2.有限改变区域：有限改变区域： 内容会随着分辨率的变化而有限度的改变，同时符合人的视觉面积，但不影响页面内 容的表现。 如下图红色标注所示-不正确的内容表现： 如下图红色标注所示-正确的内容表现： 解释说明： 在浏览页面时，人的正常视觉角度是 15 度，超出视觉范围时会让用户产生内容断层 WEB 标准化页面制作指南 11 的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。 2.7.3.不可改变区域部分：不可改变区域部分： 内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。 如下图红色标注所示-正确的内容表现

15、： 2.8.文字内容制作文字内容制作 别轻易让文字居中和使用斜体字符，除了视感混乱之外，很多流览器不能很好地显示 斜体字，也不能补偿由于字母倾斜引起的空白变化； 不要把重要的内容排版放到网页的结尾，因为读者的视线可能停留在主页上面较多一 点，或者有些读者没有耐心往下看那么远； WEB 标准化页面制作指南 12 闪烁文字不要使用； 制作页面内容时编写的测试数据，要与所反映的内容类型相一致，不要写一些不相关 的数据。 2.9.超级连接直观有效超级连接直观有效 在制作图象或文本超级连接时，尽可能地使用相对超级连接，这是因为这样做网页的 可移植性比较强；另外使用相对超级连接时输入量也较少，在同一页的连

16、接项当然应 该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一 次。如果是连接到不直接相关的文件时，使用绝对路径比较好，这样以后要是把源文 件移到另外的目录下就不需更改连接了。 WEB 标准化页面制作指南 13 页面中的超级连接应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在 每一页同样的位置上都有相同的导航条，使浏览者能够很直观地从每一页上访问网站 的任何部分。 另外特别要避免“请按这里” ，任何要“按这里”的人都会慎重考虑，它是不是正好 就在“这里” ，并且连接无误。不要让连接的名称与连接的 URL 不同，这样会使读者 白白地浪费时间。 一个页面的最大链接

17、的数量要小于 100。 WEB 标准化页面制作指南 14 2.10.图片制作事项图片制作事项 2.10.1. 图片的命名规则图片的命名规则 名称为英文单词或拼音，如果需要加数字表达的，可以在单词或拼音后面添加数字， 但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。 图片文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表 达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个 字母。 例如：企业标识 - logo.gif 2.10.2. 图片的应用格式图片的应用格式 GIF 格式格式 GIF（Graphics Interchange

18、Format）图像互换格式 优点：256 色值以内的图片，字节数可以压缩到最小、图像像 素低、支持动画格式、支持透明图像，同时已经得到所有主流 浏览器的支持。 应用场景：图像色彩不丰富，其色值不超过 256 以内的图片， 例：单色 LOGO、单色的广告条等图片。 注意：压缩算法是有损压缩，会造成图像画面失真；不适合超过 256 色的色彩图像。 JPG 格式格式 JPG(Joint Photographic Experts Group File Interchange Format)联 合图像专家组文件交换格式 优点：超过 256 色值的图片，压缩比高、图片字节数小、图像 质量高，同时得到所有主

19、流浏览器的支持。 应用场景：图像色彩丰富，其色值超过 256 的图片，例：绚丽 多彩的照片、丰富的页面插图、渐变色的图片等。 不超过 256 色的保存为 GIF 超过 256 色的保存为 JPG WEB 标准化页面制作指南 15 注意：把握好图片质量和图片字节大小之间的平衡,通常图片质量为 80%比较合适。 注：以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附录附录： XHTML 文件图片应用格式.doc”文档。 2.10.3. 图片的切割图片的切割 图片切割原则：切割数量最少化、字节压缩最小化、表现内容完整化、图像质量清晰化。 解释说明： 网页加载速度的关键，是减少图片的数量。因

20、为客户端每显示一张图片都会向服务器 发送请求，所以，图片越多请求次数也就越多，造成图片显示延迟的可能性也就越大，所 以尽量不要把图片切割成太多的图。 2.10.3.1.主题类的图片切割主题类的图片切割 主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。 如下图所示： 切割方法：切割方法： 将图片分三段，以红红线线分割为界，分为左、中、右三部分； 左、中部分切割为 JPG 格式图片； 右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。 2.10.3.2.标题类的图片切割标题类的图片切割 标题类的图片切割时，将展示区域和操作区域分开切割。 WEB 标准化页面制作

21、指南 16 如下图所示： 切割方法切割方法： 展示区域为： 操作区域为： 下面的灰色横线可以用颜色代码进行单独定义。 2.10.3.3.背景类的图片切割背景类的图片切割 平铺使用的图片 有规律的图片：根据其图片纹理切割成较小的 GIF 格式的图片，进行平铺 使用。 整体一张图片：按照需要进行切割，确实需要全图作背景时要将图片的字 节数压缩至最小来使用。 不平铺使用的图片不平铺使用的图片 对于图片没有纹理，切割后会破坏图片表现的意思时，将图片字节压缩至 少，面积裁截至最少，但同时要保持图片的意境。 2.10.3.4.图标类的图片切割图标类的图片切割 有规律较密集的图标：有规律较密集的图标： 标题

22、图标类的图片，可以将小图全部切割成一张 GIF 格式的图，以 减少图片下载次数，然后利用 css 背景定位的方法来使用这张图片。 WEB 标准化页面制作指南 17 无规律较松散的图标：无规律较松散的图标： 根据图标的大小单独切割图片，单独使用。 2.10.3.5.圆角矩形类的图片切割圆角矩形类的图片切割 对于颜色不超过 256 色的比较规则的矩形图，当长和高都需要扩展的时候可以采用九 宫格的方法进行切割。 示例图片样式： 切割方法：切割方法： 采用九宫格形式来切割图片； 将圆角单独切割使用，不可以平铺； X 轴规则图，取 宽 1px 的图作为背景图平铺使用； Y 轴规则图，取 高 1px 的图

23、作为背景图平铺使用。 2.10.3.6.渐变效果类的图片切割渐变效果类的图片切割 对于渐变效果的图片，需要扩展的时时候，可以采用 1 像素高或宽的图做为背景图平 铺使用。 示例图片样式： WEB 标准化页面制作指南 18 切割方法： X 轴重复时，取 宽 1px 的图作为背景图平铺使用； Y 轴重复时，取 高 1px 的图作为背景图平铺使用。 2.11.背景图片背景图片 制作原则：字节数小、色彩浅淡、可平铺使用。 解释说明： 背景图片是用来装饰页面内容的，所以一定要起到点缀效果，不能抢色，从而破坏页 面的内容展示。这就要求所用的背景图不能太大，色彩不能太艳，能用色值代替的尽量少 用图片，一定要

24、突出内容而不是背景图片。 由 W3C 所建议的背景色和前景色亮度差异应大于 125， 而色彩差异则应大于 500。 2.11.1. 普通背景图片：普通背景图片： 如下背景图所示： 色彩绚丽的图(不推荐)色彩淡雅的图(推荐) WEB 标准化页面制作指南 19 解释说明： 背景图片的使用实际上是对内容表现的一种视觉补充，所以在使用过程中一定要强化 内容部分，淡化背景图的表现部分。 色彩绚丽的图片会弱化内容表现，对页面整体风格起到了破坏作用，因此不要选择色 彩感太强的图作为背景图，应该选择色彩淡雅的图片来点缀内容。 2.11.2. 渐变背景图片渐变背景图片 如下背景图所示： 解释说明： 渐变效果的背

25、景图因其视觉层次清晰，表现内容丰富，所以在使用过程中一定要按 照色值层级来正确使用，可选色值最低的颜色作为背景色填充应用区域，如上图 A。 2.12.图片的字节数大小图片的字节数大小 原则：使用合适的图片格式对图片进行不失真压缩，使图片的字节数保持最小化。 解释说明： 对图片尺寸大小的一个通用标准是 12K, 如果单个图片大小超过 12K 请裁切为小图。 图片的字节数计算公式: K=（l * S / 5800）*1.80 （当 L300） 许可误差 9.0k K=（l * S / 3200）*1.65 （当 200L300） 许可误差 4.0k WEB 标准化页面制作指南 20 K=（l *

26、S / 2000）*1.50 （当 100L200） 许可误差 2.0k K=（l* S / 1800）*1.40 （当 50L100） 许可误差 1.0k K=（l * S /1300）*1.25 （当 L50） 许可误差 0.5k 注：L= 图片长度； S = 图片宽度； K = 图片大小（k） 2.13.图片的优化图片的优化 GIF 格式优化格式优化 GIF 是用于压缩具有单调颜色和清晰细节的图像（如艺术线条、徽标或带文字的插图） 的标准格式； 压缩时，如果色系较少，颜色少于 256，调色板可以选择为“精确” ，不要选“失真” 。 一般情况，调色板选择“最合适” ，最大颜色数选择“256

27、” 。如果色彩稍多于 256 色， 可将抖动设为“100%” 。 为防止边缘出现锯齿，不需要透明的时候，尽量不透明。 压缩工具：Adobe Image Ready、Image Optimizer 压缩前 12K压缩后 6K JPG 格式优化格式优化 JPEG 是用于压缩连续色调图像（如照片）的标准格式。 压缩时在图像质量和文件尺寸之间找到平衡点 80%的压缩率是比较合适在网页中使用的 压缩工具：Image Optimizer WEB 标准化页面制作指南 21 压缩前 65.4K压缩后 10.6K 其他优化建议其他优化建议 如果图像不包含任何信息,仅是作为装饰使用，请将改图片从 HTML 中分离

28、出来。 (HTML 代码) .pic background: url (.) (css 代码) 利用 css 将辅助图片作为背景使用。 图像作为内容时定义 若作为内容放在 HTML 代码里则必须制定高度和宽度（需要动态更新，并且图片大小 不固定的除外） 。 原因：减少页面 reflow 次数，加快显示。 2.14. Flash 动画的制作动画的制作 Flash 是一种交互式矢量多媒体技术，因其采用向量运算Vector Graphics的方 式生成图像，所以制作出来的影片占用存储空间比较小。 优点：优点： flash 提供的代码非常丰富而且简单； flash 可以制作动画而且制作成的动画占的容量

29、很小，同时也可以编辑图像； 矢量图可以自由伸缩不失真； Flash 动画的受众群体不断扩大，且大多是最有活力的青年消费群体 。 应用场景：应用场景： Banner 广告条：可以用来展示简短的企业标语、产品介绍等； 企业宣传画：可以用来制作较大型的企业文件宣传品； 导航条：页面起导引作用的部分，一般在页面的顶部； WEB 标准化页面制作指南 22 菜单条：可用将菜单制作成可伸缩、隐藏等效果； 演示案例：将案例制作成动画进行操作演示； 多媒体播放器：可用来制作播放器，现在 WEB 上已很多采用此形式。 2.14.1. Flash 制作方法注意事项：制作方法注意事项： 在规划制作阶段就要明确 Fla

30、sh 文件对搜索引擎友好问题； 在制作中删除一些没有用到的元件及图片； 保证导入的图片质量的情况下，图片大小尽量控制在 15K 以内； 声音要压缩至 10K 以内； 保持桢动作的连续； 整个 Flash 文件控制在 30K 以内。 2.14.2. Flash 优化工具优化工具Flash Optimizer 此工具采用特殊的算法可以将 Flash 动画文件的体积缩小到只有原来的 60%，而可以 基本保持动画品质不变。 2.14.3. Flash 制作过程中的问题汇总制作过程中的问题汇总 收集并整理了部分 Flash 制作过程中常见的一些问题及解决方法，详细情况请参阅 “附录附录：Flash 制作

31、常见问题汇总.doc” 。 2.15.搜索引擎优化（搜索引擎优化（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，翻译成中文就是“搜索引擎优化” ，一般可简称为搜索优化。 定义： 指遵循搜索引擎的搜索原理，对网站结构、网页文字语言和站点间互动外交略等进行合理 规划部署，以改善网站在搜索

32、引擎的搜索表现，进而增加客户发现并访问网站的可能性的 WEB 标准化页面制作指南 23 这样一个过程。 遵循下面的方法可以增加页面的搜索引擎友好度: 2.15.1. 提高站点外的提高站点外的 SEO： 1.提高自身站点内容质量 2.登记在分类目录网站中 3.互相交换站点链接 2.15.2. 提高站点内的提高站点内的 SEO： 1.站点结构设计：搜索引擎更喜欢有好的网页结构，无误的代码和明确导航的站点； 2.在元标签(meta 标签)放入关键词，密度最好在 5-20% 之间； 3.有规律的更新页面内容； 4.良好的友情链接； 5.明智的选择域名，尽量包括关键词； 6.写适宜长度的文章，太短的文章

33、不能获得较高的排名，同时避免内容的重复； 7.目录的数量越多，搜索引擎搜索的也就越全面 8.将站点提交到搜索引擎，更快的方法还是得到已经被搜索引擎收录的站点的链接； 9.关键词应该出现在网页标题标签里面； 10. URL 里面有关键词，即目录名文件名可以放上一些关键词； 11. 在网页导出链接的链接文字中包含关键词； 12. 图像 ALT 标签可以放入关键词； 13. 整个文章中都要包含关键词，但最好在第一段第一句话就放入。 可以自己进行页面评测，详细内容请见“附录：SEO 自我检测.doc” WEB 标准化页面制作指南 24 3. 意见反馈意见反馈 在使用过程中，如果遇到问题或有任何的意见、建议可按以下方式联系规范编写人员，我们会 对您的问题以及意见、建议做出及时的反馈。