本書以培養(yǎng) Web 前端開發(fā)相關崗位人才為出發(fā)點,以培養(yǎng)學生利用 Web 前端技術進行電商網(wǎng)站設計的 能力為主線,將 Web 前端基礎的典型工作任務提煉為三大學習模塊,分別是電商網(wǎng)站結構搭建與基礎區(qū)塊 制作、電商網(wǎng)站二級頁面內(nèi)容板塊制作和電商網(wǎng)站首頁制作。學生可以由淺入深地認識 Web 前端頁面開發(fā) 的相關知識。本書引入相應的案例和實訓任務,以理論與實際操作一體化的教學方式,讓學生掌握電商網(wǎng) 站結構搭建、電商網(wǎng)站二級頁面內(nèi)容板塊制作及電商網(wǎng)站首頁制作等核心技能。 本書以電商平臺開發(fā)為例,介紹了Web 前端技術在電商網(wǎng)站搭建中的應用方法及標準,詳細闡述了 CSS 的基本內(nèi)容及相關應用,介紹了超鏈接、盒子模型、偽類與偽元素、表格、表單等前端開發(fā)技術;還 介紹了 CSS 應用于 HTML 文件的方式,在此基礎上通過能力提升、任務訓練的方式,指導學生對電商平臺 項目中的各板塊內(nèi)容進行開發(fā),使學生深入理解 Web 前端技術在電商網(wǎng)站搭建中的應用,提高學生的實踐 操作水平。 本書可以作為高等職業(yè)院校計算機類、電子信息類及電子商務類等專業(yè)的 Web 前端技術、互聯(lián)網(wǎng)與電商 平臺開發(fā)技術等課程的教材,也可以作為非計算機專業(yè)學生和工程技術人員在進行 Web 前端開發(fā)時的教材及 參考書。
吳俊峰,男,浙江經(jīng)貿(mào)職業(yè)技術學院,副教授,具有多年一線教學經(jīng)驗,和大賽經(jīng)驗。編寫多部職業(yè)教育電商類相關教材,市場反饋良好。編寫論文多篇,核心期刊發(fā)表2篇。
模塊一 電商網(wǎng)站結構搭建與基礎區(qū)塊制作
項目一 站點結構搭建 ..........................................................................................................2
任務一 站點搭建前準備 .........................................................................................................3
任務二 站點主體結構搭建 ...................................................................................................18
任務單 1-1 .................................................................................................................................26
任務單 1-2 .................................................................................................................................27
項目二 幫助中心板塊制作 ................................................................................................29
任務一 幫助中心板塊結構搭建 ...........................................................................................30
任務二 幫助中心板塊鏈接設置 ...........................................................................................44
任務單 2-1 .................................................................................................................................50
任務單 2-2 .................................................................................................................................51
項目三 網(wǎng)站 LOGO 區(qū)塊制作 ...........................................................................................53
任務一 網(wǎng)站 LOGO 區(qū)塊的效果圖分析 ..............................................................................54
任務二 網(wǎng)站 LOGO 區(qū)塊的結構搭建與樣式設置 ..............................................................57
任務單 3-1 .................................................................................................................................74
任務單 3-2 .................................................................................................................................75
模塊二 電商網(wǎng)站二級頁面內(nèi)容板塊制作
項目四 商品詳情頁面制作 ................................................................................................78
任務一 商品詳情頁面加入購物車板塊的結構搭建與樣式設置 .......................................79
任務二 商品詳情頁面中商品圖片展示與關聯(lián)推薦板塊的實現(xiàn) .....................................106
任務單 4-1 ...............................................................................................................................127
任務單 4-2 ...............................................................................................................................129
項目五 購物車板塊制作 ..................................................................................................131
任務一 購物車板塊的框架搭建 .........................................................................................132
任務二 購物車板塊的樣式設置 .........................................................................................141
任務單 5-1 ...............................................................................................................................149
任務單 5-2 ...............................................................................................................................151
項目六 電商網(wǎng)站的表單制作 ...........................................................................................152
任務一 電商網(wǎng)站注冊表單的結構搭建 .............................................................................153
任務二 電商網(wǎng)站注冊表單的樣式設置 .............................................................................164
任務單 6-1 ...............................................................................................................................172
任務單 6-2 ...............................................................................................................................174
模塊三 電商網(wǎng)站首頁制作
項目七 首頁頁頭、頁尾及導航制作 ................................................................................178
任務一 首頁頁頭、頁尾制作 .............................................................................................179
任務二 網(wǎng)站主導航與分類導航制作 .................................................................................200
任務單 7-1 ...............................................................................................................................212
任務單 7-2 ...............................................................................................................................214
項目八 首頁內(nèi)容區(qū)制作 ..................................................................................................215
任務一 首頁內(nèi)容區(qū)的結構搭建與樣式設置 .....................................................................216
任務二 首頁內(nèi)容區(qū)的動態(tài)效果實現(xiàn) .................................................................................241
任務單 8-1 ...............................................................................................................................249
任務單 8-2 ...............................................................................................................................251
附錄 A HTML 常用標簽及說明 ........................................................................................253
附錄 B CSS 參考手冊 .....................................................................................................257
參考文獻 ...........................................................................................................................265