HTML5使用標簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。25.1標準文檔流布局該班人數(shù)M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎(chǔ)認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標：（1）鞏固盒子（容器）的概念及意義。（2）掌握標準流布局的特點及使用場景。（3）掌握標準流布局下，主體框架的html代碼及樣式設(shè)定。能力目標：（1）具備使用標準流布局進行主體容器的代碼編寫的能力。（2）具備合理定義主體容器id或class名稱的英文能力。素養(yǎng)目標：（1）了解本章成語的出處，“鱗次櫛比”，宿舍集體生活中，物品的擺放應(yīng)該也要整齊、規(guī)范。（2）加強英文單詞的拼讀能力。標準文檔流布局標準流布局特點、應(yīng)用場景，主體容器id或class名稱的設(shè)定。通過引入2家百強企業(yè)案例來將知識點進行結(jié)合。企業(yè)首頁主體容器的標準流布局。通過模仿案例布局效果，強化標準流布局的能力。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅(qū)動教學，鼓勵學生獨立或分組完成任務(wù)，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關(guān)知識點的背景知識，然后講授具體的知識要點及任務(wù)實現(xiàn)的注意事項，通過任務(wù)實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當?shù)难a充，根據(jù)學生接納情況選擇性講解任務(wù)擴展內(nèi)容，最后以學生自我評價或小組評價完成任務(wù)的檢測，教師最終進行點評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務(wù)要求復(fù)習總結(jié)上一章節(jié)的知識導(dǎo)圖?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學生整理知識結(jié)構(gòu)。引入HTML布局流派指的是在HTML和CSS中用于構(gòu)建和設(shè)計網(wǎng)頁的各種布局方法和技術(shù)。這些布局流派各有特點，適用于不同的場景和需求。布局流派的意義有以下方面：提高網(wǎng)頁的可用性和可訪問性——通過選擇合適的布局流派，網(wǎng)頁設(shè)計師可以創(chuàng)建更加直觀、易于導(dǎo)航和使用的網(wǎng)頁。這有助于提高用戶的滿意度和忠誠度。提升網(wǎng)頁的響應(yīng)性和適應(yīng)性——隨著移動設(shè)備的普及，響應(yīng)式設(shè)計變得越來越重要?，F(xiàn)代布局流派如Flexbox和Grid提供了強大的工具來創(chuàng)建適應(yīng)不同屏幕尺寸和分辨率的網(wǎng)頁。促進網(wǎng)頁的維護和更新——使用現(xiàn)代布局流派可以簡化網(wǎng)頁的維護和更新過程。例如，通過Flexbox或Grid布局，網(wǎng)頁設(shè)計師可以更容易地調(diào)整布局和樣式，而無需對HTML結(jié)構(gòu)進行大量修改。推動網(wǎng)頁設(shè)計的創(chuàng)新和發(fā)展——隨著技術(shù)的不斷進步和新的布局流派的涌現(xiàn)，網(wǎng)頁設(shè)計師可以不斷探索和嘗試新的設(shè)計方法和技巧。這有助于推動網(wǎng)頁設(shè)計的創(chuàng)新和發(fā)展，為用戶帶來更加豐富的視覺體驗。聽講講授，演示。任務(wù)驅(qū)動法，讓學生了解任務(wù)目標。思考教師引導(dǎo)、提示知識講授5.1標準文檔流布局文檔流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標準文檔流主要通過盒模型，通過設(shè)置元素的display、width、height、margin、padding、border等屬性，來控制元素的大小和位置，具有靈活性強、易于控制的特點，常用于構(gòu)建頁面的基礎(chǔ)布局結(jié)構(gòu)。知識點：標準文檔流布局特點記憶關(guān)鍵詞：鱗次櫛比、秩序井然關(guān)鍵詞解析：認識標準文檔流，更像是庖丁解牛，所有元素按照從上到下，從左到右的編排規(guī)則。對于采用標準文檔流布局，簡單點可以理解為，一行或幾行采用一個大容器來搭建框架即可?！景咐?】完成“寧波杉杉股份有限公司”所示的頁面框架結(jié)構(gòu)。頁頭頁頭海報區(qū)內(nèi)容區(qū)頁腳【案例2】完成“海瀾集團”所示的頁面框架結(jié)構(gòu)。頁頭（底圖為海報圖頁頭（底圖為海報圖）內(nèi)容區(qū)頁腳導(dǎo)航條聽講演示任務(wù)達到的效果，講解代碼演示法讓學生明確分階段或最終的任務(wù)效果。講授法讓學生掌握完成本次任務(wù)需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。任務(wù)實施【案例1】完成“寧波杉杉股份有限公司”所示的頁面框架結(jié)構(gòu)，如圖5-1所示。（1）設(shè)計大體的HTML結(jié)構(gòu)，代碼如圖5-3所示。（2）編寫對應(yīng)的CSS代碼，如圖5-4所示。（3）保存文件后，預(yù)覽效果?！景咐?】完成“海瀾集團”所示的頁面框架結(jié)構(gòu)，如圖5-6所示?！钏颊v解：海瀾之家在國內(nèi)市場擁有很高的知名度，定位于中高端市場，以其優(yōu)質(zhì)的產(chǎn)品和服務(wù)吸引了大量消費者。中國近代服裝設(shè)計相較于西方確實存在一定的差距，奢侈品品牌也相對較少。這并非否認中國古代服飾的優(yōu)美與獨特。中國古代服飾以其華麗的圖案、精致的工藝和獨特的文化內(nèi)涵而著稱，如漢服的飄逸、唐裝的富貴、旗袍的優(yōu)雅等，都展現(xiàn)了中華民族的審美智慧和藝術(shù)造詣。近代，由于歷史原因和技術(shù)限制，中國的服裝設(shè)計發(fā)展相對滯后。加強創(chuàng)新和突破，推陳出新，是中國服裝企業(yè)的當擔。（1）設(shè)計大體的HTML結(jié)構(gòu)，代碼如圖5-8所示。（2）編寫對應(yīng)的CSS代碼，如圖5-9所示。（3）保存文件，預(yù)覽的最終效果。上機操作巡堂指導(dǎo)，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務(wù)擴展任務(wù)檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)站點目錄正確，文件名規(guī)范。10主體容器html結(jié)構(gòu)代碼正確，縮進正確，有必要的注釋語句，容器名稱合理。30Css樣式選擇器合理，屬性值合理。40整體頁面效果運行效果與原圖一致。20總分說明：評分項目為任務(wù)實施中要求學生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能力。總結(jié)通過本課的學習：（1） 鞏固盒子（容器）的概念及意義。（2） 掌握標準流布局的特點及使用場景