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

1、WEB标准化页面制作指南WEB标准化页面制作指南 页面制作方法指南V1.0目 录1. 引言 51.1. 编写目的 51.2. 适用的人员范围 51.3. 适用的产品范围 62. 制作页面的方法 62.1. 整站页面风格要保持一致 62.2. 文件目录名称的命名 62.3. 站点目录结构 62.4. 站点文件的管理 72.5. 页面采用的结构形式 72.5.1. Frame框架： 72.5.2. Templates模板： 82.5.3. Library库文件 82.6. 页面采用的宽度定义 82.6.1. 采用百分比定义页面宽度（单位：%） 82.6.2. 采用固定值定义页面宽度（单位：px）

2、92.7. 内容对宽屏分辨率的适应 92.7.1. 正常改变区域： 92.7.2. 有限改变区域： 102.7.3. 不可改变区域部分： 112.8. 文字内容制作 112.9. 超级连接直观有效 122.10. 图片制作事项 142.10.1. 图片的命名规则 142.10.2. 图片的应用格式 142.10.3. 图片的切割 152.10.3.1. 主题类的图片切割 152.10.3.2. 标题类的图片切割 152.10.3.3. 背景类的图片切割 162.10.3.4. 图标类的图片切割 162.10.3.5. 圆角矩形类的图片切割 172.10.3.6. 渐变效果类的图片切割 172.

3、11. 背景图片 182.11.1. 普通背景图片： 182.11.2. 渐变背景图片 192.12. 图片的字节数大小 192.13. 图片的优化 202.14. Flash动画的制作 212.14.1. Flash制作方法注意事项： 212.14.2. Flash优化工具Flash Optimizer 222.14.3. Flash制作过程中的问题汇总 222.15. 搜索引擎优化（SEO） 222.15.1. 站点外的SEO： 222.15.2. 站点内的SEO： 233. 意见反馈 23文档修订记录：日期被修改的章节修改类型*修改描述修改人审核人版本修改类型分为 A - ADDED M

4、 - MODIFIED D DELETED1. 引言页面制作不仅是一堆代码的对砌，页面的制作也是具有艺术性的，除了要忠实的反映交互设计师和视觉设计师的设计意图，同时还要考虑到页面的容量和代码的可读性以及可维护性，并且还要考虑到阅读者的感受，比如页面要快速的载入并呈现给阅读者，在不同的分辨率下应该充分考虑到人机交互的规律，方便阅读者阅读，同时我们还要考虑到残障人士的阅读需要，比如文字和图形在需要的时候可以放大。另外我们还要不怕麻烦的编写说明性标记（ALT，TITLE等）。制作人员作为一个中间环节的工作者应该为上游和下游的工作人员尽量的提供方便和良好的支持。通常制作人员不会得到所有页面的设计稿，所

5、以在页面内容制作时，要严格按照需求文档的要求和设计师的意图对内容进行合理的编排和制作表现。1.1. 编写目的本文档给出了有关页面制作时的思路和解决方法，从而保障页面制作的规范性，使得制作人员能形成良好的思考习惯和制作习惯，提高整个集团的制作水平和产品质量，保障所制作出的产品有更好更持续的发展。本文档可以作为页面制作方法的一个指导性文件，各部门可以根据自己的实际情况对本文档进行完善和增加，以建立起适合本部门的制作规范。1.2. 适用的人员范围本文档主要面对WEB页面制作人员，页面设计人员和页面开发人员也可以参阅了解相关内容，阅读本文档需要掌握相关基础知识： 掌握html4.0和Xhtml1.0相

6、关标准和用法； 掌握css2.0相关标准和属性； 对script脚本的作用和用法有一定程度的了解。注：由于本文档不对技术技能和技术知识做详细描述，所以有需要者另外阅读相关技术知识文档。1.3. 适用的产品范围本文档适用于基于HTML页面的产品。2. 制作页面的方法以下内容主要用来说明在页面制作过程中的一些思路及工作方法，以供该文档的阅读者参考和使用。2.1. 整站页面风格要保持一致在制作网页时，要严格按照设计师的图稿样式做，同时网页上所有的图像、文字，包括背景图、背景颜色、区分线、字体、字体大小、颜色、标题、注脚什么的，都要按照设计图来统一整体风格，始终贯穿全站。2.2. 文件目录名称的命名文

7、件目录命名的指导思想是：使得你自己和工作组的每一个成员能够方便的理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。文件目录名称统一用小写的英文单词或拼音，长度不超过20个字符。如果需要加数字和下划线以区分页面文件，可以在单词或拼音后面添加数字和下划线，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。2.3. 站点目录结构清晰的站点目录结构方便文件的维护和管理，同时对增加搜

8、索引擎的友好度和移植也有着重要的影响。以下为站点目录内容： css文件目录： 存放CSS 样式文件 flash文件目录： 存放.swf文件 html 文件目录： 存放分栏目内容页面 images文件目录： 存放图片文件 javascript文件目录：存放JS文件 language文件目录： 存放多种语言文件 library文件目录： 存放库文件 templates文件目录： 存放模板页面2.4. 站点文件的管理利用工具软件Dreamweaver进行站点管理可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同时也可以对框架、模板、库文件、图片、动画等进行管理。2.5. 页面采用

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

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

11、比定义页面宽度时，内容会随着浏览器的改变而改变，所以在制作时要特别注意内容在不同分辨率下的显示情况。宽屏分辨率下，根据表现的内容可分为正常改变区域、有限改变区域、不可改变区域三部分。在制作过程中一定要按上述三种分类来规划好页面中内容表现形式。2.7.1. 正常改变区域：内容会随着分辨率的变化而正常变化，同时也符合人的视觉要求，但不会影响内容排版格式。如下图红色标注所示：2.7.2. 有限改变区域：内容会随着分辨率的变化而有限度的改变，同时符合人的视觉面积，但不影响页面内容的表现。如下图红色标注所示-不正确的内容表现：如下图红色标注所示-正确的内容表现：解释说明：在浏览页面时，人的正常视觉角度是

12、15度，超出视觉范围时会让用户产生内容断层的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。2.7.3. 不可改变区域部分：内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。如下图红色标注所示-正确的内容表现：2.8. 文字内容制作 别轻易让文字居中和使用斜体字符，除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化； 不要把重要的内容排版放到网页的结尾，因为读者的视线可能停留在主页上面较多一点，或者有些读者没有耐心往下看那么远； 闪烁文字不要使用； 制作页面内容时编写的测试数据，要与所反映的内容类型相一致，不要写一些不

13、相关的数据。2.9. 超级连接直观有效 在制作图象或文本超级连接时，尽可能地使用相对超级连接，这是因为这样做网页的可移植性比较强；另外使用相对超级连接时输入量也较少，在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。如果是连接到不直接相关的文件时，使用绝对路径比较好，这样以后要是把源文件移到另外的目录下就不需更改连接了。 页面中的超级连接应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够很直观地从每一页上访问网站的任何部分。 另外特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它

14、是不是正好就在“这里”，并且连接无误。不要让连接的名称与连接的URL不同，这样会使读者白白地浪费时间。 一个页面的最大链接的数量要小于100。2.10. 图片制作事项2.10.1. 图片的命名规则名称为英文单词或拼音，如果需要加数字表达的，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。图片文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。例如：企业标识 - logo.gif2.10.2. 图片的应用格式不超过256色的保存为GIFGIF格式

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

16、、图片字节数小、图像质量高，同时得到所有主流浏览器的支持。 应用场景：图像色彩丰富，其色值超过256的图片，例：绚丽多彩的照片、丰富的页面插图、渐变色的图片等。 注意：把握好图片质量和图片字节大小之间的平衡,通常图片质量为80%比较合适。注：以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附录附录：XHTML文件图片应用格式.doc”文档。2.10.3. 图片的切割图片切割原则：切割数量最少化、字节压缩最小化、表现内容完整化、图像质量清晰化。解释说明：网页加载速度的关键，是减少图片的数量。因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数也就越多，造成图片显示延迟的

17、可能性也就越大，所以尽量不要把图片切割成太多的图。2.10.3.1. 主题类的图片切割主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。如下图所示：切割方法： 将图片分三段，以红线分割为界，分为左、中、右三部分； 左、中部分切割为JPG格式图片； 右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。2.10.3.2. 标题类的图片切割标题类的图片切割时，将展示区域和操作区域分开切割。如下图所示：切割方法： 展示区域为： 操作区域为： 下面的灰色横线可以用颜色代码进行单独定义。2.10.3.3. 背景类的图片切割 平铺使用的图片有规律的图片：根据其图片纹理切割成

18、较小的GIF格式的图片，进行平铺使用。整体一张图片：按照需要进行切割，确实需要全图作背景时要将图片的字节数压缩至最小来使用。 不平铺使用的图片对于图片没有纹理，切割后会破坏图片表现的意思时，将图片字节压缩至少，面积裁截至最少，但同时要保持图片的意境。2.10.3.4. 图标类的图片切割 有规律较密集的图标：标题图标类的图片，可以将小图全部切割成一张GIF格式的图，以减少图片下载次数，然后利用css背景定位的方法来使用这张图片。 无规律较松散的图标：根据图标的大小单独切割图片，单独使用。2.10.3.5. 圆角矩形类的图片切割对于颜色不超过256色的比较规则的矩形图，当长和高都需要扩展的时候可以

19、采用九宫格的方法进行切割。示例图片样式： 切割方法： 采用九宫格形式来切割图片； 将圆角单独切割使用，不可以平铺； X轴规则图，取 宽1px的图作为背景图平铺使用； Y轴规则图，取 高1px的图作为背景图平铺使用。2.10.3.6. 渐变效果类的图片切割对于渐变效果的图片，需要扩展的时时候，可以采用1像素高或宽的图做为背景图平铺使用。示例图片样式：切割方法： X轴重复时，取 宽1px的图作为背景图平铺使用； Y轴重复时，取 高1px的图作为背景图平铺使用。2.11. 背景图片制作原则：字节数小、色彩浅淡、可平铺使用。解释说明：背景图片是用来装饰页面内容的，所以一定要起到点缀效果，不能抢色，从而

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

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

22、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”。如果色彩稍多于256色，可将抖动设为“100%”。 为防止边缘出现锯齿，不需要透明的时候，尽量不透明。

23、压缩工具：Adobe Image Ready、Image Optimizer压缩前 12K压缩后6KJPG格式优化 JPEG 是用于压缩连续色调图像（如照片）的标准格式。 压缩时在图像质量和文件尺寸之间找到平衡点 80%的压缩率是比较合适在网页中使用的 压缩工具：Image Optimizer压缩前 65.4K压缩后10.6K 其他优化建议如果图像不包含任何信息,仅是作为装饰使用，请将改图片从HTML中分离出来。 (HTML代码) .pic background: url (.) (css代码) 利用css将辅助图片作为背景使用。 图像作为内容时定义 若作为内容放在HTML代码里则必须制定高度

24、和宽度（需要动态更新，并且图片大小不固定的除外）。 原因：减少页面reflow次数，加快显示。2.14. Flash动画的制作Flash是一种交互式矢量多媒体技术，因其采用向量运算Vector Graphics的方式生成图像，所以制作出来的影片占用存储空间比较小。优点： flash提供的代码非常丰富而且简单； flash可以制作动画而且制作成的动画占的容量很小，同时也可以编辑图像； 矢量图可以自由伸缩不失真； Flash动画的受众群体不断扩大，且大多是最有活力的青年消费群体 。应用场景： Banner广告条：可以用来展示简短的企业标语、产品介绍等； 企业宣传画：可以用来制作较大型的企业文件宣传

25、品； 导航条：页面起导引作用的部分，一般在页面的顶部； 菜单条：可用将菜单制作成可伸缩、隐藏等效果； 演示案例：将案例制作成动画进行操作演示； 多媒体播放器：可用来制作播放器，现在WEB上已很多采用此形式。2.14.1. Flash制作方法注意事项： 在规划制作阶段就要明确Flash文件对搜索引擎友好问题； 在制作中删除一些没有用到的元件及图片； 保证导入的图片质量的情况下，图片大小尽量控制在15K以内； 声音要压缩至10K以内； 保持桢动作的连续； 整个Flash文件控制在30K以内。2.14.2. Flash优化工具Flash Optimizer此工具采用特殊的算法可以将Flash动画文件

26、的体积缩小到只有原来的60%，而可以基本保持动画品质不变。2.14.3. Flash制作过程中的问题汇总收集并整理了部分Flash制作过程中常见的一些问题及解决方法，详细情况请参阅“附录附录：Flash制作常见问题汇总.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 someth

27、ing，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。定义：指遵循搜索引擎的搜索原理，对网站结构、网页文字语言和站点间互动外交略等进行合理规划部署，以改善网站在搜索引擎的搜索表现，进而增加客户发现并访问网站的可能性的这样一个过程。遵循下面的方法可以增加页面的搜索引擎友好度:2.15.1. 提高站点外的SEO：1. 提高自身站点内容质量2. 登记在分类目录网站中3. 互相交换站点链接2.15.2. 提高站点内的SEO：1. 站点结构设计：搜索引擎更喜欢有好的网页结构，无误的代码和明确导航的站点；2. 在元标签(meta 标签)放入关键词，密度最好在5-20% 之间；3. 有规律的更新页面

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