《HTML与CSS入门经典(第8版)》——2.5 测试Web内容

简介:

本节书摘来自异步社区《HTML与CSS入门经典(第8版)》一书中的第2章,第2.5节,作者: 【美】Julie C. Meloni , Michael Morrison 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 测试Web内容

当你传送文件到Web服务器或者将它们放置到可移动媒体用于本地浏览,你应该立即完全测试所有页面。下面的检查列表将帮助确保你的Web内容的表现符合你的预期。注意,某些术语现在对你来说有点不熟悉,但是随着你进一步学习并且创建更大的项目,可以再回到这一列表。

  • 在传送文件之前,在你的计算机上测试以确保链接有效,内容反映你的视觉设计。在传送页面到Web服务器或者可移动设备之后,再次测试。
    在可能的情况下用尽量多的浏览器进行这些测试——Chrome、Firefox、Internet Explorer、Opera和Safari——并在Mac和Windows平台上都进行测试。如果可能,以低分辨率(800像素600像素)和高分辨率(1600像素1200像素)分别测试。
  • 在开始测试之前关闭Web浏览器的自动图像装入,这样你可以看到每个页面没有图像时的样子。检查alt标签文本然后开启图像装入,装入图形并且重新小心查看页面。
  • 使用浏览器字体大小设置,以各种字体大小来查看每个页面,确保如果用户用自己的字体规格覆盖你的,你的布局不会破坏。
  • 等待每个页面完全结束装入,然后滚动到底确定所有图像出现在应该出现的位置。
  • 观察每个页面装入花费的时间。装入是否花费超过几秒钟?如果这样,这个页面上的信息是否宝贵到足于阻止用户在页面装入结束前转向别处?诚然,宽带连接很普遍,但是这并不意味着你可以在你的页面上载入1MB大小的图像。

如果你的页面通过了所有这些测试,你可以轻松一下了,你的网站已经为公众的查看做好了准备。

相关文章
|
10天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
54 0
|
16天前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
20 6
|
15天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
16天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
10 0
|
16天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
11 0
|
16天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0
|
17天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
17天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
Web App开发 新零售 测试技术
Web性能压力测试工具之WebBench详解
Web性能压力测试工具之WebBench详解
1650 0