网页设计师首先要考虑的设计问题之一是项目将要内置的分辨率。网站是否会针对800×600系统进行优化?1024年?
宽度是流动的还是固定的?它是否适用于移动设备?与几年前相比，现在确实有更多的屏幕分辨率需要考虑。
有很多关于移动设备小尺寸设计的文章，但是最大的通用分辨率呢?高清晰度(通常称为HD或High-Def)?本文将通过一个真实的案例研究，向您展示一个使您的网站适用于多种分辨率的过程:Debut Creative。当然，你可以在不处理高清分辨率的情况下使用它，但为什么不走极端呢?
《处女创意》最近被设计成HD版本。
简介
在过去的几年里，随着高清电视机价格的不断下降，高清电视得到了越来越多的消费者的使用。它们不仅可以很容易地连接到具有hd功能的电脑上，而且像Wii、Playstation 3和Xbox 360这样的现代游戏设备也有支持互联网的浏览器，可以用来浏览网页。是时候考虑了为这种流行格式设计．
就像高清网页设计一样夸张，我最近设计了我的网站，为1920×1080浏览(目前网站布局实际上是为1024优化的，但背景框架很适合高清)。在为1920屏幕分辨率构建网站之前，有几个重要的考虑因素，即使它只是背景。
支持HD的一些问题
文件大小是一个主要考虑因素。根据高清网站的定义，任何横跨整个1920×1080的背景图像都将是巨大的(根据定义为200万像素)。进一步说，除非妥善解决，否则这些大尺寸可能会导致不需要全高清体验的用户不必要的带宽消耗。
从设计的角度来看，我希望我的背景渐变能够很好地将内容框起来，最暗的边缘围绕着全屏浏览器的边缘。对于任何较小的浏览器来说，只有一个背景以这种方式为HD框架是不够的。
在Photoshop中，所有可见的都是我们想要调整到不同分辨率边缘的渐变层。
点击图片查看完整版本．解决办法很简单;带有动态背景图像调用的JavaScript分辨率嗅探器。在我们开始之前，让我们来谈谈为高清图像准备。
图像
第一步是在Photoshop(或同等能力的图像编辑器)中准备你的背景图像。我从一个高清背景(1920x1080px)开始。除了我的框架渐变，我添加了一层重羽毛笔触，以确保背景图案褪色为纯色，这样我的页面背景色就可以接管这张图片的结尾。
当你准备好高清背景时:保存它(也许可以做一个备份副本)。我们很快就会裁剪和删除很多!
高清分辨率为1920x1080px。
点击图片查看完整版本．为了保存网页和移动设备优化的图像，Photoshop有一个功能叫做保存为Web和设备(Ctrl + Alt + Shift + S)。我对这里的设置进行了调整，尽可能地优化了这张巨大的图像。
我决定将其保存为优化后的JPG格式，质量为53%，我能够将图像压缩到111KB。对于一个典型的拨号连接来说，这将是一个痛苦的21秒下载(仅为背景图像)，但对于普通DSL用户来说，这是一个可管理的5秒。我可以接受。
给文件起一个有意义的名字，比如bg1920.jpg．
另存为Web &设备优化允许您比较压缩大小。点击图片查看完整版本．
现在我们要为其他常见的决心重复这些步骤。这是一个很好的时间来使用一些快捷键来快速完成这个过程。以下是我在这个例子中使用Photoshop的详细过程(有些更聪明的设计师可能会考虑记录Photoshop动作来简化这个过程)。
你会注意到我使用画布大小只改变宽度。改变高度也会导致我的导航栏变得太短。这取决于你想要的布局图像大小它可以完全缩放图像(Ctrl+Alt+I)。
首先，我点击我的渐变图层(我需要调整每个分辨率大小的图层)。
接下来就是一个简单的过程:
#1 - Ctrl+Alt+C打开画布大小选项框
#2 - Tab两次才能进入宽度场
#3 -输入宽度(分辨率嗅探器将使用的宽度包括1920、1600、1440、1280、1152、1024、800、640。有关常见的移动分辨率，请参阅共同决议清单在维基百科上。
#4 -按Enter键两次以确认裁剪并关闭帆布选项框
#5 - Ctrl+T激活自由变换活动层的特性。
#6 -按住Alt和水平调整边缘的梯度在新边缘:按住Alt使调整大小镜像。它应该夹在文档的边缘。
#7 -按Enter键完成并渲染转换。
#8 - Ctrl+Alt+Shift+S打开保存为Web和设备选项
#9 -按Enter键(设置应与上次相同)保存。
#10 -命名文件使用与第一个文件相同的约定。
#11 -按Enter键完成文件的保存
重复!
您现在应该有一个充满图像的时髦文件夹。
由于我的网页布局设置为1024，我不打算使用较小的文件;但是，我要做一个bg0.jpg这是我的背景的一个无梯度和平铺版本，它是几百个像素的正方形。这可能对移动冲浪者有用。
完成后，您应该有一个包含各种大小的命名良好的图像的文件夹。
JavaScript
现在我们已经有了所有的图像，我们准备将它们动态地调用到我们的站点中。下面的脚本也适用于多个监视器系统。通常当它得到回答值时，它检测的是主浏览器的宽度，而不是整个桌面的分辨率。
有些浏览器可能会检测到它所在的屏幕。之后对JS文件进行下面的调用<身体>标签(把它放在头部会在你的CSS之前调用背景，这可能会导致它不呈现)。
< script src = " http://yourdomain.com/scripts/sniffer.js" type = " text / javascript " > < /脚本>
或者如果你使用一个像WordPress这样的主题:
< script src = " http://yourdomain.com/wp-content /主题/ themename/ sniffer.js " type = " text / javascript " > < /脚本>
现在，您自然需要JavaScript。JavaScript解析嗅探器所做的是检测回答并应用适当的CSS图像背景。
一些笔记
我用"大于或等于”(> =)条件运算符，以覆盖可能出现在站点上的奇怪分辨率/有一个“小于或等于”(< =)对于分辨率小于799px的操作符。这应该包括一些上网本还有分辨率更小的手机。这个例子只是为我的1024px准备好的站点切换了高清背景——然而，你可以修改代码来调用完全不同的样式表，甚至改变布局以在不同的分辨率下工作。
的代码
/*分辨率嗅探器/动态CSS加载器- HD | via阿利McBlain*/ /*普通电脑屏幕:640,800,1024,1152,1280,1440,1600和高清1920 *///背景图片文件夹的文件路径var bgFolder = ";if (screen.width>=1920){document['body'].style.backgroundImage='url('+bgFolder+ 'bg1920.jpg)”;文档(身体的).style.backgroundRepeat =“repeat-x”;} else if (screen.width>=1600){document['body'].style.background='url('+bgFolder+'bg1600.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”;} else if (screen.width>=1440){document['body'].style.background='url('+bgFolder+'bg1440.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”;} else if (screen.width>=1280){document['body'].style.background='url('+bgFolder+'bg1280.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”;} else if (screen.width>=1152){document['body'].style.background='url('+bgFolder+'bg1152.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”; } else if (screen.width>=1024){ document['body'].style.background='url('+bgFolder+'bg1024.jpg)'; document['body'].style.backgroundRepeat='repeat-x'; }/ /可选／*else if (screen.width>=800){document['body'].style.background='url('+bgFolder+'bg800.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”;｝* /else if (screen.width<=799){document['body'].style.backgroundImage='url('+bgFolder+'bg0.jpg)';文档(身体的).style.backgroundRepeat =“重复”;} else {document['body'].style.backgroundImage='url('+bgFolder+'bg1024.jpg)';文档(身体的).style.backgroundRepeat =“repeat-x”;｝
CSS
最后，您可能需要调整CSS。简单地强制改变背景图像可能会使你的背景颜色自动变为白色。添加重要的!你不想包含在JS文件中的后台类会强制它们工作。
正文{background-color: #1a1c1c重要的!；背景位置:中心0重要的!；｝
测试
那么它起作用了吗?更改桌面分辨率并刷新站点。如果您有一个多监视器系统，您只需要改变主监视器的分辨率来测试，而不管浏览器在哪个监视器中。
如果你想在一台连接到你电脑上的高清电视机上测试它，你可能必须把它设置为你的主显示器。
下载
下载下面本文中使用的脚本，并可以在您自己的站点上使用(您必须对其进行修改)。
- sniffer.zip(1 kb,邮编)
总结
当然，在高清网站成为市场需求之前，我们还有一段时间。站在危险的边缘是值得的，对吧?
