案例剖析:網頁圖片的應用技能

悄悄松松做好網站平安六點要素
2016-05-13
適用促銷手腕大清點
2016-05-13
Show all

案例剖析:網頁圖片的應用技能

  圖片已成為網頁計劃中弗成或缺的元素,然則對付通俗網站來說,圖片同樣成為頁面加載的一大累贅。是以,一個好的網站請求站長公道的應用圖片,靈巧應用網頁圖片處置技能和網頁圖片計劃規矩,讓圖片在轉達信息和美化界面的同時又沒有會給網站的閱讀速率帶來影響。

  在網頁中應用用圖片,先要處置要用到的圖片,再應用網頁制造對象在須要的地位插入響應的圖片,然後設置其寬度和高度,增加筆墨解釋。在這個進程中,圖象設置規矩顯得尤其主要。

  1 圖片地位的挑選與設置

  平日網頁圖象重要包含網站logo,網站banner,網站導航和各類幫助潤飾圖片和網頁配景圖片等等。這些圖象地位的挑選應當有益於閱讀者接收信息和進步頁面美感,做到既沒有鵲巢鳩占又能很好的轉達信息。

  一個網站頁面的頭部一樣平常由導航和網站banner構成,網站計劃者能夠在bannar中投放告白吸收用戶,並應用導航欄清楚的像用戶展示網站的欄目構造。

  網站logo做為網站的標記性圖象,應當支配在頁面最凸起最顯眼的地位,而幫助解釋的小筆墨應該緊靠響應的筆墨。

  對付大篇幅的筆墨內容,在恰當的地位插入歸納綜合粗心的圖片能夠贊助用戶懂得內容,並且還能夠經由過程這些插入的圖片分別章節。

  以京東商城首頁的頭部頁面為例,他統共包含網站banner,網站logo,搜刮欄和導航三個部門。他間接將網站banner放在瞭頂部,將店內最主要的信息經由過程這個明顯的地位宣佈進來。將logo放在瞭第二行地位來表現網站的品牌屬性,同時網站banner和導航都用赤色加深,凸起瞭視覺後果,京東這麼做的目標重要是從視覺後果,用戶體驗方面來考量的。

  值得留意的是,圖片地位的挑選沒必要范圍於慣例手段,恰當的施展創意調劑地位,能使網站更具有吸收力。

  2 切圖規矩

  對付一個已計劃好的網頁後果圖舉行切圖是重要觸及兩個原則:一個以色塊為單元隻管堅持網頁元素相對自力。二是隻管包管切線的程度對齊從而便利頁面結構。大面積雷同色塊部門在切割時隻需切割一小段,充足應用配景反復的特征,進步頁面加載速率。

  3 設置圖片尺寸

  在結構網頁的時刻,將切割好的圖片插入響應的地位,不該應用圖片的width和hight屬性轉變圖片的尺寸,由於那樣會使圖片變形和掉真。應用矢量畫圖對象制造的圖象合適保留為png格局,其巨細尺寸應在計劃的時刻肯定,變成位圖後沒有宜對其舉行縮放操縱。

  4 配景圖片的設置

  假如想在某個圖片上增加筆墨,則能夠將該圖片計劃為配景圖片。除此功效外,靈巧設置網頁配景圖片還能大大加速網頁的加載速率。對付大面積雷同色塊的配景圖片,我們能夠隻切割狹窄的長條,然後應用配景圖在程度和垂直偏向上主動反復的特征設置配景圖片。對付單一色彩的配景,我們則能夠應用html單位格配景屬性間接設置響應的配景色彩。

  以上四點都是經常使用的圖片應用技能,沒必要太拘泥於這些規矩,隻要給用戶帶來好的用戶體驗那就是好的應用規矩。同時在應用圖片時還要斟酌搜刮引擎的優化,這一方面也長短常主要的一個方面。文章首創於 高端網站制造 ,轉載請附帶鏈接。

Comments are closed.