大型網(wǎng)站背景那些該做和不該做

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

在這篇文章中，您將了解不同風(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)連接速度越來(lái)越快，越來(lái)越多的網(wǎng)站可以使用這些。

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

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

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

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

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

當(dāng)縮放圖像，最重要的因素是圖像質(zhì)量和分辨率的目標(biāo)。一個(gè)網(wǎng)頁(yè)設(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èn)題與上面的例子，網(wǎng)站自動(dòng)縮放圖像根據(jù)屏幕分辨率使背景圖像像素時(shí)成為大分辨率的顯示器。

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

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

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

高分辨率不是一切開(kāi)出你設(shè)計(jì)的網(wǎng)站，你也應(yīng)該考慮小屏幕分辨率。如果一個(gè)大背景的網(wǎng)站是從手機(jī)看嗎？網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該為每一個(gè)瀏覽器的設(shè)計(jì)，為了給觀眾呈現(xiàn)網(wǎng)站。這些天，越來(lái)越多的游客傾向于瀏覽網(wǎng)頁(yè)的設(shè)備如iPhone和其他智能手機(jī)。
有時(shí)你可能希望目標(biāo)的基礎(chǔ)上，游客正在使用或基于屏幕尺寸僅特定于設(shè)備的Web瀏覽器，通過(guò)使用一個(gè)特定的樣式表。隨著一點(diǎn)點(diǎn)的JavaScript代碼，可以幫助你創(chuàng)建一個(gè)樣式表轉(zhuǎn)換開(kāi)關(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)建單一顏色的廣闊空間照片上的自己，然后用這種顏色來(lái)畫其余的背景，因此無(wú)縫混合之間的照片和實(shí)際背景。

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

創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦：

店鋪流量不穩(wěn)定怎么回事?

成都大邑縣網(wǎng)站設(shè)計(jì)公司

從兩個(gè)方面堅(jiān)持做好seo

成都金堂縣網(wǎng)站設(shè)計(jì)制作公司

名稱欄目：大型網(wǎng)站背景那些該做和不該做
網(wǎng)頁(yè)鏈接：http://www.muchs.cn/news/21006.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、網(wǎng)站改版、響應(yīng)式網(wǎng)站、微信小程序、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)