《3.3Div+CSS3布局教學設計》課題名稱Div+CSS3布局教學設計課時4課時教學目標知識目標掌握DIV的使用、盒子模型的概念及使用、布局的常用屬性能力目標通過學習DIV+CSS3來布局網(wǎng)頁，讓學生學習正確、合理運用技術，了解技術服務于內容的原則。情感目標培養(yǎng)學生獨立思考、動手實踐的能力；培養(yǎng)學生自主探究性、協(xié)作性學習能力；激發(fā)學生學習網(wǎng)頁制作的興趣。教學重難點重點DIV盒子模型的概念及布局方式難點布局浮動、定位的使用教學方法教法任務驅動法學法自主學習、小組合作學習環(huán)節(jié)教師活動學生活動課前準備自主學習課前下發(fā)閱讀材料學生利用課余時間自主學習DIV+CSS3布局設計意圖通過自主學習為課堂教學打下基礎，培養(yǎng)學生自主學習能力。課堂實施課堂引入展示一張未使用DIV+CSS3的網(wǎng)頁和張使用DIV+CSS3的網(wǎng)頁進行對比。展示頁面作品，通過對比來展示DIV+CSS3布局的重要性。

設計意圖講述DIV+CSS3布局的優(yōu)點，以激發(fā)學生學習興趣。DIV布局1、DIV概念Div元素是用來為HTML文檔內大塊的內容提供結構和背景的元素?？诎说钠鹗紭撕炁c結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由<div>標簽的屬性來控制，或者是通過使用CSS樣式格式化這個塊進行控制。Div是一一個容器，在HTML頁面的每個標簽對象幾乎都可以稱得上是一個容器，如使用段落<p>標簽對象。2、Div的格式<divid="id名稱"〉內容</div><divclass="class名稱"〉內容</div>3、塊元素與行內元素（1）塊元素每個塊級元素默認占一行高度，行內添加一個塊級元素后般無法添加其他元素（使用CSS樣式進行定位和浮動設置除外）。兩個塊級元素連續(xù)編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素。在HTML代碼中，常見的塊元素包括<div><p>、〈table等。在CSS樣式中，可以通過display屬性控制元素顯示，即元素的顯示方式。display屬性的默認值為block,即元素的默認方式是以塊元素方式顯示。（2）行內元素學生學習，通過案例鞏固DIV標簽的應用，掌握塊元素和行內元素的概念。

行內元素也叫內聯(lián)元素、內嵌元素等，行內元素般都是基于語義級的基本元素，只能容納文本或其他內聯(lián)元素：常見內聯(lián)元素有＜a＞標簽。當display屬性值被設置為inline時，可以把元素設置為行內元素。在常用的一些＜span＞＜a＞、＜img＞＜b＞、＜font＞和＜input＞元素中等都是默認行內元素。設計意圖了解并掌握DIV標簽的應用、塊元素和行內元素的概念。CSS盒子模型1、CSS盒子模型概念盒子模型是由margin（邊界）、border（邊框）、padding（填充）和content（內容）幾個部分組成的，止匕外，在盒模型中，還具有高度和寬度兩個輔助屬性。"Ti串附憶好1哦.] 口鼠也咱坪 ■一於忖tmargin屬性margin屬性稱為邊界或稱為外邊距，用來設置內容與內容之間的距離。border屬性border屬性稱為邊框，內容邊框線，可以設置邊框的粗細、顏色和樣式等。padding屬性padding屬性稱為填充或稱為內邊距，內容與邊框之間的距離。content屬性學生學習，通過案例掌握盒子模型的概念與特性、以及盒子模型中margin、padding和border的用法。稱為內容，是盒子模具中必需的一部分，可以放置文字、圖像等內容。2、CSS3盒子模型的特性(1)邊框默認的樣式(border-style)可設置為不顯示(none)。(2)填充值(padding)可以為負。(3)邊果值(margin)可以為負，其顯示效果在各瀏覽器中可能不同。(4)內聯(lián)元素，例如，<a>,定義上下邊界不會影響到行高。(5)對于塊級元素，未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮。例如有上下兩個元素，上面元素的下邊界為10x，下面元素的上邊界為5px，則實際兩個元素的間距為10px(兩個邊界值中較大的值)，這就是盒模型的垂直空白邊疊加的問題。(6)浮動元素(無論是左浮動還是右浮動)邊界不壓縮。如果浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內容所能承受的最小寬度。(7)如果盒中沒有內容，則即使定義了寬度和高度都為100%，實際上只占0%，因此不會被顯示，這一點在使用Div+CSS布局的時候需要特別注意。3、margin屬性margin屬性用于設置頁面中元素和元素之間的距離，即定元素周圍的空間范圍，是頁面排版中一個比較重要的概念。

4、border屬性border屬性是內邊距和外邊距的分界線，可以分離不同的HTML兀素，border的外邊是元素的最外圍。在網(wǎng)頁設計中，如果計算元素的寬和高，則需要把border屬性值計算在內。5、Padding屬性Padding包括4個子屬性，分別用于控制兀素4周的填充，分別是padding-top（上填充）、Padding-right（右填充）、padding-bottom（下填充）和paddingTeft（左填充）。設計意圖了解并掌握盒子模型的概念與特性、以及盒子模型中margin、padding和border的用法。CSS布局常用屬性CSS布局完全不同于傳統(tǒng)表格布局，它將頁面首先在整體上進行<div>標簽的分塊，將頁面分為若干個盒子，然后對各個盒子進行CSS定位，最后再在各個塊中添加相應的內容。CSS布局頁面最重要的手段就是利用浮動屬性和定位屬性設置元素位置。1、浮動屬性float屬性可以控制盒子左右浮動，直到邊界碰到父元素或另一個元素。學生學習，通過案例掌握浮動和定位在布局中的使用。. M性曲 啊 . 3 —，元甘不存動 竺 元京向父元聚的左制等動 iLihr 元才問父元希的右倒再動

2、定位屬性（1）position屬性?性曾 說明static 則RL靜恚定位曰【M 相用定曲?陰時干氨文檔林由位置這行定他般式皿 電給定他?曲時于其上f已及定位由父元霜進行定他lixrd 國定定位，羽才干涸近哥百口進行定位（2）邊偏移屬性通偏移屬性 說用W 項指福卷量n定義元青相片其父元素上曲初距苒tottra 底可偏拈量.定宜元重相對其父元點下速翎西距離uh 定義元青相時其幻肆左邊鼐曲距離zieht 右讖褸定義元（相方其義元域邊軸1距離設計意圖了解并掌握浮動和定位在布局中的使用綜合實訓美化旅游新聞頁面根據(jù)所學DIV+CSS3知識，完成對旅游新聞網(wǎng)頁的CSS美化。言 學生在老師引導下，逐步完必囁沆l 也信碌注:罌:弗露mr與描;產(chǎn)期瘀溫一成旅游新聞頁面的美化■NAV.MMUMKTl^rLCIflfelTBJ 41#W43L1*.=■■.TL3$0-'(MJKSj_IdlRlKlD?“n融*>>.■TMk*$n.?后，■■■>?->*?>ipj^l-F>-<j±Har.!TU?f.ia*?k■4立?.碑K-UU."，-"?MAS.-Birri>1-.?x?Er￡? .d.id A-3*1-^,AM.TRRRIPri.W..aPdriR<-in.■MlkrpHT胃《11**11”(：，力"ftlffl-a .Th￡GflIHijrr.-mM*-Vt-aJiJVUB!qiKA--MWEEr”YL..PFJ,3*.J??n“Wig?，■?*&nyME^.,白，InnMi"曇士心?I?KuimVPmiUHiW:- At*--BVT-IUiJU^fc-M3*!ilXIJUl-dMNHBqii