響應(yīng)式Web開發(fā)項目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第10章 綜合項目-在線鮮花商城

第10章綜合項目——在線鮮花商城《響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap）（第3版）》學(xué)習(xí)目標(biāo)/Target熟悉項目分析，能夠歸納頁面內(nèi)容熟悉項目初始化，能夠歸納項目初始化的具體實現(xiàn)步驟掌握快捷導(dǎo)航模塊的制作方法，能夠完成快捷導(dǎo)航模塊的開發(fā)

掌握導(dǎo)航欄模塊的制作方法，能夠完成導(dǎo)航欄模塊的開發(fā)學(xué)習(xí)目標(biāo)/Target掌握輪播圖模塊的制作方法，能夠完成輪播圖模塊的開發(fā)掌握服務(wù)模塊的制作方法，能夠完成服務(wù)模塊的開發(fā)掌握鮮花推薦模塊的制作方法，能夠完成鮮花推薦模塊的開發(fā)

掌握送長輩鮮花模塊的制作方法，能夠完成送長輩鮮花模塊的開發(fā)學(xué)習(xí)目標(biāo)/Target掌握曬單評價模塊的制作方法，能夠完成曬單評價模塊的開發(fā)掌握服務(wù)條款模塊的制作方法，能夠完成服務(wù)條款模塊的開發(fā)掌握版權(quán)聲明模塊的制作方法，能夠完成版權(quán)聲明模塊的開發(fā)章節(jié)概述/Summary通過前面章節(jié)的學(xué)習(xí)，相信大家已經(jīng)掌握了移動Web開發(fā)和Bootstrap的核心知識。本章將以項目實戰(zhàn)的方式帶領(lǐng)大家進一步應(yīng)用所學(xué)內(nèi)容，完成在線鮮花商城的響應(yīng)式頁面制作。目錄/Contents10-110-2項目開發(fā)準(zhǔn)備快捷導(dǎo)航模塊10-3導(dǎo)航欄模塊10-4輪播圖模塊10-5服務(wù)模塊目錄/Contents10-610-7鮮花推薦模塊送長輩鮮花模塊10-8曬單評價模塊10-9服務(wù)條款模塊10-10版權(quán)聲明模塊項目開發(fā)準(zhǔn)備任務(wù)10-1任務(wù)10-1項目開發(fā)準(zhǔn)備

先定一個小目標(biāo)！熟悉項目開發(fā)準(zhǔn)備，能夠歸納頁面的內(nèi)容和初始化的步驟項目分析隨著社會和科技的不斷進步，人們的生活方式也在不斷變化。如今，網(wǎng)絡(luò)購物已經(jīng)成為主流的消費方式。網(wǎng)絡(luò)購物對于消費者來說有許多優(yōu)勢，例如能夠節(jié)約購物時間、降低購物成本，能夠買到豐富多樣的商品。對于商家而言，通過網(wǎng)絡(luò)銷售商品可以不受場地限制、降低經(jīng)營成本。項目分析在線鮮花商城項目旨在為商家提供一個在線平臺來展示和銷售商品，同時為消費者提供詳細(xì)的商品信息，從而創(chuàng)造便捷的購物體驗。本項目的開發(fā)環(huán)境具體如下。①操作系統(tǒng)：Windows10或更高版本。②瀏覽器：Chrome瀏覽器。③編輯器：VSCode編輯器。項目分析本項目首頁主要包括以下模塊?？旖輰?dǎo)航模塊導(dǎo)航欄模塊輪播圖模塊服務(wù)模塊鮮花推薦模塊送長輩鮮花模塊曬單評價模塊服務(wù)條款模塊版權(quán)聲明模塊項目分析首頁支持不同類型設(shè)備的自適應(yīng)。首頁在特大型及以上設(shè)備（視口寬度≥1200px）中的頁面效果如下圖所示。項目分析項目分析首頁包含9個模塊，下面分別對各個模塊進行簡要介紹。①快捷導(dǎo)航模塊：主要用于展示登錄、注冊、積分兌換、幫助中心和購物車等導(dǎo)航鏈接，方便用戶快速使用常用功能。②導(dǎo)航欄模塊：用于展示Logo、首頁、全部鮮花、禮品等導(dǎo)航鏈接。③輪播圖模塊：用于展示一系列圖像或視頻等內(nèi)容。④服務(wù)模塊：用于展示企業(yè)的可信度和信譽等。⑤鮮花推薦模塊：用于展示不同場合下的鮮花推薦。⑥送長輩鮮花模塊：用于展示適合送給長輩的各種鮮花。⑦曬單評價模塊：用于展示客戶的實際購買情況和使用感受，通過曬單照片和文字評價，讓其他用戶了解商品的真實情況和質(zhì)量。⑧服務(wù)條款模塊：用于展示售后服務(wù)內(nèi)容和流程等，提供在線客服和咨詢支持等。⑨版權(quán)聲明模塊：用于展示版權(quán)信息，以及項目的所有權(quán)歸屬，還提供了友情鏈接、聯(lián)系方式等導(dǎo)航鏈接。項目初始化下面演示如何進行項目初始化，具體實現(xiàn)步驟如下。創(chuàng)建D:\code\chapter10目錄，從本章配套源代碼中，將項目模板project-template文件夾復(fù)制到該目錄下，并將其重命名為project。使用VSCode編輯器打開D:\code\chapter10\project目錄。項目初始化項目目錄結(jié)構(gòu)中各個目錄和文件的具體說明如下。bootstrap-icons：圖標(biāo)文件目錄，用于存放圖標(biāo)文件。css：CSS目錄，該目錄下有3個文件，分別如下。bootstrap.min.css是Bootstrap的核心CSS文件。index.css是自定義的樣式文件。media.css是自定義的媒體查詢文件。images：圖像文件目錄，用于存放圖像文件。js：JavaScript文件目錄，該目錄下存放了bootstrap.min.js文件，該文件是Bootstrap的核心JavaScript文件。index.html：項目的首頁文件?？旖輰?dǎo)航模塊任務(wù)10-2任務(wù)10-2快捷導(dǎo)航模塊

先定一個小目標(biāo)！掌握快捷導(dǎo)航模塊的制作方法，能夠完成快捷導(dǎo)航模塊的開發(fā)任務(wù)需求在線鮮花商城的快捷導(dǎo)航模塊用于提供用戶友好的導(dǎo)航體驗，減少用戶的操作步驟，幫助用戶快速訪問所需的內(nèi)容或使用所需的功能，提高用戶的使用效率和滿意度。任務(wù)需求快捷導(dǎo)航模塊分為左右兩部分，具體要求如下。①左側(cè)部分包括登錄、注冊、積分兌換、幫助中心和購物車等導(dǎo)航鏈接。②右側(cè)部分展示商城的聯(lián)系方式，包括客服電話、在線聯(lián)系方式等，以便用戶快速獲得幫助或解決問題。③在中型及以上設(shè)備（視口寬度≥768px）中，同時展示左右兩部分。④在中型以下設(shè)備（視口寬度<768px）中，出于頁面空間的考慮，僅展示左側(cè)部分。任務(wù)需求快捷導(dǎo)航模塊在中型及以上設(shè)備中的頁面效果如下圖所示?？旖輰?dǎo)航模塊在中型以下設(shè)備中的頁面效果如下圖所示。導(dǎo)航欄模塊任務(wù)10-3任務(wù)10-3導(dǎo)航欄模塊

先定一個小目標(biāo)！掌握導(dǎo)航欄模塊的制作方法，能夠完成導(dǎo)航欄模塊的開發(fā)任務(wù)需求在線鮮花商城的導(dǎo)航欄模塊用于提供網(wǎng)站的導(dǎo)航功能，幫助用戶快速訪問所需頁面或使用所需功能，提高用戶的使用效率和滿意度。任務(wù)需求導(dǎo)航欄模塊分為左右兩部分，具體要求如下。①左側(cè)部分展示網(wǎng)站的Logo。②右側(cè)部分展示導(dǎo)航菜單，包括首頁、全部鮮花、生日鮮花、禮品、精致花籃和鮮花資訊等導(dǎo)航鏈接。③在中型及以上設(shè)備（視口寬度≥768px）中，右側(cè)部分呈水平排列。④在中型以下設(shè)備（視口寬度<768px）中會出現(xiàn)一個折疊按鈕，單擊折疊按鈕可以控制導(dǎo)航菜單的展開或折疊行為。任務(wù)需求導(dǎo)航欄模塊在中型及以上設(shè)備中的頁面效果如下圖所示。導(dǎo)航欄模塊在中型以下設(shè)備的頁面效果如下圖所示。輪播圖模塊任務(wù)10-4任務(wù)10-4輪播圖模塊

先定一個小目標(biāo)！掌握輪播圖模塊的制作方法，能夠完成輪播圖模塊的開發(fā)任務(wù)需求在線鮮花商城的輪播圖模塊用于在有限的空間內(nèi)展示多張圖像，以便高效地為用戶傳遞商品或活動等信息。這種設(shè)計方式不僅可以有效吸引用戶的注意力，還能激發(fā)他們的探索欲望，引導(dǎo)他們進行更深入的互動，從而提升網(wǎng)站的整體效果和用戶參與度。任務(wù)需求輪播圖模塊的具體要求如下。①當(dāng)鼠標(biāo)指針移入圖像時，圖像停止自動切換。②當(dāng)單擊圖像上的左側(cè)按鈕時，可以切換到上一張圖像。③當(dāng)單擊圖像上的右側(cè)按鈕時，可以切換到下一張圖像。④當(dāng)單擊圖像上的指示器時，可以切換到對應(yīng)的圖像。⑤當(dāng)鼠標(biāo)指針移出圖像時，圖像開始自動切換。任務(wù)需求輪播圖模塊的頁面效果如下圖所示。服務(wù)模塊任務(wù)10-5任務(wù)10-5服務(wù)模塊

先定一個小目標(biāo)！掌握服務(wù)模塊的制作方法，能夠完成服務(wù)模塊的開發(fā)任務(wù)需求在線鮮花商城的服務(wù)模塊用于展示企業(yè)的可信度和信譽等，并傳遞在線鮮花商城專業(yè)服務(wù)的承諾。該模塊還通過退賠承諾和用戶評價增強在線鮮花商城吸引力。任務(wù)需求服務(wù)模塊的具體要求如下。①服務(wù)模塊包括優(yōu)秀企業(yè)、20年品牌、全國送花、退賠承諾和最近99+條評價，每項內(nèi)容前都有一個合適的圖標(biāo)。②在小型及以上設(shè)備（視口寬度≥576px）中，服務(wù)模塊將展示所有內(nèi)容。③在超小型設(shè)備（視口寬度<576px）中，最近99+條評價將被隱藏，以便提供更好的用戶UI和瀏覽體驗。任務(wù)需求服務(wù)模塊在小型及以上設(shè)備中的頁面效果如下圖所示。服務(wù)模塊在超小型設(shè)備中的頁面效果如下圖所示。鮮花推薦模塊任務(wù)10-6任務(wù)10-6鮮花推薦模塊

先定一個小目標(biāo)！掌握鮮花推薦模塊的制作方法，能夠完成鮮花推薦模塊的開發(fā)任務(wù)需求在線鮮花商城的鮮花推薦模塊用于根據(jù)用戶在各種場合的需求，如生日、店鋪開業(yè)、朋友聚會等，提供相應(yīng)的推薦鮮花。此外，鮮花推薦模塊還提供了更多的購物選項和信息，用戶可以根據(jù)自己的需求選擇并購買合適的鮮花，以更好地滿足特定場合的需求。任務(wù)需求鮮花推薦模塊分為上下兩部分，具體要求如下。①上半部分展示送戀人、送長輩、送朋友、生日祝福、創(chuàng)意DIY、浪漫求婚和開業(yè)大吉等場合的鮮花推薦。②下半部分展示暢銷排行榜、特惠專區(qū)、新品上市和精致之選等各類熱門鮮花推薦。③在中型及以上設(shè)備（視口寬度≥768px）中，上半部分和下半部分應(yīng)一行顯示4列內(nèi)容。④在中型以下設(shè)備（視口寬度<768px）中，上半部分和下半部分應(yīng)一行顯示2列內(nèi)容。任務(wù)需求鮮花推薦模塊在中型及以上設(shè)備中的頁面效果如下圖所示。任務(wù)需求鮮花推薦模塊在中型以下設(shè)備中的頁面效果如下圖所示。送長輩鮮花模塊任務(wù)10-7任務(wù)10-7送長輩鮮花模塊

先定一個小目標(biāo)！掌握送長輩鮮花模塊的制作方法，能夠完成送長輩鮮花模塊的開發(fā)任務(wù)需求送長輩鮮花模塊用于展示適合送給長輩的各種鮮花，提供多個不同類型和價格的花束供用戶選擇。此外，送長輩鮮花模塊還提供了每種花束的圖像、標(biāo)題、價格和已售件數(shù)等。任務(wù)需求送長輩鮮花模塊的具體要求如下。①在中型以下設(shè)備（視口寬度<768px）中，應(yīng)一行顯示2列內(nèi)容。②在中型設(shè)備（768px≤視口寬度<992px）中，應(yīng)一行顯示4列內(nèi)容。③在大型及以上設(shè)備（視口寬度≥992px）中，應(yīng)一行顯示5列內(nèi)容。④當(dāng)鼠標(biāo)指針懸停在列表項上時，圖像會平滑放大到初始大小的1.1倍，且標(biāo)題、價格和已售件數(shù)的文字顏色變?yōu)槌燃t色。⑤鼠標(biāo)指針懸停效果的觸發(fā)和恢復(fù)都應(yīng)該有平滑的動畫過渡，以確保視覺效果的連貫性和流暢性。任務(wù)需求送長輩鮮花模塊在大型及以上設(shè)備中的頁面效果如下圖所示。任務(wù)需求送長輩鮮花模塊在中型設(shè)備中的頁面效果如下圖所示。任務(wù)需求送長輩鮮花模塊在中型以下設(shè)備中的頁面效果如下圖所示。曬單評價模塊任務(wù)10-8任務(wù)10-8曬單評價模塊

先定一個小目標(biāo)！掌握曬單評價模塊的制作方法，能夠完成曬單評價模塊的開發(fā)任務(wù)需求曬單評價模塊用于展示用戶分享的購買商品后的實際情況和評價，為其他用戶提供參考和決策幫助，同時也可以宣傳在線鮮花商城。任務(wù)需求曬單評價模塊的具體要求如下。①在超小型設(shè)備（視口寬度<576px）中，應(yīng)一行顯示1列內(nèi)容。②在小型設(shè)備和中型設(shè)備（576px≤視口寬度<992px）中，應(yīng)一行顯示2列內(nèi)容。③在大型及以上設(shè)備（視口寬度≥992px）中，應(yīng)一行顯示4列內(nèi)容。④當(dāng)鼠標(biāo)指針懸停在列表項上時，評價內(nèi)容的文字顏色變?yōu)槌燃t色。任務(wù)需求曬單評價模塊在大型及以上設(shè)備中的頁面效果如下圖所示。任務(wù)需求曬單評價模塊在小型設(shè)備和中型設(shè)備中的頁面效果如下圖所示。任務(wù)需求曬單評價模塊在超小型設(shè)備中的頁面效果如下圖所示。服務(wù)條款模塊任務(wù)10-9任務(wù)10-9服務(wù)條款模塊

先定一個小目標(biāo)！掌握服務(wù)條款模塊的制作方法，能夠完成服務(wù)條款模塊的開發(fā)任務(wù)需求服務(wù)條款模塊用于展示售后服務(wù)內(nèi)容和流程等，明確用戶和平臺的權(quán)利和義務(wù)，闡述雙方在使用平臺服務(wù)時需要遵守的規(guī)定和條款。一方面，用戶可以了解平臺的售后服務(wù)和保障，清楚地知道自己在購買商品或使用服務(wù)后可以獲得什么樣的售后支持，從而更加深入了解平臺；另一方面，用戶可以清楚地知道在售后服務(wù)中雙方的權(quán)利和義務(wù)，避免因為信息不對稱而產(chǎn)生糾紛。任務(wù)需求服務(wù)條款模塊的具體要求如下。①服務(wù)條款模塊包括客戶服務(wù)、熱門資訊、同城鮮花專區(qū)和聯(lián)系我們，并在每項內(nèi)容下展示不同的列表項，以提供相關(guān)的詳細(xì)信息。②在中型及以上設(shè)備（視口寬度≥768px）中，應(yīng)一行顯示4列內(nèi)容。③在中型以下設(shè)備（視口寬度<768px）中，應(yīng)一行顯示2列內(nèi)容。④當(dāng)鼠標(biāo)指針懸停在客戶