WEB标准化页面制作指南.docx

WEB标准化页面制作指南.docx

《WEB标准化页面制作指南.docx》由会员分享，可在线阅读，更多相关《WEB标准化页面制作指南.docx（22页珍藏版）》请在冰豆网上搜索。

WEB标准化页面制作指南

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优化工具——FlashOptimizer22

2.14.3.Flash制作过程中的问题汇总22

2.15.搜索引擎优化（SEO）22

2.15.1.站点外的SEO：

22

2.15.2.站点内的SEO：

23

3.意见反馈23

文档修订记录：

日期

被修改的章节

修改类型*

修改描述

修改人

审核人

版本

修改类型分为A-ADDEDM-MODIFIEDD–DELETED

1.引言

页面制作不仅是一堆代码的对砌，页面的制作也是具有艺术性的，除了要忠实的反映交互设计师和视觉设计师的设计意图，同时还要考虑到页面的容量和代码的可读性以及可维护性，并且还要考虑到阅读者的感受，比如页面要快速的载入并呈现给阅读者，在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。

另外我们还要不怕麻烦的编写说明性标记（ALT，TITLE等）。

制作人员作为一个中间环节的工作者应该为上游和下游的工作人员尽量的提供方便和良好的支持。

通常制作人员不会得到所有页面的设计稿，所以在页面内容制作时，要严格按照需求文档的要求和设计师的意图对内容进行合理的编排和制作表现。

1.1.编写目的

本文档给出了有关页面制作时的思路和解决方法，从而保障页面制作的规范性，使得制作人员能形成良好的思考习惯和制作习惯，提高整个集团的制作水平和产品质量，保障所制作出的产品有更好更持续的发展。

本文档可以作为页面制作方法的一个指导性文件，各部门可以根据自己的实际情况对本文档进行完善和增加，以建立起适合本部门的制作规范。

1.2.适用的人员范围

本文档主要面对WEB页面制作人员，页面设计人员和页面开发人员也可以参阅了解相关内容，阅读本文档需要掌握相关基础知识：

●掌握html4.0和Xhtml1.0相关标准和用法；

●掌握css2.0相关标准和属性；

●对script脚本的作用和用法有一定程度的了解。

注：

由于本文档不对技术技能和技术知识做详细描述，所以有需要者另外阅读相关技术知识文档。

1.3.适用的产品范围

本文档适用于基于HTML页面的产品。

2.制作页面的方法

以下内容主要用来说明在页面制作过程中的一些思路及工作方法，以供该文档的阅读者参考和使用。

2.1.整站页面风格要保持一致

在制作网页时，要严格按照设计师的图稿样式做，同时网页上所有的图像、文字，包括背景图、背景颜色、区分线、字体、字体大小、颜色、标题、注脚什么的，都要按照设计图来统一整体风格，始终贯穿全站。

2.2.文件目录名称的命名

文件目录命名的指导思想是：

使得你自己和工作组的每一个成员能够方便的理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。

文件目录名称统一用小写的英文单词或拼音，长度不超过20个字符。

如果需要加数字和下划线以区分页面文件，可以在单词或拼音后面添加数字和下划线，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。

文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。

2.3.站点目录结构

清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。

以下为站点目录内容：

●

css文件目录：

存放CSS样式文件

●flash文件目录：

存放.swf文件

●html文件目录：

存放分栏目内容页面

●images文件目录：

存放图片文件

●javascript文件目录：

存放JS文件

●language文件目录：

存放多种语言文件

●library文件目录：

存放库文件

●templates文件目录：

存放模板页面

2.4.

站点文件的管理

利用工具软件Dreamweaver进行站点管理

可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同时也可以对框架、模板、库文件、图片、动画等进行管理。

2.5.页面采用的结构形式

2.5.1.

Frame框架：

框架是由框架组和子框架组成。

在框架网页里，框架组只有一个，网页保存数目等于子框架总数加一。

应用场景：

社区网站、后台管理网站

2.5.2.

Templates模板：

文件类型：

fileName.dwt

可根据需要设定固化站点每页都出现的元素，通过利用模板快速创建WEB页，可使整个站点具有统一的风格。

应用场景：

中小型企业网站

2.5.3.Library库文件

文件类型：

fileName.lbi

Library库被设计用来使重复性的工作能更快、更容易并尽可能地无差错完成；任何网页中的元素，无论文本还是图形均可以指定为库元素，并且可以用来放置在同一个站点内的任何页面中。

应用场景：

菜单、翻页等页面中重复性高的内容。

2.6.页面采用的宽度定义

2.6.1.采用百分比定义页面宽度（单位：

%）

代码格式：

例：

width：

100%；

解释说明：

采用%百分比设定页面宽度时，可以随着浏览器宽度的改变而改变。

在制作过程中一定要考虑好页面内容的表现，要做到内容在不同宽度浏览器中显示时布局要整齐、内容排版比例协调。

2.6.2.采用固定值定义页面宽度（单位：

px）

代码格式：

例：

width：

1004px；

解释说明：

采用固定值设定页面宽度时，随着浏览器宽度的改变但内容不会改变。

2.7.内容对宽屏分辨率的适应

现在采用宽屏分辨率的显示器越来越多，所以在制作时一定要考虑宽屏模式。

采用百分比定义页面宽度时，内容会随着浏览器的改变而改变，所以在制作时要特别注意内容在不同分辨率下的显示情况。

宽屏分辨率下，根据表现的内容可分为正常改变区域、有限改变区域、不可改变区域三部分。

在制作过程中一定要按上述三种分类来规划好页面中内容表现形式。

2.7.1.正常改变区域：

内容会随着分辨率的变化而正常变化，同时也符合人的视觉要求，但不会影响内容排版格式。

如下图红色标注所示：

2.7.2.有限改变区域：

内容会随着分辨率的变化而有限度的改变，同时符合人的视觉面积，但不影响页面内容的表现。

如下图红色标注所示-----不正确的内容表现：

如下图红色标注所示-----正确的内容表现：

解释说明：

在浏览页面时，人的正常视觉角度是15度，超出视觉范围时会让用户产生内容断层的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。

2.7.3.不可改变区域部分：

内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。

如下图红色标注所示-----正确的内容表现：

2.8.文字内容制作

●别轻易让文字居中和使用斜体字符，除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化；

●不要把重要的内容排版放到网页的结尾，因为读者的视线可能停留在主页上面较多一点，或者有些读者没有耐心往下看那么远；

●闪烁文字不要使用；

●制作页面内容时编写的测试数据，要与所反映的内容类型相一致，不要写一些不相关的数据。

2.9.超级连接直观有效

●在制作图象或文本超级连接时，尽可能地使用相对超级连接，这是因为这样做网页的可移植性比较强；另外使用相对超级连接时输入量也较少，在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。

如果是连接到不直接相关的文件时，使用绝对路径比较好，这样以后要是把源文件移到另外的目录下就不需更改连接了。

●页面中的超级连接应当使用户能够很快地找到他们所要的东西。

绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够很直观地从每一页上访问网站的任何部分。

●另外特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它是不是正好就在“这里”，并且连接无误。

不要让连接的名称与连接的URL不同，这样会使读者白白地浪费时间。

●一个页面的最大链接的数量要小于100。

2.10.图片制作事项

2.10.1.图片的命名规则

名称为英文单词或拼音，如果需要加数字表达的，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。

图片文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。

例如：

企业标识--logo.gif

2.10.2.图片的应用格式

不超过256色的保存为GIF

GIF格式

●GIF（GraphicsInterchangeFormat）图像互换格式

●优点：

256色值以内的图片，字节数可以压缩到最小、图像像素低、支持动画格式、支持透明图像，同时已经得到所有主流浏览器的支持。

●应用场景：

图像色彩不丰富，其色值不超过256以内的图片，例：

单色LOGO、单色的广告条等图片。

●注意：

压缩算法是有损压缩，会造成图像画面失真；不适合超过256色的色彩图像。

JPG格式

超过256色的保存为JPG

●JPG（JointPhotographicExpertsGroupFileInterchangeFormat）联合图像专家组文件交换格式

●优点：

超过256色值的图片，压缩比高、图片字节数小、图像质量高，同时得到所有主流浏览器的支持。

●应用场景：

图像色彩丰富，其色值超过256的图片，例：

绚丽多彩的照片、丰富的页面插图、渐变色的图片等。

●注意：

把握好图片质量和图片字节大小之间的平衡,通常图片质量为80%比较合适。

注：

以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附录\附录：

XHTML文件图片应用格式.doc”文档。

2.10.3.图片的切割

图片切割原则：

切割数量最少化、字节压缩最小化、表现内容完整化、图像质量清晰化。

解释说明：

网页加载速度的关键，是减少图片的数量。

因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数也就越多，造成图片显示延迟的可能性也就越大，所以尽量不要把图片切割成太多的图。

2.10.3.1.主题类的图片切割

主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。

如下图所示：

切割方法：

●将图片分三段，以红线分割为界，分为左、中、右三部分；

●左、中部分切割为JPG格式图片；

●右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。

2.10.3.2.标题类的图片切割

标题类的图片切割时，将展示区域和操作区域分开切割。

如下图所示：

切割方法：

●展示区域为：

●

操作区域为：

●下面的灰色横线可以用颜色代码进行单独定义。

2.10.3.3.背景类的图片切割

●平铺使用的图片

有规律的图片：

根据其图片纹理切割成较小的GIF格式的图片，进行平铺

使用。

整体一张图片：

按照需要进行切割，确实需要全图作背景时要将图片的字

节数压缩至最小来使用。

●不平铺使用的图片

对于图片没有纹理，切割后会破坏图片表现的意思时，将图片字节压缩至

少，面积裁截至最少，但同时要保持图片的意境。

2.10.3.4.图标类的图片切割

●

有规律较密集的图标：

标题图标类的图片，可以将小图全部切割成一张GIF格式的图，以减少图片下载次数，然后利用css背景定位的方法来使用这张图片。

●无规律较松散的图标：

根据图标的大小单独切割图片，单独使用。

2.10.3.5.圆角矩形类的图片切割

对于颜色不超过256色的比较规则的矩形图，当长和高都需要扩展的时候可以采用九宫格的方法进行切割。

示例图片样式：

切割方法：

●采用九宫格形式来切割图片；

●将圆角单独切割使用，不可以平铺；

●X轴规则图，取宽1px的图作为背景图平铺使用；

●Y轴规则图，取高1px的图作为背景图平铺使用。

2.10.3.6.渐变效果类的图片切割

对于渐变效果的图片，需要扩展的时时候，可以采用1像素高或宽的图做为背景图平铺使用。

示例图片样式：

切割方法：

●X轴重复时，取宽1px的图作为背景图平铺使用；

●Y轴重复时，取高1px的图作为背景图平铺使用。

2.11.背景图片

制作原则：

字节数小、色彩浅淡、可平铺使用。

解释说明：

背景图片是用来装饰页面内容的，所以一定要起到点缀效果，不能抢色，从而破坏页面的内容展示。

这就要求所用的背景图不能太大，色彩不能太艳，能用色值代替的尽量少用图片，一定要突出内容而不是背景图片。

由W3C所建议的背景色和前景色亮度差异应大于125，而色彩差异则应大于500。

2.11.1.普通背景图片：

如下背景图所示：

色彩绚丽的图（不推荐）

色彩淡雅的图（推荐）

解释说明：

背景图片的使用实际上是对内容表现的一种视觉补充，所以在使用过程中一定要强化内容部分，淡化背景图的表现部分。

色彩绚丽的图片会弱化内容表现，对页面整体风格起到了破坏作用，因此不要选择色彩感太强的图作为背景图，应该选择色彩淡雅的图片来点缀内容。

2.11.2.渐变背景图片

如下背景图所示：

解释说明：

渐变效果的背景图因其视觉层次清晰，表现内容丰富，所以在使用过程中一定要按

照色值层级来正确使用，可选色值最低的颜色作为背景色填充应用区域，如上图A。

2.12.图片的字节数大小

原则：

使用合适的图片格式对图片进行不失真压缩，使图片的字节数保持最小化。

解释说明：

对图片尺寸大小的一个通用标准是12K,如果单个图片大小超过12K请裁切为小图。

图片的字节数计算公式:

　　K=（l*S/5800）*1.80（当L≥300）许可误差9.0k

　　K=（l*S/3200）*1.65（当200≤L＜300）许可误差4.0k

　　K=（l*S/2000）*1.50（当100≤L＜200）许可误差2.0k

　　K=（l*S/1800）*1.40（当50≤L＜100）许可误差1.0k

K=（l*S/1300）*1.25（当L＜50）许可误差0.5k

注：

L=图片长度；S=图片宽度；K=图片大小（k）

2.13.图片的优化

GIF格式优化

●GIF是用于压缩具有单调颜色和清晰细节的图像（如艺术线条、徽标或带文字的插图）的标准格式；

●压缩时，如果色系较少，颜色少于256，调色板可以选择为“精确”，不要选“失真”。

●一般情况，调色板选择“最合适”，最大颜色数选择“256”。

如果色彩稍多于256色，可将抖动设为“100%”。

●为防止边缘出现锯齿，不需要透明的时候，尽量不透明。

●压缩工具：

AdobeImageReady、ImageOptimizer

压缩前12K

压缩后6K

JPG格式优化

●JPEG是用于压缩连续色调图像（如照片）的标准格式。

●压缩时在图像质量和文件尺寸之间找到平衡点

●80%的压缩率是比较合适在网页中使用的

●压缩工具：

ImageOptimizer

压缩前65.4K

压缩后10.6K

其他优化建议

如果图像不包含任何信息,仅是作为装饰使用，请将改图片从HTML中分离出来。

●