《网页设计与制作项目教程》课件7.pptx

1、网页设计与制作项目教程项目七 网页测试运行与发布项目七 网页测试运行与发布项目目标：能力目标(1)学会对网页进行浏览器兼容性测试。(2)学会对网站链接进行检测和修复。(3)学会使用FTP工具上传网站文件。知识目标(1)浏览器兼容性测试。(2)网站链接检测。(3)站点上传和下载。网页设计与制作项目教程任务1 浏览器兼容性测试【任务目标】王明设计并制作了一个旅游网站，他用Chrome浏览器查看自己网站的时候，页面美观大方，看起来很舒适。然而，当他使用IE浏览器查看这个旅游网站，他却发现大部分的页面一团糟，页面版面乱了，甚至有些特效也显现不出来，因此,王明需要对浏览器兼容性进行测试。项目七 网页测试

2、运行与发布网页设计与制作项目教程1启动Dreamweaver CS6，打开需要检测的网页文档，在菜单栏中选择“文件检查页浏览器兼容性”，或者选择“窗口结果浏览器兼容性”，都可以打开“结果”面板中的“浏览器兼容性”标签页，如图7-1-1所示。【任务实施】图7-1-1“浏览器兼容性”标签页项目七 网页测试运行与发布网页设计与制作项目教程2点击“浏览器兼容性”标签页左边的按钮，选择“设置”子项，弹出“目标浏览器”对话框。从这里可以看到，Dreamweaver CS6可以针对对话框中显示的六种浏览器的兼容性进行检测，其他浏览器不在检测范围之内。根据实际需要，选取需要检测兼容性的浏览器及其最低版本号，选

3、择完毕点击“确定”按钮，则设置已经生效，如图7-1-2所示。图7-1-2“目标浏览器”对话框项目七 网页测试运行与发布网页设计与制作项目教程3点击“浏览器兼容性”标签页左边的按钮，选择“检查浏览器兼容性”子项，Dreamweaver则开始自动检测浏览器兼容性。检测到的问题的严重程度、问题的位置及问题的类型呈现在窗口左侧。点击左侧窗口的某个问题，右侧窗口将展现该问题的具体原因及影响范围，以便网页设计人员分析问题，如图7-1-3、7-1-4所示。图7-1-3浏览器兼容性检测结果一图7-1-4浏览器兼容性检测结果二项目七 网页测试运行与发布网页设计与制作项目教程4双击“浏览器兼容性”标签页左侧窗口的

4、某个问题，Dreamweaver将自动高亮定位到被检测网页相关的代码区域，以便网页设计人员快速地分析并修改问题，如图7-1-5所示。图7-1-5 高亮定位代码区域项目七 网页测试运行与发布网页设计与制作项目教程任务2 网页链接测试【任务目标】王明在访问某个旅游网站的时候，部分页面出现了“404 not find”无法找到网页的错误提示，这让他非常闹心。尽管网站设计美观，内容也比较丰富，但如果客户点击页面多次遇到“404 not find”的状况，便会失去耐心，转而投向其他同类型网站，因此必须进行网页链接测试。项目七 网页测试运行与发布网页设计与制作项目教程1选择检测网站启动Dreamweave

5、r CS6，选择需要检测的站点，如图7-2-1所示。【任务实施】子任务子任务1 网站链接状况查询网站链接状况查询如图7-2-1 选择检测站点项目七 网页测试运行与发布网页设计与制作项目教程2检查网站整体链接情况在菜单栏中选择“站点检查页站点范围内的链接”，Dreamweaver开始进行整个站点的链接检测，并将检测结果显示在“结果”面板中的“链接检查器”标签页窗口内，如图7-2-2所示。图7-2-2网站断掉的链接情况项目七 网页测试运行与发布网页设计与制作项目教程3点击“断掉的链接”旁边的三角按钮，选择“外部链接”选项，可以查看到网站的哪些文件设置了哪些外部链接，如7-2-3所示。图7-2-3网

6、站外部链接情况项目七 网页测试运行与发布网页设计与制作项目教程4点击“断掉的链接”旁边的三角按钮，选择“孤立的文件”选项，可以查看到网站孤立文件的名称。双击具体某个孤立文件的名称，就可以在文件窗口查看孤立文件的具体内容，如7-2-4所示。图7-2-4网站孤立的文件项目七 网页测试运行与发布网页设计与制作项目教程5检查单个网页的链接情况除了对整个网站需要进行链接检测以外，我们有时候也需要对单独的网页进行链接检测。打开需要检测的网页，在菜单栏中选择“文件检查页链接”，或者“窗口结果链接检查器”，点击，选择“检查当前文档中的链接”，可以查看当前文档的链接情况，如7-2-5所示。图7-2-5检测单个网

7、页的链接项目七 网页测试运行与发布网页设计与制作项目教程6检查部分网页的链接情况在文件面板中，用Ctrl或者Shift键选择部分需要检测的网页，如7-2-6所示，点击，选择“检查站点中所选文件的链接”，可以查看部分网页的链接情况，如7-2-7所示。图7-2-6选择多个网页 图7-2-7检测多个网页链接情况的结果项目七 网页测试运行与发布网页设计与制作项目教程1.在链接检查器中修改断掉的链接。“结果”面板中的“链接检查器”标签窗口中缺省显示的是网站断掉链接的名称及其所在的文件。点击断掉链接的名称，可以直接修改链接文件的名称，或者点击后面的文件夹图标，在网站中选择链接的文件名称，如7-2-8所示。

8、【任务实施】子任务子任务2 错误链接的修改错误链接的修改图7-2-8 通过链接检查器修改链接项目七 网页测试运行与发布网页设计与制作项目教程2.在属性面板中修复链接在“结果”面板中的“链接检查器”标签窗口中双击断掉链接所在的文件，该文件将被打开，有问题的部分高亮显示，并自动打开属性窗口。在属性窗口中直接修改链接文件的名称，或者点击后面的文件夹图标选择正确的链接文件，如7-2-9所示。图7-2-9 通过属性窗口修改链接项目七 网页测试运行与发布网页设计与制作项目教程3.修复孤立文件双击孤立文件名称，检查孤立文件里面的内容，确认是否是网站所需要的内容。若确是所需的文件，则在网页上新增对孤立文件的超

9、链接。若是不需要的内容，则可以移除孤立文件。项目七 网页测试运行与发布网页设计与制作项目教程任务3 网页发布【任务目标】王明设计并制作了一个旅游网站，经过浏览器兼容性检测以及链接测试后，都没有发现有什么问题。现在，他想把自己辛苦制作的成果分享给他的好友们欣赏，然而，当他把电脑关闭以后，连他自己都无法访问自己制作的网站了，这显然不符合互联网“随时、随地”提供服务的原则。项目七 网页测试运行与发布网页设计与制作项目教程1打开百度主页，输入“网站空间”关键词进行搜索，可以看到有很多的服务提供商可以提供网站空间的服务。网站空间分为免费空间和付费空间。对于临时性的、空间需求不大的，可以申请免费空间，先行

10、试用。2现以http:/free.3v.do免费空间为例进行介绍，这个网站的免费空间仅100M,且只支持HTML和ASP，不能支持PHP，该空间主页及注册页面如图7-3-1所示。【任务实施】图7-3-1 free.3v.do免费空间主页子任务子任务1 网站空间申请网站空间申请项目七 网页测试运行与发布网页设计与制作项目教程3查看免费空间信息。注册成功之后，用自己的帐号和密码登录，在管理中心点击“账户信息”，查看免费空间的域名，gzkmuec帐号申请到的免费空间域名为：http:/；点击“FTP管理”，查看FTP服务器的地址及帐号和登录密码，也可以自行修改FTP登录密码，gzkmuec帐号分配的

11、FTP管理地址是ftp:/，FTP登录帐号和密码缺省为该免费空间的帐号和密码，如图7-3-3、图7-3-4所示。项目七 网页测试运行与发布网页设计与制作项目教程1打开百度主页，输入“FlashFXP”关键词进行搜索，找一个可靠的网站下载FlashFXP软件，如图7-3-5所示。【任务实施】子任务子任务2 FTP软件的使用软件的使用图7-3-5 搜索FTP软件项目七 网页测试运行与发布网页设计与制作项目教程2 双击下载之后的可执行文件，开始安装FlashFXP软件，按照安装向导提示，一步步点击“下一步”按钮，直至FlashFXP软件安装成功项目七 网页测试运行与发布网页设计与制作项目教程3安装成

12、功FlashFXP之后，弹出配置语言环境的对话框，选择中文简体语言，这样进入FlashFXP程序后会呈现中文界面，如图7-3-9所示。图7-3-9 语言选择对话框项目七 网页测试运行与发布网页设计与制作项目教程4运行FlashFXP，窗口左边呈现的是本机的文件及文件夹资源，窗口右上方呈现的是远程服务器上的文件及文件夹资源；右下方呈现与服务器连接的过程及结果；未连接到远程服务器的时候，右上窗口是空白的，如图7-3-10所示。图7-3-10 FTP软件运行界面项目七 网页测试运行与发布网页设计与制作项目教程5点击 连接图标按钮或直接按F8，弹出“快速连接”对话框，配置FTP服务器。将在免费空间查看

13、到的FTP服务器地址及帐号填入，点击“连接”按钮，可以在窗口右下方看到服务器的连接过程及信息，如图所示。6.再次点击图标按钮，则可以断开和远程服务器的连接。项目七 网页测试运行与发布网页设计与制作项目教程1运行FlashFXP，在窗口左边选择网站所在的磁盘，然后再按照层级一直选择到网站所在的文件夹，如图7-3-13所示。【任务实施】子任务子任务3 站点上传站点上传图7-3-13 选择需要发布的网站所在的文件夹项目七 网页测试运行与发布网页设计与制作项目教程2按快捷键F8调出快速连接对话框，从历史记录中选择一个FTP服务器，或者输入FTP参数连接远程服务器。3选中网站下面所有的文件及文件夹，拖动

14、到右边远程服务器窗口内。这时候可以在左边窗口观察到FlashFXP软件自动将所有要传输到远程服务器上的文件进行了排队，按顺序将一个个的文件传送到远程服务器端，如图7-3-14所示。图7-3-14网站文件上传的过程项目七 网页测试运行与发布网页设计与制作项目教程4检查网站首页文件的名称，首页文件名称必须为index.html、default.html或者index.asp、default.asp,若不是，则重命名首页文件名称。5访问网站主页，查看网站是否发布成功。我们前面申请到的免费空间域名为：http:/，输入该网址，成功访问到网站。图7-3-15网站上传完毕 待文件全部传输完毕后，就可看到远

15、程服务器端就有了本机网站内容的一个备份，如图7-3-15所示。项目七 网页测试运行与发布网页设计与制作项目教程【项目总结】【项目总结】网站制作完成以后，需要进行反复的测试、审核、修改后才能正式发布，在网站的维护和更新过程中仍然需要不断重复这个过程。通过本项目，掌握对网页的浏览器兼容性及链接检测的方法，能够熟练使用FTP工具进行网页的发布。项目七 网页测试运行与发布网页设计与制作项目教程【项目检测】【项目检测】一、练习题1.查看一下你建立的站点的情况，包括站点总文件个数，Html文件个数；总链接个数，正确链接个数，断掉链接个数，外部链接个数以及孤立文件个数。2查看一下你建立的网站在不同浏览器的兼容情况。二、拓展训练 把你建立的网站发布到互联网上，要求能够实现7x24小时对网站的访问，并分享给你的朋友。1.搜索一个外部的免费WEB空间。2.申请帐号，并获得空间的IP地址及管理帐号。3.使用FTP软件，上传已经建立好的网站。4.访问互联网上的这个网站并查看效果。项目七 网页测试运行与发布网页设计与制作项目教程项目七 网页测试运行与发布