15商城網站布局與編排六

三明市農業(yè)學校教案《網站內容編輯》 教案教學課題（章、節(jié)或主題）商城網站布局與編排（六）｛板書｝計劃課時2周次8教學方法講授教具多媒體教學目的掌握欄目編輯和首頁輪播。重點難點欄目編輯教學過程復習提問LOGO的制作工具有哪些？引入新課首頁中除了左上角LOGO外，接下來就是欄目和首頁輪播。講授新課欄目編輯｛板書｝（一）什么是網頁導航｛板書｝網頁導航（navigation是指通過一定的技術手段，為網頁的訪問者提供一定的途徑，使其可以方便地訪問到所需的內容。網頁導航表現為網頁的欄目菜單設置、輔助菜單、其他在線幫助等形式。網頁導航設置是在網頁欄目結構的基礎上，進一步為用戶瀏覽網頁提供的提示系統。商城網站的信息量較大，分類眾多，多采用在主導航之外，設置輔助性導航的方式；為保證網站的整體統一，方便用戶快速瀏覽，各級頁面均采用相同主導航。（二）網頁導航的要求｛板書｝網頁導航要求清晰明了、突出，層級分明。（三）首頁中常用網頁導航的位置和特點｛板書｝1.頂部水平欄導航。頂部水平欄導航是當前兩種最流行地網站導航菜單設計模式之一。它最常用于網站的主導航菜單，且最通常地放在網站所有頁面的網站頭的直接上方或直接下方。三明市農業(yè)學校教案VANCL凡客誠品31100*+29*?照膠速畫白11植的培柒陽計的：58^19&19?30yVANCL凡客誠品31100*+29*?照膠速畫白11植的培柒陽計的：58^19&19?30y三費時尚女裝限時搶頂部水平欄導航設計模式有時伴隨著下拉菜單，當鼠標移到某個項上時彈出它F面的二級子導航項。⑴頂部水平欄導航的一般特征。導航項是文字鏈接，有按鈕形狀，或者選項卡形狀。水平欄導航通常直接放在鄰近網站logo的地方。(2)頂部水平欄導航的缺點。頂部水平欄導航最大的缺點就是它限制了你在不采用子級導航的情況下可以包含的鏈接數。對于只有幾個頁面或類別的網站來說，這不是什么問題，但是對于有非常復雜的信息結構且有很多模塊組成的網站來說，如果沒有子導航的話，就不是一個完美的主導航菜單選擇。(3)何時使用頂部水平欄導航。頂部水平欄導航對于只需要在主要導航中顯示5-12個導航項的網站來說是非常好的。這也是單列布局網站的主導航的唯一選擇除了通常用于二級導航系統的底部導航)。當它與下拉子導航結合時，這種設計模式可以支持更多的鏈接。2.豎直/側邊欄導航。側邊欄導航的導航項被排列在一個單列，一項在一項的上面。它經常在左上角的列上，在主內容區(qū)之前一根據一份針對從左到右習慣讀者的導航模式的可用性研究，左邊的豎直導航欄比右邊的豎直導航表現要好。側邊欄導航設計模式隨處可見，幾乎存在于各類網站上。這有可能是因為豎直導航是當前最通用的模式之一，可以適應數量很多的鏈接.弓了呻徵學大0￡E：?弓了呻徵學大0￡E：?a:M■m:lh三明市農業(yè)學校教案它可以與子導航菜單一起使用，也可以單獨使用。它很容易用于包含很多鏈接的網站主導航。側邊欄導航可以集成在幾乎任何種類的多列布局中。(1)側邊欄導航的一般特征。①文字鏈接作為導航項很普遍(包含或不包含圖標)；②很少使用選項卡(除了堆疊標簽導航模式)；③豎直導航菜單經常含有很多鏈接。(2)豎直/側邊欄導航缺點。因為可以處理很多鏈接，當豎直菜單太長時有時可能使用戶厭煩。嘗試限制你引人的鏈接數，取而代之可以使用飛出式子導航菜單以提供網站的更多信息。同時考慮將鏈接分放在直觀的類別當中，以幫助用戶很快地找到感興趣的鏈接。(3)何時使用豎直/側邊欄導航。豎直導航適用于幾乎所有種類的網站，尤其適合有一堆主導航鏈接的網站。.選項卡導航。選項卡導航可以隨意設計成任何你想要的樣式，從逼真的，有手感的標簽到圓滑的標簽，以及簡單地方邊的標簽等。它存在于各種各樣的網站里，并且可以納人任何視覺效果。選項卡比起其他類別的導航有一個明顯的優(yōu)勢:它們對用戶有積極的心理效應。人們通常把導航與選項卡關聯在一起，因為他們曾經在筆記本或資料夾里看見選項卡，并且把它們與切換到一個新的章節(jié)聯系在一起。這個真實世界的暗喻使得選項卡導航非常直觀。(1)選項卡導航的一般特征。①樣子和功能都類似真實世界的選項卡(就像在文三明市農業(yè)學校教案件夾，筆記本等中看到的一樣);②一般是水平方向的但也有時是豎直的(堆疊標簽)。(2)選項卡導航的缺點。選項卡最大的缺點是它比簡單的頂部水平欄更難設計。它們通常需要更多的標簽，圖片資源以及CSS，具體根據標簽的視覺復雜度而定。選項卡的另一個缺點是它們也不太適用于鏈接很多的情況，除非它們豎直地排列即使這樣，如果太多的話它們還是看起來很不合適)。(3)何時使用選項卡導航。選項卡也適合幾乎任何主導航，雖然它們在可以顯示的鏈接上有限制，尤其在水平方向的情況下。將它們用于擁有不同風格子導航的主導航的較大型網站是個不錯的洗項。.飛出式菜單和下拉菜單導航。飛出式菜單(與豎直/側邊欄導航一起使用)和下拉菜單(一般與頂部水平欄導航一起使用)是構建良好導航系統的好方法。它使得你的網站整體上看起來很整潔，而且使得深層章節(jié)很容易被訪問.他們通常結合水平，豎直或是選項卡導航一起使用，作為網站主導航系統的一部分。(1)飛出式菜單和下拉菜單導航的一般特征。①用于多級信息結構;②使用JavaScript和CSS來隱藏和顯示菜單;③顯示在菜單中的鏈接是主菜單項的子項;④菜單通常在鼠標懸停在上面時被激活，而有時候也可能是在鼠標點擊時激活。(2)飛出式菜單和下拉菜單導航缺點。除非你在主導航鏈接邊上放置一些標識(通常是箭頭圖標)，不然訪客可能不知道那有包含子導航項的下拉或飛出式菜單，因此使這些標識很明顯是非常重要的。同時飛出式菜單和下拉可能使得導航在移動設備上非常難用，所以要確保你的移動樣式表處理了這種情況。(3)何時使用飛出式菜單和下拉菜單導航。如果你想在視覺上隱藏很大的或很復雜的導航層次，飛出式菜單和下拉是很好的選擇，因為它讓用戶決定他們想看見什三明市農業(yè)學校教案么，以及什么時候可以看見它們。它們可以用來在不弄亂網頁的情況下按需顯示很大數量的鏈接。它們還可以用來顯示子頁面和局部導航，并且不需要用戶首先點擊打開新的頁面。.頁腳導航。頁腳導航通常用于次要導航，并且可能包含了主導航中沒有的鏈接，或是包含簡化的網站地圖鏈接.訪客通常在主導航找不到他們要找的東西時會去查看頁腳導航。(1)頁腳導航的一般特征。①頁腳導航通常用于放置其他地方都沒有的導航項②通常使用文字鏈接，偶爾帶有圖標;③通常鏈接指向不是那么關鍵的頁面。(2)頁腳導航的缺點。如果你的頁面很長，沒有人愿意僅僅為了導航而滾動到頁面底部。對于較長的頁面，頁腳導航最好作為重復鏈接和簡要的網站地圖的地方。它不適合作為主導航形式。(3)何時使用頁腳導航。絕大多數網站都有這樣那樣的頁腳導航，即使它只是重復其他地方的鏈接。應考慮什么放在這里有用，以及你的訪客可能最想找什么。(四)如何設計網頁導航的欄目內容｛板書｝多姿多彩的導航方式，可以滿足用戶瀏覽時視覺上的感官體驗和操作上的交互體驗，但在導航欄目內容的設計上，不應只是網站內容的簡單分類，而應該是體現網站獨特的風格和理念。導航欄目內容應該能夠精準的引導用戶，迅速找到目標內容。例如：淘寶商城以“品牌”、“特色”作為內容標題，突出“淘”的特色；當當網主導航采用中規(guī)中矩的商品類別作欄目內容，下方增加水平欄副導航按特色服務進行分類；三明市農業(yè)學校教案亞馬遜干脆取消頂部水平欄導航，只使用左側豎直飛出式菜單導航，頂部水平欄導航的位置被搜索欄的大片空白占據，方便目的性強的直接用戶，體現網站特色凡客則使用與當當網類似的方式，主導航采用特色熱銷商品，副導航使用總體的商品類別。大多數網站使用不只一種導航設計模式。例如一個網站可能會用頂部水平欄導航作為主導航系統，并使用豎直側邊欄導航系統來輔助它，同時還用頁腳導航來作冗余，增加頁面的便利度。當選擇你的導航系統基于的導航設計模式時，你必須選擇支持你的信息結構以及網站特性的方案。導航是網站設計的重要部分，它的效果必須有堅實的基礎。首頁輪播｛板書｝（一）為什么要使用焦點圖｛板書｝焦點圖可以更好的提升用戶體驗.觀賞性。大多數網站一般都是由靜態(tài)的文字和圖片組成，而焦點圖的滾動輪播能有效的幫助網站實現動靜結合的效果，給用戶一種視覺上的滿足。.內容推薦。由于動靜結合的方式，可以吸引到用戶的眼球，網站很容易將當下高質量的內容直接推送給目標用戶，能夠更好的留住有效用戶。.用戶引導。焦點圖類型的廣告、新上線商品的介紹、促銷活動的宣傳都可以將用戶直接引導至最終商品。（二）怎樣選擇吸引眼球的焦點圖｛板書｝首先，在視覺上，焦點圖的使用應注意以下幾點：.顏色鮮活明亮，具有視覺沖擊力，第一印象很重要。.圖片需具有一定內涵，可引起聯想或思考。.選擇與標題內容相關及有視覺吸引力的底圖。.美女圖具有一定的殺傷力，但除女性網站外，選擇使用美女圖時需慎重。.標題意境，選擇適合的創(chuàng)意圖片來搭配。其次，在內容的選擇上，應注意以下幾點：.用戶需要的內容一符合網站定位的內容，且用戶關注度較高的內容，都符合焦點圖的選擇。.網站當下想要傳遞的內容一網站有明確立場的針對性內容;新上線功能和活三明市農業(yè)學校教案動，商業(yè)性質的推薦等。焦點圖不僅是內容推薦與展示的窗口，更是一個引導用戶的通道，引導的目標可能是內容，也可能是其他網站當下的需要。（三）焦點圖中的文字很關鍵｛板書｝.標題以2—3行組合為宜，主標題、副標題及引子的擺放應對比突出。.文字處于圖片的黃金分割位置，視覺效果最佳。.字體不要超過兩種、不使用描邊。.布局合理，避免失衡引起的閱讀歧義。.突出重點內容，排列錯落有致，中英文搭配體現現代風格和國際性。.元素搭配上應在符合規(guī)律的基礎上盡量大膽創(chuàng)新。（四）焦點圖的尺寸要適宜｛板書｝.焦點圖使用的圖片應單獨制作，不可與商品信息公用，以免造成比例失調，影響了用戶感官體驗。.根據需要焦點圖可以放置在導航欄以上或以下的位置，寬度可以是網站的寬度，也可以是網站寬度的70%（符合黃金分割）。.焦點圖的高度，盡可能與寬度成黃金比例;焦點圖的底邊應該在屏幕高度的黃金分割線上，這樣可以顯示出焦點圖下面的內容，引導用戶瀏覽。4.焦點圖是為了引起用戶注意，大尺寸會出現余白過大的問題，可以根據需要相關內容的推薦放置在一張焦點圖內。（五）常用的商城網站焦點圖有哪些｛板書｝商城網站的促銷方式多種多樣，推薦商品種類繁多，到底什么類型的圖片經常被使用在焦點圖中呢？通過分析眾多商城網站，得出以下關鍵詞:包郵、滿減、品牌、秒殺、1元、美女、免費送、限時、永久、VIP、節(jié)日等。（六）焦點圖是怎樣制成的｛板書｝焦點圖是由多張宣傳圖片組成，自動輪換顯示的特殊宣傳手段，動的畫面更能吸引注意力。那么，動的焦點圖是怎么制作的呢?一般來說，有如下三種方法：GIF動畫。雖然GIF圖的制作方便，兼容性強，但不便于添加或刪減內容，動畫效果表現有限。FLASH動畫。FLASH動畫的表現豐富多彩，但使用時需要獲得支持，兼容

三明市農業(yè)學校教案性不強;FLASH動畫自成一體，獨立于網頁的其他兀素，略顯不直觀。3.JAVA程序控制。隨著技術的成熟發(fā)展，更多的網頁采用Div+CSS的方式進行制作。同時，JAVA程序也逐漸被應用在網頁中。當下htm15和CSS3的普及，也使J