《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第21課 網(wǎng)頁設(shè)計(jì)綜合案例

211第課211第課網(wǎng)頁設(shè)計(jì)綜合案例的基基本本PAGE6211321211321網(wǎng)頁設(shè)計(jì)綜合案例第課PAGE521212網(wǎng)頁設(shè)計(jì)綜合案例第21212網(wǎng)頁設(shè)計(jì)綜合案例第課PAGE1

課題網(wǎng)頁設(shè)計(jì)綜合案例課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解創(chuàng)建網(wǎng)頁之前需要的準(zhǔn)備工作（2）掌握企業(yè)宣傳網(wǎng)站首頁和網(wǎng)站登錄頁的制作方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生一絲不茍，嚴(yán)謹(jǐn)、認(rèn)真的工作態(tài)度（2）在學(xué)習(xí)中拓展自己的視野，開闊自己的眼界教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：創(chuàng)建網(wǎng)頁之前需要的準(zhǔn)備工作、網(wǎng)站首頁和網(wǎng)站登錄頁的制作方法教學(xué)難點(diǎn)：企業(yè)宣傳網(wǎng)站首頁和網(wǎng)站登錄頁的制作教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：知識(shí)講解（25min）第2節(jié)課：導(dǎo)入新知（4min）知識(shí)講解（37min）

課堂小結(jié)（2min）

作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】提出問題，引出本節(jié)課內(nèi)容那么在對(duì)網(wǎng)頁的操作中，如何對(duì)需求進(jìn)行分析，對(duì)網(wǎng)站功能進(jìn)行概述呢？【學(xué)生】聆聽、思考通過問答的方式，讓學(xué)生主動(dòng)思考，如何完成網(wǎng)頁設(shè)計(jì)的準(zhǔn)備工作，引起學(xué)生的學(xué)習(xí)興趣知識(shí)講解

（25min）【教師】講解創(chuàng)建網(wǎng)頁前的準(zhǔn)備工作1．需求分析在實(shí)際的網(wǎng)站建設(shè)中，一般是先由客戶提出需求，設(shè)計(jì)人員根據(jù)這些需求設(shè)計(jì)網(wǎng)頁效果圖，并不斷與客戶溝通修改細(xì)節(jié)，最后由開發(fā)人員根據(jù)最終效果圖編寫網(wǎng)頁代碼。本項(xiàng)目制作的“金企鵝比特幣交易網(wǎng)”是一個(gè)虛擬貨幣交易網(wǎng)站，其中包括網(wǎng)站首頁、交易中心頁、財(cái)務(wù)中心頁、新聞中心頁、個(gè)人中心頁、幫助中心頁與登錄（注冊(cè)）頁。用戶沒有登錄網(wǎng)站時(shí)為游客身份，能夠正常訪問網(wǎng)站首頁、新聞中心頁、幫助中心頁與登錄（注冊(cè)）頁，訪問其他頁面會(huì)彈出登錄提醒；用戶登錄網(wǎng)站后為會(huì)員身份，能夠正常訪問所有頁面并使用其中的各項(xiàng)功能。2．網(wǎng)站功能概覽（1）游客身份。游客打開網(wǎng)站首頁后，可在其中瀏覽網(wǎng)頁內(nèi)容并使用首頁提供的查閱實(shí)時(shí)交易行情功能；單擊導(dǎo)航條中的“新聞中心”按鈕，可打開新聞中心頁查看虛擬貨幣交易的相關(guān)新聞；單擊導(dǎo)航條中的“幫助中心”按鈕，可打開幫助中心頁查看網(wǎng)站的幫助信息或向網(wǎng)站反饋問題；單擊頁面右上角的“登錄”或“注冊(cè)”按鈕，可打開登錄頁使用登錄或注冊(cè)功能。（2）會(huì)員身份。游客使用登錄功能登錄網(wǎng)站后轉(zhuǎn)換為會(huì)員身份，除上述功能外，單擊導(dǎo)航條中的“交易中心”按鈕，可打開交易中心頁使用交易功能；單擊導(dǎo)航條中的“財(cái)務(wù)中心”按鈕，可打開財(cái)務(wù)中心頁使用財(cái)務(wù)管理功能；單擊導(dǎo)航條中的“個(gè)人中心”按鈕，可打開個(gè)人中心頁對(duì)賬號(hào)信息進(jìn)行管理。網(wǎng)頁各項(xiàng)功能的具體實(shí)現(xiàn)除用到HTML和CSS外，還要用到PHP、ASP等后端開發(fā)技術(shù)，本項(xiàng)目只介紹使用HTML5和CSS3制作網(wǎng)站首頁與登錄頁的過程?！緦W(xué)生】聆聽、記錄、思考通過講解知識(shí)點(diǎn)，讓學(xué)生進(jìn)一步了解網(wǎng)頁設(shè)計(jì)的準(zhǔn)備工作，為以后的學(xué)習(xí)打下基礎(chǔ)課堂練習(xí)

（15min）【教師】布置課堂練習(xí)創(chuàng)建站點(diǎn)并構(gòu)建網(wǎng)站目錄結(jié)構(gòu)【教師】演示重點(diǎn)操作流程（1）打開DW，選擇“站點(diǎn)”→“新建站點(diǎn)”菜單，打開“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，在“站點(diǎn)名稱”文本框中輸入“bitcoin”，單擊“本地站點(diǎn)文件夾”文本框右側(cè)的按鈕，打開“選擇根文件夾”對(duì)話框，在其中選擇創(chuàng)建好的“bitcoin”文件夾，單擊“選擇文件夾”按鈕回到“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，然后單擊“保存”按鈕，創(chuàng)建站點(diǎn)（2）繼續(xù)在站點(diǎn)下創(chuàng)建一個(gè)名為“css”的文件夾，并在其中創(chuàng)建一個(gè)名為“base.css”的文檔（3）打開本書配套素材“項(xiàng)目11”文件夾，將其中的“img”文件夾復(fù)制并粘貼至站點(diǎn)中，此時(shí)在“文件”面板中能夠看到“bitcoin”站點(diǎn)的目錄結(jié)構(gòu)【學(xué)生】完成課堂練習(xí)【教師】點(diǎn)名學(xué)生，講解課堂練習(xí)【學(xué)生】講解課堂練習(xí)通過課堂練習(xí)，鞏固理解本節(jié)課內(nèi)容，加深學(xué)生對(duì)文件定位的理解交流討論

（4min）【教師】安排組間討論，設(shè)置討論話題安排小組之間兩兩討論，分析制作網(wǎng)頁為何需要這些準(zhǔn)備工作以及這些準(zhǔn)備工作的具體做法【學(xué)生】完成小組討論，記錄討論內(nèi)容讓學(xué)生有自我反省的意識(shí)，并且及時(shí)回顧學(xué)習(xí)的內(nèi)容第二節(jié)課導(dǎo)入新知

（4min）【教師】復(fù)習(xí)上一節(jié)課內(nèi)容，引出本節(jié)課知識(shí)點(diǎn)前面主要介紹了網(wǎng)頁設(shè)計(jì)之前的準(zhǔn)備工作，包括需求分析、網(wǎng)站功能概述瀏覽以及創(chuàng)建站點(diǎn)并構(gòu)建網(wǎng)站目錄結(jié)構(gòu)。下面將會(huì)介紹本節(jié)課的內(nèi)容，制作網(wǎng)站首頁和制作網(wǎng)站登錄頁【學(xué)生】聆聽、思考、討論通過對(duì)上一節(jié)課內(nèi)容的復(fù)習(xí)，讓學(xué)生了解本節(jié)課內(nèi)容知識(shí)講解

（37min）【教師】講解制作網(wǎng)站首頁1．效果圖分析根據(jù)“金企鵝比特幣交易網(wǎng)”首頁效果圖。效果圖能夠看出，該頁面共包含8個(gè)部分，分別為頁眉、廣告位、風(fēng)險(xiǎn)提醒模塊、行情模塊、宣傳模塊、新聞模塊、聯(lián)系模塊與頁腳。頁眉與頁腳分別放置在<header>與<footer>標(biāo)簽中，廣告位放置在<div>標(biāo)簽中，其余模塊放置在<section>標(biāo)簽中。（1）頁眉。頁眉中含有網(wǎng)站Logo、導(dǎo)航條、登錄與注冊(cè)按鈕。（2）廣告位。在企業(yè)網(wǎng)站中，頁眉的下方一般會(huì)有一個(gè)廣告區(qū)域，其中用一個(gè)或多個(gè)圖像展示網(wǎng)站的重要內(nèi)容或核心功能等，讓用戶對(duì)網(wǎng)站的用途一目了然。（3）風(fēng)險(xiǎn)提醒模塊。因本項(xiàng)目案例的網(wǎng)站主題為虛擬貨幣交易，所以需要給用戶一個(gè)關(guān)于交易的風(fēng)險(xiǎn)提醒，避免用戶盲目消費(fèi)。（4）行情模塊。行情模塊能夠讓用戶了解比特幣交易的實(shí)時(shí)行情，需要配合JavaScript腳本及后端開發(fā)技術(shù)完成，此處使用圖像文件代替。（5）宣傳模塊。宣傳模塊主要說明當(dāng)前網(wǎng)站的特點(diǎn)。（6）新聞模塊。新聞模塊提供有關(guān)虛擬貨幣的相關(guān)資訊，豐富首頁內(nèi)容。（7）聯(lián)系模塊。聯(lián)系模塊提供當(dāng)前網(wǎng)站運(yùn)營(yíng)團(tuán)隊(duì)的聯(lián)系方式，如QQ、微信等。（8）頁腳。頁腳中包括部分?jǐn)U展功能、聯(lián)系地址等。2．設(shè)置網(wǎng)頁頭部信息并構(gòu)建頁面整體結(jié)構(gòu)3．制作頁眉4．制作廣告位5．制作風(fēng)險(xiǎn)提醒模塊6．制作行情模塊7．制作宣傳模塊8．制作新聞模塊9．制作聯(lián)系模塊10．制作頁腳【學(xué)生】聆聽、思考、理解【教師】演示、運(yùn)行參考代碼（詳見教材）【學(xué)生】編寫參考代碼，運(yùn)行程序【教師】講解制作網(wǎng)站登錄頁1．效果圖分析此處的登錄頁包含4部分，分別為網(wǎng)站Logo圖像、宣傳語模塊、登錄表單模塊與頁腳。網(wǎng)站Logo圖像放在<a>標(biāo)簽中，宣傳語模塊與登錄表單模塊分別放置在同一個(gè)<section>標(biāo)簽中的兩個(gè)<div>標(biāo)簽內(nèi)，頁腳放置在<footer>標(biāo)簽中，這4部分一同放置在<main>標(biāo)簽中。（1）網(wǎng)站Logo圖像。使用圖像標(biāo)簽將網(wǎng)站Logo顯示在頁面左上角。（2）宣傳語模塊。使用文本標(biāo)簽制作網(wǎng)站宣傳語。（3）登錄表單模塊。在表單中切換登錄與注冊(cè)功能需要用到JavaScript腳本，此處只做出登錄功能的表單控件。（4）頁腳。該頁面的頁腳為首頁頁腳的一部分。

2．設(shè)置網(wǎng)頁頭部信息并構(gòu)建頁面整體結(jié)構(gòu)3．制作網(wǎng)站Logo圖像4．制作宣傳語模塊5．制作登錄表單模塊6．制作頁腳【學(xué)生】聆聽、思考、理解【教師】演示、運(yùn)行參考代碼（詳見教材）【學(xué)生】編寫參考代碼，運(yùn)行程序【教師】巡視課堂，查看學(xué)生理解情況通過講解知識(shí)點(diǎn)，讓學(xué)生進(jìn)一步掌握網(wǎng)頁設(shè)計(jì)的流程課堂小結(jié)

（2min）【教師】簡(jiǎn)要總結(jié)本章的知識(shí)要點(diǎn)本節(jié)課學(xué)習(xí)了創(chuàng)建網(wǎng)頁之前需要的準(zhǔn)備工作，以及企業(yè)宣傳網(wǎng)站首頁和網(wǎng)站登錄頁的