网站设计与网页制作立体化项目教程（第4版） 课件 2-5-1 课件：企业网站测试

第二篇：项目实战篇任务5：企业网站测试与发布5.1

网站测试5.1网站测试（1）掌握对静态网站测试的方法。（2）了解浏览器中常见的BUG问题。（3）掌握对浏览器中常见BUG的修复。能力要求学习导览任务概述对已制作完成的“英博特智能科技”企业网站进行可用性测试、兼容性测试、打印机测试和显示代码合法性检查。5.1网站测试任务思考（1）如果让你来对制作的网站进行测试，你会怎么测试？（2）网站测试有测试工具吗，请举例？（3）网站的兼容性是指什么？5.1网站测试网站测试对网站进行测试是保证整体项目质量的重要一环。网站的测试包括功能测试、性能测试、安全性测试、稳定性测试、浏览器兼容性测试、可用性/易用性测试、链接测试、代码合法性测试等。负责该项任务的人员要具备三心：耐心、细心、专心，才能更好的完成测试。5.1网站测试网站可用性测试整体页面测试导航测试图形测试内容测试表格测试5.1网站测试整体页面测试大致包括如下内容的测试：整个系统的界面是否保持一致，操作是否友好。界面是否存在错别字。界面上的按钮样式是否一致。界面中的表单元素，如按钮、下拉框、复选框等是否有响应。界面所有的链接是否正常。界面所有的展示图片是否样式一致。界面所有的列表页标题字是否会换行，标题字对齐方式是否一致。页面在不同浏览器下是否会发生异常。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行整体页面测试，并将测试结果填写到表2-5-1中。5.1网站测试导航测试在导航测试中需考虑到如下内容：网站是否易于导航，导航是否直观。网站的主要部分是否可通过主页进行访问。网站导航是否准确。网站的页面结构、导航、菜单、连接的风格是否一致。广告图片的点击是否正常，点击后打开的页面是否正确。页面链接是否可以正常点击，点击后链接到的位置是否正确。链接点击后是否正常的发生颜色变化。链接的打开方式是否合理（当前窗口、新窗口），是否符合产品设计。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行导航测试，并将测试结果填写到表2-5-2中。5.1网站测试图形测试一个网站中的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。图形测试的内容如下：要确保图形有明确的用途。网站图片尺寸要尽量小，并且要能清楚地说明某件事情，一般都有链接到某个具体的页面。验证所有页面字体的风格是否一致。背景颜色应该与字体颜色和前景颜色相搭配。检查图片的尺寸、位置是否符合需求。对广告图片的点击是否正常，点击后打开的页面是否正确。页面上具有相同意义的图标应保持一致。对于链接其他网站的图片，无法显示时是否有容错性处理。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行图形测试，并将测试结果填写到表2-5-3至表2-5-8中。5.1网站测试内容测试内容测试用于检测网站提供信息的准确性和相关性。其中信息的准确性是指是否有语法或拼写错误；信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般web站点中的所谓“相关文章列表”。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行内容测试，并将测试结果填写到表2-5-9中。5.1网站测试浏览器兼容性测试对于网页来说，需做好浏览器兼容，才能够让页面在不同的浏览器下都正常显示。但因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，且用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱和错位。目前暂没有统一的能解决这样问题的工具，最普遍的解决办法就是不断地在各浏览器间调试网页显示效果，通过对CSS样式控制及通过脚本判断并赋予不同浏览器的解析标准。包括：网页中的标签问题、div的垂直居中问题、margin加倍的问题、浮动IE产生的双倍距离、宽度和高度的问题、DIV浮动IE文本产生3像素的BUG、float清除浮动、图片间有空白间隙问题、不同浏览器对实际像素的解释、应用条件注释实现浏览器兼容、常用hack方法兼容等。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行内容测试，并将测试结果填写到表2-5-10中。5.1网站测试表格测试对于表格的测试重要包容如下几个方面：整个表格宽度应该小于屏幕大小，不会出现横向滚动条。每一栏的宽度要足够，表格里的文字不能有折行。不能因为某一格的内容太多，而将整行的内容拉长。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行表格测试。5.1网站测试打印测试有时在屏幕上显示的图片和文本的对齐方式可能与打印出来的不一样。因此网页在设计的时候还需要考虑到打印问题，注意节约纸张和油墨。而测试人员至少需要验证如订单确认、文章详情等页面的打印是正常的。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行打印测试。5.1网站测试显示代码合法性测试显示代码的合法性检查，主要分为HTML、JavaScript、CSS代码的检查，这些都可以借助一些测试工具来完成。在本任务中选择了W3CWEB标准验证()，对网页文档和CSS的合法性进行了检测。代码合法性检测中，需要关注如下几点：①文档类型声明位于HTML文档的第一行。②使用小写元素名更易编写。③HTML的每个元素都要关闭标签。④属性值使用引号更易于阅读。⑤图片中要使用alt属性，用于当图片不能显示时替代图片显示。⑥使用简洁的的语法来载入外部的脚本文件，type属性不是必须的。5.1网站测试任务实施请对自己完成的“英博特智能科技”网站进行代码合法性测试。5.1网站测试讨论区请完成对“英博特智能科技”网站的测试，测试结论和修改意见填写在给定的表格中。5.1网站测试完成7个在线测试题运用本课学