大型網站背景那些該做和不該做

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%的顯示尺寸可今天。

大型網站背景那些該做和不該做