在當(dāng)前互聯(lián)網(wǎng)時(shí)代，圖片已經(jīng)成為網(wǎng)頁設(shè)計(jì)中不可或缺的元素，對(duì)于普通網(wǎng)站來講，圖片也成為頁面加載的一大負(fù)擔(dān)，雖然隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)站的頁面加載問題終究會(huì)解決，但是，在當(dāng)前時(shí)刻，站長(zhǎng)需要重視這些問題。一個(gè)好的網(wǎng)站要求站長(zhǎng)合理的使用圖片，靈活運(yùn)用網(wǎng)頁圖片處理技巧和網(wǎng)頁圖片設(shè)計(jì)規(guī)則，讓圖片在傳達(dá)信息和美化界面的同時(shí)又不會(huì)給網(wǎng)站的瀏覽速度帶來影響。

在網(wǎng)頁中使用用圖片，先要處理要用到的圖片，再利用網(wǎng)頁制作工具在需要的位置插入相應(yīng)的圖片，然后設(shè)置其寬度和高度，添加文字說明。在這個(gè)過程中，圖像設(shè)置規(guī)則顯得尤為重要。

1 圖片位置的選擇與設(shè)置

通常網(wǎng)頁圖像主要包括網(wǎng)站logo，網(wǎng)站banner，網(wǎng)站導(dǎo)航和各種輔助修飾圖片以及網(wǎng)頁背景圖片等等。這些圖像位置的選擇應(yīng)該有利于瀏覽者接受信息和提高頁面美感，做到既不喧賓奪主又能很好的傳達(dá)信息。

一個(gè)網(wǎng)站頁面的頭部一般由導(dǎo)航和網(wǎng)站banner組成，網(wǎng)站設(shè)計(jì)者可以在bannar中投放廣告吸引用戶，并利用導(dǎo)航欄清晰的像用戶展現(xiàn)網(wǎng)站的欄目結(jié)構(gòu)。

網(wǎng)站logo做為網(wǎng)站的標(biāo)志性圖像，應(yīng)該安排在頁面最突出最顯眼的位置，而輔助說明的小文字應(yīng)當(dāng)緊靠相應(yīng)的文字。

對(duì)于大篇幅的文字內(nèi)容，在適當(dāng)?shù)奈恢貌迦敫爬ù笠獾膱D片可以幫助用戶理解內(nèi)容，而且還可以通過這些插入的圖片劃分章節(jié)。

以京東商城首頁的頭部頁面為例，他總共包括網(wǎng)站banner，網(wǎng)站logo，搜索欄和導(dǎo)航三個(gè)部分。他直接將網(wǎng)站banner放在了頂部，將店內(nèi)最重要的信息通過這個(gè)顯著的位置發(fā)布出去。將logo放在了第二行位置來顯示網(wǎng)站的品牌屬性，同時(shí)網(wǎng)站banner和導(dǎo)航都用紅色加深，突出了視覺效果，京東這么做的目的主要是從視覺效果，用戶體驗(yàn)方面來考量的。

值得注意的是，圖片位置的選擇不必局限于常規(guī)手法，適當(dāng)?shù)陌l(fā)揮創(chuàng)意調(diào)整位置，能使網(wǎng)站更具有吸引力。

2 切圖規(guī)則

對(duì)于一個(gè)已經(jīng)設(shè)計(jì)好的網(wǎng)頁效果圖進(jìn)行切圖是主要涉及兩個(gè)原則：一個(gè)以色塊為單位盡量保持網(wǎng)頁元素相對(duì)獨(dú)立。二是盡量保證切線的水平對(duì)齊從而方便頁面布局。大面積相同色塊部分在切割時(shí)只需切割一小段，充分利用背景重復(fù)的特性，提高頁面加載速度。

3 設(shè)置圖片尺寸

在布局網(wǎng)頁的時(shí)候，將切割好的圖片插入相應(yīng)的位置，不應(yīng)使用圖片的width和hight屬性改變圖片的尺寸，因?yàn)槟菢訒?huì)使圖片變形和失真。使用矢量繪圖工具制作的圖像適合保存為png格式，其大小尺寸應(yīng)在設(shè)計(jì)的時(shí)候確定，變?yōu)槲粓D后不宜對(duì)其進(jìn)行縮放操作。

4 背景圖片的設(shè)置

如果想在某個(gè)圖片上添加文字，則可以將該圖片設(shè)計(jì)為背景圖片。除此功能外，靈活設(shè)置網(wǎng)頁背景圖片還能大大加快網(wǎng)頁的加載速度。對(duì)于大面積相同色塊的背景圖片，我們可以只切割狹小的長(zhǎng)條，然后利用背景圖在水平和垂直方向上自動(dòng)重復(fù)的特性設(shè)置背景圖片。對(duì)于單一顏色的背景，我們則可以利用html單元格背景屬性直接設(shè)置相應(yīng)的背景顏色。

以上都是常用的圖片使用技巧，其實(shí)這些技巧不是絕對(duì)的，只要給用戶帶來好的用戶體驗(yàn)?zāi)蔷褪亲詈谩Ｍ瑫r(shí)在使用圖片時(shí)還要考慮搜索引擎的優(yōu)化，這一方面也是非常重要的一個(gè)方面。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

當(dāng)前標(biāo)題：站長(zhǎng)使用網(wǎng)站圖片的一些技巧
分享網(wǎng)址：http://m.newbst.com/news0/311350.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、微信公眾號(hào)、虛擬主機(jī)、軟件開發(fā)、企業(yè)建站、網(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í)需注明來源： 創(chuàng)新互聯(lián)