大型网站背景那些该做和不该做

2016-08-20 分类：网站建设

大的背景做了一个非常令人印象深刻的视觉冲击力的网站。一个网页设计师有可能发挥不同的设计变量，通常使用的摄影师，如字段或聚焦深度。没有背景的只是照片，但也有其他大型插图甚至视频。

在这篇文章中，您将了解不同风格的大背景以及如何使用它们。你也会发现，大背景对带宽和一般的网站性能的影响。最后，您将学习如何正确实施的大背景。
大背景样式
本质上有很多不同的风格，但最常用的方式对网站：
*图片作为背景
*图形和插图作为背景
*动画作为背景
照片和插图的应用最为广泛，动画仍然是实验性的，但当带宽变得更便宜，互联网连接速度越来越快，越来越多的网站可以使用这些。

常见的错误使用大背景
其中最常见的问题，大的背景是，他们必须符合许多不同的屏幕分辨率。网页设计师应该使用不同的屏幕分辨率为可能的测试网站的设计，以避免一个很常见的错误就是用大背景相关。
特别是一个网页设计师应该尝试不同的浏览器窗口的宽度，因为很多用户不扩大他们的浏览器的全屏大小，即使他们可能有一个大的分辨率显示。
让我们来看看最常见的错误，网站设计师应该避免，当处理大背景。
图像中心，平铺或缩放
这不是错误的使用为中心，平铺或缩放的图像作为背景，事实上它甚至建议为了保持对称性的网站，然而滥用这些技术可能给人的印象是一个普通的设计，网站的访问者。
让我们来看看下面的图片，一个网站。这张截图是在1024×768屏幕分辨率创建：

你可以看到，在这个分辨率，设计有什么错，但是让我们来看看如何看1680×1050分辨率：

使用背景图像的中心。它看起来像一个网站并没有融入背景一个普通的图像。避免使用背景图像，这样，确保照片是足够大的宽度为最常用的屏幕分辨率。解决方案是混合图像的角点为背景，让用户更大的屏幕分辨率不会注意到它。
切割图像作为背景可以是棘手的，如果你不知道每个浏览器会渲染和复制部分图像。
每一个浏览器可以复制的图像和使用他们的网页或作为背景，通过CSS（层叠样式表）。
图像重复利用CSS背景属性来定义图像并指定如何复制它。例如：
体{
背景：url（“图片/样品。jpg”）repeat-x；
}
上面的代码插入sample.jpg图像为背景的体元和重复它的水平。属性repeat-x集重复的图像沿x轴。你可以使用以下的重复方式：
* repeat-x重复图像的水平
*纵向平铺重复图像垂直
*重复XY重复的横向和纵向
*无重复不要重复图像
这是下面的CSS代码实例对每种方法：
体{
背景：url（“图片/样品。jpg”）repeat-x；
}
体{
背景：url（“图片/样品。jpg”）纵向平铺；
}
体{
背景：url（“图片/样品。jpg”）重复XY；
}
体{
背景：url（“图片/样品。jpg”）不重复；
}
注意，你不限于设置背景图像的体元。你可以将它设置为您的网页上的任何元素。
为了正确的瓷砖图像，您必须确保图像的边缘与模式一致，因此该网站上创建一个无缝的背景。例如，下面的图像显示了一个模式，它的标题是，减少错误。你可以看到每个图像的边缘：

为了创建一个无缝背景网页设计师必须把图片这样的左边缘混合成的右边缘和上边缘与底部边缘，如下图所示：

你可以看到各个图像边缘无缝融合成一个。这个图像从模式下创建：

当缩放图像，最重要的因素是图像质量和分辨率的目标。一个网页设计师应该考虑不同的图像格式，为每一个特定的风格的图像优化。
最广泛使用的图像格式：
* GIF–图形图像格式
*–JPEG联合图像专家组
* png–便携式网络图形
GIF是一种图像格式，优化的简单的图形，如文本或简单的形状，圆，线，等它不适合的照片。例如：
样品的GIF，图像尺寸：3,3kb

样品的JPEG，图像尺寸：13,5kb

你可以清楚地看到，JPEG图像格式不适合图形。这种格式应该被用于照片和GIF格式时应使用图形处理。
在如此大的图像是必不可少的优化图像，为了尽可能的节省带宽（更多关于带宽稍后在本教程）。避免放大的小图像，因为图像的分辨率将下降显著，正如你可以看到下面的截图的网站（试试看这对大分辨率显示）：

大型网站背景那些该做和不该做

这个问题与上面的例子，网站自动缩放图像根据屏幕分辨率使背景图像像素时成为大分辨率的显示器。

大型网站背景那些该做和不该做

影响大背景对带宽和网站性能
大背景通常等同于文件大小较大，从而导致巨大的冲击的带宽和用户体验。
带宽是数据量，从地方到另一个，特别是从服务器到客户端。用大的图形，一个网站的加载时间会显著增加。
因此有必要优化你的图像，通过使用适当的图像分辨率和格式，以及优化网站的其他资源，如CSS和JavaScript文件。
让我们看看下面的例子：

这是该网站的网络使用情况报告：

有12个请求，共627 KB下载。这意味着，每次有人访问网站627 kb的下载，添加到网站的总带宽。如果网站有50游客，平均每天总共31350 MB的每一天。
通过使用萤火虫插件火狐你可以看到你的网站的请求，得到一个想法如何优化。
技巧
不要忽略大的决议和决议，你不能测试网站。您可以使用服务等Browsershots使用不同的屏幕分辨率，测试你的网页浏览器，等等。

高分辨率不是一切开出你设计的网站，你也应该考虑小屏幕分辨率。如果一个大背景的网站是从手机看吗？网页设计师应该为每一个浏览器的设计，为了给观众呈现网站。这些天，越来越多的游客倾向于浏览网页的设备如iPhone和其他智能手机。
有时你可能希望目标的基础上，游客正在使用或基于屏幕尺寸仅特定于设备的Web浏览器，通过使用一个特定的样式表。随着一点点的JavaScript代码，可以帮助你创建一个样式表转换开关或您可以使用已编码这个。一除了有一个伟大的教程列表如何创建一个样式切换器。
另一种方法是使用手机模拟器，这是一个软件，你可以看到你的网站在一个特定的手机。例如，您可以使用iPhone模拟器Firefox的插件。
优化你的背景是必不可少的使用技巧等图片拼合。
如果照片你想使用你的网站的背景太小还是会显得很尴尬，然后创造照片的整体设计。例如：

正如你所看到的照片是小的目的，从而增加了整个设计。
另一个技巧是创建单一颜色的广阔空间照片上的自己，然后用这种颜色来画其余的背景，因此无缝混合之间的照片和实际背景。

这里的图像的中心，左、右边是一个单一的灰颜色，其余的背景填充颜色。
作为一个建议的做法，使用大图片，1700以上像素宽度覆盖了几乎95%的显示尺寸可今天。

大型网站背景那些该做和不该做