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