《電子商務網(wǎng)頁設計與制作》課件項目一

項目一賞析電子商務網(wǎng)站能力目標：(1)分析電子商務網(wǎng)站的基本組成。(2)分析電子商務網(wǎng)站的風格和布局。(3)編寫簡易的電子商務網(wǎng)站賞析報告。(4)模仿電子商務網(wǎng)站進行網(wǎng)站的簡單規(guī)劃設計。知識目標：(1)網(wǎng)頁基礎知識。(2)網(wǎng)頁的基本構成。(3)網(wǎng)站的構成和風格設置。(4)網(wǎng)頁布局的常用結構。(5)網(wǎng)站的規(guī)劃原理。任務一賞析企業(yè)形象網(wǎng)站電子商務網(wǎng)站和網(wǎng)頁（1）網(wǎng)站：網(wǎng)站是一個存放在網(wǎng)絡服務器上完整信息的集合體。它包含一個或多個網(wǎng)頁，這些網(wǎng)頁以一定的方式鏈接在一起，成為一個整體。（2）網(wǎng)頁：網(wǎng)頁實際上是一個文件，網(wǎng)頁里可以有文字、圖像、聲音及視頻信息等。（3）首頁：首頁也是一個網(wǎng)頁，和一般網(wǎng)頁一樣，可以存放各種信息，同時又是一個特殊的網(wǎng)頁，作為整個網(wǎng)站的起始點和匯總點。圖1-1京東商城首頁圖1-2京東商城子頁任務一賞析企業(yè)形象網(wǎng)站電子商務網(wǎng)頁的界面構成網(wǎng)頁的界面只包含內(nèi)置元素，而不包含窗體元素。以內(nèi)容來劃分，一般的網(wǎng)頁界面包括網(wǎng)站Logo、導航欄、Banner、內(nèi)容欄和版尾五部分。（1）網(wǎng)站Logo：網(wǎng)站Logo是整個網(wǎng)站對外唯一的標志，是網(wǎng)站商標和品牌的圖形表現(xiàn)。（2）導航欄：導航欄是索引網(wǎng)站內(nèi)容、幫助用戶快速訪問所需內(nèi)容的輔助工具。根據(jù)網(wǎng)站內(nèi)容，一個網(wǎng)頁可以設置多個導航欄。（3）Banner：Banner的中文意思為旗幟或網(wǎng)幅，是一種可以由文本、圖像和動畫相結合而生成的網(wǎng)頁欄目。Banner的主要作用是顯示網(wǎng)站的各種廣告。（4）內(nèi)容欄：內(nèi)容欄是網(wǎng)頁內(nèi)容的主體，通?？梢杂梢粋€或多個子欄組成，包含網(wǎng)頁提供的所有信息和服務項目。（5）版尾：版尾是整個網(wǎng)頁的收尾部分。在這部分內(nèi)容中，可以聲明網(wǎng)頁的版權、法律依據(jù)，以及為用戶提供各種提示信息等。任務一賞析企業(yè)形象網(wǎng)站版尾logo內(nèi)容欄banner導航欄任務一賞析企業(yè)形象網(wǎng)站電子商務網(wǎng)頁的風格和布局（1）網(wǎng)頁的風格：在對網(wǎng)頁插入各種元素、修飾效果之前，要先確定網(wǎng)頁的風格。網(wǎng)頁的風格是指網(wǎng)站給瀏覽者的整體形象，包括站點的CI(標志、色彩和字體)、版面布局、瀏覽方式、交互性、文字、內(nèi)容及網(wǎng)站榮譽等諸多因素。（2）根據(jù)不同的網(wǎng)頁風格，可以將網(wǎng)頁分成商業(yè)網(wǎng)頁和個人網(wǎng)頁。商業(yè)網(wǎng)頁內(nèi)容豐富、信息量大，一般都有統(tǒng)一的布局設計。個人網(wǎng)頁風格多樣、內(nèi)容專一、形式靈活，更容易創(chuàng)造出美感。（3）國字型布局模式：這是一個形象的說法，就是指頁面上下各有一個廣告條，左側是主菜單，右側是友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點是頁面充實、內(nèi)容豐富、信息量大，是綜合性網(wǎng)站常用的版式。（4）“T”結構布局。所謂“T”結構，就是指網(wǎng)頁上邊和下邊相結合，頁面頂部為橫條網(wǎng)站標志和廣告條，下方的左側為主菜單，右側顯示內(nèi)容的布局。這是網(wǎng)頁設計中應用最廣泛的一種布局方式。任務一賞析企業(yè)形象網(wǎng)站靈活的網(wǎng)頁布局（1）分割屏幕類型（2）去界面化類型（3）基于模塊或網(wǎng)格類型

（4）一屏布局類型

任務一賞析企業(yè)形象網(wǎng)站電子商務網(wǎng)頁的基本構成元素（1）文本：網(wǎng)頁內(nèi)容是網(wǎng)站的靈魂，網(wǎng)頁中的信息以文本為主。（2）圖像：圖像在網(wǎng)頁中具有提供信息、展示形象、裝飾網(wǎng)頁、表達個人情趣和風格的作用。（3）超鏈接：超鏈接是指從一個網(wǎng)頁指向一個目標的連接關系，這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。（4）動畫：動畫具有很強的視覺沖擊力和聽覺沖擊力，可以有效地吸引瀏覽者的注意力。（5）聲音與視頻：聲音和視頻是多媒體網(wǎng)頁的一個重要組成部分。用于網(wǎng)絡的聲音文件的格式非常多，常用的有MIDI,WAV,MP3和AIF等。視頻文件的格式也非常多，常見的有ASF，WMV，RM等。（6）表格：表格通常使用表格來控制網(wǎng)頁中信息的布局方式。（7）表單：表單是網(wǎng)頁中實現(xiàn)交互功能的主要元素。網(wǎng)頁中的表單通常用來接收瀏覽者在瀏覽器端的輸入，然后將這些信息發(fā)送到設計者設置的目標端。任務二賞析電子商務商城網(wǎng)站“京東商城”的版面布局大致是“同字形”或者“左拐角形”結構。色調(diào)為喜慶的紅色?！熬〇|商城”的頂端部分由網(wǎng)站、導航條以及方便訪問者搜索相關信息的搜索欄構成。中間主體部分是商品促銷信息區(qū)，由自動輪換的促銷活動圖像或者動畫組成。在主體部分右邊列表中，常設置相關的暢銷排行榜、特賣活動信息、品牌直通車等。在底部，除了常見的網(wǎng)上購物商城版權信息等外還有“購物指南”、“配送方式”、“支付方式”、“售后服務”等解決訪問者購物疑問的欄目信息。任務二賞析電子商務商城網(wǎng)站該網(wǎng)站的布局結構和京東商城類似，便于消費者查找的搜索欄也放在頁面頂部導航欄上方或者下方的顯著位置，“購物車”也會放置在右側頂部顯著的位置。主體部分從左到右依次為分類列表區(qū)、相關信息動態(tài)區(qū)，促銷宣傳區(qū)、櫥窗展示區(qū)等。在主頁底部，有常見的“購物資訊”、“支付方式”、“幫助和購物指南”等欄目。二級頁面包括主商品的介紹、規(guī)格、用戶評價等。任務二賞析電子商務商城網(wǎng)站（1）淘寶網(wǎng)和傳統(tǒng)網(wǎng)上商城不一樣，它更像個平臺，為商品在線交易的平臺，但整體結構還是和商城相近。淘寶網(wǎng)由于商品眾多，分類工作是重中之重，除了左側分類列表區(qū)進行初步分類外，更為詳細的商品分類列表占據(jù)了頁面主體的主要部分，取代了其他商城站常見的櫥窗展示區(qū)。（2）淘寶網(wǎng)中某件商品的二級頁面和商城商品的二級頁面類似。淘寶網(wǎng)除了這樣的二級頁面外，還不斷生成以某個主題匯集起來的各類相關商品的促銷活動推廣頁面。這類頁面的數(shù)量和更新程度均要遠遠高于京東商城、蘇寧網(wǎng)等類似的商城網(wǎng)站。任務二賞析電子商務商城網(wǎng)站網(wǎng)上購物商城布局分析：（1）網(wǎng)上購物商城的最主要的特色是在主頁會有很大篇幅來顯示分類列表，一般位于部分的左側邊欄，有些商城類目非常豐富，如淘寶網(wǎng)，分類列表則占用主體部分的主要位置。分類列表的作用如同傳統(tǒng)商場中的導購牌，將購物商場中的商品分門別類，這樣可以方便訪問者找到需要的商品。（2）網(wǎng)站的布局因為和分類列表區(qū)域結合，也大多采用“左拐角形”布局，主頁的中間是活動促銷信息，下面往往是櫥窗展示區(qū)，而在底部則是該網(wǎng)站的問題解答。（3）商城網(wǎng)站的二級頁面一般是具體某樣商品的描述頁面，結構和主頁類似，首先是該商品的多個展示圖片，然后圖的右側是該商品的名稱、規(guī)格、運費、價格、付款方式等。之后是“加入購物車”、“立刻購買”和“加入收藏”等處理該商品方式的按鈕。商品下面往往帶有商品評價等內(nèi)容。（4）商城頁面的底部一般是常見問答、友情鏈接、網(wǎng)站版權、備案等信息。任務二賞析電子商務商城網(wǎng)站策劃網(wǎng)站建設（1）網(wǎng)站策劃在網(wǎng)站建設前期，要進行市場分析，然后總結形成書面報告，即網(wǎng)站策劃書。（2）行業(yè)定位分析客戶的所屬行業(yè)是很重要的，一般會依據(jù)所屬行業(yè)大體來定位網(wǎng)站的風格。（3）色調(diào)色調(diào)是指一幅作品色彩的基本傾向。（4）網(wǎng)頁風格每個行業(yè)、每個客戶都有自己的喜好與偏愛，風格是指站點的整體形象給瀏覽者的綜合感受。（5）導航網(wǎng)站導航是將網(wǎng)站的層次結構以一種有條理的方式清晰展示，讓用戶在瀏覽網(wǎng)