标准化页面制作方法指南

1、WEB标准化页面制作指南WE麻准化页面制作指南页面制作方法指南V1.0iWEB标准化页面制作指南1. 弓I言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）92.7. 内容

2、对宽屏分辨率的适应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.11. 背景图片182.11.1. 普通背景图片

3、：182.11.2. 渐变背景图片192.12. 图片的字节数大小192.13. 图片的优化202.14. FLASH动画的制作212.14.1. FLASH制作方法注意事项：222.14.2. FLASH优化工具FLASHOPTIMIZER222.14.3. FLASH制作过程中的问题汇总222.15. 搜索引擎优化（SEO）222.15.1. 站点外的SEO:232.15.2. 站点内的SEO:233. 意见反馈2424文档修订记录:日期被修改的章节修改类型*修改描述修改人审核人版本修改类型分为A-ADDEDM-MODIFIEDD-DELETED1 .引言页面制作不仅是一堆代码的对砌，页面

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

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

6、解。注：由于本文档不对技术技能和技术知识做详细描述，所以有需要者另外阅读相关技术知识文档。1.3. 适用的产品范围本文档适用于基于HTMLX面的产品。2 .制作页面的方法以下内容主要用来说明在页面制作过程中的一些思路及工作方法，以供该文档的阅读者参考和使用。2.1. 整站页面风格要保持一致在制作网页时，要严格按照设计师的图稿样式做，同时网页上所有的图像、文字，包括背景图、背景颜色、区分线、字体、字体大小、颜色、标题、注脚什么的，都要按照设计图来统一整体风格，始终贯穿全站。2.2. 文件目录名称的命名文件目录命名的指导思想是：使得你自己和工作组的每一个成员能够方便的理解和记忆每一个文件目录的意义

7、，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。文件目录名称统一用小写的英文单词或拼音，长度不超过20个字符。如果需要加数字和下划线以区分页面文件，可以在单词或拼音后面添加数字和下划线，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。2.3. 站点目录结构清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。以下为站点目录内容:css文件目录：flash文件目录：

8、html文件目录：images文件目录：javascript文件目录:language文件目录：library文件目录：templates文件目录：存放CSS样式文件存放.swf文件存放分栏目内容页面存放图片文件存放JS文件存放多种语言文件存放库文件存放模板页面站点目录结构三L_>flashhtmlimagesZ3P1Lt的1t.回己Site 效果国文件（0htmlimagesjavascriptindex hind库文件说明.仅t,口 悔奖相2.4. 站点文件的管理利用工具软件Dreamweaver进行站点管理可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同时也可

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

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

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

12、确的内容表现:解释说明：在浏览页面时，人的正常视觉角度是15度，超出视觉范围时会让用户产生内容断层的错觉，从而影响用户的正常浏览，所以在制作页面时要充分考虑用户的可视范围。2.7.3. 不可改变区域部分:内容不会随着分辨率的变化而改变，从而保持页面内容的可视性和完整性。如下图红色标注所示-正确的内容表现：2.8. 文字内容制作别轻易让文字居中和使用斜体字符，除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化；别静易it文手居中和斜律字符,除了在蟒混制不正确1空白空化；不要把重要的内容排版放到网页的结尾，因为读者的视线可能停留在主页上面较多点，或者有些读者没有

13、耐心往下看那么远；不塞正靛的内容排原放到网页第结尾闪烁文字不要使用;制作页面内容时编写的测试数据，要与所反映的内容类型相一致，不要写一些不相关的数据。用户名称:23-42343职翁：文件2.9. 超级连接直观有效在制作图象或文本超级连接时，尽可能地使用相对超级连接，这是因为这样做网页的可移植性比较强；另外使用相对超级连接时输入量也较少，在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。如果是连接到不直接相关的文件时，使用绝对路径比较好，这样以后要是把源文件移到另外的目录下就不需更改连接了。图片地址：=U”吨对地址“/>不正确页面中的超级连

14、接应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够很直观地从每一页上访问网站的任何部分。另外特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它是不是正好就在“这里”，并且连接无误。不要让连接的名称与连接的URL不同，这样会使读者白白地浪费时间。一个页面的最大链接的数量要小于100。2.10. 图片制作事项2.10.1. 图片的命名规则名称为英文单词或拼音，如果需要加数字表达的，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。图片文件名称的命名要与所定义的内容语义接近，字母要小写，

15、需要两个以上单词表达时，用下划线分开两个单词，最多不要超过三个以上单词，如果单词过长，取其前三个字母。例如：企业标识-logo.gif2.10.2. 图片的应用格式GIF格式GIF(GraphicsInterchangeFormat)图像互换格式优点：256色值以内的图片，字节数可以压缩到最小、图像像素低、支持动画格式、支持透明图像，同时已经得到所有主流浏览器的支持。应用场景：图像色彩不丰富，其色值不超过256以内的图片,例：单色LOGO、单色的广告条等图片。注意：压缩算法是有损压缩，会造成图像画面失真；不适合超过JPG格式JPG(JointPhotographicExpertsGroupFi

16、leInterchangeFormat)联合图像专家组文件交换格式优点：超过256色值的图片，压缩比高、图片字节数小、图像质量高，同时得到所有主流浏览器的支持。应用场景：图像色彩丰富，其色值超过256的图片，例：绚丽不超过256色的保存为GIF256色的色彩图像。超过256色的保存为JPG多彩的照片、丰富的页面插图、渐变色的图片等。注意：把握好图片质量和图片字节大小之间的平衡，通常图片质量为80%比较合适。注：以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附录附录：XHTML文件图片应用格式.doc”文档。2.10.3. 图片的切割图片切割原则：切割数量最少化、字节压缩最小化、表现

17、内容完整化、图像质量清晰化。解释说明：网页加载速度的关键，是减少图片的数量。因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数也就越多，造成图片显示延迟的可能性也就越大，所以尽量不要把图片切割成太多的图。2.10.3.1. 主题类的图片切割主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。如下图所示:切割方法：将图片分三段，以红线分割为界，分为左、中、右三部分；左、中部分切割为JPG格式图片；右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。2.10.3.2. 标题类的图片切割标题类的图片切割时，将展示区域和操作区域分开切割。如下图所示：切

18、割方法：展示区域为:操作区域为:£司随FFIcoMJAOmRonuczs：皿解吕皿皿I£司普fl1COHFANyINTRODUCESEHE1dQlDQD卜面的灰色横线可以用颜色代码进行单独定义。2.10.3.3. 背景类的图片切割平铺使用的图片有规律的图片：根据其图片纹理切割成较小的GIF格式的图片，进行平铺使用。整体一张图片：按照需要进行切割，确实需要全图作背景时要将图片的字节数压缩至最小来使用。不平铺使用的图片对于图片没有纹理，切割后会破坏图片表现的意思时，将图片字节压缩至少，面积裁截至最少，但同时要保持图片的意境。2.10.3.4. 图标类的图片切割.为什么1，什么是

19、:“如何购: r我会至 投联系我:有规律较密集的图标：标题图标类的图片，可以将小图全部切割成一张GIF格式的图，以减少图片下载次数，然后利用css背景定位的方法来使用这张图片。无规律较松散的图标：根据图标的大小单独切割图片，单独使用。2.10.3.5. 圆角矩形类的图片切割对于颜色不超过256色的比较规则的矩形图，当长和高都需要扩展的时候可以采用九宫格的方法进行切割。示例图片样式:九宫格国由m割切割方法：采用九宫格形式来切割图片；将圆角单独切割使用，不可以平铺；X轴规则图，取宽1px的图作为背景图平铺使用；Y轴规则图，取高1px的图作为背景图平铺使用。2.10.3.6. 渐变效果类的图片切割对

20、于渐变效果的图片，需要扩展的时时候，可以采用1像素高或宽的图做为背景图平铺使用。示例图片样式：切割方法：X轴重复时，取宽1px的图作为背景图平铺使用;Y轴重复时，取高1px的图作为背景图平铺使用。2.11. 背景图片制作原则：字节数小、色彩浅淡、可平铺使用。解释说明：背景图片是用来装饰页面内容的，所以一定要起到点缀效果，不能抢色，从而破坏页面的内容展示。这就要求所用的背景图不能太大，色彩不能太艳，能用色值代替的尽量少用图片，一定要突出内容而不是背景图片。由W3C所建议的背景色和前景色亮度差异应大于125,而色彩差异则应大于500。2.11.1. 普通背景图片:如下背景图所示:解释说明：背景图片

21、的使用实际上是对内容表现的一种视觉补充，所以在使用过程中一定要强化内容部分，淡化背景图的表现部分。色彩绚丽的图片会弱化内容表现，对页面整体风格起到了破坏作用，因此不要选择色彩感太强的图作为背景图，应该选择色彩淡雅的图片来点缀内容。2.11.2. 渐变背景图片A。渐变效果的背景图因其视觉层次清晰，表现内容丰富，所以在使用过程中一定要按照色值层级来正确使用，可选色值最低的颜色作为背景色填充应用区域，如上图2.12. 图片的字节数大小原则：使用合适的图片格式对图片进行不失真压缩，使图片的字节数保持最小化。解释说明：对图片尺寸大小的一个通用标准是12K,如果单个图片大小超过12K请裁切为小图。图片的字

22、节数计算公式：K=(l*S/5800)*1.80(当LR300)许可误差9.0kK=(l*S/3200)*1.65(当200WLV300)许可误差4.0kK=(l*S/2000)*1.50(当100WLV200)许可误差2.0kK=(l*S/1800)*1.40(当50WLV100)许可误差1.0kK=(l*S/1300)*1.25(当Lv50)许可误差0.5k注：L=图片长度；S=图片宽度；K=图片大小(k)2.13. 图片的优化GIF格式优化GIF是用于压缩具有单调颜色和清晰细节的图像（如艺术线条、徽标或带文字的插图）的标准格式；压缩时，如果色系较少，颜色少于256,调色板可以选择为“精确

23、”，不要选“失真”。一般情况，调色板选择“最合适”，最大颜色数选择“256”如果色彩稍多于256色,可将抖动设为“100%。为防止边缘出现锯齿，不需要透明的时候，尽量不透明。压缩工具：AdobeImageReady、ImageOptimizer压缩前12K压缩后6KJPG格式优化JPEG是用于压缩连续色调图像（如照片）的标准格式。压缩时在图像质量和文件尺寸之间找到平衡点80%勺压缩率是比较合适在网页中使用的压缩工具：ImageOptimizer压缩前65.4K压缩后10.6K其他优化建议如果图像不包含任何信息，仅是作为装饰使用，请将改图片从HTML中分离出来。<divclass=&quo

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

25、量图可以自由伸缩不失真；Flash动画的受众群体不断扩大，且大多是最有活力的青年消费群体。应用场景：Banner广告条：可以用来展示简短的企业标语、产品介绍等；企业宣传画：可以用来制作较大型的企业文件宣传品；导航条：页面起导引作用的部分，一般在页面的顶部；菜单条：可用将菜单制作成可伸缩、隐藏等效果；演示案例：将案例制作成动画进行操作演示；多媒体播放器：可用来制作播放器，现在WEBt已很多采用此形式。2.14.1. Flash制作方法注意事项：在规划制作阶段就要明确Flash文件对搜索引擎友好问题；在制作中删除一些没有用到的元件及图片；保证导入的图片质量的情况下，图片大小尽量控制在15K以内；声音要压缩至10K以内；保持桢动作的连续；整个Flash文件控制在30K以内。2.14.2. Flash优化工具FlashOptimizer此工具采用特殊的算法可以将Flash动画文件的体积缩小到只有原来的60%而可以基本保持动画品质不变。2.14.3. Flash制作过程中的问题汇总收集并整理了部分Flash制作过程中常见的一些问题及解