网站在发布到Web服务器供浏览者浏览前,需要做大量测试,以保证浏览者可以正常浏览和使用。在Dreamweaver中提供了一系列测试Web站点的功能,如测试页面之间的链接、网页的外部链接、对IE浏览器的兼容性等。
技能要点:网站建设后站点测试指南
站点中的网页文档应确保可以在目标浏览器中正常显示和工作、没有失效的链接、页面下载也不会占用太长时间。
在Dreamweaver中,可以测试如下项目,使站点的页面可以为访问者提供完善的服务。
1、确保页面正常显示
站点的访问者使用的操作系统、浏览器通常五花八门,作为网页的设计者,有必要在站点发布前对站点所有的页面进行测试。
并非每种浏览器都支持CSS样式表、层、Active控件、JavaScript脚本和框架这些技术。例如,比较流行的Firefox浏览器就不支持Active控件和CSS2.0标准。
为使站点中的网页在这些浏览器中可以正常、清晰地显示,可以使用Dreamweaver“检查浏览器”功能,自动为不符合要求的浏览器提供页面重新定向,将其转到可以正常显示的页面中。
2、支持不同的浏览器和平台
各种不同的浏览器对网页的解析是不同的。在设计好网页后,应针对不同的浏览器编写CSS样式的hack代码,以保证网页的布局和字体大小等属性在不同浏览器中都可以正常显示。
3、检查失效链接
在设计网页过程中,很容易由于工作的疏忽造成链接的文件位置变化,导致链接失效。在网站发布前应将站点内各网页的超链接全面检查一次,以防止出现失效链接。
设计网页时,如使用到外部的链接,则应经常检查外部链接是否存在。如外部链接不存在,则应及时编辑修改网页。
在检查失效链接时,可以使用Dreamweaver自带的【检查站点范围的链接】工具,帮助提高工作效率。
4、控制页面文件大小
使用图像处理软件制作的切片网页,代码通常十分臃肿,使用一些软件生成的代码同样如此。因此在设计完成网页后,应将网页的代码再阅读一遍,删除无用的注释语句。首页文件应尽量控制在70KB以内,以提高打开的速度。
5、控制网页各版块
在某些浏览器上,对于由大型表格或层布局的页面,可能在加载完整个表格或层之前什么都不显示,这就增加了访问者等待的时间。因此在设计网页时,应考虑将大型表格或层分为几部分,以做到先载入一部分给访问者浏览,在访问者浏览的同时继续载入其他部分。或者在页面顶部添加一些动画导航条和Banner,引开访问者的注意力,防止访问者因等待时间过长而关闭页面。
6、图像失效的补救方法
在网页设计时,应避免在表格或其他网页布局元素(层、框架、嵌入帧)中直接插入图像。
直接插入图像,如图像失效,则会在页面中产生红叉影响网页整体观感。且很多设计者在插入图像后便不再为布局元素设置大小,如果图像失效,则会导致网页变形。
比较好的方法是用CSS设置网页布局元素的宽与高,然后将要插入的图像设为网页布局元素的背景。如果图像失效,仅会显示空白。
7、检查标题和标签
当网页设计者设计大量页面时,很容易因工作疏忽而忘记修改页面的标题。因此在测试整站时,应注意检查每个页面的标题是否为默认的“无标题文档”。
网页通常都是由大量表格或层进行布局的,因此在网页的修改过程中,很容易产生空标签和冗余的标签,甚至缺失的标签。这些标签或许不会 影响到页面是否可以打开,但都会影响页面的打开速度。
在Dreamweaver中,插入的表格每单元格都会自动插入一个空格符( )。在测试整站时,应设置单元格的高度,并将这些空格符删除。