HTML5使用標簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標簽及多媒體元素的應用，理解盒子模型和常見布局流技術(shù)，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。23.3盒子模型的相關(guān)屬性該班人數(shù)M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎(chǔ)認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標：（1） 掌握border屬性的簡寫格式，邊框線型對應的英文單詞。（2） 掌握background屬性的簡寫格式，設(shè)置圖片背景。能力目標：（1）具備制作精靈圖列表的能力。素養(yǎng)目標：（1） 通過border屬性對比margin屬性，鍛煉學生的類比思維。（2） 完成精靈圖案例，鼓勵學生勇于探索未知，敢于質(zhì)疑，培養(yǎng)創(chuàng)新思維和解決問題的能力。Border邊框?qū)傩?、background背景屬性。Border邊框?qū)傩?、background背景屬性。通過相關(guān)案例的屬性設(shè)置前后對比，讓學生加強理解與認識。background背景屬性設(shè)置圖片及其偏移量。通過精靈圖案例要求學生掌握相關(guān)概念及操作步驟。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅(qū)動教學，鼓勵學生獨立或分組完成任務，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關(guān)知識點的背景知識，然后講授具體的知識要點及任務實現(xiàn)的注意事項，通過任務實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當?shù)难a充，根據(jù)學生接納情況選擇性講解任務擴展內(nèi)容，最后以學生自我評價或小組評價完成任務的檢測，教師最終進行點評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務要求復習margin、padding簡寫的參數(shù)順序?；卮饐栴}教師提問，演示。思維導圖法或問題導向法幫助學生整理知識結(jié)構(gòu)。引入理解border屬性的設(shè)置。border屬性通常用純色的實線solid或虛線dashed外觀。除了設(shè)置border增加裝飾效果外，我們還可以給容器定義一定的背景圖或者背景色，甚至使用背景圖來制作漸變、圖像邊框，當然這需要課外去了解更多知識。聽講講授，演示。任務驅(qū)動法，讓學生了解任務目標。思考教師引導、提示知識講授3.3.4border邊框?qū)傩詫傩灾得枋鯾orderborder邊框?qū)傩缘暮唽慴order-width指定邊框的寬度border-style指定邊框的樣式，其中：dotted點線、dashed虛線、solid實線、double定義兩個邊框。border-color指定邊框的顏色，CSS顏色表達的方式有：顏色名稱，如red,blue,green等。十六進制顏色代碼：如#FF0000表示紅色，#0000FF表示藍色。RGB值：如rgb(255,0,0)表示紅色，rgb(0,0,255)表示藍色。RGBA值：類似于RGB，但增加了alpha透明度值，如rgba(255,0,0,0.5)半透明紅色。border-radius設(shè)置四個角的圓角半徑（圓角度）。3.3.5background背景屬性background-color為背景顏色。background-image為背景圖像。background-position為背景圖像的位置。background-repeat規(guī)定如何重復背景圖像。background-size為背景圖片的尺寸?！景咐?】完成精靈圖效果。核心的技法就是將容器設(shè)置padding-left，這空出的區(qū)域?qū)ｉT用于顯示背景圖。接下來我們使用如圖3-46所示的sprite.png圖像文件，完成三個容器顯示圖標的效果。思路1——可以在Photoshop的圖層剪輯（或者兩圖層），模擬在上一圖層中，推動下面圖層進行錯位，演示精靈圖的原理。思路2——用一張A4紙模擬一個li元素，在對應圖標位置上挖空一個矩形區(qū)域，用一本書放在紙后方，自下往上移動。聽講演示任務達到的效果，講解代碼演示法讓學生明確分階段或最終的任務效果。講授法讓學生掌握完成本次任務需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務實施（1）先編寫html結(jié)構(gòu)元素，對應的代碼如圖3-48所示。（2）編寫對應的CSS代碼，如圖3-49所示。（3）將文件進行保存，并在瀏覽器中運行以測試效果。上機操作巡堂指導，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務擴展任務檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分站點結(jié)構(gòu)目錄結(jié)構(gòu)正確，文件命名規(guī)范。10ul容器結(jié)構(gòu)容器關(guān)系正確、縮進正確。20Nth-of-type偽類代碼書寫正確，無多余空格。20Background屬性設(shè)置url路徑正確，no-repeat屬性正確，x，y軸偏移量正確。50總分說明：評分項目為任務實施中要求學生掌握的技能點。互相點評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力。總結(jié)通過本課，要求我們掌握：（1）border屬性的簡寫格式，邊框線型對應的英文單詞。（2）background屬性的簡寫格式，設(shè)置圖片背景。（3）通過bord