电子商务网页设计与制作课件.pptx

電子商務網頁設計與製作

賞析電子商務網頁1賞析行業類網站賞析電子商務類網站電子商務網站的類型、特點和發展趨勢

Contents目錄認識網頁佈局設計1淺嘗網站佈局2第一節賞析行業類網站

佈局就是以最適合流覽的方式將圖片和文字擺放在頁面的不同位置。不同的製作者會有不同的佈局設計。常見的網頁佈局有“國”字型佈局、“T”型佈局、POP佈局、Flash佈局、標題正文型佈局、左右框架型佈局、上下框架型佈局。必備知識

認識網頁佈局設計1“國”字型佈局以“新浪微博”網站為例介紹“國”字型佈局。新浪微博網站網址為/?topnav=1mod=logo,如圖1-1所示。該網站主要採用了“國”字型佈局。“國”字型佈局因佈局結構與漢字“國”相似而得名,如圖1-2所示。其頁面的最上部分一般放置網站的logo和導航欄或banner廣告,頁面中間分為左、中、右三部分,左邊放置導航菜單或者其他資訊,中間放置網站的主要內容,右邊放置網站的登錄註冊和友情鏈接或其他資訊,最下部分一般放置網站的版權資訊和聯繫方式或其他資訊等。

認識網頁佈局設計1“T”型佈局以“十大品牌網”為例介紹“T”型佈局。十大品牌網是CNPP官方授權查詢網站,囊括了各大行業的龍頭企業網站。網址為,主頁面如圖1-3所示。該主頁面採用了“T”型佈局結構。“T”型佈局結構因與英文大寫字母“T”相似而得名,簡化佈局示意圖如圖1-4所示。頁面的頂部是“網站logo+導航欄+banner”,左邊是網站導航菜單,右邊是網站主要內容。這種佈局的優點是頁面結構清晰、主次分明,是初學者最容易上手的設計佈局的方法。主體部分左側為各行業的導航,以及行業類的二級分類導航,右側為權威數據查詢和各大企業的logo展示。

認識網頁佈局設計1POP佈局POP佈局引自廣告術語,是指頁面佈局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。這種佈局一般出現在一些網站的首頁,大部分為一些精美的平面設計結合一些小的動畫,再放上幾個簡單的鏈接或者僅是一個“進入”的鏈接,甚至有的直接在首頁的圖片上做鏈接而沒有任何提示。這種佈局大部分出現在企業網站和個人首頁,如果處理得好,會給人帶來賞心悅目的感覺。POP佈局是一種頗具藝術感和時尚感的網頁佈局方式。以“POP全球時尚網路機構”為例介紹POP佈局。上海逸尚雲聯資訊技術股份有限公司(簡稱“逸尚雲聯”)是中國首家為時尚行業提供流行資訊及供應鏈全套解決方案的資訊技術公司,旗下包括兩個主要的網路資訊平臺——“POP全球時尚網路機構”和“ULB優料寶”,以及一個遍及全國的“設界——線下時尚設計聯合空間”。“POP全球時尚網路機構”的網址為,主頁面如圖1-5所示。

認識網頁佈局設計1Flash佈局Flash佈局是指整個或大部分頁面本身就是一個Flash動畫,它是動態的,畫面一般比較絢麗、有趣,是一種比較新潮的佈局方式。其實這與封面型結構是類似的,與封面型不同的是,這種類型採用了目前非常流行的Flash,由於Flash強大的功能,頁面所表達的資訊更豐富,其視覺效果及聽覺效果如果處理得當,絕不遜於傳統的多媒體。Flash主頁面如圖1-6所示。

認識網頁佈局設計1標題正文型佈局標題正文型佈局一般用於顯示文章頁面、新聞頁面和一些註冊頁面等,簡化示意圖如圖1-7所示。

認識網頁佈局設計1左右框架型佈局左右框架型佈局是一些大型論壇和企業經常使用的一種佈局結構。其佈局主要分為左右兩個框架頁面。左框架頁面一般為導航欄鏈接和網站logo,右框架頁面則放置網站的主要內容,簡化示意圖如圖1-8所示。

認識網頁佈局設計1上下框架型佈局上下框架型佈局與左右框架型佈局類似。上面放置導航欄或者banner,下麵放置網站主要內容。其區別僅在於上下框架型佈局分為上下兩個框架頁面,簡化示意圖如圖1-9所示。

認識網頁佈局設計1“國”字型佈局適用於大型公司等綜合型網站,例如製造業、IT業、貿易類行業等,頁面顏色多採用公司的標準色、logo的顏色以及和企業主題相關的顏色,或者是藍、灰、紅等體現商務簡約風格的顏色。個人主頁和多媒體企業等可以採用POP佈局和Flash佈局來達到衝擊視覺的效果。網站多以色彩分明和主題分明的全屏海報和Flash作為主頁,超鏈接到主題內容中。網站導航條的設計也基本決定了網頁的二級頁面欄目的主題顏色風格,常見的導航條由“首頁”“關於公司”“新聞中心”“產品中心”“人力資源”“聯繫我們”組成。banner:橫幅廣告。一般是使用GIF格式的圖像檔,可用靜態圖形,也可用多幀圖像拼接為動畫圖像。尺寸正在逐漸變大,主要放置的是企業產品、企業建築、企業人員、企業工程專案、和主題有關的修飾圖像、說明