大型網(wǎng)站背景那些該做和不該做
大的背景做了一個(gè)非常令人印象深刻的視覺沖擊力的網(wǎng)站。一個(gè)網(wǎng)頁設(shè)計(jì)師有可能發(fā)揮不同的設(shè)計(jì)變量，通常使用的攝影師，如字段或聚焦深度。沒有背景的只是照片，但也有其他大型插圖甚至視頻。

在這篇文章中，您將了解不同風(fēng)格的大背景以及如何使用它們。你也會(huì)發(fā)現(xiàn)，大背景對(duì)帶寬和一般的網(wǎng)站性能的影響。最后，您將學(xué)習(xí)如何正確實(shí)施的大背景。
 
大背景樣式
本質(zhì)上有很多不同的風(fēng)格，但最常用的方式對(duì)網(wǎng)站：
*圖片作為背景
*圖形和插圖作為背景
*動(dòng)畫作為背景
照片和插圖的應(yīng)用最為廣泛，動(dòng)畫仍然是實(shí)驗(yàn)性的，但當(dāng)帶寬變得更便宜，互聯(lián)網(wǎng)連接速度越來越快，越來越多的網(wǎng)站可以使用這些。

常見的錯(cuò)誤使用大背景
其中最常見的問題，大的背景是，他們必須符合許多不同的屏幕分辨率。網(wǎng)頁設(shè)計(jì)師應(yīng)該使用不同的屏幕分辨率為可能的測(cè)試網(wǎng)站的設(shè)計(jì)，以避免一個(gè)很常見的錯(cuò)誤就是用大背景相關(guān)。
特別是一個(gè)網(wǎng)頁設(shè)計(jì)師應(yīng)該嘗試不同的瀏覽器窗口的寬度，因?yàn)楹芏嘤脩舨粩U(kuò)大他們的瀏覽器的全屏大小，即使他們可能有一個(gè)大的分辨率顯示。
讓我們來看看最常見的錯(cuò)誤，網(wǎng)站設(shè)計(jì)師應(yīng)該避免，當(dāng)處理大背景。
 
圖像中心，平鋪或縮放
這不是錯(cuò)誤的使用為中心，平鋪或縮放的圖像作為背景，事實(shí)上它甚至建議為了保持對(duì)稱性的網(wǎng)站，然而濫用這些技術(shù)可能給人的印象是一個(gè)普通的設(shè)計(jì)，網(wǎng)站的訪問者。
讓我們來看看下面的圖片，一個(gè)網(wǎng)站。這張截圖是在1024×768屏幕分辨率創(chuàng)建：

你可以看到，在這個(gè)分辨率，設(shè)計(jì)有什么錯(cuò)，但是讓我們來看看如何看1680×1050分辨率：

使用背景圖像的中心。它看起來像一個(gè)網(wǎng)站并沒有融入背景一個(gè)普通的圖像。避免使用背景圖像，這樣，確保照片是足夠大的寬度為最常用的屏幕分辨率。最好的解決方案是混合圖像的角點(diǎn)為背景，讓用戶更大的屏幕分辨率不會(huì)注意到它。
切割圖像作為背景可以是棘手的，如果你不知道每個(gè)瀏覽器會(huì)渲染和復(fù)制部分圖像。
每一個(gè)瀏覽器可以復(fù)制的圖像和使用他們的網(wǎng)頁或作為背景，通過CSS（層疊樣式表）。
圖像重復(fù)利用CSS背景屬性來定義圖像并指定如何復(fù)制它。例如：
體{
背景：url（“圖片/樣品。jpg”）repeat-x；
}
上面的代碼插入sample.jpg圖像為背景的體元和重復(fù)它的水平。屬性repeat-x集重復(fù)的圖像沿x軸。你可以使用以下的重復(fù)方式：
* repeat-x重復(fù)圖像的水平
*縱向平鋪重復(fù)圖像垂直
*重復(fù)XY重復(fù)的橫向和縱向
*無重復(fù)不要重復(fù)圖像
這是下面的CSS代碼實(shí)例對(duì)每種方法：
體{
背景：url（“圖片/樣品。jpg”）repeat-x；
}
體{
背景：url（“圖片/樣品。jpg”）縱向平鋪；
}
體{
背景：url（“圖片/樣品。jpg”）重復(fù)XY；
}
體{
背景：url（“圖片/樣品。jpg”）不重復(fù)；
}
注意，你不限于設(shè)置背景圖像的體元。你可以將它設(shè)置為您的網(wǎng)頁上的任何元素。
為了正確的瓷磚圖像，您必須確保圖像的邊緣與模式一致，因此該網(wǎng)站上創(chuàng)建一個(gè)無縫的背景。例如，下面的圖像顯示了一個(gè)模式，它的標(biāo)題是，減少錯(cuò)誤。你可以看到每個(gè)圖像的邊緣：

為了創(chuàng)建一個(gè)無縫背景網(wǎng)頁設(shè)計(jì)師必須把圖片這樣的左邊緣混合成的右邊緣和上邊緣與底部邊緣，如下圖所示：

你可以看到各個(gè)圖像邊緣無縫融合成一個(gè)。這個(gè)圖像從模式下創(chuàng)建：

當(dāng)縮放圖像，最重要的因素是圖像質(zhì)量和分辨率的目標(biāo)。一個(gè)網(wǎng)頁設(shè)計(jì)師應(yīng)該考慮不同的圖像格式，為每一個(gè)特定的風(fēng)格的圖像優(yōu)化。
最廣泛使用的圖像格式：
* GIF–圖形圖像格式
*–JPEG聯(lián)合圖像專家組
* png–便攜式網(wǎng)絡(luò)圖形
GIF是一種圖像格式，優(yōu)化的簡(jiǎn)單的圖形，如文本或簡(jiǎn)單的形狀，圓，線，等它不適合的照片。例如：
樣品的GIF，圖像尺寸：3,3kb

樣品的JPEG，圖像尺寸：13,5kb

你可以清楚地看到，JPEG圖像格式不適合圖形。這種格式應(yīng)該被用于照片和GIF格式時(shí)應(yīng)使用圖形處理。
在如此大的圖像是必不可少的優(yōu)化圖像，為了盡可能的節(jié)省帶寬（更多關(guān)于帶寬稍后在本教程）。避免放大的小圖像，因?yàn)閳D像的分辨率將下降顯著，正如你可以看到下面的截圖的網(wǎng)站（試試看這對(duì)大分辨率顯示）：

這個(gè)問題與上面的例子，網(wǎng)站自動(dòng)縮放圖像根據(jù)屏幕分辨率使背景圖像像素時(shí)成為大分辨率的顯示器。

影響大背景對(duì)帶寬和網(wǎng)站性能
大背景通常等同于文件大小較大，從而導(dǎo)致巨大的沖擊的帶寬和用戶體驗(yàn)。
帶寬是數(shù)據(jù)量，從地方到另一個(gè)，特別是從服務(wù)器到客戶端。用大的圖形，一個(gè)網(wǎng)站的加載時(shí)間會(huì)顯著增加。
因此有必要優(yōu)化你的圖像，通過使用適當(dāng)?shù)膱D像分辨率和格式，以及優(yōu)化網(wǎng)站的其他資源，如CSS和JavaScript文件。
讓我們看看下面的例子：

這是該網(wǎng)站的網(wǎng)絡(luò)使用情況報(bào)告：

有12個(gè)請(qǐng)求，共627 KB下載。這意味著，每次有人訪問網(wǎng)站627 kb的下載，添加到網(wǎng)站的總帶寬。如果網(wǎng)站有50游客，平均每天總共31350 MB的每一天。
通過使用螢火蟲插件火狐你可以看到你的網(wǎng)站的請(qǐng)求，得到一個(gè)想法如何優(yōu)化。
 
技巧
不要忽略大的決議和決議，你不能測(cè)試網(wǎng)站。您可以使用服務(wù)等Browsershots使用不同的屏幕分辨率，測(cè)試你的網(wǎng)頁瀏覽器，等等。

高分辨率不是一切開出你設(shè)計(jì)的網(wǎng)站，你也應(yīng)該考慮小屏幕分辨率。如果一個(gè)大背景的網(wǎng)站是從手機(jī)看嗎？網(wǎng)頁設(shè)計(jì)師應(yīng)該為每一個(gè)瀏覽器的設(shè)計(jì)，為了給觀眾呈現(xiàn)網(wǎng)站。這些天，越來越多的游客傾向于瀏覽網(wǎng)頁的設(shè)備如iPhone和其他智能手機(jī)。
有時(shí)你可能希望目標(biāo)的基礎(chǔ)上，游客正在使用或基于屏幕尺寸僅特定于設(shè)備的Web瀏覽器，通過使用一個(gè)特定的樣式表。隨著一點(diǎn)點(diǎn)的JavaScript代碼，可以幫助你創(chuàng)建一個(gè)樣式表轉(zhuǎn)換開關(guān)或您可以使用已編碼這個(gè)。一除了有一個(gè)偉大的教程列表如何創(chuàng)建一個(gè)樣式切換器。
另一種方法是使用手機(jī)模擬器，這是一個(gè)軟件，你可以看到你的網(wǎng)站在一個(gè)特定的手機(jī)。例如，您可以使用iPhone模擬器Firefox的插件。
優(yōu)化你的背景是必不可少的使用技巧等圖片拼合。
如果照片你想使用你的網(wǎng)站的背景太小還是會(huì)顯得很尷尬，然后 創(chuàng)造照片的整體設(shè)計(jì)。例如：

正如你所看到的照片是小的目的，從而增加了整個(gè)設(shè)計(jì)。
另一個(gè)技巧是創(chuàng)建單一顏色的廣闊空間照片上的自己，然后用這種顏色來畫其余的背景，因此無縫混合之間的照片和實(shí)際背景。

這里的圖像的中心，左、右邊是一個(gè)單一的灰顏色，其余的背景填充顏色。
作為一個(gè)最好的建議的做法，使用大圖片，1700以上像素寬度覆蓋了幾乎95%的顯示尺寸可今天。

牧羊人設(shè)計(jì)文章推薦：

網(wǎng)頁設(shè)計(jì)師需要更多時(shí)間玩游戲的理由

網(wǎng)格是更好的網(wǎng)頁設(shè)計(jì)_深圳網(wǎng)頁設(shè)計(jì)公司

網(wǎng)頁設(shè)計(jì)師周的微博圖片

2015網(wǎng)站攝影趨勢(shì)