任務(wù)6制作學(xué)院新聞塊

教案名稱任務(wù)6制作學(xué)院新聞塊計(jì)劃學(xué)時(shí)4學(xué)時(shí)知識(shí)目標(biāo)掌握元素的浮動(dòng)屬性的運(yùn)用，能為元素設(shè)置和清除浮動(dòng)掌握塊元素間的外邊距的計(jì)算方法學(xué)會(huì)新聞塊的制作方法能力目標(biāo)能利用元素的浮動(dòng)等屬性完成頁(yè)面布局素質(zhì)目標(biāo)養(yǎng)成不懼困難、積極進(jìn)取的勞動(dòng)者精神教學(xué)重點(diǎn)元素的浮動(dòng)教學(xué)難點(diǎn)元素浮動(dòng)的實(shí)際應(yīng)用教學(xué)模式任務(wù)驅(qū)動(dòng)教學(xué)法線上+線下混合教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素切入點(diǎn)第1學(xué)時(shí)(元素的浮動(dòng))課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（5分鐘）為什么要設(shè)置元素的浮動(dòng)屬性？怎樣清除浮動(dòng)？=2\*ROMANII.重難點(diǎn)內(nèi)容講授：一、元素的浮動(dòng)（5分鐘）選擇器{float:left|right|none;}實(shí)例演示：例6-1（10分鐘）

圖6-2沒(méi)有設(shè)置浮動(dòng)時(shí)的效果圖6-3設(shè)置浮動(dòng)時(shí)的效果學(xué)生同步練習(xí)，教師巡視、答疑三、練習(xí)（10分鐘）在網(wǎng)頁(yè)中創(chuàng)建兩個(gè)塊，在塊的下面放一段文字，設(shè)置兩個(gè)塊浮動(dòng)后，查看段落文字的顯示方式。四、清除元素的浮動(dòng)（10分鐘）第一種方法：語(yǔ)法格式：選擇器{clear:left|right|both;}舉例說(shuō)明第二種方法：overflow屬性例6-3樣式設(shè)置：學(xué)生同步練習(xí)，教師巡視、答疑=3\*ROMANIII.小結(jié)：（5分鐘）重點(diǎn)掌握元素浮動(dòng)屬性float與清除浮動(dòng)屬性clear和overflow，注意它們的應(yīng)用場(chǎng)合。課后作業(yè)：超星學(xué)習(xí)通平臺(tái)作業(yè)第2學(xué)時(shí)(塊元素間的外邊距、制作學(xué)院網(wǎng)站中的一行)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（5分鐘）塊元素間的垂直外邊距和水平外邊距分別如何計(jì)算？小組為單位討論，小組代表發(fā)表本組觀點(diǎn)。=2\*ROMANII.重難點(diǎn)內(nèi)容講授：一、塊元素間的垂直外邊距和水平外邊距（10分鐘）簡(jiǎn)要總結(jié)二、例6-6制作學(xué)院網(wǎng)站中的一行（25分鐘）結(jié)構(gòu)搭建：樣式設(shè)置：學(xué)生練習(xí)，教師巡視、答疑注意：三個(gè)子塊的類選擇器名稱為.rowL和.rowM，第二個(gè)子塊和第三個(gè)子塊的類選擇器名稱都是.rowM，這是因?yàn)檫@二個(gè)子塊的樣式是完全一樣的，所以應(yīng)用相同的類樣式。思考題：該行中三個(gè)塊能否用無(wú)序列表搭建結(jié)構(gòu)？=3\*ROMANIII.課堂小結(jié)：（5分鐘）掌握塊元素間的水平外邊距及垂直外邊距的計(jì)算方式及能靈活應(yīng)用。課后作業(yè)：超星學(xué)習(xí)通平臺(tái)作業(yè)第3、4學(xué)時(shí)(制作學(xué)院新聞塊)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)微課視頻——簡(jiǎn)單新聞塊的制作并在電腦上實(shí)現(xiàn)。做課前測(cè)試題。=1\*ROMANI.提問(wèn)：（10分鐘）簡(jiǎn)單新聞塊制作時(shí)遇到了哪些問(wèn)題？如何解決的？=2\*ROMANII.重難點(diǎn)內(nèi)容講授：（70分鐘）【任務(wù)實(shí)現(xiàn)】制作學(xué)院新聞塊1.結(jié)構(gòu)分析2．搭建結(jié)構(gòu)<divclass="news"> <h2>學(xué)校要聞<spanclass="eng">|| CollegeNews</span></h2> <ulclass="content"> <li><span>2021-04-09</span><ahref="newsDetail.html"target="_blank">學(xué)校聯(lián)合發(fā)起成立軟件行業(yè)產(chǎn)教聯(lián)盟</a></li> <li><span>2021-04-08</span><ahref="#"target="_blank">學(xué)?！八膫€(gè)推進(jìn)”掀起黨史學(xué)習(xí)教育熱潮</a></li> <li><span>2021-04-02</span><ahref="#"target="_blank">學(xué)校召開(kāi)2021年度體育工作會(huì)議</a></li> <li><span>2021-04-01</span><ahref="#"target="_blank">我校舉行“銘記歷史緬懷先烈”清明節(jié)祭掃先烈活動(dòng)</a></li> <li><span>2021-03-30</span><ahref="#"target="_blank">中國(guó)工業(yè)互聯(lián)網(wǎng)研究院來(lái)我校交流訪問(wèn)</a></li> <li><span>2021-03-30</span><ahref="#"target="_blank">學(xué)校召開(kāi)黨務(wù)干部業(yè)務(wù)培訓(xùn)會(huì)議</a></li> </ul></div>3.樣式設(shè)置 <styletype="text/css">body,h2,ul,li{/*設(shè)置元素的初始屬性*/ margin:0; padding:0; list-style:none;/*去掉列表項(xiàng)默認(rèn)的項(xiàng)目符號(hào)*/}body{ background:url("images/bodybg.jpg"); /*背景圖像默認(rèn)是平鋪的*/ font-family:"微軟雅黑"; font-size:14px; color:#000;}a{/*設(shè)置超鏈接文字的樣式*/ color:#333; text-decoration:none; /*去掉超鏈接文字的下畫線*/}.news{/*設(shè)置塊的樣式*/ background:#FFF; border:1pxsolid#ccc; width:458px; height:228px; padding:5px10px; margin:20pxauto;}.newsh2{/*設(shè)置標(biāo)題的樣式*/ background:url(images/head1.png)no-repeatleftcenter; width:448px; height:37px; line-height:37px; color:#FFF; font-size:16px; padding-left:10px; border-bottom:1pxsolid#ccc;/*添加標(biāo)題下方的水平線*/}.newsh2.eng{/*設(shè)置標(biāo)題中英文文字的樣式*/ color:#737373; padding-left:50px; font-weight:normal;}.news.content{ width:458px; height:190px;/*高度是塊的高度減去標(biāo)題的高度，即228px-38px*/}.news.contentli{ width:443px;/*寬度是458px-15px*/ height:31px; line-height:31px; background:url("images/icon.png")no-repeatleftcenter;/*設(shè)置列表項(xiàng)的項(xiàng)目符號(hào)*/ padding-left:15px;}.news.contentlia:hover{ color:#1c4ba9;/*設(shè)置鼠標(biāo)指針懸停到超鏈接文字時(shí)的顏色*/}.news.contentlispan{/*設(shè)置列表項(xiàng)中日期的樣式*/ color:#737373; font-size:11px; float:right;/*使日期顯示在列表項(xiàng)的右邊*/}</style>注意：在上述樣式代碼中，塊的實(shí)際寬度為margin、padding、border和width的總和，因此在設(shè)置無(wú)序列表和列表項(xiàng)的寬度時(shí)要精確計(jì)算，不要超出其容器的寬度。=3\*ROMANIII.課堂小結(jié)：（10分鐘）本次課介紹了制作學(xué)院新聞塊的方法及實(shí)施步驟，同學(xué)