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

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

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

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

使用背景圖像的中心。它看起來像一個網(wǎng)站并沒有融入背景一個普通的圖像。避免使用背景圖像，這樣，確保照片是足夠大的寬度為最常用的屏幕分辨率。最好的解決方案是混合圖像的角點為背景，讓用戶更大的屏幕分辨率不會注意到它。
切割圖像作為背景可以是棘手的，如果你不知道每個瀏覽器會渲染和復(fù)制部分圖像。
每一個瀏覽器可以復(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代碼實例對每種方法：
體{
背景：url（“圖片/樣品。jpg”）repeat-x；
}
體{
背景：url（“圖片/樣品。jpg”）縱向平鋪；
}
體{
背景：url（“圖片/樣品。jpg”）重復(fù)XY；
}
體{
背景：url（“圖片/樣品。jpg”）不重復(fù)；
}
注意，你不限于設(shè)置背景圖像的體元。你可以將它設(shè)置為您的網(wǎng)頁上的任何元素。
為了正確的瓷磚圖像，您必須確保圖像的邊緣與模式一致，因此該網(wǎng)站上創(chuàng)建一個無縫的背景。例如，下面的圖像顯示了一個模式，它的標題是，減少錯誤。你可以看到每個圖像的邊緣：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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