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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

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

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

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

作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

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

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

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

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論