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

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