HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。23.3盒子模型的相關(guān)屬性該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1） margin外邊距屬性及書寫格式（2） padding內(nèi)邊距屬性及書寫格式（3） border邊框?qū)傩阅芰δ繕?biāo)：（1） 具備合理設(shè)置容器margin、padding屬性的能力。（2） 具備根據(jù)父容器大小，合理規(guī)劃子容器相關(guān)屬性值的能力。素養(yǎng)目標(biāo)：（1）世界最大單口徑射電望遠(yuǎn)鏡——“天眼”，了解中國(guó)天眼的技術(shù)含量，提升民族自豪感。（2）了解“感動(dòng)中國(guó)”的眾多人物，樹立正確的時(shí)代價(jià)值觀，遠(yuǎn)離畸形的追星文化。（3）對(duì)盒子各屬性的精確計(jì)算，提升一絲不茍的學(xué)習(xí)態(tài)度、精益求精的工作態(tài)度。盒子模型的相關(guān)屬性margin外邊距屬性、padding內(nèi)邊距屬性、border邊框?qū)傩?。通過相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。通過0點(diǎn)~9點(diǎn)的順時(shí)針記憶對(duì)應(yīng)的屬性值順序。Margin、padding的雙參數(shù)、三參數(shù)書寫格式。采用“默認(rèn)上右下左，缺誰找對(duì)門”的記憶方式。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)在眾多練習(xí)中，書寫容器樣式時(shí)，起手式建議大家書寫容器width、height屬性，確保頁面效果出現(xiàn)一些異常情況。必要時(shí)，可以為容器設(shè)置一定的邊框或者底色以觀察容器范圍?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入通過盒子模型，我們知曉整個(gè)頁面實(shí)際上是一層層大小遞減的容器嵌套的反映。如何精確定義每個(gè)盒子的位置、尺寸，這里我們就要了解盒子的重要屬性：margin、padding、border。在之間的練習(xí)中，我們基本了解了border的屬性，也相對(duì)來說比較容易理解。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授3.3.2margin外邊距屬性margin簡(jiǎn)寫：分別寫“上右下左”的外邊距數(shù)值（時(shí)針0到12點(diǎn)順時(shí)針旋轉(zhuǎn)來記憶）margin:10px;/*四個(gè)邊都有10px的邊距*/margin:10px20px;/*上/下邊有10px的邊距，左/右邊有20px的邊距*/margin:10px20px30px;/*上邊有10px的邊距，左/右邊有20px的邊距，下邊有30px的邊距*/3.3.3padding內(nèi)邊距屬性與margin參數(shù)一樣，也可以采用1參數(shù)、2參數(shù)、3參數(shù)、4參數(shù)的寫法，也是遵循“上右下左”的書寫順序。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例5】完成如圖3-38所示的淺灰色容器水平居中效果，同時(shí)設(shè)置各圖片之間的間距，不要求整體圖片集的左右間距對(duì)稱?！钏颊庹f：“感動(dòng)中國(guó)”入選的人物，他們來自各行各業(yè)，卻都以自己的方式詮釋了什么是真正的奉獻(xiàn)與堅(jiān)持。這些人物的事跡感人至深，他們用自己的行動(dòng)傳遞著愛與希望，激勵(lì)著更多的人勇往直前，為社會(huì)的進(jìn)步與發(fā)展貢獻(xiàn)自己的力量。他們是時(shí)代的楷模，值得我們每一個(gè)人學(xué)習(xí)和敬仰。歷年來入選“感動(dòng)中國(guó)”的人物中國(guó)，你記得哪個(gè)？【案例6】設(shè)置圖片與邊框之間的間距，如圖3-41所示?！钏颊v解：??天眼?，即?500米口徑球面射電望遠(yuǎn)鏡，是中國(guó)貴州省黔南布依族苗族自治州的一座重大科技基礎(chǔ)設(shè)施，具有極高的科技含量和復(fù)雜的構(gòu)造。以下是天眼的一些主要科技特點(diǎn)：?巨大的?反射面?：天眼的反射面由4450個(gè)反射單元組成，總面積達(dá)25萬平方米，相當(dāng)于30個(gè)足球場(chǎng)大小。這種大規(guī)模的反射面設(shè)計(jì)需要極高的精度和復(fù)雜的工程技術(shù)。?高精度機(jī)械控制?：天眼的反射面精度要求達(dá)到二十萬分之一，這意味著每個(gè)反射單元的位置和角度都需要極其精確的控制，以確保望遠(yuǎn)鏡的整體性能。??超高靈敏度?：天眼的靈敏度達(dá)到了世界第二大射電望遠(yuǎn)鏡的2.5倍以上，這使得它能夠探測(cè)到更微弱的宇宙信號(hào)，發(fā)現(xiàn)更多的脈沖星和其他天體現(xiàn)象。上機(jī)操作教師演示該頁面最終效果圖，并進(jìn)行思政講解巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分站點(diǎn)結(jié)構(gòu)目錄結(jié)構(gòu)正確，文件命名規(guī)范。10Margin屬性簡(jiǎn)寫格式正確，間距適合。30Padding屬性簡(jiǎn)寫格式正確，間距適合。30Border屬性簡(jiǎn)寫格式正確，粗細(xì)合理。20頁面綜合效果整體美觀，元素間隔及邊框數(shù)值合理。10總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課，要求我們掌握：（1） margin、padding、border屬性及書寫格式（2） 能根據(jù)父容器大小，合理規(guī)劃子容器相關(guān)屬性值。對(duì)盒子各屬性的精確計(jì)算，提升一絲不茍的學(xué)