第三章 網站焦點圖制作

1.焦點圖

網站焦點圖是網站內容的一種展現形式，簡單來說就是讓一張圖片或多張圖片展現在網頁上很明顯的位置，用圖片組合的形式播放，類似焦點新聞的意思，只不過加上了圖片。一般多用在網站首頁版面或頻道首頁版面，因為是通過圖片的形式呈現，所以視覺吸引力較強，容易吸引訪問者的點擊。據國外的設計機構調查統計，網站焦點圖的點擊率明顯高于純文字，轉化率也高于使用文字標題的五倍。

焦點圖必須有圖片，不然純文字的形式就是焦點文字或焦點新聞。

①JS焦點圖：使用原生態的JS代碼實現的焦點圖，樣式相對單一，借助CSS可實現多樣的風格。

②Flash焦點圖：使用Flash設計或用Flash AS編程設計的焦點圖。該焦點圖的優點是字體展現效果佳，比純網頁形式更具有美感，缺點是不利于SEO與引擎的抓取。

③CSS焦點圖：網頁設計現在流行HTML+CSS設計，CSS焦點圖就是這樣而來的，很多情況下需要結合JS代碼實現。

④jQuery焦點圖：現在很流行的實現方式，逐步取代JS原生態的焦點圖，因為jQuery焦點圖的代碼書寫簡單，借助jQuery的類庫很容易實現常見的JS焦點圖效果，而且代碼少，不過需要使用者有一定的網頁設計基礎。

圖3-1、3-2、3-3、3-4所示為主流網站焦點圖效果。

焦點圖基本要素包括三項：

①圖片：根據網站需要，準備圖片若干張，圖片的尺寸要一致，格式不限，可以使用jpg、gif或者png格式的圖片；

②導航指示標志：一方面用來標識當前顯示圖片，另一方面用來在焦點圖之間進行切換；

③導航鏈接地址：當用戶點擊焦點圖時顯示的網址地址。