中職網(wǎng)頁設(shè)計與制作(中國工信出版集團)教案：數(shù)字未來-Flex布局

中等專業(yè)學(xué)校2022-2023-2教案編號：備課組別計算機課程名稱網(wǎng)頁設(shè)計與制作所在年級二年級主備教師授課教師授課系部授課班級授課日期課題任務(wù)10數(shù)字未來——Flex布局教學(xué)目標1.鞏固CSS+Div布局和美化網(wǎng)頁的方法和技巧2.學(xué)會使用Flex布局和美化網(wǎng)頁的方法和技巧重點學(xué)會使用Flex布局和美化網(wǎng)頁的方法和技巧難點學(xué)會使用Flex布局和美化網(wǎng)頁的方法和技巧教法講練法、演示法、任務(wù)驅(qū)動法教學(xué)設(shè)備多媒體機房教學(xué)環(huán)節(jié)教學(xué)活動內(nèi)容及組織過程個案補充教學(xué)內(nèi)容教學(xué)內(nèi)容教學(xué)內(nèi)容【復(fù)習(xí)導(dǎo)入】引導(dǎo)學(xué)生回顧上節(jié)課學(xué)習(xí)內(nèi)容【教學(xué)過程及內(nèi)容】任務(wù)描述：通過布局“數(shù)字未來”網(wǎng)頁，學(xué)會使用Flex布局頁面的方法和技巧。任務(wù)解析：在本任務(wù)中，需要完成以下操作：鞏固CSS+Div布局和美化網(wǎng)頁的方法和技巧。學(xué)會使用Flex布局和美化網(wǎng)頁的方法和技巧。任務(wù)操作：將素材中的renwu10文件夾復(fù)制到D盤根目錄。運行DreamweaverCC，新建站點“數(shù)字未來”，站點文件夾為D:\renwu10，在站點根目錄下新建網(wǎng)頁文件index.html；打開“頁面屬性”對話框，在“外觀（css）”分類選項卡中設(shè)置背景顏色為#000，文本顏色為#FFF。創(chuàng)建嵌套Div。打開index.html，“插入→Div”,在DOM面板中輸入Div的名字“#wrapper”；光標定位在“#wrapper”層中，再次選擇“插入→Div”，分別插入嵌套Div,“#banner”和“#main”；同樣的方法創(chuàng)建“#content”、“#img-list”嵌套Div，DOM面板如下所示。在CSS設(shè)計器中分別定義wrapper層的樣式,設(shè)置寬為865px,左、右邊界為auto在CSS設(shè)計器中定義banner層的樣式,并插入“images”文件夾中的圖像“1.jpg”banner的屬性設(shè)置設(shè)置好banner層后的“拆分”視圖在content層中輸入“數(shù)字未來.doc”中的文本并編輯CSS在img-list層插入圖像及Flex布局樣式。光標定位在img-list層中，插入“images”文件夾中的“2.jpg”、“3.jpg”、“4.png”和“5.jpg”四幅圖像，并設(shè)置四個圖像間隔平均分配的flex布局樣式具體操作：(7)保存文件，按F12預(yù)覽網(wǎng)頁效果。上機實訓(xùn)用Flex布局制作導(dǎo)航欄，效果如下所示。關(guān)鍵代碼如下：li{flex:1; text-align:center; line-height:100px; list-style:none; background:green; border-right:1pxsolidgrey;}【課堂小結(jié)】教師引導(dǎo)學(xué)生小結(jié)本課所學(xué)內(nèi)容?！咀?/p>