《網頁設計與開發》課程教案-32-網頁設計與開發教案授課專業：XXXX專業課程性質：專業基礎課學時數：64學時目錄課程基本信息 2任務01網站設計與開發起步 4子任務01-1網站設計與開發起步 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一級導航菜單的設計開發 58子任務05-3二級彈出式菜單的定位 61任務06網頁中列表的應用 65子任務06-1認識列表 65子任務06-2使用列表制作多級導航 70任務07使用彈性盒布局二級導航菜單 74任務08網頁中表格元素的應用 78任務09網頁中表單元素的應用 83任務10網頁中插入視頻和音頻 88

課程基本信息課程名稱網頁設計與開發授課專業云計算技術與應用專業群內所有專業課程類型專業基礎課程開課學期大學一年級第一學期授課學時64學時課程定位《網頁設計與開發》是云計算技術與應用專業群“平臺+模塊”人才培養體系中的平臺課程，是專業群內軟件技術專業、大數據技術與應用專業、云計算技術與應用、物聯網應用技術、人工智能技術服務專業等所有專業的專業基礎課。本課程立足云計算技術與應用專業群內各專業人才培養方案，面向“Web前端開發工程師”的初級職業崗位需求，注重培養學生的工匠精神和團隊合作意識，圍繞著一個實際項目——網上商城的設計與開發的需求來選擇課程內容，真實模擬企業中一個網站開發的全過程。針對職業能力的培養要求以及實際項目的工作過程，課程設計了10個教學任務，每個教學任務又包含一個或多個子任務，共4學分，64個課時。先修課程無后續課程JavaScript程序設計、Javaweb程序設計、微信小程序開發等（不同專業有所差異）課程內容《網頁設計與開發》課程是云計算技術與應用專業群學生的專業基礎課程，內容涵蓋HTML5常用標簽、CSS樣式表、盒子模型、DIV+CSS布局、網格布局、超鏈接、列表、表格、表單等知識點。主要分為以下幾個項目，根據不同專業生源情況部分項目可選：項目1認識網站和網頁項目2網頁的藍圖——簡單布局項目3網頁的藍圖——復雜布局項目4向網頁中插入圖像和文本項目5向網站首頁添加導航項目6網頁中列表的應用項目7使用彈性盒布局二級導航菜單（可選）項目8網頁中表格元素的應用 項目9網頁中表單元素的應用項目10網頁中插入視頻和音頻選用教材教材：《Web前端開發項目教程（HTML5+CSS3+JavaScript）（微課版）》，劉錫冬王愛華薛現偉主編，人民郵電出版社該教材為云計算產業技術與應用專業群“平臺+模塊”項目化教學改革的成果之一。教材配有教輔平臺，平臺提供課前預習、課中互動、課后作業等功能，微課視頻、題庫等資源豐富，適合開展線上+線下混合式教學。主要參考資源：W3school在線教程/資源平臺職教云平臺：/cms/courseDetails/index.htm?classId=30acdee8067b4045b352984abf1fcd70授課方式線上+線下混合式教學

任務01網站設計與開發起步子任務01-1網站設計與開發起步教案名稱子任務1-1網站設計與開發起步計劃學時2學時教學內容本子任務主要學習網站和網頁的基本概念和工作原理、各種常見主流瀏覽器以及Chrome瀏覽器下的開發者工具的使用。并且深入理解網頁標準化的意義，將Web標準作為我們網站開發人員共同遵循的準則，來指導我們后續的開發工作。知識目標1.了解網站設計開發的基本概念；2.理解Web標準；能力目標1.能夠分析、規劃網站結構；2.能夠在Chrome瀏覽器下查看網站結構；素質目標1.具有互聯網從業人員的法治思維；2.樹立科技興國的志向；3.樹立標準意識，遵守項目開發規范；4.具有網站開發的軟件工程觀。教學重點規劃網站的目錄結構教學難點網站開發設計的基本概念信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】查找資料了解基本概念：網站、網頁、瀏覽器完成教學平臺問卷：1.是否學習過HTML?如果學習過了解多少？2.是否能夠熟練操作電腦軟件？【課中】課程簡介1.課程的地位和作用：專業群平臺課，對接Web前端開發工程師崗位需求2.課程的主要學習內容：HTML5+CSS33.課程的教學方式：項目化教學4.項目的考核方式：過程化考核（平時小項目+期末綜合項目）課程導入網頁展示與認識（瀏覽百度官網、門戶網站、小米網上商城、Apple官網、學校官網等網站）（10分鐘）小組討論：從網站布局結構、色彩搭配、導航欄的設計、用戶體驗等對網站主頁進行分析討論引出本門課程的任務：完成網上商城網站首頁及內部主要頁面任務提出在學習網頁開發技術之前需要了解網站在互聯網上的工作原理以及網站開發人員必須要遵循的萬維網WWW標準，認識各種常用瀏覽器，學會使用瀏覽器的開發者工具查看網站的結構。（5分鐘）知識點講解一、相關概念（15分鐘）同學分享課前查閱資料獲取的信息：網站、網頁、瀏覽器的概念網頁：網頁是構成網站的基本元素，是承載各種網站應用的平臺，它可以存放在世界上任何一臺計算機中，是萬維網（WorldWideWeb，全球廣域網，簡稱web）中的一個頁面。網站是域名、空間服務器、域名解析、網站程序、數據庫等的集合，涉及到一系列軟硬件技術，近年來隨著云計算技術的迅猛發展，租用云服務器搭建虛擬主機使得網站建設更加普及和大眾化。網頁要通過網頁瀏覽器來閱讀。二、網頁的標準化（15分鐘）小組討論：手機數據接口有標準、視頻格式有標準，網頁需不需要標準呢？全球的網頁設計人員和瀏覽器制造商之間有一個共同的web標準，遵守這個標準的網頁，在所有遵守W3C（萬維網聯盟）標準的瀏覽器上都可以獲得一致的表現可以完全不必擔心瀏覽器兼容問題。Web標準下的網頁設計（結構、表現、行為的分離）項目實踐在Chrome瀏覽器下，在地址欄中輸入http：//，打開網站首頁，同時按F12，進入調試狀態，點擊source菜單，查看該網站的目錄結構。（20分鐘）項目拓展查看百度、淘寶等大型網站的網站目錄結構，并思考，網站部署在哪里？是不是一個網站只能部署在一臺服務器上？（20分鐘）小結每位同學使用云記事本總結本次課的主要內容，并分享。【課后】完成教學平臺作業：在網上搜索“中華魯商”、“魯商博物館”等圖文信息，下載到本地后分類保存，并截圖提交至教學平臺。通過瀏覽不同類型的網站，使學生體會互聯網時代媒體傳播的特點，建立網站開發從業人員的法治思維。互聯網起源于1969年的美國，改變了人類的生活方式。引導學生正確上網，立科技興國的志向，發揮網絡價值。我們從一開始就要樹立標準意識，從細微處做起，遵守項目開發規范。“不積硅步，無以至千里”養成良好的學習習慣是邁向成功的第一步。

子任務01-2制作第一個網頁教案名稱子任務01-2制作第一個網頁計劃學時4學時教學內容本子任務通過完成一個“魯商文化博物館”的網頁來理解并掌握HTML5文檔的基本語法結構，熟悉記事本及HbuilderX編輯器的使用，并且通過實踐解決簡單的技術問題。知識目標1.掌握html5文檔的基本格式2.理解web標準能力目標1.學會使用HBuilderX編輯簡單網頁2.能夠使用HBuilderX發布網頁素質目標1.堅持文化自信，樹立民族自信心2.樹立標準意識，遵守項目開發規范3.弘揚魯商文化“仁智合一”的核心價值觀教學重點HTML5文檔的基本模板教學難點HTML5中的常見標簽及屬性應用信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】同學們已經在網上搜索了“中華魯商”、“魯商博物館”等圖文素材，了解了什么是魯商文化。【課中】課程導入（10分鐘）教師通過教學平臺的作業模塊展示同學下載的“魯商文化博物館”主題的圖文素材，并點評。同學分享什么是魯商文化。任務提出（5分鐘）本次課我們分別嘗試使用記事本和Hbuilder網頁編輯器，在這兩種編輯環境下書寫并理解HTML5文檔的基本格式，使用簡單標記將我們搜集到的圖文素材放入網頁中，并最終在瀏覽器中瀏覽生成的網頁，完成我們的第一個網頁！知識點講解（30分鐘）一、選擇合適的HTML編輯器記事本：初學者學習寫HTML文件時經常會用到的一個工具，因為網頁本身就是超鏈接文本文件，在記事本中鍵入HTML代碼后，在“文件”菜單選擇“另存為”命令，將文檔保存為.htm或者.html擴展名的文件，使用瀏覽器打開就可以瀏覽網頁了。HBuilderX：是DCloud推出的一款支持HTML5的Web開發集成開發環境，官方自述為“輕如編輯器、強如IDE的合體版本”，體積小、靈活，而且由我國的前端開發人員編寫，使用方便。二、在HbuilderX中創建網頁分析討論（15分鐘）1.<!DOCTYPE>什么意思？2.HTML文檔的結構也分為head和body，是否可以嵌套？3.文本和圖片放在哪一部分中？4.繪制出HTML5模板的DOM樹結構（即標簽的層次結構）知識點講解（30分鐘）HTML文檔頭部標記<head></head>通常<title></title>、<meta/>、<link/>等標記可以放在head部分。1.<title></title>設置頁面標題2.<meta/>用于定義頁面中的信息，例如文檔的關鍵字、作者及描述等，在頭部可以包含任意數量的<meta/>標記3.<link/>引用外部文件HTML文檔主體標記<body></body>HTML文檔主體標記<body></body>用于定義頁面所要顯示的內容，除使用腳本添加的特效之外，瀏覽器頁面所顯示的所有文本、圖像、音頻和視頻等元素都必須位于<body></body>標記之間。一個HTML文檔最多使用一對<body></body>標記，這對標記必須在<head></head>標記之后。在body中常用的標記有<h1>~<h6>、<p>、<hr>、<br>、<img>、<div>等。引導答疑（20分鐘）項目實踐（30分鐘）參照以下代碼，在HBuilder中測試title、h2、p等標簽的作用，嘗試完成自己的第一個網頁——魯商文化文字簡介。引導答疑（20分鐘）根據實踐中出現地問題有針對性地解決。小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，并分享。【課后】平臺提交作業：完成魯商文化主題網頁后，將網頁截圖以及代碼上傳至云平臺。盡可能嘗試你會使用的所有標簽。魯商文化作為中國歷史上最早形成的中華文化體系，是山東獨特的商業文化,深受儒家文化的影響，始終秉承“仁智合一”的價值觀，有著獨特的價值體系。“工欲善其事，必先利其器”效率高的工具會起到事半功倍的效果。HBuilder是由國內創業公司DCloud（數字天堂）推出的一款Web集成開發環境，面向中國用戶永久免費，絲毫不遜色于國外的眾多前端編輯器。樹立民族自信心。HTML5標準規范由W3C組織在2014年創建。而創建的成員就包括我們國家的華為、騰訊等十幾個公司。這說明我們國家的科技實力正越來越強。提升同學們民族自豪感。“滴水可以穿石”涓滴之水終可以磨損大石，不是由于它力量強大，而是由于晝夜不舍的滴墜。精益求精，提高審美情趣。

任務02網頁的藍圖——簡單布局子任務02-1使用CSS裝飾網頁教案名稱子任務02-1使用CSS裝飾網頁計劃學時4學時教學內容本子任務主要學習三種樣式表的用法。絕大多數頁面元素都有自己的樣式屬性，這些樣式屬性集合到一起就構成了樣式表。知識目標1.理解DIV+CSS網頁布局2.掌握三種CSS樣式表能力目標1.學會使用DIV+CSS進行簡單的頁面布局2.學會根據需要使用三種CSS樣式表素質目標1.了解并應用“分而治之”的思想2.具備精益求精的工匠精神3.弘揚社會主義核心價值觀和正能量教學重點三種CSS樣式表教學難點DIV+CSS網頁布局信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法案例引申法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務02-1：使用CSS裝飾網頁并完成教學平臺的課前自測題【課中】課程導入（5分鐘）做前端頁面首先要樹立一種“模塊化”思維，就像給報紙雜志排版一樣，確定好各板塊的大小和位置，再考慮內部細節。網頁開發要從大局著手，先學習如何擺放這些板塊。任務提出（10分鐘）我們想將代表不同版塊的大小不一的板塊呈現在網頁中，那么如何才能控制這些頁面元素的外觀呢？DIV+CSS網頁布局知識點學習CSS樣式表（共計100分鐘）CSS（CascadingStyleSheets，可譯為“層疊樣式表”或“級聯樣式表”）是一組樣式設置規則，用于控制Web頁面的外觀。樣式表實現內容與樣式的分離，方便團隊開發1.CSS樣式表簡介—樣式規則2.樣式表分類根據樣式代碼的位置，樣式表有三種使用方法：內嵌樣式表外部樣式表行內樣式表2.1內嵌樣式表使用情境:如果開發人員只定義當前網頁的樣式，可使用內嵌樣式表。內嵌的樣式表“嵌”在網頁的<head></head>標記符內。嵌入的樣式表中的樣式只能在當前網頁上使用。使用格式：教學示例（教師演示講解）學生同步實踐（10分鐘）【頭腦風暴】在html5中type屬性不再是必需的嗎？<link>標簽中的type="text/css"可以省略嗎？2.2外部樣式表使用情境：當要在站點多個網頁上一致地應用相同樣式時，可使用外部樣式表。在外部樣式表中定義樣式，并鏈接到所有網頁，便能確保所有網頁外觀的一致性。如果需要更新樣式，只需在外部樣式表中修改一次，而該更新會反映到所有與該樣式表相鏈接的網頁上。使用格式：教學示例（教師演示講解）學生同步實踐（15分鐘）【頭腦風暴】如果希望一個網站中多個頁面的樣式保持一致，如何解決？2.3內聯樣式表（行內樣式）使用情境：如果某個頁面某個元素有特殊樣式，可以直接把CSS代碼添加到HTML的標記中，即作為HTML標記的屬性標記存在。通過這種方法，可以很簡單地對某個元素單獨定義樣式。使用格式：教學示例（教師演示講解）學生同步實踐（10分鐘）分析討論（10分鐘）內嵌、內聯和外部樣式有什么優勢和劣勢？如何平衡內嵌和外部樣式？項目實踐（20分鐘）分別使用三種樣式表，自行設計古詩鑒賞網頁，請嘗試使用所有你會用的標記以及樣式。古詩——將進酒作者：李白君不見黃河之水天上來，奔流到海不復回。君不見高堂明鏡悲白發，朝如青絲暮成雪。人生得意須盡歡，莫使金樽空對月。天生我材必有用，千金散盡還復來。總結分享（10分鐘）每位同學使用云記事本總結本次課的主要內容。自由分享自己操作過程中遇到的問題和解決辦法，并分享實驗心得。【課后】平臺提交作業：將上次課完成的“魯商文化”主題網頁使用CSS美化，并提交到教學平臺。軟件工程中常使用這種“分而治之”的思想，即無論多么復雜的系統，都可以解構成小的模塊。同樣，網站開發時，無論網頁有多么復雜的需求和功能，我們都可以將其拆分解構成容易實現的最小單元。平時我們也可以使用“分而治之”的思想來管理我們的生活和工作。代碼書寫要遵循規范，小的拼寫錯誤可能會導致頁面崩潰，要養成嚴謹細致的工匠精神。內容是事物的存在基礎，而形式則是它的表現方式。同一種內容在不同條件下可以采取不同的形式。內容和形式的辯證關系對我們的實踐活動具有重要的方法論意義。古詩詞是中華文化的瑰寶，蘇軾的這首詞氣勢豪放，隨口誦讀即可感受到古代文人境界之宏大。

子任務02-2巧用選擇器調兵遣將教案名稱子任務2-2巧用選擇器調兵遣將計劃學時4學時教學內容本子任務主要學習選擇器的用法，從最基本的元素選擇器、class/id選擇器，到交、并、子代、后代，以及其它更豐富的選擇器，定位頁面上的任意元素變得愈發簡單。知識目標1.理解選擇器2.掌握三種基本選擇器的用法3.掌握擴展選擇器的用法能力目標1.學會使用三種基本選擇器2.靈活運用擴展選擇器快速命中頁面元素素質目標1.增強法律意識，樹立法治觀念2.培養精益求精，科學嚴謹的工匠精神3.培養自主建構知識體系的能力教學重點基本選擇器和擴展選擇器的應用教學難點選擇器的優先級信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務02-2：巧用選擇器調兵遣將并完成教學平臺的課前自測題【課中】課程導入（10分鐘）思考：頁面越復雜，網頁代碼中HTML標記就越多，而且同一個標記也會被多次使用，那么在CSS樣式表中如何準確地找到其中某一個標記，并設置其樣式呢？引入：在樣式規則中，選擇器的功能就是用來選取需設置樣式的元素的。任務提出（10分鐘）萬維網聯盟（WorldWideWebConsortium，W3C）為Web開發人員提供了各種各樣的選擇器，從最基本的元素選擇器、class/id選擇器，到交、并、子代、后代，以及其它更豐富的選擇器，定位頁面上的任意元素變得愈發簡單。知識點講練（共45分鐘）1.基本選擇器的用法——標記名選擇器標記名選擇器也稱為類型選擇器，就是用HTML的標記名稱作為選擇器，為頁面中某一類標記指定統一的CSS樣式。用標記名選擇器定義的樣式表對頁面中該類型的所有標記都有效。教學示例（教師演示講解）學生同步實踐（共15分鐘）【頭腦風暴】如果希望多個標簽都使用同樣樣式，怎么辦？2.基本選擇器的用法——class類選擇器使用類選擇符可以為多個相同類型或不同類型的標記指定相同的樣式不同類型的標記也可以使用同一個類名，使用類選擇器可以為多個不同類型的標記指定相同的樣式。class類選擇器必須以“.”開頭class類選擇器名稱區分大小寫，若是定義樣式時使用選擇器.First，引用樣式時使用class="first"，則樣式引用無效。教學示例（教師演示講解）學生同步實踐（共15分鐘）【頭腦風暴】如果某個標記的各部分內容樣式并不相同，怎么辦？基本選擇器的用法——ID選擇器大部分HTML標記都可使用標準屬性id為該標記指定一個唯一標識。id選擇器必須以“#”開頭，“#”與id屬性值之間不能有空格。同一頁面中每個標記的id屬性值都必須唯一，一個id值只對應一個標記，方便腳本中對象的獲取。id選擇器比類選擇器具有更高的優先級，即當id選擇器與類選擇器在樣式定義上發生沖突時，優先使用id選擇器定義的樣式。教學示例（教師演示講解）學生同步實踐（共15分鐘）【頭腦風暴】Id選擇器重復使用了會如何？分析討論（10分鐘）在實際項目中，頁面元素數量多，層次復雜，當基本選擇器不能夠完全符合需求時，怎么辦？知識點自主學習（20分鐘）擴展選擇器觀看微課視頻擴展選擇器部分，并思考以下問題：1.后代選擇題和子代選擇器有什么異同？2.通用選擇器通常用在什么場合？3.并集選擇器什么時候使用？交流分享（15分鐘）同學主動交流或者分小組交流項目實踐（30分鐘）完成民法典中部分章節的頁面修飾。閱讀給定html代碼，并添加樣式，使用合適的選擇器，使之呈現指定的頁面效果。小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業：繼續美化“中華魯商文化”主題網頁，可以通過自主學習加入圖片。代碼編寫過程中，注意代碼的精簡，遵循Web開發規范，培養學生精益求精，科學嚴謹的工匠精神。公民身份信息的唯一性，做遵紀守法、誠實守信的好公民，大數據時代對于公民信息的可追溯性。引導學生自主學習，主動思考，自主建構知識體系。通過項目實踐，了解民法典的歷史地位以及部分章節內容，樹立法治意識。

子任務02-3使用盒模型劃分頁面教案名稱子任務02-3使用盒模型劃分頁面計劃學時4學時教學內容本子任務主要學習盒模型及其樣式屬性的應用。盒模型也是所有塊級元素的抽象，擁有所有塊級元素的共性，樣式屬性適用于所有塊級元素。知識目標1.理解行內元素和塊級元素及其轉換2.掌握盒子模型及常用樣式屬性3.掌握行內元素及其樣式屬性能力目標1.學會靈活轉換元素的顯示方式2.能夠使用盒模型進行頁面布局素質目標1.了解并應用“分而治之”的思想2.具備精益求精的工匠精神3.弘揚社會主義核心價值觀和正能量教學重點盒子模型的樣式屬性教學難點塊級元素和行內元素的區別和轉換信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務02-3使用盒模型劃分頁面并完成教學平臺的課前自測題【課中】課程導入（10分鐘）思考：DIV+CSS網頁布局的基本流程就是先在頁面上使用塊級元素劃分內容區域，然后再用CSS進行定位，最后再在相應的區域內添加具體內容。塊級元素的大小和位置決定了該內容塊在網頁上的占位。我們已經能夠在樣式表中為頁面中的指定元素規定樣式規則，如何這些塊級元素按照美工事先設計好的版式排列在網頁上呢？微課視頻中主要講述了哪些內容？分享交流3分鐘任務提出（10分鐘）頁面布局時要在樣式表中對頁面中指定“盒子”的大小、位置、內外邊距等做出精確的設置，就需要用到盒模型。【頭腦風暴】是不是所有的元素都是盒子？知識點講解（10分鐘）HTML元素按呈現效果可分為塊級元素和行內元素兩大類。分析討論（15分鐘）1.列舉我們學過的元素分別是哪一類？2.兩類元素是否可以轉換？知識點講解（10分鐘）行內元素和塊級元素在實際項目中可以根據需要進行相互轉換，可以通過指定display樣式屬性的取值來決定元素的顯示方式。行內塊元素。兼具行內元素和塊級元素的特點，在內部類似于block元素，比如它擁有block元素的高寬值，也可以設定自己的padding（內填充），border（邊框）與margin（外邊距），而外部的排列方式又類似行內元素，即水平在一行內排列，不是像塊級元素一樣從上到下排列。教學示例（教師演示講解）學生同步實踐（共10分鐘）知識點講做（40分鐘）塊級元素的盒子模型1.盒子的寬度和高度CSS樣式規則中使用width和height規定盒子的寬高注意：標準盒子模型的width和height僅指塊級元素的內容區域大小教學示例（教師演示講解）學生同步實踐（共10分鐘）2.盒子的邊框教學示例（教師演示講解）學生同步實踐（共10分鐘）3.盒子的內填充屬性padding并非實體，是透明留白，沒有修飾屬性。不同瀏覽器對于頁面元素的默認padding和margin取值是不相同的，為了保證統一的頁面效果，通常采用*{padding:0;margin:0;}將頁面元素的默認內外邊距置零。padding值不允許為負值，可四邊分別設置，順時針方向，也可一次賦值。容器盒子內填充使用固定值，段落內填充使用相對值。所以當拖動瀏覽器窗口改變其寬度時，段落文字的內填充會隨之發生變化（這時<p>標記的父元素為<div>），而容器盒子的內填充不會發生變化。教學示例（教師演示講解）學生同步實踐（共10分鐘）項目實踐（20分鐘）民俗話節氣之立秋頭腦風暴（10分鐘）如何使盒子在頁面窗口居中？項目實踐（30分鐘）完成以下單列布局小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業：瀏覽“學習強化”網站首頁，畫出單欄式頁面布局，并使用HTML+CSS實現。在前端頁面排版中，要有精益求精的工匠精神事物不是絕對的，是可以相互轉換的。在軟件項目開發過程中，時刻牢記精益求精的工匠精神在軟件項目開發過程中，時刻牢記精益求精的工匠精神在立秋時節到來時引導學生熟悉中國傳統文化，感受大自然的四季更替，體會到古代先賢的偉大智慧。從弘揚正能量的網站中汲取能量。

子任務02-4使用BFC隔離空間教案名稱子任務2-4使用BFC隔離空間計劃學時2學時教學內容本子任務主要學習BFC（塊級格式化上下文），用于將元素和外部真正隔離開，從而保證一個環境中的元素不會影響到其他環境中的布局，用于解決頁面排版中出現例如垂直盒子外邊距合并等問題。知識目標1.理解垂直外邊距合并的原理2.掌握BFC布局及其觸發方法3.掌握BFC布局解決外邊距合并問題的方法能力目標1.能夠熟練應用BFC解決外邊距合并的問題2.能夠使用BFC解決其他實際問題素質目標1.提高自主探究能力2.培養精益求精的工匠精神3.培養通過現象發現本質的職業素質教學重點BFC布局及其觸發方法教學難點使用BFC解決排版中出現的實際問題信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務02-4使用BFC隔離空間并完成教學平臺的課前自測題【課中】作業點評（10分鐘）教師點評作業，指出作業中出現的問題課程導入（5分鐘）隨著我們設計的頁面板塊越來越多，相鄰盒子設置垂直外邊距后，在頁面表現出的效果往往和自己預想的值有一定偏差，為什么呢？大多數情況下是相鄰盒子之間相互影響導致的，如何避免這種影響呢？如果將元素和外部真正隔離開，從而保證一個環境中的元素不會影響到其他環境中的布局。任務提出（10分鐘）發現問題：外邊距合并如何解決？分析討論（10分鐘）知識點講解（15分鐘）1.BFC（BlockFormattingContext），塊級格式化上下文。它是一個獨立的渲染區域，決定了塊級元素如何對其內容進行定位，以及與其他元素的關系和相互作用。在可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行布局。一個環境中的元素不會影響到其他環境中的布局。（1）同一個BFC內的兩個相鄰塊級元素的外邊距合并，但不同

BFC外邊距不合并；（2）BFC的區域不會與外部浮動元素重疊；（3）計算BFC高度的時候，浮動元素也會參與計算；（4）BFC元素是一個獨立的容器，外面的元素不會影響里面的元素，里面的元素也不會影響外面的元素。分析討論觸發BFC的方法BFC就是讓元素形成一個獨立的空間，空間內的元素不會影響到外面，那么如何才能讓元素形成這樣一個空間呢？為元素設置CSS屬性。常用的觸發BFC方法：（1）設置包含塊overflow屬性值為hidden；（3）設置子元素display屬性值為:inline-block；教學示例（教師演示講解）學生同步實踐（共30分鐘）項目實踐BFC經常用于頁面布局，請完成如圖所示單欄布局。要求：頁面分為三大版塊，他們之間垂直距離設置大一些，為20px，主體部分內部有三個小版塊，他們之間垂直距離小一點，設為10px。思路：使用BFC布局隔離，版塊之間不會發生垂直外邊距合并。小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業：細化“學習強國“網站首頁頁面布局，并在平臺提交從成熟的項目中汲取經驗，培養學生知識發現、總結、內化、提升的自我建構能力培養通過現象發現本質的職業素質培養學生發現問題、解決問題的能力

任務03網頁的藍圖——復雜布局子任務03-1浮動布局兩欄式頁面教案名稱子任務03-1浮動布局兩欄式頁面計劃學時2學時教學內容本子任務學習盒子的浮動布局，為盒子應用float屬性設置浮動，浮動后的盒子將脫離標準流。知識目標1.理解浮動布局2.掌握浮動屬性float的用法3.掌握清除浮動屬性clear的用法能力目標1.能夠熟練應用浮動屬性完成圖文混排效果2.能夠熟練應用浮動屬性完成多個板塊水平排列效果3.能夠清除頁面排版中浮動對其它元素的影響素質目標1.提高自主探究能力2.培養精益求精的工匠精神3.培養軟件架構的模塊化思維教學重點浮動屬性float的用法教學難點解決浮動應用中出現的各類問題，例如高度塌陷等信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務03-1浮動布局兩欄式頁面并完成教學平臺的課前自測題【課中】課程導入（5分鐘）瀏覽百度新聞頁面，觀察頁面布局思考：網頁中兩個板塊水平排列的布局非常常見，僅僅使用簡單的盒子羅列能得到這樣的效果嗎？任務提出（10分鐘）大多數網頁由于內容比較復雜，特別是網站首頁，為了在有限的空間內展示更多的信息，往往都會按照左中右或者左右的結構進行排版。兩欄式布局是在傳統桌面網站中最常見的一種布局方式，將有限的空間劃分為若干橫縱結合的板塊，有助于頁面內容的組織和展示。頁面布局如下：知識點講解（30分鐘）元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。元素的浮動屬性float用法：選擇器{float:屬性值;}常用的float屬性值有三個：left：元素向左浮動right:元素向右浮動none:元素不浮動（默認值）教師演示講解學生同步實踐分析討論（20分鐘）出現以下情況的原因？如何解決？高度塌陷的原因父元素中的所有子元素均設置浮動父元素沒有定義高度解決方案使用空標記清除浮動使用after偽對象清除浮動使用overflow屬性清除浮動項目實踐（20分鐘）學生完成以上布局，教師引導答疑小結（10分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業：將課堂項目提交至云平臺激發學生愛黨愛國的熱情，關心黨和民族的未來發展，為國家建設貢獻自己的力量。培養軟件架構的模塊化思維培養學生發現問題、解決問題的能力當日事，當日畢，只爭朝夕。

子任務03-2DIV+CSS布局網上商城首頁教案名稱子任務03-2DIV+CSS布局網上商城首頁計劃學時4學時教學內容本子任務參照小米網上商城首頁，使用DIV+CSS進行頁面布局。通過該項目學習復雜頁面的布局方法。知識目標1.理解版心的概念2.掌握通欄多列式網頁布局的設計方法能力目標1.能夠熟練應用HTML5+CSS3按需進行網站首頁布局2.能夠解決網頁布局過程中遇到的高度塌陷等常見問題素質目標1.提高審美情趣和創新能力2.激發學生科技報國的志向3.培養軟件工程中的模塊化思維教學重點DIV+CSS的布局方式教學難點浮動以及如何解決浮動帶來的問題信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務03-2DIV+CSS布局網上商城首頁并完成教學平臺的課前自測題【課中】課程導入（5分鐘）瀏覽京東、小米、華為等網上商城，我們發現實際網頁的布局要復雜多了，特別是商城類網站，需要將大量信息呈現在首頁上，大多數網頁是兩欄的甚至多欄的，而且是長頁面，那么怎么才能做出這樣的頁面布局呢？任務提出（5分鐘）如何完成該類網頁的布局？知識點講解（30分鐘）1.網頁布局的流程第一步就是要先根據美工的效果圖確定頁面的版心，版心在屏幕中占據的寬度是多少；第二步要分析頁面中的行模塊，也就是每一個BFC區域，還要確定好每個行模塊中的列模塊；第三步在html文檔中寫出各個頁面元素；第四步通過DIV+CSS調整頁面中的每個元素的外觀效果。2.常見網頁布局——通欄多列式布局教師引導學生完成強調：版心的用法項目實踐（50分鐘）學生自主完成，教師答疑小結（10分鐘）每位同學使用云記事本總結本次課的主要內容。【課后】平臺提交作業：完成小米網上商城網站首頁布局，并在平臺提交“小米”公司創始人雷軍，用他的創業史激勵同學們努力學習；小米也增強了民族自豪感，堅定了同學們為科技報國的志向。培養web前端開發工程師的模塊化思維不畏困難，學會常見的錯誤排查方法和解決方案，并不斷總結。在代碼編寫中，往往很小的錯誤就會導致全局崩潰，要從細節做起。

子任務03-3網格布局網站商城首頁教案名稱子任務3-3網格布局網站商城首頁計劃學時4學時教學內容本子任務主要學習了使用網格布局復雜的網頁。它將網頁劃分成一個個網格，任意組合不同的網格可以做出各種各樣的布局，使以前只能通過復雜的CSS框架實現的效果變得更簡單了。知識目標1.理解網格布局2.掌握網格容器的設置及其屬性3.掌握子元素的屬性能力目標1.學會使用CSSGrid網格進行靈活的頁面布局2.能夠靈活選用網格布局的樣式屬性素質目標1.提高自主探究能力2.培養學生集體主義精神3.正確處理個人和集體的關系教學重點使用網格布局進行頁面布局教學難點解決網格布局中出現的各種問題信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務03-3網格布局網站商城首頁并完成教學平臺的課前自測題【課中】課程導入（5分鐘）我們通過標準流、浮動以及其他CSS屬性已經完成了網上商城首頁的頁面布局，但是利用現有的知識在構建復雜的web頁面時還有很多不足，例如盒子的水平居中、浮動元素的控制、列寬的分配等等。還有沒有其他更好的布局方式呢？答案是有的。任務提出（5分鐘）瀏覽小米商城網站首頁，觀察商品陳列部分，是否像網格一般有秩序？本任務我們將學習另外一種強大的布局模式——CSSGrid布局。它引入了二維網格布局系統，其最大的優勢是可以將頁面分為多個網格，任意組合成不同的形式，進而做出各種各樣的布局，對多列區域的布局特別有效。知識點講解網頁布局的原理（10分鐘）我們可以假想一個容器，里面有若干子元素，子元素按照網格的形式排列，網格線就是構成網格所有的線條。一個兩行五列的布局，就會有3條行網格線，6條列網格線，網格線編號遵循從左到右、從上到下，由1號開始開始，n行有n+1根水平網格線，m列有m+1根垂直網格線。相鄰兩條平行的網格線之間所形成的區域用來擺放子元素，子元素之間可以有間距。2.網格布局中對父元素的操作（40分鐘）（1）設置網格容器方法：在元素上聲明display:grid，這樣就能觸發渲染引擎的網格布局算法，創建一個網格容器，這個元素的所有直系子元素都會自動成為網格元素。（2）劃分網格線網格線是構成網格結構的分界線，它們既可以是垂直的（列網格線），也可以是水平的（行網格線），這些線條構成了布局的基礎模板，任意兩條線之間的空間就是一個網格軌道。在畫線過程中，需要根據行和列兩個維度分別進行設置，由行線和列線所分隔出來的區域用來擺放子元素。grid-template-columnsgrid-template-rowsgrid-templategrid-auto-rows和minmax()教師引導講解，學生同步練習（15分鐘）（3）添加網格間距網格間距的設置在實際開發中是可選的，主要根據網頁設計的需求而定。在兩個網格單元之間的網格橫向間距或網格縱向間距可使用grid-column-gap和grid-row-gap屬性來創建，或者直接使用兩個合并的縮寫形式grid-gap。3.網格布局中對子元素的操作（30分鐘）子元素跨行跨列有的子元素需要占據多個網格單元，要確定具體占位，可以利用之前在父容器中所指定的網格線編號來定位，直接①grid-column-start：規定從哪一列開始顯示項目。②grid-column-end：規定在哪一條列線上停止顯示項目，或跨越多少列。③grid-row-start：規定從哪行開始顯示項目。④grid-row-end：規定在哪條行線上停止顯示項目，或者橫跨多少行。通過設置起始行、結束行和起始列、結束列來給子元素劃定它所要擺放的區域。教師引導講解，學生同步練習（15分鐘）項目實踐（40分鐘）使用網格布局改進子任務3-2中完成的頁面效果小結每位同學使用云記事本總結本次課的主要內容，以及操作中出現的問題。【課后】平臺提交項目實踐作業預習微課視頻任務04-1技術的更新迭代速度是非常快的，作為軟件從業人員，我們要始終保持學習的熱情，具備學習的能力。培養學生模塊化思維和審美情趣。要正確處理整體和部分的關系。整體是部分的有機統一、集合。集合中的各個部分不是單純地疊加或機械地堆積在一起的，而是以一定的結構形式互相聯系、相互作用著的。引申到每個人都是集體的一員，個人利益和集體利益沖突時，個人服從集體。培養學生集體主義精神。子元素也是可以調整的。但是要在有限的空間內調整。個人的自由要在一定的規章制度下。沒有絕對的自由不積硅步，無以致千里在代碼編寫時，要有大局意識，層次清楚，符合規范，養成良好的編碼習慣。

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

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

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

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

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

任務06網頁中列表的應用子任務06-1認識列表教案名稱子任務06-1認識列表計劃學時2學時教學內容本子任務學習列表及其樣式屬性的用法，列表經常用于展示條目類信息、圖文混排信息，以及導航菜單有秩序的圖文信息。知識目標1.掌握無序列表、有序列表、定義列表的用法2.掌握列表樣式的設置能力目標1.能夠使用列表展示數據2.能夠使用列表進行圖文混排3.能夠使用列表制作導航菜單素質目標1.注重愛國主義教育和傳統文化教育2.培養學生歸納和總結的能力3.培養學生的社會主義法治意識教學重點列表的語法教學難點使用列表制作導航菜單信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】觀看微課視頻——子任務06-1認識列表并完成教學平臺的課前自測題【課中】課程導入（5分鐘）如果頁面信息比較多，還是僅僅使用前面學過的標記的話代碼的可讀性不強，HTML給我們提供了列表標記，可以在大量數據分類呈現的時候使用，例如新聞版塊或者復雜的導航菜單等。任務提出（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分鐘）每位同學使用云記事本總結本次課的主要內容，修訂課前自測題。教師補充。【課后】平臺提交作業：模擬完成以上網頁，教學平臺提交列表是一種有秩序的信息表現形式，在我們今天高度發達的文明社會中，講文明，懂禮貌，識大局，懂規矩，遵守社會公共秩序。通過瀏覽學習強國網站，培養學生愛黨愛國的情操，樹立正確的價值觀。祖國大好河山在心中優秀的文學作品希望同學們課后多閱讀，遠離網絡垃圾文學培養學生自主探索的能力

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

任務07使用彈性盒布局二級導航菜單教案名稱子項目07-1使用彈性盒布局二級導航菜單計劃學時4學時教學內容1.彈性盒布局的概念2.彈性容器的常用屬性設置3.使用彈性盒子進行頁面布局并進行樣式設置4.根據需要選擇合適的頁面布局方式知識目標1.掌握彈性盒布局的概念2.掌握彈性容器的常用屬性設置能力目標1.學會使用彈性盒子進行頁面布局并進行樣式設置2.能夠根據需要選擇合適的頁面布局方式素質目標1.提高自主探究能力2.培養學生創新意識3.培養堅持不懈的職業精神教學重點使用彈性盒子進行頁面布局并進行樣式設置教學難點根據需要選擇合適的頁面布局方式信息化教學資源職教云教學平臺“網頁設計與開發”課程設計欄目教學環境教學做一體化機房的計算機需安裝配置HBuilderX開發環境和Google瀏覽器，網絡狀況良好，可登錄網上學習平臺教學方法任務驅動法、討論法、教練式教學法思政融入方法體驗探究法、情景引入法教學活動及主要環節思政元素融入【課前】1.觀看微課視頻——子任務07使用彈性盒布局二級導航2.瀏覽常見網站的頁面布局（學校官網、百度、淘寶等），分析并思考用已經學習的知識能否實現？【課中】課程導入什么是CSS3彈性盒子？有什么功能？（10分鐘）CSS彈性盒子布局是CSS3的模塊之一，定義了一種針對用戶界面設計而優化的CSS盒子模型。在彈性布局模型中，彈性容器的子元素可以在行或者列上排列，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。例如上個子任務中左側導航二級子菜單的個數不固定，就可以將子菜單設置成“可伸縮”的彈性盒子，從而動態改變子菜單的寬度大小。知識點講解一、設置CSS3彈性盒子（15分鐘）同學根據微課視頻學習：彈性盒子及設置父級盒子屬性方法1.彈性盒子由彈性容器（Flexcontainer）和彈性子元素（Flexitem）組成。2.設置父級盒子的display屬性的值為flex或inline-flex可將其定義為彈性容器，彈性容器內包含一個或多個彈性子元素。彈