本書主要介紹了電子商務網頁設計與制作的相關知識與內容,具體通過個人網店和中小企業網站頁面的設計與制作流程介紹了網頁框架與布局、網頁動態圖像制作、網頁表單制作、網頁交互特效制作以及站點創建與管理等知識。本書適合作為高職高專電子商務、計算機應用、信息管理等專業的相關課程用書,也可作為網頁設計愛好者的參考書。
商瑋,女,副教授,浙江經貿職業技術學院信息技術系主任。承擔中華全國供銷合作總社課題"基于工學結合的高職電子商務專業建設研究"以及學院教改重點項目"電子商務專業學生`創業`實訓基地建設方案研究"。《電子商務概論》、《電子商務網站建設》兩門浙江省省級精品課程主持人。在中國財政經濟出版社、清華大學出版社出版主編教材數部。
目 錄
項目一 賞析電子商務網站頁面
任務一 賞析中小企業形象網站
任務二 賞析行業類綜合網站
任務三 電子商務商城網站賞析
項目二 運用HTML制作簡單頁面
任務一 通過HTML制作網站構成分析頁面
任務二 通過HTML制作網站布局分析頁面
任務三 通過HTML5制作簡易游客訂單表
項目三 搭建電子商務網店頁面
任務一 處理修飾商品圖片
任務二 制作網店的店標
任務三 制作網店的側邊分類列表區
任務四 制作網店的促銷區域
項目四 創建電子商務網店中的動態圖像
任務一 創建網店推廣動態圖像
任務二 創建促銷區域動畫
任務三 創建網店店標動畫
項目五 創建與管理網站站點
任務一 網站欄目及文件目錄設計
任務二 站點的創建與管理
項目六 設計與制作中小企業網站頁面
任務一 首頁效果圖切片處理及導出
任務二 Flash banner條的設計與制作
任務三 內利公司形象網站首頁的設計與制作
項目七 DIV+CSS布局設置
任務一 個人網站首頁的制作
任務二 個人網站子頁面的制作
項目八 設計與制作網頁的交互特效
任務一 廣告圖片自動輪換的制作
任務二 浮動廣告的制作
任務三 懸浮客服的制作
項目九 設計與制作表單頁面
任務一 動態網站的創建
任務二 用戶注冊頁面的制作
任務三 用戶登錄頁面的制作
參考文獻
項目一 賞析電子商務網站頁面
通過賞析相同類型的電子商務網站頁面,有助于迅速提高網頁設計水平,也能激 發學習興趣。電子商務網站有多種類型,在本項目中分別以常見的中小企業形象網站、行 業類綜合網站、綜合商城為例進行分析,試圖從這些分屬于不同類型的網站中找出一些共 性。通過對電子商務網站頁面的分析,可以形象地理解網頁的版面布局、色彩搭配、 網頁元素、導航設計等。
能力目標
學完本項目后,應當能夠通過賞析電子商務網站掌握分析網站的基本能力,應 能夠:
(1)分析網站的配色方案。
(2)分析網站的版式結構。
(3)編寫簡易網站賞析報告。
(4)模仿同類網站進行規劃設計。
知識目標
(1)網頁基礎知識。
(2)網頁的基本構成。
(3)網站的構成和風格設置。
(4)網頁布局的常用結構。
(5)網站的規劃原理。
任務一 賞析中小企業形象網站
任務引導
本任務的目標是通過瀏覽"名城房產"、"恒生電子"等中小企業的網站,來分析其頁 面布局、網站欄目構成、色彩搭配等,以便為同類型企業規劃設計網站。
任務實施
1.分析"名城房產"網站
"名城房產"是浙江省嘉凱城集團下的房地產開發企業。
網站主頁采用了"同字形"的頁面布局設計,頁面頂部為企業logo和導航條,下 面為宣傳公司形象的動畫banner。整體顏色風格為"土豪金"色調,也是現階段品質住宅 經常使用的干掛石材外立面的顏色,以這類顏色為基調,搭配類似香檳的等色調在大面積 白色的襯托下能表現出大氣、自然干凈、上檔次的品牌形象。
導航條類目主要由指示首頁的"首頁"、介紹企業的"走進名城",展示新聞的"新聞 中心",展示產品的"產品中心",體現公司價值觀的"名城文化",介紹人力資源的"招 賢納士"組成。
banner中顯示的動畫主要由體現公司形象的產品樓盤實景、售樓中心實景和公司文化 的宣傳口號"永遠熱愛生活"構成。
頁面主體部分分為左、中、右三個部分,分別為具體產品的"樓盤展示"、"新聞中 心"和體現公司文化理念的"名城刊物"三個欄目,也表現出了該企業形象展示網站所要 表現的核心內容:產品、資訊、文化價值。
頁面底部為企業網站常見的"友情鏈接"、"網站地圖"、"法律申明"和"聯系我 們"。
以"名城文化"下面的"名城理念"為例介紹二級頁面,如圖1—2所示。二級頁 面布局延續首頁的大致布局,只是在主體部分不再區分三部分,而詳細的描述則采用了 "名城理念"的具體內容,具有典型內容頁面的特征。在頂部依舊為企業的logo、導航條 和類似的banner,底部基本和主頁一致。整體顏色風格和首頁風格統一。
在內容頁面中由于主要是文字內容,故強調文字的排版和標題內容的顏色,以進一步 延續網站整體風格。