網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例25：小米商城網(wǎng)站_第1頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例25：小米商城網(wǎng)站_第2頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例25：小米商城網(wǎng)站_第3頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例25：小米商城網(wǎng)站_第4頁
網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例25：小米商城網(wǎng)站_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

我們畢業(yè)啦其實是答辯的標題地方案例25小米商城網(wǎng)站案例描述制作小米商城網(wǎng)站，該網(wǎng)站由3個頁面構(gòu)成，分別為主頁、登錄頁和注冊頁，從主頁可以進入登錄頁和注冊頁，從登錄頁和注冊頁可以返回主頁。主頁有輪播圖效果和限時促銷效果。網(wǎng)站瀏覽效果如圖25-1~圖25-3所示。案例描述圖25-1小米商城網(wǎng)站主頁圖25-2小米商城網(wǎng)站登錄頁圖25-3小米商城網(wǎng)站注冊頁前期工作收集素材網(wǎng)站素材包括圖片素材和字體庫素材，本網(wǎng)站圖片素材大多來自網(wǎng)絡。主頁上的圖標（如購物車圖標、放大鏡圖標等）使用免費字體庫font-awesome-4.7.0中的圖標字體，該字體庫從網(wǎng)上下載即可。前期工作新建項目在HBuilderX中新建項目project25，設(shè)置項目存放位置為E:/網(wǎng)頁設(shè)計/源代碼，選擇模板類型為“基本HTML項目”，單擊“創(chuàng)建”按鈕。右擊project25項目中的img目錄，選擇“重命名”命令，將目錄名改為“images”，將網(wǎng)站的素材圖片復制、粘貼到該目錄中。將字體庫font-awesome-4.7.0文件夾也復制、粘貼到該項目中。此時該項目目錄結(jié)構(gòu)如圖25-4所示。圖25-4“小米商城”網(wǎng)站項目目錄結(jié)構(gòu)前期工作創(chuàng)建樣式表文件右擊項目project25中的css目錄，選擇“新建”|“css文件”命令，在“新建css文件”對話框中輸入樣式表文件名稱style.css，單擊“創(chuàng)建”按鈕。然后在style.css中編寫通用樣式代碼，代碼如下。前期工作創(chuàng)建樣式表文件打開文件index.html，在<head>標記內(nèi)輸入如下代碼。將style.css文件鏈接到index.html頁面中。<link

rel="stylesheet"

type="text/css"

href="css/style.css"

/>制作網(wǎng)站主頁1.主頁結(jié)構(gòu)分析主頁由頭部、導航條、輪播圖、主體部分和版權(quán)信息等構(gòu)成，主體部分從上到下又細分為圖片展示、產(chǎn)品促銷、廣告圖片、手機、電視、視頻和售后服務部分，主頁結(jié)構(gòu)劃分如圖25-5所示。圖25-5主頁結(jié)構(gòu)劃分主頁布局代碼，略。制作網(wǎng)站主頁2.制作頭部觀察圖25-6不難看出，頭部分為左、右兩部分，對每部分可以使用無序列表搭建結(jié)構(gòu)。鼠標指針劃過“下載App”時，顯示二維碼，如圖25-7所示，對二維碼可以使用<img>標記定義，通過定義樣式使二維碼隱藏，鼠標指針劃過時再顯示。購物車左側(cè)的圖標使用字體庫中的圖標字體。圖25-6頭部（1）分析效果圖圖25-7頭部制作網(wǎng)站主頁2.制作頭部在index.html中添加頭部的結(jié)構(gòu)代碼。

代碼略。此時瀏覽網(wǎng)頁，效果如圖25-8所示。圖25-8頭部結(jié)構(gòu)（2）搭建頭部結(jié)構(gòu)制作網(wǎng)站主頁2.制作頭部切換到style.css文件，添加頭部內(nèi)容的樣式代碼。代碼略。此時瀏覽網(wǎng)頁，效果如圖25-6和圖25-7所示。（3）定義頭部CSS樣式制作網(wǎng)站主頁3.制作導航條部分觀察導航條部分，該部分內(nèi)容分為3部分：左側(cè)是Logo、中間是導航條目、右側(cè)是搜索框。對Logo使用<img>標記定義，并給圖像添加超鏈接，鏈接到主頁。對導航條目使用無序列表來構(gòu)建。對右側(cè)的搜索框使用<input>標記定義，按鈕使用<button>標記定義，按鈕上面的放大鏡圖像使用字體庫中的圖標字體。（1）分析效果圖圖25-9導航條部分效果制作網(wǎng)站主頁3.制作導航條部分在index.html中頭部的結(jié)構(gòu)代碼下面輸入結(jié)構(gòu)代碼。代碼略。此時瀏覽網(wǎng)頁，效果如圖25-10所示。（2）搭建導航條結(jié)構(gòu)圖25-10導航條結(jié)構(gòu)制作網(wǎng)站主頁切換到style.css文件，添加導航條部分的樣式代碼。代碼略。此時瀏覽網(wǎng)頁，效果如圖25-9所示。（3）定義導航條CSS樣式3.制作導航條部分制作網(wǎng)站主頁4.制作輪播圖部分輪播圖部分效果如圖25-11所示。單擊左、右兩側(cè)的箭頭或單擊下面的圓點，可以顯示不同的圖片；不單擊時，默認每隔2s顯示下一張圖片。圖25-11輪播圖部分效果制作網(wǎng)站主頁4.制作輪播圖部分將所有內(nèi)容放入一個大盒子，將兩側(cè)的箭頭分別放入兩個小盒子，對下面的圓點和圖像都使用無序列表標記<ul>定義。對盒子中的內(nèi)容采用絕對定位，定位到大盒子的指定位置。（1）分析效果圖在index.html中導航條部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建輪播圖結(jié)構(gòu)制作網(wǎng)站主頁在<head>標記中將輪播圖部分的樣式表文件css.css和腳本文件index.js鏈接到index.html頁面中，代碼如下。（3）鏈接文件<link

href="css/css.css"

rel="stylesheet"

type="text/css"

/><script

type="text/javascript"

src="js/index.js"></script>css.css文件和index.js文件的代碼參考本書配套資源文件，此處代碼略。4.制作輪播圖部分制作網(wǎng)站主頁5.制作圖片展示部分從該部分開始是主體部分的內(nèi)容。圖片展示部分效果如圖25-12所示。圖25-12圖片展示部分效果制作網(wǎng)站主頁圖片展示部分分為4個塊，需要定義一個大盒子，在大盒子中再定義4個子盒子。對第一個塊使用無序列表搭建結(jié)構(gòu)，第一個塊中的小圖標使用字體庫中的相應圖標字體。（1）分析效果圖在index.html中輪播圖部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建圖片展示部分結(jié)構(gòu)5.制作圖片展示部分制作網(wǎng)站主頁此時瀏覽網(wǎng)頁，效果如圖25-13所示。5.制作圖片展示部分圖25-13圖片展示部分結(jié)構(gòu)制作網(wǎng)站主頁切換到style.css文件，添加主體部分和圖片展示部分的樣式代碼。代碼略。（3）定義圖片展示部分CSS樣式此時瀏覽網(wǎng)頁，效果如圖25-12所示。5.制作圖片展示部分制作網(wǎng)站主頁6.制作產(chǎn)品促銷部分產(chǎn)品促銷部分效果如圖25-14所示。該部分有限時促銷效果和促銷產(chǎn)品的展示。圖25-14產(chǎn)品促銷部分效果制作網(wǎng)站主頁對該部分需要定義一個盒子，在盒子中用無序列表構(gòu)建每個塊的內(nèi)容。每個塊中相同的樣式可以同時定義，不同的樣式分別定義。（1）分析效果圖在index.html中圖片展示部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建產(chǎn)品促銷部分結(jié)構(gòu)6.制作產(chǎn)品促銷部分制作網(wǎng)站主頁切換到style.css文件，添加產(chǎn)品促銷部分的樣式代碼。代碼略。（3）定義產(chǎn)品促銷部分CSS樣式此時瀏覽網(wǎng)頁，效果如圖25-14所示。6.制作產(chǎn)品促銷部分制作網(wǎng)站主頁7.制作廣告圖片和手機部分廣告圖片和手機部分效果如圖25-15所示。圖25-15廣告圖片和手機部分效果制作網(wǎng)站主頁廣告圖片和手機部分由兩個塊構(gòu)成，上面的塊存放廣告圖片；下面的塊又分為左右兩部分，左邊的部分存放一張圖片，右邊的部分存放8張手機圖片，8張手機圖片采用無序列表搭建結(jié)構(gòu)。（1）分析效果圖在index.html中產(chǎn)品促銷部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建廣告圖片和手機部分結(jié)構(gòu)7.制作廣告圖片和手機部分制作網(wǎng)站主頁切換到style.css文件，添加廣告圖片和手機部分的樣式代碼。代碼略。（3）定義廣告圖片和手機部分CSS樣式此時瀏覽網(wǎng)頁，效果如圖25-15所示。7.制作廣告圖片和手機部分制作網(wǎng)站主頁8.制作廣告圖片和電視部分廣告圖片和電視部分的制作步驟與廣告圖片和手機部分的類似，效果如圖25-16所示。具體步驟可掃碼觀看，此處略。圖25-16廣告圖片和電視部分效果制作網(wǎng)站主頁9.制作視頻部分視頻部分其實也是4張圖片的展示，單擊圖片時播放視頻。但這里對圖片創(chuàng)建了空鏈接，不能播放視頻。視頻部分效果如圖25-17所示。圖25-17視頻部分效果制作網(wǎng)站主頁視頻部分需要定義一個盒子，盒子中的4個塊使用無序列表搭建結(jié)構(gòu)，每個列表項中包含圖片和文字。（1）分析效果圖在index.html中廣告圖片和電視部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建視頻部分結(jié)構(gòu)9.制作視頻部分制作網(wǎng)站主頁切換到style.css文件，添加視頻部分的樣式代碼。代碼略。（3）定義視頻部分CSS樣式此時瀏覽網(wǎng)頁，效果如圖25-17所示。9.制作視頻部分制作網(wǎng)站主頁10.制作售后服務部分售后服務部分是主體部分中最下面的部分，其效果如圖25-18所示。圖25-18售后服務部分效果制作網(wǎng)站主頁售后服務部分需要定義一個盒子，盒子中的內(nèi)容使用無序列表搭建結(jié)構(gòu)，每個列表項中包含圖標和文字。（1）分析效果圖在index.html中視頻部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建售后服務部分結(jié)構(gòu)10.制作售后服務部分制作網(wǎng)站主頁切換到style.css文件，添加售后服務部分的樣式代碼。代碼略。（3）定義售后服務部分CSS樣式此時瀏覽網(wǎng)頁，效果如圖25-18所示。10.制作售后服務部分制作網(wǎng)站主頁11.制作版權(quán)信息部分版權(quán)信息部分是主頁最下面的部分，其效果如圖25-19所示。圖25-19版權(quán)信息部分效果制作網(wǎng)站主頁（1）分析效果圖在index.html中主體部分的結(jié)構(gòu)代碼下面輸入代碼。代碼略。（2）搭建版權(quán)信息部分結(jié)構(gòu)11.制作版權(quán)信息部分版權(quán)信息部分為通欄顯示，也就是與瀏覽器一樣寬，內(nèi)容占的寬度是1200px。因此需要一個大盒子，里面再嵌套小盒子。小盒子中包含上、下兩個塊，上面的塊又分為左、右兩個塊，左面的塊存放文字內(nèi)容，右面的塊存放小米Logo圖像；下面的塊存放一行文字。制作網(wǎng)站主頁切換到style.css文件，添加版權(quán)信息部分的樣式代碼。代碼略。（3）定義版權(quán)信息部分CSS樣式至此，主頁制作完成。瀏覽網(wǎng)頁，效果如圖25-1所示。11.制作版權(quán)信息部分制作網(wǎng)站登錄頁制作網(wǎng)站登錄頁，設(shè)置文件名為login.html，瀏覽效果如圖25-2所示。具體步驟和代碼請掃碼觀看，此處略。圖25-2小米商城網(wǎng)站登錄頁制作網(wǎng)站注冊頁制作網(wǎng)站注冊頁，設(shè)置文件名為register.html，瀏覽效果如圖25-3所示。具體步驟和代碼請掃碼觀看，此處

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論