任務(wù)10 布局學(xué)院網(wǎng)站主頁

教案名稱任務(wù)十布局學(xué)院網(wǎng)站主頁計劃學(xué)時6學(xué)時知識目標(biāo)掌握新增的HTML5結(jié)構(gòu)元素掌握常用的HTML5+CSS3布局方式能力目標(biāo)能夠獨(dú)立進(jìn)行多列布局及通欄布局素質(zhì)目標(biāo)引導(dǎo)學(xué)生布局人生規(guī)劃，在課程學(xué)習(xí)中樹立職業(yè)和生活理想培養(yǎng)團(tuán)隊協(xié)作意識提高美的鑒賞能力教學(xué)重點(diǎn)單列布局、二列布局、三列布局、通欄布局教學(xué)難點(diǎn)HTML5+CSS3布局方式教學(xué)模式教學(xué)做一體化線上+線下混合教學(xué)教學(xué)活動及主要環(huán)節(jié)思政元素切入點(diǎn)第1、2學(xué)時（單列布局、二列布局）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.學(xué)生討論：（5分鐘）瀏覽網(wǎng)站時，對于內(nèi)容比較多的網(wǎng)站，使用什么布局方式比較合適？（學(xué)生回答，教師對問題進(jìn)行講解）對于內(nèi)容比較多的網(wǎng)站，有時需要采用三列布局。三列布局實際上是指將中間內(nèi)容分成左、中、右三部分。=2\*ROMANII.重難點(diǎn)內(nèi)容講授：（80分鐘）傳統(tǒng)網(wǎng)頁是采用表格進(jìn)行布局的，但這種方式已經(jīng)逐漸淡出設(shè)計舞臺，取而代之的是符合WEB標(biāo)準(zhǔn)的HTML5+CSS3布局方式。一、單列布局將頁面上的塊從上到下依次排列，即單列布局。從圖中可以看出，這個頁面從上到下分別為頭部、導(dǎo)航欄、焦點(diǎn)圖、主體內(nèi)容和頁面底部，每個塊單獨(dú)占一行，寬度相等，都為1000px。頁面的HTML代碼如下。創(chuàng)建外部樣式表文件style1.css，代碼如下。注意：通常給塊定義類選擇器名稱時，都會遵循一些常用的命名規(guī)范。案例中的命名便是按照規(guī)范命名的。說明：教師針對單列布局進(jìn)行講解，并使用代碼進(jìn)行實時演示。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。二、二列布局單列布局雖然統(tǒng)一、有序，但會讓人覺得呆板，所以在實際網(wǎng)頁制作中，會采用二列布局。二列布局實際上是將中間內(nèi)容分成左、右兩部分。從圖中可以看出，中間內(nèi)容塊被分成了左、右兩部分，布局時應(yīng)將左、右兩個塊放在中間的大塊中，然后對左、右兩個塊分別設(shè)置浮動。頁面的HTML結(jié)構(gòu)代碼如下。創(chuàng)建外部樣式表文件style2.css，代碼如下。注意：在上面的代碼中，為右邊的塊設(shè)置了右浮動，實際上也可以設(shè)置左浮動，但如果設(shè)置左浮動，就需要設(shè)置margin-left屬性，使其與左邊的塊間隔一定的距離，最終效果是一樣的。讀者可以自行嘗試。說明：教師針對單列布局進(jìn)行講解，并使用代碼進(jìn)行實時演示。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。=2\*ROMANII.課堂小結(jié)：（5分鐘）重點(diǎn)掌握網(wǎng)頁實際布局中的單列布局、二列布局。通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)課后作業(yè)2：使用學(xué)習(xí)通平臺的教學(xué)視頻自學(xué)任務(wù)10中的三列布局方式。第3、4學(xué)時（三列布局）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=2\*ROMANI.重難點(diǎn)內(nèi)容講授：（85分鐘）一、三列布局新建一個網(wǎng)頁文件，將頁面進(jìn)行三列布局，效果如圖所示。從圖中可以看出，中間內(nèi)容塊被分成了左、中、右三部分，布局時應(yīng)將左、中、右三個子塊放在中間的大塊中，然后對左、中、右三個子塊分別設(shè)置浮動。頁面的HTML結(jié)構(gòu)搭建代碼如下：創(chuàng)建外部樣式表文件style3.css，代碼如下：注意：因為很多瀏覽器在顯示未指定width屬性的浮動元素時會出現(xiàn)Bug。所以，一定要為浮動的元素指定width屬性。說明：教師針對單列布局進(jìn)行講解，并使用代碼進(jìn)行實時演示。學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。二、通欄布局現(xiàn)在很多流行的網(wǎng)站采用通欄布局，即網(wǎng)頁中的一些模塊，如頭部、導(dǎo)航和頁面底部等經(jīng)常需要通欄顯示。也就是說這些模塊無論頁面放大或縮小，這些通欄模塊的寬度始終保持與瀏覽器一樣的寬度。學(xué)院網(wǎng)站的布局就采用了該種布局，如圖所示。在圖中，導(dǎo)航欄和頁面底部為通欄顯示，它們與瀏覽器的寬度保持一致。通欄布局的關(guān)鍵在于在通欄模塊的寬度設(shè)置為100%，即與瀏覽器一樣寬。該布局頁面在第4課時中實現(xiàn)。=3\*ROMANII.課堂小結(jié)：（5分鐘）前面所講的單列布局、二列布局、三列布局以及通欄布局都是網(wǎng)頁中的基本布局，實際上，在設(shè)計網(wǎng)站時需要綜合運(yùn)用這幾種布局，實現(xiàn)各種各樣的網(wǎng)頁布局樣式。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)。課后作業(yè)2：使用學(xué)習(xí)通平臺的教學(xué)視頻自學(xué)任務(wù)10任務(wù)實現(xiàn)。第5、6學(xué)時（布局學(xué)院網(wǎng)站主頁）課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺相關(guān)學(xué)習(xí)視頻。做課前測試題。=1\*ROMANI.重難點(diǎn)內(nèi)容講授：（55分鐘）【任務(wù)實現(xiàn)】：布局學(xué)院網(wǎng)站主頁在項目chapter10中新建一個網(wǎng)頁文件，文件名：index.html，在文件中首先定義頁面布局的結(jié)構(gòu)，然后定義各個布局塊的樣式。分析第3課時中學(xué)院網(wǎng)站布局效果圖，該頁面采用的是通欄布局。下面，首先搭建該頁面的結(jié)構(gòu)。（學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點(diǎn)的理解。）上述代碼定義了網(wǎng)頁需要的布局塊，用<header>標(biāo)記放置頁面頭部內(nèi)容，用<nav>標(biāo)記構(gòu)建頁面導(dǎo)航，用<footer>標(biāo)記存放頁腳信息，其它塊使用<div>標(biāo)記。此時瀏覽網(wǎng)頁，效果如下圖所示。搭建頁面布局塊后，使用CSS外部樣式表設(shè)置頁面中各個塊的樣式，創(chuàng)建外部樣式表文件style.css。樣式表文件代碼如下：（學(xué)生一起操作，實現(xiàn)教學(xué)做一體化，加強(qiáng)學(xué)生對知識難點(diǎn)的理解。）此時瀏覽學(xué)院網(wǎng)站主頁布局如下，效果完成。說明：在操作演示時教師可適時停下來，讓學(xué)生自行嘗試。小組成員之間協(xié)作討論，教師巡視，對疑難問題進(jìn)行解答。=2\*ROMANII.課堂練習(xí)：模仿學(xué)院網(wǎng)站結(jié)構(gòu)，自擬題目搭建網(wǎng)頁布局結(jié)構(gòu)，頁面寬為1000px。（30分鐘）=3\*ROMANIII.課堂小結(jié)：（5分鐘）學(xué)院網(wǎng)站主頁采用通欄布局，目前采用這種網(wǎng)站布局的頁面有很多。重點(diǎn)理解其布局方法，是完成本任務(wù)的關(guān)鍵。課后作業(yè)1：超星學(xué)習(xí)通平臺作業(yè)。課后作業(yè)2：借助超星學(xué)習(xí)平臺的教學(xué)視頻進(jìn)行線下自學(xué)介紹HTML第5代版本的主要優(yōu)勢，有更直觀的結(jié)構(gòu)。引導(dǎo)學(xué)生面對日新月異的技術(shù)升級，要緊跟技術(shù)前沿，培養(yǎng)自學(xué)能力、創(chuàng)新能力。通過表格布局已過時，不再使用，引導(dǎo)學(xué)生與時俱進(jìn)，聚焦新技術(shù)發(fā)展。通過網(wǎng)頁布局引出每個人的人生同樣需要布局和規(guī)劃才能樹立更明確的職業(yè)和生活理想。分組討論可以培養(yǎng)同學(xué)們的團(tuán)隊協(xié)作意識，培養(yǎng)同學(xué)們良好的溝通能力為以后進(jìn)入工作崗位打下良好的基礎(chǔ)。通過編寫CSS代碼，讓學(xué)生了解布局過程代碼書寫要遵循規(guī)范，小錯誤可能會影響大局面，要有嚴(yán)謹(jǐn)細(xì)致的工匠精神。任務(wù)完成過程中，提高學(xué)生對美的鑒賞能力。在完善網(wǎng)頁布局的過程中注重學(xué)生職業(yè)道德素質(zhì)的培養(yǎng)，培育學(xué)生養(yǎng)成科學(xué)嚴(yán)謹(jǐn)?shù)墓そ尘?。鼓勵學(xué)生大膽創(chuàng)新，敢于突破，讓創(chuàng)新成為青春遠(yuǎn)航的“第一動力”。