Web前端開發(fā)項目教程（HTML5 CSS3 JavaScript）（微課版）-教案 劉錫冬 任務04-10 向網頁中插入圖像和文本-網頁中插入視頻和音頻

《網頁設計與開發(fā)》課程教案-32-網頁設計與開發(fā)教案授課專業(yè)：XXXX專業(yè)課程性質：專業(yè)基礎課學時數(shù)：64學時目錄課程基本信息 2任務01網站設計與開發(fā)起步 4子任務01-1網站設計與開發(fā)起步 4子任務01-2制作第一個網頁 8任務02網頁的藍圖——簡單布局 12子任務02-1使用CSS裝飾網頁 12子任務02-2巧用選擇器調兵遣將 16子任務02-3使用盒模型劃分頁面 20子任務02-4使用BFC隔離空間 26任務03網頁的藍圖——復雜布局 30子任務03-1浮動布局兩欄式頁面 30子任務03-2DIV+CSS布局網上商城首頁 34子任務03-3網格布局網站商城首頁 38任務04向網頁中插入圖像和文本 44子任務04-1網站首頁中圖像的應用 44子任務04-2網站首頁中文本的應用 49任務05向網站首頁添加導航 54子任務05-1頁面中超鏈接的使用 54子任務05-2一級導航菜單的設計開發(fā) 58子任務05-3二級彈出式菜單的定位 61任務06網頁中列表的應用 65子任務06-1認識列表 65子任務06-2使用列表制作多級導航 70任務07使用彈性盒布局二級導航菜單 74任務08網頁中表格元素的應用 78任務09網頁中表單元素的應用 83任務10網頁中插入視頻和音頻 88

任務04向網頁中插入圖像和文本子任務04-1網站首頁中圖像的應用教案名稱子任務04-1網站首頁中圖像的應用計劃學時2學時教學內容本子任務學習如何在網頁中插入圖像信息，同時按照效果圖的要求對圖像進行精確的樣式設置。知識目標1.掌握img標記及其屬性的用法2.掌握常見圖像樣式的使用能力目標1.能夠向網頁中添加圖像2.能夠按需調整圖像的樣式素質目標1.堅持總體國家安全觀2.堅持精益求精的專業(yè)精神3.堅持實事求是的精神教學重點img標簽及其屬性教學難點熟練調整圖像的樣式信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務04-1網站首頁中圖像的應用并完成教學平臺的課前自測題【課中】課程導入（10分鐘）瀏覽網易新聞頁面，圖片新聞和文字新聞給我們的感受有何不同？瀏覽有中國、沙特、伊朗三國領導人合影的圖文信息頁面。討論：通過中國促使沙特和伊朗恢復外交關系來分析中國民美國在國際中起的作用有什么不同？討論：能用于裝飾美化圖像的特征有哪些？新聞圖片允許ps嗎？引出本門課程的任務：在網頁中如何顯示出圖像，如何調整能顯示出來中意的圖像外觀任務提出（5分鐘）在商城首頁中布局顯示輪播圖中的圖片、在商品展示中顯示商品圖片。知識點講解（20分鐘）1.插入圖像<img>標簽用于在HTML頁面中嵌入一個圖像，嚴格地講，是使用<img>標簽在頁面里創(chuàng)建了一塊區(qū)域，用以容納被引用的圖像?；靖袷剑?lt;imgsrc="圖像URL"alt="替代文本"[其它可選屬性]/><img/>標記是單標記，是行內元素，用于在當前行中插入一幅圖像，圖像前后的文本默認與圖像底部對齊。src屬性指定圖像路徑及文件名，常見的web端顯示圖像格式有jpg、gif或png格式。（1）絕對路徑絕對路徑一般是指帶有盤符的路徑或完整的網絡地址。例如“D:\myweb\img\logo.gif”或者“/images/logo.gif”（2）相對路徑相對路徑不帶有盤符，通常是以當前HTML網頁文件為起點，通過層級關系描述目標圖像的位置。分析討論（10分鐘）對文本設置的對齊屬性對圖片起作用嗎？圖片默認是什么類型的元素？可以調整改變嗎？學生實踐驗證討論結果知識點講解（20分鐘）2.CSS圖像樣式已知容器盒子大小為100px*100px，圖片大小200px*200px討論：如何使圖片大小和盒子匹配？討論：如何實現(xiàn)圓形圖片？思考多個inline-block或者incline元素之間的間隙是因為代碼中有空格，在頁面上表現(xiàn)為一個字符大小的縫隙，將多個img標記寫在一行就可以解決這個問題。多個inline-block或者incline元素之間的間隙是因為代碼中有空格，在頁面上表現(xiàn)為一個字符大小的縫隙，將多個img標記寫在一行就可以解決這個問題。項目實踐（30分鐘）根據商城首頁布局圖，完成頁面效果的開發(fā)小結（5分鐘）每位同學使用云記事本總結本次課的主要內容，以及操作中出現(xiàn)的問題。【課后】平臺提交項目實踐作業(yè)預習微課視頻任務04-2通過和學生一起觀看中國促使沙特和伊朗恢復外交關系的圖片新聞，引導學生關心世界局勢，了解總體國家安全觀，在國際變幻中不斷提高政治判斷力。網站上新聞圖片的真實性是第一位的，網上的各種ps偽造亂改圖片是侵權行為，要堅決抵制。事物是可以相互轉換的抓住事物的本質不以規(guī)矩不成方圓，在現(xiàn)實生活中也是如此。培訓學生主動發(fā)現(xiàn)問題，并分析問題解決問題的能力項目越復雜，越要細心、有耐心、有恒心，遇到錯誤及時調試不積硅步，無以致千里。知識不斷積累才能量變達到質變。

子任務04-2網站首頁中文本的應用教案名稱子任務4-2網站首頁中文本的應用計劃學時2學時教學內容本子任務學習如何在網頁中插入文本信息，同時按照效果圖的要求對文本和段落進行精確的樣式設置。知識目標1.掌握各類文本標記及其屬性的用法2.掌握文本標記的樣式能力目標1.能夠向網頁中添加文本2.能夠熟練調整文本的樣式素質目標1.學習并弘揚科學家精神2.培養(yǎng)學生的法治意識3.培養(yǎng)精益求精的工匠精神教學重點各類文本標簽及其屬性教學難點熟練調整文本的樣式信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務04-2網站首頁中文本的應用并完成教學平臺的課前自測題【課中】課程導入（10分鐘）向學生展示具有代表性的幾個網頁，指出頁面文字搭配的優(yōu)缺點；小組討論：頁面最適合的字體大小？最普遍的字體？頁面字體需要自動調整嗎？引出本次課程的任務：在頁面中設置字體、大小、字體單位、顏色等。任務提出（5分鐘）在商城首頁添加各模塊標題文字、各商品名稱、規(guī)格和價格等文字信息。知識點講解（30分鐘）一、插入文本用合適語義的標簽對文本數(shù)據進行結構化是網站架構的基本技能。常用的文本標記有標題標簽<h1>~<h6>、段落標簽<p>、換行標簽<br>、水平線標簽<hr>、強調文本標簽<strong>、<em>等，不同瀏覽器對不同文本標簽有自己默認的呈現(xiàn)樣式。塊級文本標記行內文本標記特殊字符討論：你能列舉哪些學習過的文本標記？塊級文本——標題標記<h1>~<h6>2.塊級文本——段落標記<p>3.行內文本標記<span>分析討論（10分鐘）以上效果如何實現(xiàn)？二、CSS文本和字體樣式應用字體樣式CSS文本和字體樣式應用文本樣式項目實踐（30分鐘）完成新華網評圖文頁面。小結（5分鐘）每位同學使用云記事本總結本次課的主要內容?！菊n后】平臺提交作業(yè)：把添加好文字的商城首頁代碼和運行效果圖上交到平臺：商城首頁添加導航文字、各模塊標題文字、各商品名稱、規(guī)格和價格等文字信息。具備家國情懷，培養(yǎng)愛國意識，提升公民道德修養(yǎng)中華民族是一個歷史優(yōu)秀的偉大民族，有著璀璨的文化，中國古代歷法、二十四節(jié)氣、茶文化都是非常值得我們學習和傳承的。網頁上文字的排版需要認真準確、美觀大方，培養(yǎng)學生精益求精的職業(yè)精神?？茖W家精神：胸懷祖國、服務人民的愛國精神，勇攀高峰、敢為人先的創(chuàng)新精神，追求真理、嚴謹治學的求實精神，淡泊名利、潛心研究的奉獻精神，集智攻關、團結協(xié)作的協(xié)同精神，甘為人梯、獎掖后學的育人精神向科學家學習！向科學家致敬！言論自由有邊界，網絡表達須謹慎。

任務05向網站首頁添加導航子任務05-1頁面中超鏈接的使用教案名稱子任務05-1頁面中超鏈接的使用計劃學時2學時教學內容本子任務主要學習網頁中各種超鏈接的實現(xiàn)方法，學習<a>標記及其屬性在網頁中的基本應用。知識目標1.掌握<a>標記及其屬性的用法2.掌握不同類型超鏈接的屬性設置方法能力目標1.能夠熟練為網頁添加內部鏈接和外部鏈接2.能夠設置錨點鏈接素質目標1.培養(yǎng)創(chuàng)新創(chuàng)業(yè)能力和團隊意識2.培養(yǎng)辯證思維能力3.培養(yǎng)學生終身學習的意識教學重點不同類型超鏈接的用法教學難點頁面內部的錨點鏈接信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務05-1頁面中超鏈接的使用并完成教學平臺的課前自測題【課中】課程導入Web的最初目的就是提供一種簡單的方式來訪問、閱讀和瀏覽文本文檔。網絡上所有可用的網頁都擁有一個獨一無二的URL地址，要訪問某個頁面，只需在瀏覽器地址欄中鍵入該頁面的地址即可。但是，用戶很難每次都通過輸入一個長URL來訪問某個文檔，超鏈接可以將任意文檔與URL地址相關聯(lián)，只要激活鏈接就可以跳轉到目標文檔。在互聯(lián)網中超鏈接是各個網頁之間的橋梁，一個網站內部的頁面必須通過超鏈接連接起來。進入網站時用戶首先看到的是首頁，如果想從首頁跳轉到其子頁面或者其他網站，就需要在首頁相應的位置添加超鏈接。任務提出導航是頁面中必不可少的一部分，也是整個網頁的核心。不同網站的導航效果千變萬化，請從小米網上商城網站中尋找不同類型的超鏈接方式，他們的區(qū)別和聯(lián)系有哪些？討論分享（10分鐘）知識點講解（20分鐘）創(chuàng)建超鏈接的語法形式<ahref="跳轉目標"target="目標窗口的彈出方式"title=”介紹信息”>文本或圖像</a><a>標記是雙標記，行內標記，用于定義超鏈接。分析討論1.圖片鏈接教學引導學生同步實踐（共15分鐘）2.郵件鏈接（現(xiàn)在比較少用，更多的被即時通訊方式取代）3.下載鏈接下載鏈接在點擊后可以下載文件、圖片、音視頻等，實現(xiàn)方法是將href屬性的值設為被下載資源的路徑，然后再添加download屬性。<ahref="./img/1.jpg"download="picture.jpg">下載</a><ahref="./img/1.jpg"download>下載</a>download屬性是HTML5中<a>標簽新增的屬性。download屬性值為“picture.jpg”，這表示圖片下載后命名為“picture.jpg”，download屬性沒有值，表明下載后圖片的文件名為資源文件的文件名，即“1.jpg”。在以前的版本中，<a>標記加上href屬性其實就可以實現(xiàn)下載，但是對于.jpg、.pdf等瀏覽器可以直接打開的文件則直接在瀏覽器中打開預覽，加上了download屬性后，瀏覽器會強制進行文件下載，下載的文件名就是download所命名的文件名。4.空鏈接當不確定鏈接地址是哪里時，可以將href的屬性值寫成#，點擊后會回到本網頁的頂部，通常用于網站測試階段。5.錨點鏈接如何創(chuàng)建錨標記呢？分兩個步驟：1.使用<a>標簽中的id屬性創(chuàng)建錨標記，例如：<aid=“marker”>錨點</a>2.在href屬性中使用該標記<ahref="#marker">熱點文字</a>若要鏈接到其它文檔的指定位置，定義了錨點之后，使用<ahref="文檔URL#marker">熱點文字</a>項目實踐完成大學生創(chuàng)業(yè)計劃書的網頁版，分別實現(xiàn)外部鏈接、錨點鏈接、下載鏈接、郵件鏈接等鏈接形式。點擊返回可以返回頁首。小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業(yè)：繼續(xù)完成大學生創(chuàng)業(yè)計劃書網頁，平臺提交。講解超鏈接的多種不同分類，讓學生體驗學習要從不同角度對同一事物進行認識，找出其中的聯(lián)系與區(qū)別，從而發(fā)現(xiàn)規(guī)律，以便更好的拓展與應用。生活中、學習中都要學會多方面看待問題，如果遇到困難和瓶頸，學會轉換思路，可能問題就會迎刃而解。提升學生職業(yè)精神。體會互聯(lián)網技術對人們生活發(fā)生的改變，激發(fā)學生不放棄學習、終身學習的激情。善于分享，樂于分享培養(yǎng)創(chuàng)新創(chuàng)業(yè)能力和團隊意識

子任務05-2一級導航菜單的設計開發(fā)教案名稱子任務05-2一級導航菜單的設計開發(fā)計劃學時2學時教學內容本子任務主要學習偽類在超鏈接的應用以及<a>標記的display屬性對于導航菜單排列方式的影響，在此基礎上制作出網頁上常見的水平導航菜單和垂直導航菜單。知識目標1.掌握偽類的用法2.掌握偽類在超鏈接中的應用3.掌握超鏈接標記的display屬性能力目標1.能夠熟練設置超鏈接不同狀態(tài)的樣式2.能夠根據需要靈活設置行內超鏈接或者塊級超鏈接3.能夠熟練制作水平導航菜單和垂直導航菜單素質目標1.培養(yǎng)學生樂于分享、團結協(xié)作、共同進步的大格局2.提高審美情趣3.培養(yǎng)在實踐中創(chuàng)新的能力教學重點偽類在超鏈接中的應用教學難點行內超鏈接以及塊級超鏈接在導航菜單中的靈活應用信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務05-2一級導航菜單的設計開發(fā)并完成教學平臺的課前自測題【課中】課程導入（5分鐘）網頁中導航欄對于用戶體驗來說是至關重要的，尤其是頂部導航欄和左側導航欄，因為大多數(shù)用戶都有從左到右，從上到下的瀏覽習慣。當我們進入一個新的網站，通常最先看到的就是頂部導航或者左側導航。所以導航欄及其內部超鏈接的樣式設計是網站開發(fā)者需要重點關注的地方。任務提出（10分鐘）瀏覽小米網上商城官網，找到里面的主要導航部分，并分析用到的技術手段。分析討論（10分鐘）討論：分別用到了哪些我們學習過的技術？查看源碼后，是否印證了你的猜想？知識點講解1.控制超鏈接外觀——偽類（10分鐘）偽類選擇器——偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標記名、類名或id名加“:”構成。分析討論偽類和類有什么區(qū)別？教師演示偽類的使用學生同步訓練（共15分鐘）項目實踐（40分鐘）完成以上導航菜單小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業(yè)：學會分析源碼是軟件開發(fā)人員的必備技能。很多的開源軟件源碼都是公開的，便于全球的技術愛好者共享。培養(yǎng)學生樂于分享、團結協(xié)作、共同進步的大格局。提升項目制作中的美觀度，培養(yǎng)學生審美情趣了解更多的互聯(lián)網企業(yè)，激發(fā)學生科技興國的學習激情。

子任務05-3二級彈出式菜單的定位教案名稱子任務05-3二級彈出式菜單的定位計劃學時4學時教學內容本子項目主要學習基于定位布局的二級彈出式菜單的制作方法。知識目標1.理解元素的定位2.掌握固定定位、絕對定位、相對定位的用法能力目標1.能夠根據頁面元素的位置決定使用哪種定位方式2.能夠熟練應用固定定位、絕對定位和相對定位素質目標1.培養(yǎng)精益求精的工匠精神2.樹立迎難而上的決心3.培養(yǎng)開發(fā)工程師代碼簡潔、注釋清楚的職業(yè)素養(yǎng)教學重點絕對定位和相對定位的用法教學難點絕對定位的使用信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務05-3二級彈出式菜單的定位并完成教學平臺的課前自測題【課中】課程導入（10分鐘）如果網站需要展示的信息比較多，一級菜單中還需要進一步分類，那么就需要進一步設計二級菜單，實現(xiàn)鼠標在主導航上懸停，二級菜單就會彈出，鼠標移走，二級菜單隱藏的效果?？墒嵌壊藛蔚奈恢猛梢患壊藛螞Q定，彈出后覆蓋網頁中原有的內容，而之前學過的普通流中的元素位置受前后元素位置影響，是不能隨便移動的；浮動元素可以向左或向右移動，但是只能移到它的外邊緣碰到包含框或另一個浮動框的邊框為止，也不能滿足要求。那么，如何定位二級菜單呢？任務提出（10分鐘）瀏覽小米網上商城官網，找到里面的二級彈出式菜單部分，并觀察其特點。討論：1.二級菜單的位置由誰決定？2.二級菜單顯示的時候影響頁面中其他元素嗎？知識點講解（20分鐘）1.定位屬性position元素的定位屬性主要包括定位方法、邊偏移和層疊等級。position屬性用于定義元素的定位模式，其基本語法格式如下： 選擇器{position:屬性值;}position屬性的常用值有四個，分別表示不同的定位模式，具體如下：static：自動定位（默認定位方式）relative：相對定位，相對于其原文檔流的位置進行定位absolute：絕對定位，相對于其上一個已經定位的父元素進行定位fixed：固定定位，相對于瀏覽器窗口進行定位2.邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，具體解釋如下：top：頂端偏移量，定義元素相對于其父元素上邊線的距離bottom：底部偏移量，定義元素相對于其父元素下邊線的距離left：左側偏移量，定義元素相對于其父元素左邊線的距離right：右側偏移量，定義元素相對于其父元素右邊線的距離項目演示分析討論（15分鐘）1.參照物？2.偏移后在文檔流中是否占據位置？學生同步實踐分析討論（15分鐘）1.參照物？2.偏移后在文檔流中是否占據位置？學生同步實踐頭腦風暴二級菜單的參照物是誰？在文檔流中是否占據位置？項目實踐小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充?！菊n后】平臺提交作業(yè)：完成小米網上商城首頁的二級彈出式菜單培養(yǎng)學生發(fā)現(xiàn)問題、分析問題的能力，進一步提升職業(yè)能力不積硅步，無以致千里。樹立迎難而上的決心和信心。培養(yǎng)web前端開發(fā)工程師代碼簡潔、注釋清晰的職業(yè)素養(yǎng)

任務06網頁中列表的應用子任務06-1認識列表教案名稱子任務06-1認識列表計劃學時2學時教學內容本子任務學習列表及其樣式屬性的用法，列表經常用于展示條目類信息、圖文混排信息，以及導航菜單有秩序的圖文信息。知識目標1.掌握無序列表、有序列表、定義列表的用法2.掌握列表樣式的設置能力目標1.能夠使用列表展示數(shù)據2.能夠使用列表進行圖文混排3.能夠使用列表制作導航菜單素質目標1.注重愛國主義教育和傳統(tǒng)文化教育2.培養(yǎng)學生歸納和總結的能力3.培養(yǎng)學生的社會主義法治意識教學重點列表的語法教學難點使用列表制作導航菜單信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務06-1認識列表并完成教學平臺的課前自測題【課中】課程導入（5分鐘）如果頁面信息比較多，還是僅僅使用前面學過的標記的話代碼的可讀性不強，HTML給我們提供了列表標記，可以在大量數(shù)據分類呈現(xiàn)的時候使用，例如新聞版塊或者復雜的導航菜單等。任務提出（10分鐘）瀏覽學習強國網站，大量文本信息是如何展示的？尤其是以下圖文混排頁面如何使文字更加有秩序？更加美觀？知識點講解1.無序列表（10分鐘）定義無序列表的基本語法格式如下：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li></ul><ul></ul>標記用于定義無序列表，<li></li>標記嵌套在<ul></ul>標記中，用于描述具體的列表項，每對<ul></ul>中至少應包含一對<li></li>。學生同步實踐（5分鐘）2.有序列表（10分鐘）有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列。定義有序列表的基本語法格式如下：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol>在上面的語法中，<ol></ol>標記用于定義有序列表，<li></li>為具體的列表項，和無序列表類似，每對<ol></ol>中也至少應包含一對<li></li>。學生同步實踐（5分鐘）3.CSS控制列表樣式教師引導學生觀看微課自學學生同步實踐分析討論1.樣式屬性是否可以改變顏色？2.樣式屬性是否可以隨意改變形狀？課外學習：網頁中的各類開源圖標庫項目實踐討論：你知道百度熱搜的由來嗎？小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充?！菊n后】平臺提交作業(yè)：模擬完成以上網頁，教學平臺提交列表是一種有秩序的信息表現(xiàn)形式，在我們今天高度發(fā)達的文明社會中，講文明，懂禮貌，識大局，懂規(guī)矩，遵守社會公共秩序。通過瀏覽學習強國網站，培養(yǎng)學生愛黨愛國的情操，樹立正確的價值觀。祖國大好河山在心中優(yōu)秀的文學作品希望同學們課后多閱讀，遠離網絡垃圾文學培養(yǎng)學生自主探索的能力

子任務06-2使用列表制作多級導航教案名稱子任務06-2使用列表制作多級導航計劃學時2學時教學內容本子任務主要學習如何通過列表嵌套實現(xiàn)多級導航菜單，綜合應用了定位、列表、超鏈接、文本和圖像等多個知識點和技能點。知識目標1.掌握列表的嵌套及其樣式能力目標1.學會使用列表制作多級導航菜單2.能夠熟練設置多級列表的樣式素質目標1.培養(yǎng)學生主動分析問題、解決問題的能力2.培養(yǎng)精益求精的工匠精神3.培養(yǎng)學生的創(chuàng)新思維教學重點列表的嵌套及其樣式設置教學難點定位、列表、超鏈接等多個元素的綜合應用信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務06-2使用列表制作多級導航并完成教學平臺的課前自測題【課中】課程導入（5分鐘）我們在進行網站首頁的設計時，經常會苦于內容太多，空間太小，特別是對于商城類網站，既要能夠盡可能多地展示內容，還要清晰簡潔、層次分明，便于引導用戶訪問，這就需要對原有的導航菜單進行擴充，使之能夠容納更多的信息，多級導航菜單就應運而生了。任務提出（10分鐘）瀏覽小米網上商城的首頁，觀察二級導航菜單效果。思考：我們已經能夠使用絕對定位控制二級菜單的出現(xiàn)位置，但是更細節(jié)的部分，例如處理多級菜單內部復雜的層級關系，如何實現(xiàn)？分析討論（10分鐘）通過列表+超鏈接+CSS組合應用，我們可以實現(xiàn)二級導航菜單，如果想加子菜單，繼續(xù)嵌套ul/ol標記及子標記就可以了。知識點講解1.水平二級導航菜單制作（40分鐘）首先，在body中按照菜單項的層級添加列表元素。然后，進行CSS樣式的設置。（1）進行初始化的設置，將文檔中所有元素的margin和padding設為0；（2）去掉所有列表項前面的圖標；（3）分別對主菜單和子菜單項的樣式進行設置。（4）鼠標移入li時改變子元素a的背景色；（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設置成相對定位，下拉菜單容器設置成絕對定位，并且始終在主菜單項的下方。（6）設置二級下拉菜單隱藏，在鼠標劃過主菜單的時候，下拉菜單顯示。教師引導，學生實踐2.豎直伸縮型二級菜單制作（20分鐘）在上一個案例的基礎上學生自主完成。教師引導答疑項目實踐使用列表完成網上商城首頁左側導航菜單的二級導航效果，正常情況下導航菜單背景顏色為#455159，鼠標放上背景色為#ff6700，二級導航菜單可在圖示文本的基礎上加上圖片。小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業(yè)：將小米官網的二級導航菜單完成后提交。從不同角度看待同一個事物，會得到不同的結論。在html中列表標記經常會用于導航。培養(yǎng)學生主動分析問題、解決問題的能力只有堅持學習、持續(xù)學習,不斷攀登知識高峰,才能淬煉成鋼,書寫絢爛無悔的青春在中國，雷軍已經成為了一個傳奇人物，在被問及公司使命時，雷軍援引日本小說家田中芳樹的作品《銀河英雄傳說》中的一句話作答——“我們的征途是星辰大海?！弊鳛槿蚴謾C市場中一個不被看好的民族品牌，小米的定位時以公道的價格提供優(yōu)質的國產商品。準確的定位成就了雷軍以及小米的輝煌。

任務07使用彈性盒布局二級導航菜單教案名稱子項目07-1使用彈性盒布局二級導航菜單計劃學時4學時教學內容1.彈性盒布局的概念2.彈性容器的常用屬性設置3.使用彈性盒子進行頁面布局并進行樣式設置4.根據需要選擇合適的頁面布局方式知識目標1.掌握彈性盒布局的概念2.掌握彈性容器的常用屬性設置能力目標1.學會使用彈性盒子進行頁面布局并進行樣式設置2.能夠根據需要選擇合適的頁面布局方式素質目標1.提高自主探究能力2.培養(yǎng)學生創(chuàng)新意識3.培養(yǎng)堅持不懈的職業(yè)精神教學重點使用彈性盒子進行頁面布局并進行樣式設置教學難點根據需要選擇合適的頁面布局方式信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】1.觀看微課視頻——子任務07使用彈性盒布局二級導航2.瀏覽常見網站的頁面布局（學校官網、百度、淘寶等），分析并思考用已經學習的知識能否實現(xiàn)？【課中】課程導入什么是CSS3彈性盒子？有什么功能？（10分鐘）CSS彈性盒子布局是CSS3的模塊之一，定義了一種針對用戶界面設計而優(yōu)化的CSS盒子模型。在彈性布局模型中，彈性容器的子元素可以在行或者列上排列，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。例如上個子任務中左側導航二級子菜單的個數(shù)不固定，就可以將子菜單設置成“可伸縮”的彈性盒子，從而動態(tài)改變子菜單的寬度大小。知識點講解一、設置CSS3彈性盒子（15分鐘）同學根據微課視頻學習：彈性盒子及設置父級盒子屬性方法1.彈性盒子由彈性容器（Flexcontainer）和彈性子元素（Flexitem）組成。2.設置父級盒子的display屬性的值為flex或inline-flex可將其定義為彈性容器，彈性容器內包含一個或多個彈性子元素。彈性子元素默認在彈性盒子內顯示為一行，無論子元素的寬度多少，都在一行內顯示，默認從左到右排列。二、案例練習（20分鐘）運行結果：三、案例總結（5分鐘）以上代碼中，彈性容器設置了固定的寬度和高度，其中寬度為450px，內含的三個彈性子元素，每個寬度200px，外加左右方向的margin，在普通盒子中是沒法放到一行的，但是在彈性盒子中，子元素可收縮尺寸以避免父元素溢出。自主學習（20分鐘）小組討論：通過討論了解常用屬性的實踐用法CSS彈性盒子布局的CSS分兩種。一種是應用于父容器的的CSS樣式，用于設定父容器本身或者全部子元素的表現(xiàn)形式；另一種則是應用在子元素上，用于設置單個子元素的表現(xiàn)行為。應用于父容器的CSS樣式如下表：分析討論（20分鐘）小組討論：小組協(xié)作、討論學習常用屬性的定義及其在實踐中的應用1.flex-direction屬性用于指定彈性容器中子元素排列方式。2.flex-wrap屬性設置彈性盒子的子元素超出父容器時是否換行/列。4.align-items屬性定義設置彈性盒子元素在垂直方向上的對齊方式。5.justify-content屬性用于設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。項目實踐（40分鐘）完成二級導航，通過彈性盒布局實現(xiàn)彈性容器的寬度隨著子元素的個數(shù)調整。小結（5分鐘）每位同學使用云記事本總結下節(jié)課的主要內容，并分享?！菊n后】平臺提交作業(yè)：完成小米網上商城的二級導航并在平臺提交互聯(lián)網技術的發(fā)展非常迅速，培養(yǎng)學生自主學習的意識。整體和部分的關系。整體決定部分，居主導地位。聯(lián)系我們個人和集體的關系，個人利益要服從集體利益。培養(yǎng)學生自主學習的意識和能力培養(yǎng)學生自主學習的意識和能力

任務08網頁中表格元素的應用教案名稱任務08應用表格元素計劃學時4學時教學內容1.表格的基本用法和可選屬性2.控制表格的各種樣式3.使用合適的表格進行頁面數(shù)據展示4.使用表格進行頁面局部布局知識目標1.掌握表格的基本用法和可選屬性2.掌握控制表格的各種樣式能力目標1.學會使用合適的表格進行頁面數(shù)據展示2.能夠根據需要使用表格進行頁面局部布局素質目標1.培養(yǎng)精益求精的工匠精神2.培養(yǎng)學生的創(chuàng)造力、歸納和演繹、解決問題能力3.培養(yǎng)學生辯證思維的能力教學重點使用表格進行頁面數(shù)據展示教學難點表格局部布局信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務08網頁中表格的應用并完成教學平臺的課前自測題【課中】課程導入（10分鐘）在HTML中用于組織展示數(shù)據的標記除了前面學過的列表之外，還有表格。表格經常用于對數(shù)據或信息進行統(tǒng)計和展示，在一些網站中對于行列比較清晰的部分還可以使用表格進行頁面元素的布局排版。討論：瀏覽網頁，尋找網頁中的表格作為傳統(tǒng)HTML元素，隨著網頁模塊化發(fā)展，表格在網頁中的應用越來越少了，但是表格也有自己的優(yōu)勢，我們在學習中好好體會吧。任務提出（10分鐘）日常生活中，為了清晰地表示數(shù)據或信息，通常使用表格對數(shù)據或信息進行統(tǒng)計和展示，同樣在制作網頁時，為了使網頁中的元素有條理地顯示，也需要使用表格對頁面信息進行規(guī)劃和展示。討論：該板塊又什么特點？與word中表格有什么共同點？知識點講解（20分鐘）html中的表格由<table>標簽來定義。創(chuàng)建表格的基本語法格式如下：<table><tr> <td>單元格內容</td> ...</tr>...</table><table></table>：用于定義一個表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標記中，在<table></table>中包含幾對<tr></tr>，就表示該表格有幾行。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。分析討論（10分鐘）該類有單元格合并的表格如何制作？colspan：設置單元格橫跨的列數(shù)（用于合并水平方向的單元格），常用屬性值為正整數(shù)。rowspan：設置單元格豎跨的行數(shù)（用于合并豎直方向的單元格），常用屬性值為正整數(shù)。知識點講解（15分鐘）CSS控制表格樣式——細線表格制作項目實踐（20分鐘）天氣預報頁面要點分析：使用rowspan、colspan屬性規(guī)定了單元格如何合并°是可以替代攝氏度（°）符號的替代代碼（詳細見學習任務4-2）單元格中的圖片直接使用行內標記<img>引入，圖片的大小可以通過CSS樣式修改。由于表格采用了斑馬底紋樣式，所以需要給部分<tr></tr>定義類，設置特殊的背景色。項目實踐（20分鐘）在前面已經完成的頁面布局頁面中找到快捷工具所在的盒子容器，完成快捷工具部分頁面內容。每個單元格內部設置超鏈接，鼠標懸浮時變?yōu)槭中?，該區(qū)域文字的顏色變?yōu)榧儼?fff。小結（5分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充?！菊n后】平臺提交作業(yè)：學校招聘網頁隨著技術的更替，舊的被淘汰，新的技術又出現(xiàn)。就像最近大火的“ChatGPT”語言會取代程序員。我們如何才能提升自身價值不給機器淘汰？表格是一個整體表格與行、單元格的關系也是整體與部分的關系培養(yǎng)Web前端開發(fā)工程師具備的必要的審美能力。整體和局部的關系，局部服從整體，局部不能脫離整體。方法總比困難多，在困難面前轉變思路往往會有更好的發(fā)現(xiàn)。提升個人競爭力和綜合能力，在人工智能時代來臨的時候，人才的思維能力永遠是無法被取代的

任務09網頁中表單元素的應用教案名稱任務09網頁中表單元素的應用計劃學時4學時教學內容1.掌握表單的基本用法以及各種表單控件2.掌握HTML5自帶表單驗證功能3.熟悉表單樣式的應用4.能夠熟練制作表單并靈活使用各種表單控件知識目標1.掌握表單的基本用法以及各種表單控件2.掌握HTML5自帶表單驗證功能3.掌握表單樣式的應用能力目標1.能夠熟練制作表單2.能夠熟練使用各種表單控件3.能夠根據需要對表單進行樣式設計素質目標1.培養(yǎng)用戶思維2.培養(yǎng)學生精益求精的職業(yè)精神3.規(guī)范行業(yè)標準，提升服務意識教學重點表單的基本用法以及各種表單控件的使用教學難點熟練制作表單并靈活使用各種表單控件信息化教學資源職教云教學平臺“網頁設計與開發(fā)”課程設計欄目教學環(huán)境教學做一體化機房的計算機需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環(huán)節(jié)思政元素融入【課前】觀察網站的搜索引擎頁面、用戶登錄頁面、用戶注冊頁面等，思考：1.表單由哪些部分組成？2.當用戶填寫了相應信息后，服務器如何獲取到這些信息？【課中】課程導入演示網易郵箱注冊頁面的呈現(xiàn)形式，分析用到的技術。（10分鐘）小組討論：從網易郵箱注冊頁面的呈現(xiàn)形式分析用到的技術，表單的應用。任務提出網上商城用戶注冊頁面的制作需要使用網頁中的表單元素，在設計制作頁面之前需要先熟悉表單的基本用法以及各種表單控件，之后便可以根據需要對表單進行樣式設計并完成制作。（5分鐘）知識點講解一、表單的概念及組成（10分鐘）同學分享課前通過查閱資料獲取的信息：表單的概念及組成部分表單在網頁中主要負責數(shù)據采集功能。例如，搜索引擎頁面、用戶登錄頁面、用戶注冊頁面等使用的就是表單。一個完整的表單通常由表單域、表單控件（也稱為表單元素）、提示信息三部分構成。二、創(chuàng)建表單（20分鐘）語法：action屬性：表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據的服務器程序的url地址。method屬性：用于設置表單數(shù)據的提交方式，其取值為get或屬性：用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單，為在腳本中引用表單提供方便。三、表單控件（20分鐘）1、input控件及其屬性語法格式：<inputtype="控件類型"/>type屬性是<input>標記最基本的屬性，其取值有多種，用于指定不同的控件類型。2、其他表單控件input元素是一個龐大和復雜的元素，但它并不是唯一的表單控件。除此之外，還有button、select、option、optgroup、textarea、fieldset、legend等傳統(tǒng)表單控件和datalist、progress、meter、output、keygen等新增表單控件。四、HTML5自帶表單驗證（15分鐘）在使用表單時為了減輕后臺數(shù)據傳送壓力，提高數(shù)據傳送的質量和效率，需要對表單中的輸入數(shù)據被送往服務器前對其進行驗證。除了復雜的驗證需要使用js腳本完成，html5還新增了一些自帶的表單驗證功能，例如驗證輸入數(shù)據是否為空，輸入郵箱格式是否正確等。案例實踐小組協(xié)作：根據網頁中表單創(chuàng)建的方法及表單控件的靈活使用，小組協(xié)作完成以下案例。1、input控件及其屬性（15分鐘）2、焦點轉移（10分鐘）3、注冊登錄表單的設計（20分鐘）項目實踐1、完成網上商城首頁搜索框部分，搜索框獲取焦點的時候邊框改變顏色（#FF6600），同時按鈕也有顏色變化。（