网页设计怎么测试

网页设计怎么测试

在设计完网页后，还需要进行一系列的测试才能保证稳定运作，其需要进行的测试有这些：一是链接测试;二是兼容性测试;三是脚本测试;四是速度测试;五是上传测试。

1.链接测试

链接测试主要是测试网页中的各种链接是否正确。在浏览网页时，如果网页中的图片位置显示为空框或网页链接结果为"404 Not

Found"，说明链接有问题。

在这种情况下，应该检查链接对象的引用是否正确，主要检查文件名和路径名是否正确。为了避免此类错误，在创建网页时，应严格按照规划的目录结构来访问文件。

同时，在保存文件时，应注意不要在文件名和文件夹名中使用空格、特殊符号和标点符号(如冒号、破折号或句号)，因为许多服务器在上传文件时，会改变这些符号，这可能导致与这些文件的链接中断。

在Dreamweaver中，你可以使用"文件"→"检查页面"→"链接"菜单命令或"网站"→"检查全站链接"菜单命令来检查链接情况。

2、兼容性测试

兼容性测试是指测试网页是否按照设计要求的布局在不同的浏览器中显示。

不同的浏览器对网页文本的解释是不同的，这就造成了对同一网站的浏览不一致。应特别注意针对比较常用的浏览器及其常用版本进行测试。

为了使网页更具有兼容性，在制作网页时应尽量使用大多数浏览器都支持的标准技术。在为某一浏览器使用一些特殊技术时，应考虑在其他浏览器上为网页的相应部分提供替代内容，否则浏览者可能会在浏览器中看到一片空白。

在Dreamweaver中，可以通过选择"文件"→"检查页"→"浏览器兼容性"菜单命令来进行兼容性测试。

3、脚本测试

脚本测试是为了测试网页中的服务器端程序，如JavaScript，是否能够正常工作。常见的错误原因是JavaScript设计中的语法错误和逻辑错误，以及由于不支持的浏览器而发生的错误。

4、速度测试

速度测试主要是为了测试页面的下载速度。测试时应在尽可能多的不同的客户端上访问被测页面，并测试其下载时间。下载时间应控制在访问者可接受的时间范围内。

5、上传测试

当一个网页被上传到一个远程站点后，需要再次进行测试。这是因为在上传一个已经在本地测试成功的网页后，可能会出现问题。

常出现问题是不能显示图像或找不到链接，通常是因为文件名和链接路径有错误。

出现这种错误的原因可能是服务器对大小写敏感，或文件名中存在非法字符，或网站中要使用的文件没有上传到服务器。一些网站为网站提供在线测试服务，并提供测试报告，可用于测试和改进网站。

响应式网页设计特点

响应式网页设计特点

响应式网页设计的主要特点有这些：一是拥有媒体查询技术;二是流式网格布局;三是灵活的多媒体显示;四是高性能的JavaScript脚本。以下是关于响应式网页设计特点的具体介绍。

1、媒体查询技术(Media Query)。响应式网页往往包含多个媒体查询语句，用于适配不同的显示条件。

2、流式网格布局(Fluid Grid Layout)。让网页元素来决定网格的大小和设计，并根据网页元素来决定所占用的网格位置尺寸。

3、灵活的多媒体显示(Flexible

Media)。根据不同设备、不同分辨率、不同网速等环境，来自动适配多媒体内容的显示。比如可以让同一个图像，在iPhone

6上显示“高清”的版本，而在iPhone 4上只显示“一般”的版本。

4、高性能的JavaScript脚本。由于有些用户终端的运行条件有限，响应式网页里的脚本肯定要考虑运行效率的问题。现在已有一些较成熟的JavaScript框架，比如jQuery等，能大大改进脚本程序的运行性能和效率。

响应式网页设计优势

1、对用户友好响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这是基本的也是响应式实现的初衷。

2、移动频段(MobileSegment)在响应式网站的帮助下，你可以获得网站流量的全景图。你需要做的只是创建一个移动频段(的流量统计)，以获得与网站流量相关的所有必要信息。流量的状态在分析网站性能及采取必要措施提升性能方面十分有用。

3、积累分享响应式Web设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。

4、搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。

5、无重定向响应式Web设计的优点之一是，你不必在乎任何重定向，它包含无用户代理定向。所以当你很少负责解决重定向及定向用户时，这是一件很棒的事情。

6、更少维护开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。

如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。

怎样制作响应式网站

制作响应式网站时需要考虑到以下几个方面。

1、允许网页宽度自动调整首先，在网页代码的头部，加入一行viewport元标签。

2、CSS文件尾部增加针对不同屏幕分辨率的规则。

例如使用如下的代码，可以让屏幕宽度低于480像素的设备(如iPhone等)，网页侧栏隐藏中部内容栏宽度自动调节。

CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。

body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了。但这只适合布局简单的页面，复杂的页面实现很困难。

3、相对字体大小字体也不能使用从不大小(px)，而只能使用相对大小(em)。

4、流动布局(fluid grid)“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。