《HTML5 CSS3項目開發案例教程》（袁明蘭）770-5教案 第15課 盒子模型的使用_第1頁
《HTML5 CSS3項目開發案例教程》（袁明蘭）770-5教案 第15課 盒子模型的使用_第2頁
《HTML5 CSS3項目開發案例教程》（袁明蘭）770-5教案 第15課 盒子模型的使用_第3頁
《HTML5 CSS3項目開發案例教程》（袁明蘭）770-5教案 第15課 盒子模型的使用_第4頁
《HTML5 CSS3項目開發案例教程》（袁明蘭）770-5教案 第15課 盒子模型的使用_第5頁
已閱讀5頁，還剩8頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1531第1531第課盒子模型的使用的基基本本PAGE121532115321盒子模型的使用第課PAGE13153212盒子模型的使用153212盒子模型的使用第課PAGE1

課題盒子模型的使用課時2課時（90min）教學目標知識技能目標：（1）了解盒子模型的基本結構（2）掌握使用CSS3設置盒子模型的邊框、邊距、背景等屬性的方法（3）學習不同類型元素的盒子模型思政育人目標：通過對盒子模型的使用，培養學生良好的學習態度，以及細心、謹慎的處事方法，加強學生的邏輯思維能力教學重難點教學重點：了解盒子模型的基本結構教學難點：使用CSS3語言設置盒子模型的邊框、邊距、背景等屬性教學方法講授法、啟發法、問答法、演示法、討論法、練習法教學用具電腦、投影儀、多媒體課件、教材、手機、平板教學設計第1節課：知識講解（24min）第2節課：問題導入（4min）

知識講解（23min）知識競賽（14min）課堂小結（2min）

作業布置（2min）教學過程主要教學內容及步驟設計意圖第一節課考勤

（2min）【教師】清點上課人數，記錄好考勤【學生】班干部報請假人員及原因培養學生的組織紀律性，掌握學生的出勤情況導入新知

（4min）【教師】概述盒子模型的定義，引出新的知識點盒子模型是構建網頁布局的基礎，所有HTML元素可以看作盒子，在CSS中，"boxmodel"這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素【學生】聆聽、思考、理解通過對知識點的概述，讓學生主動思考如何HTML5中部署盒子模型，激發學生的求知欲預備知識

（24min）【教師】講述盒子模型的基本結構HTML中的大部分元素（特別是塊級元素）都可以看作是一個盒子，網頁元素的定位實際就是這些大大小小的盒子在頁面中的定位。一個標準的W3C盒子模型有4個組成部分，分別為內容（content）、內邊距（padding）、邊框（border）與外邊距（margin），盒子模型的基本結構如圖8-1所示。圖8-1盒子模型的基本結構以生活中的盒子為例，內容是盒子中放置的物品，內邊距是防止物品磕碰所填充的泡沫、氣泡膜等輔料，邊框是盒子本身，外邊距是盒子與盒子之間的空隙。【教師】演示【例8-1】操作流程，實現圖8-2的效果在瀏覽器中查看盒子模型。（1）創建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，然后保存文檔。<style> body{background-color:#ddedff;}/*設置頁面的背景顏色*/ div{width:200px;height:150px;padding:20px;margin:20px; border:solid50px#5f6e8f;background-color:#aac4ff;}/*設置div元素寬度、高度、內外邊距、邊框與背景顏色*/</style>……<body> <div></div> <div></div></body>（2）在火狐瀏覽器中打開該文檔，按“F12”鍵打開“開發者工具”窗格，在“查看器”選項卡中能夠看到網頁源代碼，單擊第一個div元素的代碼行，“布局”選項卡中的“盒模型”區域將顯示該div元素的盒子模型及其各屬性值，如圖8-2所示。圖8-2在瀏覽器中查看盒子模型【學生】聆聽、思考、理解【教師】講述盒子模型的邊框與邊距盒子模型的邊框與邊距1．盒子模型的邊框盒子模型的邊框用border屬性設置，它具有子屬性border-style、border-color與border-width，分別用于設置邊框樣式、邊框顏色與邊框寬度，同時還可以使用border-radius屬性設置圓角，相關內容可查看本書3.2.1節。除上述屬性之外，還可以使用border-image屬性為對象設置邊框圖像，它具有以下幾個子屬性。（1）border-image-source屬性，用于設置邊框圖像的地址，屬性值使用URL。（2）border-image-slice屬性，用于設置邊框圖像的分割方式，屬性值為數值（省略單位“px”）或百分比，可根據需要設置1～4個屬性值，用法與margin屬性相同。設置4個屬性值時分別表示上、右、下、左邊框圖像的偏移量，根據設置的偏移量可將邊框圖像分割成一個九宮格。（3）border-image-width屬性，用于設置邊框圖像的顯示區域，屬性值為數值與單位，與border-image-slice屬性值用法相同，當設置4個屬性值時，分別表示設置上、右、下、左邊框圖像的寬度。當同方向的border-image-width屬性值大于或小于border-image-slice屬性值時，分割后的各區域將縮小或拉伸至border-image-width屬性值的大小。（4）border-image-repeat屬性，用于設置B、D、F和H區域的重復方式，屬性值stretch是默認值，表示將它們橫向或豎向拉伸以適應內容塊的寬度或高度；repeat表示將它們按原大小平鋪，不處理斷層現象；round表示在平鋪的基礎上，將它們進行小幅度的拉伸以盡量鋪滿邊框范圍，使邊框圖像更加平滑貼合。【教師】演示【例8-2】操作流程，實現圖8-4的效果為標題與段落元素設置不同的邊框圖像，頁面效果及邊框圖像原圖如圖8-4所示。邊框圖像平鋪并適當縮放，處理得更平滑邊框圖像按原大小平鋪邊框圖像根據內容拉伸邊框圖像平鋪并適當縮放，處理得更平滑邊框圖像按原大小平鋪邊框圖像根據內容拉伸圖8-4應用邊框圖像的頁面效果與邊框圖像的原圖創建HTML5文檔，在<body>標簽中輸入以下代碼，構建文本內容的結構。<divclass="d1"><h1>拉伸的圖像邊框</h1></div><pclass="d2">平鋪的圖像邊框</p><pclass="d3">鋪滿的圖像邊框</p>（2）在<head>標簽中添加<style>標簽，在其中輸入以下代碼，為h1元素與p元素設置不同的邊框圖像。.d1{width:250px;height:150px;text-align:center;padding:20px;margin:20px;border-image-width:30px;border-image-source:url(images/bor_img.png);border-image-slice:15%fill;background-color:#c5dfff;border-image-repeat:stretch;}/*設置拉伸的邊框圖像*/p{width:200px;padding:40px20px20px20px;margin:20px;font-size:1.5em;font-weight:bold;text-align:center;border-image-source:url(images/bor_an.png);border-image-slice:100fill;border-image-width:36px;}.d2{border-image-repeat:repeat;}.d3{border-image-repeat:round;}/*設置平鋪和鋪滿的邊框圖像*/2．盒子模型的邊距在CSS3中，使用padding與margin屬性設置盒子模型的內外邊距，它們的用法基本相同，具體可見本書3.2.1節。需要注意的是，margin屬性值可以為負數，使對象呈現出層疊效果，而padding屬性值不可為負數。【教師】演示【例8-3】操作流程，實現圖8-5的效果設置邊距屬性使對象居中對齊，頁面效果如圖8-5所示。圖8-5設置邊距屬性使對象居中對齊的頁面效果創建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，設置div與p元素的樣式，并使p元素在div元素內居中對齊。<style> .d1{width:600px;height:122px; background-color:#c0ddff;border:solid20px#86a3b0;}/*設置div元素的寬度、高度、背景顏色與邊框*/ p{width:300px;padding:20px; margin:0auto;border:solid20px#ffffff; background-color:#a5cad9;}/*設置段落元素的寬度、內外邊距、邊框與背景顏色*/</style>……<body> <divclass="d1"> <p>每個盒子都有4個組成部分，分別為內容、內邊距、邊框與外邊距。</p> </div></body>【學生】觀察參考代碼、思考【教師】講解參考代碼【學生】聆聽、思考、做好課堂筆記通過講解知識點，讓學生進一步了解HTML5中盒子模型的使用課堂練習

（15min）【教師】布置課堂練習內容設置三層盒子布局，讓最內的盒子居中，顏色為黑色，邊框距離為20px【學生】閱讀題目、思考【教師】進行問題分析創建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，設置div與p元素的樣式，并使p元素在div元素內居中對齊。<style> .d1{width:600px;height:122px; background-color:#c0ddff;border:solid20px#86a3b0;}/*設置div元素的寬度、高度、背景顏色與邊框*/ p{width:300px;padding:20px; margin:0auto;border:solid20px#ffffff; background-color:#a5cad9;}/*設置段落元素的寬度、內外邊距、邊框與背景顏色*/</style>……<body> <divclass="d1"> <p>每個盒子都有4個組成部分，分別為內容、內邊距、邊框與外邊距。</p> </div></body>【學生】完成課堂題目【教師】多媒體公布參考答案【學生】對比參考答案，修改內容【教師】講解課堂練習讓學生通過題目練習，加深對HTML5中盒子模型的熟練程度第二節課問題導入

（4min）【教師】提出問題，引導學生思考在使用HTML5中盒子模型的時候，請學生思考以下問題（１）盒子模型中的背景屬性和其他屬性如何設置（２）不同類型元素的盒子模型應該如何區分【學生】聆聽、思考、討論提出問題，讓學生思考，激發學生對HTML5中盒子模型的探索欲知識講解

（25min）【教師】講述盒子模型的背景屬性盒子模型的背景屬性盒子模型的背景屬性，能夠作用于邊框及其內部區域。使用background屬性及其子屬性能夠為盒子模型設置背景圖像、背景顏色等，相關內容可查看本書3.2.2節。本節繼續介紹其他的背景屬性。1．背景圖像的尺寸在之前的版本中，背景圖像的尺寸無法通過代碼控制，如需修改只能通過制圖軟件處理圖像，操作起來非常不便。在CSS3中，可以使用background-size屬性設置背景圖像的尺寸，具體格式為：background-size:length-wlength-h|cover|contain;其中，length-w和length-h為數值與單位，表示背景圖像的寬度與高度，如果只設置一個值，第二個值默認為auto；cover表示背景圖像等比縮放至完全覆蓋背景區域（沒有空白）；contain表示背景圖像等比縮放至盡量貼合背景區域（可能有空白）。【教師】演示【例8-4】的操作流程，實現圖8-6的效果設置元素的背景圖像尺寸，頁面效果如圖8-6所示。圖8-6設置背景圖像尺寸的頁面效果創建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，為div元素設置不同的背景圖像尺寸。<style> div{width:500px;height:250px;margin:5px; background:url(images/bg_size.png)no-repeat; border:solid3pxblack;float:left;}/*設置div元素的寬度、高度、外邊距、背景圖像與邊框，并向左浮動*/ .d1{background-size:cover;} .d2{background-size:contain;}/*設置后兩個div元素的背景圖像尺寸*/</style>……<body> <div></div> <divclass="d1"></div> <divclass="d2"></div></body>2．裁剪背景在CSS3中，使用background-clip屬性裁剪背景，具體格式為：background-clip:border-box|padding-box|content-box;其中，border-box是默認值，表示從邊框區域向外裁剪；padding-box表示從內邊距區域向外裁剪；content-box表示從內容區域向外裁剪。【教師】演示【例8-5】操作流程，實現圖8-7的效果設置元素裁剪背景的方式，頁面效果如圖8-7所示。圖8-7設置裁剪背景方式的頁面效果（1）創建HTML5文檔，在<body>標簽中輸入以下代碼，構建3個div元素的結構。<div></div><divclass="d1"></div><divclass="d2"></div>（2）在<head>標簽中添加<style>標簽，在其中輸入以下代碼，為div元素設置不同的裁剪背景方式。div{width:500px;height:200px;border:dotted5pxblack;padding:30px;margin:5px;float:left;background:#e5caffurl(images/bg_cl.png)no-repeat;background-size:contain;}/*設置div元素的寬度、高度、邊框與內外邊距，向左浮動，添加背景顏色與背景圖像并設置背景圖像的尺寸*/.d1{background-clip:padding-box;}.d2{background-clip:content-box;}/*設置后兩個div元素裁剪背景的方式*/【教師】講述盒子模型的其他屬性盒子模型的其他屬性1．溢出處理當塊級元素中的內容超出了盒子模型的邊框范圍，默認情況系，瀏覽器會將這些內容顯示在邊框外側，此時可以使用overflow屬性對這些溢出內容進行處理，具體格式為：overflow|overflow-x|overflow-y:visible|hidden|scroll|auto;其中，overflow-x與overflow-y分別用于設置水平方向與豎直方向的溢出處理方式。各屬性值的說明如下。（1）visible。默認值，不隱藏內容也不增加滾動條。（2）hidden。隱藏溢出部分。（3）scroll。增加滾動條。（4）auto。在內容溢出時增加滾動條。【教師】演示【例8-6】操作流程，實現圖8-8的效果設置元素的溢出處理方式，頁面效果如圖8-8所示。圖8-8設置溢出處理方式的頁面效果創建HTML5文檔，參照以下代碼段（部分省略）分別在<style>和<body>標簽中輸入代碼，為div元素設置不同的溢出處理方式。<style> div{margin:20px;width:180px;height:80px; border:solid2pxblack;float:left;}/*設置div元素的外邊距、寬度、高度與邊框，并向左浮動*/ .cont1{overflow:hidden;} .cont2{overflow:scroll;}/*設置后兩個div元素的溢出處理方式*/</style>……<body> <div>畫船捶鼓催君去，高樓把酒留君住。去住若為情，西江潮欲平。<br/>江潮容易得，只是人南北。今日此樽空，知君何日同！</div> <divclass="cont1">畫船捶鼓催君去，高樓把酒留君住。…</div> <divclass="cont2">畫船捶鼓催君去，高樓把酒留君住。…</div></body>2．輪廓線一些常用的表單控件在獲得焦點時，瀏覽器默認會顯示輪廓線效果，輪廓線與邊框不同，輪廓線不占用頁面的實際空間，只起到突出顯示的作用。在CSS3中，使用outline屬性設置輪廓線，也可以使用其子屬性outline-style、outline-color和outline-width分別設置輪廓線的樣式、顏色和寬度，它們的用法與border及其子屬性相同。【教師】演示【例8-7】操作流程，實現圖8-9的效果設置表單控件的邊框并去除表單控件默認的輪廓線效果。在DW中打開本書配套素材“項目8”→“login.html”文檔，該文檔中已經創建好表單，并為獲得焦點時的表單控件設置邊框，此時頁面效果如圖8-9所示。outline:none;獲得焦點時默認的輪廓線效果將邊框效果覆蓋獲得焦點時默認的輪廓線效果將邊框效果覆蓋圖8-9“login.html”頁面效果【學生】聆聽、思考、理解【教師】講解不同類型元素的盒子模型不同類型元素的盒子模型在設置屬性時有不同的效果，下面分別介紹（1）塊級元素。塊級元素在頁面中獨占一行。默認情況下，它的寬度自動填滿父元素的寬度，也可以使用width和height屬性設置塊級元素的寬度和高度。需要注意的是，即使設置了寬度，塊級元素仍會獨占一行。此外，可以使用padding和margin屬性設置它的內外邊距。（2）行內元素。行內元素在頁面中按照從左到右、從上到下的順序排列，不會單獨分行。它的寬度取決于內容的寬度，無法使用width和height屬性設置寬度和高度。對于內外邊距，設置水平方向的padding-left、padding-right、margin-left和margin-right屬性可以正常顯示，而設置豎直方向的padding-top、paddi

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論