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

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