博學谷——讓IT教學更簡單，讓IT學習更有效PAGE12PAGE6《響應式Web開發項目教程（HTML5+CSS3+Bootstrap）（第3版）》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第1章HTML頁面結構搭建計劃課時4課時教學引入隨著移動互聯網的發展，人們可以通過手機、平板電腦等移動設備來瀏覽網頁，在網頁上閱讀新聞、觀看圖像和視頻等。網頁是人們獲取信息的重要媒介，它可以展示文本、圖像和視頻等可視化內容。構建網頁的基礎技術包括HTML、CSS和JavaScript。HTML用于定義網頁的結構和內容，CSS用于控制網頁的樣式，JavaScript用于增強網頁的交互性和動態性。它們共同創建出多樣化且功能豐富的網頁，以滿足用戶的需求。本章將詳細講解如何使用HTML來構建頁面結構。教學目標使學生熟悉HTML的概念，能夠說明HTML的作用和HTML5的優勢使學生熟悉瀏覽器的概念，能夠說明瀏覽器的作用和Chrome瀏覽器的主要優勢使學生掌握VisualStudioCode編輯器的使用方法，能夠使用VisualStudioCode編輯器進行代碼開發使學生了解標簽的概念，能夠說出標簽的分類、標簽的屬性和標簽之間的關系使學生掌握頁面格式化標簽的使用方法，能夠靈活運用頁面格式化標簽將文本呈現在網頁中使學生掌握文本格式化標簽的使用方法，能夠靈活運用文本格式化標簽將文本以加粗、斜體、添加下劃線、添加刪除線等方式顯示使學生掌握圖像標簽的使用方法，能夠靈活運用<img>標簽定義圖像使學生熟悉HTML實體的概念，能夠歸納常用的HTML實體使學生掌握列表的使用方法，能夠定義無序列表、有序列表和定義列表使學生了解列表嵌套，能夠說出列表嵌套的方法使學生掌握超鏈接的使用方法，能夠靈活運用<a>標簽定義超鏈接使學生掌握容器標簽的使用方法，能夠使用<div>標簽劃分網頁的區域，使用<span>標簽定義網頁中某些需要顯示為特殊樣式的文本使學生了解元素的概念，能夠說出HTML中常見的元素分類使學生掌握個人簡介頁面的制作方法，能夠完成個人簡介頁面的開發使學生掌握新聞頁面的制作方法，能夠完成新聞頁面的開發教學重點頁面格式化標簽文本格式化標簽圖像標簽列表超鏈接容器標簽教學難點圖像標簽列表教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（HTML概述、瀏覽器、VisualStudioCode編輯器、標簽概述、頁面格式化標簽）一、通過直接引入的方式導入新課HTML（HypertextMarkupLanguage，超文本標記語言）是一種用于創建網頁的標記語言，它通過一系列的標簽來標記文本、圖像和音頻等，從而定義網頁的結構和內容。這些標簽告訴瀏覽器如何顯示和渲染網頁的內容。同時，HTML還支持使用屬性來進一步定義標簽的特性和行為。本節課將對HTML概述、瀏覽器、VisualStudioCode編輯器、標簽概述、頁面格式化標簽進行講解。二、新課講解知識點1-HTML概述教師通過PPT的方式講解HTML概述。HTML的概念和作用。HTML的版本。HTML5的6個優勢。更好的兼容性增加了語義化標簽。支持視頻和音頻。支持Web存儲。支持Canvas繪圖。增強的表單控件。知識點2-瀏覽器教師通過PPT的方式講解瀏覽器。瀏覽器的用途和分類。Chrome瀏覽器的主要優勢。不易崩潰。瀏覽速度快。安全性高。跨設備同步。知識點3-VisualStudioCode編輯器教師通過PPT結合實際操作的方式講解VisualStudioCode編輯器。VisualStudioCode編輯器的概念。VisualStudioCode編輯器的特點。輕巧極速。功能強大。支持跨平臺。界面設計人性化。擴展強大。多語言支持。下載和安裝VisualStudioCode編輯器。安裝中文語言擴展。安裝LiveServer擴展。VisualStudioCode編輯器的簡單使用。知識點4-標簽概述教師通過PPT的方式講解標簽概述。標簽的分類。標簽的屬性。標簽之間的關系。知識點5-頁面格式化標簽教師通過PPT結合實際操作的方式講解頁面格式化標簽。標題標簽。段落標簽。水平線標簽。換行標簽。三、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。四、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第二課時（文本格式化標簽、圖像標簽、HTML實體、項目1-1個人簡介頁面）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課文本是網頁中最基礎的信息載體之一，用戶主要通過文本來了解網頁的內容。HTML提供了文本格式化標簽，用于修飾文本和突出重點；圖像不僅能夠豐富頁面的視覺效果，還能幫助用戶更好地理解和記憶頁面所呈現的信息；為了避免有些字符可能會被瀏覽器誤解并錯誤地解析為代碼，開發者需要使用HTML實體來替代它們。本節課將對文本格式化標簽、圖像標簽、HTML實體、項目1-1個人簡介頁面進行詳細講解。三、新課講解知識點1-文本格式化標簽教師通過PPT結合實際操作的方式講解文本格式化標簽。文本格式化標簽的作用。常見的文本格式化標簽。演示如何使用文本格式化標簽。知識點2-圖像標簽教師通過PPT結合實際操作的方式講解圖像標簽。圖像標簽的作用。<img>標簽的常用屬性。相對路徑和絕對路徑。演示如何使用圖像標簽。知識點3-HTML實體教師通過PPT結合實際操作的方式講解HTML實體。HTML實體的作用。常用的HTML實體。演示如何使用HTML實體。知識點4-項目1-1個人簡介頁面教師通過PPT結合實際操作的方式講解項目1-1個人簡介頁面。創建項目目錄。編寫個人簡介頁面的結構。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第三課時（列表、列表嵌套、超鏈接、容器標簽、元素、項目1-2新聞頁面）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在網頁中，使用列表能夠將大量信息以結構化的方式進行排列，這樣不僅提高了網頁內容的可讀性，還有助于讀者快速瀏覽和理解網頁中的內容；超鏈接用于用戶在各個網頁之間快速導航；容器標簽用于在網頁中劃分區域或顯示特殊樣式的文本；元素是指由開始標簽和結束標簽標識的代碼塊。本節課將對列表、列表嵌套、超鏈接、容器標簽、元素、項目1-2新聞頁面進行講解。三、新課講解知識點1-列表教師通過PPT結合實際操作的方式講解列表。無序列表。有序列表。定義列表。知識點2-列表嵌套教師通過PPT結合實際操作的方式講解列表嵌套。列表嵌套的作用。演示如何實現列表嵌套。知識點3-超鏈接教師通過PPT結合實際操作的方式講解超鏈接。超鏈接的作用。<a>標簽的常用屬性。演示如何使用<a>標簽。知識點4-容器標簽教師通過PPT結合實際操作的方式講解容器標簽。<div>標簽。<span>標簽。知識點5-元素教師通過PPT的方式講解元素。塊元素。行內元素。行內塊元素。知識點6-項目1-2新聞頁面教師通過PPT結合實際操作的方式講解項目1-2新聞頁面。編寫新聞列表頁面的結構。編寫列表項的新聞詳情頁面的結構。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式檢測學生對JavaScript基本使用的掌握情況。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第四課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習考察學生對知識點的掌握情況。上機：（考察知識點為：項目1-1個人簡介頁面、項目1-2新聞頁面）形式：單獨完成題目：運用本章所學的知識，獨立完成項目1-1和項目1-2。教學后記《響應式Web開發項目教程（HTML5+CSS3+Bootstrap）（第3版）》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第2章CSS頁面樣式美化計劃課時10課時教學引入一個好的網頁應該具有良好的視覺效果，讓用戶在瀏覽網頁時感到舒適。因此，學習如何使用CSS來美化頁面樣式是至關重要的。通過CSS可以輕松地定義各種樣式，如字體、顏色、背景、邊框等。本章將詳細講解如何使用CSS來美化頁面樣式。教學目標使學生熟悉CSS的概念，能夠歸納CSS的概念和優勢使學生了解CSS樣式規則，能夠說出其組成部分使學生掌握CSS的引入方式，能夠將CSS應用于HTML文檔使學生掌握基礎選擇器的使用方法，能夠通過基礎選擇器選擇要改變樣式的元素使學生掌握字體屬性的使用方法，能夠靈活運用字體屬性設置網頁中字體的樣式使學生掌握字體圖標的使用方法，能夠在網頁中使用各種字體圖標使學生掌握文本外觀屬性的使用方法，能夠靈活運用文本外觀屬性設置網頁中文本的樣式使學生掌握CSS注釋的使用方法，能夠在CSS代碼中添加注釋使學生掌握復合選擇器的使用方法，能夠根據需要選擇具有特定關系的元素使學生掌握偽類選擇器的使用方法，能夠根據元素的特定狀態或位置選擇元素使學生掌握偽元素選擇器的使用方法，能夠在特定元素中插入新的內容或樣式使學生熟悉CSS的三大特性，能夠歸納CSS的三大特性使學生掌握列表樣式屬性的使用方法，能夠通過列表樣式屬性設置列表的項目符號使學生熟悉CSS標準盒模型，能夠歸納CSS標準盒模型的組成部分使學生掌握邊框屬性的使用方法，能夠為圖像、文本等添加邊框使學生掌握內邊距屬性的使用方法，能夠為元素設置內邊距使學生掌握外邊距屬性的使用方法，能夠為元素設置外邊距使學生掌握盒子的寬度和高度的計算方法，能夠計算盒子的寬度和高度使學生掌握box-sizing屬性的使用方法，能夠計算元素的總寬度和總高度使學生掌握display屬性的使用方法，能夠更改元素的默認顯示方式使學生掌握背景屬性的使用方法，能夠設置背景顏色、背景圖像等使學生掌握漸變的使用方法，能夠為元素設置漸變效果使學生掌握object-fit屬性的使用方法，能夠設置元素的顯示方式使學生掌握浮動布局的使用方法，能夠使用float屬性實現浮動布局使學生掌握清除浮動的方法，能夠使用clear屬性、額外標簽法、偽元素法、overflow屬性等清除浮動使學生熟悉語義化標簽，能夠歸納常用的語義化標簽使學生掌握彈性盒布局的使用方法，能夠使用彈性盒布局的相關屬性創建響應式頁面使學生掌握元素的定位的使用方法，能夠為元素設置相對定位、固定定位、絕對定位等使學生掌握層疊等級屬性的使用方法，能夠調整堆疊元素的顯示層級使學生掌握陰影屬性的使用方法，能夠為元素設置陰影效果使學生掌握文章詳情頁面的制作，能夠完成文章詳情頁面的開發使學生掌握下拉菜單頁面的制作，能夠完成下拉菜單頁面的開發使學生掌握商城首頁的制作，能夠完成商城首頁的開發教學重點CSS的引入方式基礎選擇器字體屬性文本外觀屬性邊框屬性內邊距屬性外邊距屬性背景屬性漸變浮動布局清除浮動彈性盒布局元素的定位陰影屬性教學難點字體圖標文本外觀屬性CSS的三大特性漸變清除浮動彈性盒布局元素的定位陰影屬性教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（CSS概述、CSS樣式規則、CSS的引入方式、基礎選擇器、字體屬性）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課CSS（CascadingStyleSheets，串聯樣式表）是一種用于為HTML中的各種元素設置樣式的語言，它可以定義字體、邊距、背景等樣式。CSS與HTML相結合可以實現樣式與結構分離，有利于樣式的重用以及網頁的修改與維護。本節課將對CSS概述、CSS樣式規則、CSS的引入方式、基礎選擇器、字體屬性進行講解。三、新課講解知識點1-CSS概述教師通過PPT的方式講解CSS概述。CSS的概念和作用。CSS的版本。CSS3的優勢。樣式屬性。響應式設計。字體和顏色控制。動態交互效果。代碼簡潔。知識點2-CSS樣式規則教師通過PPT的方式講解CSS樣式規則。選擇器。屬性。屬性值。知識點3-CSS的引入方式教師通過PPT結合實際操作的方式講解CSS的引入方式。行內式。內部式。外部式。知識點4-基礎選擇器教師通過PPT的方式講解基礎選擇器。標簽選擇器。類選擇器。id選擇器。通配符選擇器。知識點5-字體屬性教師通過PPT結合實際操作的方式講解字體屬性。常用的字體屬性。使用font屬性對字體樣式進行綜合設置。演示如何使用字體屬性。多學一招：@font-face規則。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第二課時（字體圖標、文本外觀屬性、CSS注釋、項目2-1文章詳情頁面）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課字體圖標是使用字體來呈現的圖標，本質上是一種字體；CSS提供了豐富的文本外觀屬性，可以幫助開發者輕松地為網頁添加多種美觀和個性化的文本效果；開發者還可以在CSS代碼中添加注釋來說明代碼的含義。本節課將對字體圖標、文本外觀屬性、CSS注釋、項目2-1文章詳情頁面進行講解。三、新課講解知識點1-字體圖標教師通過PPT結合實際操作的方式講解字體圖標。字體圖標的概念和作用。在網頁中使用字體圖標的優點。簡單易用。靈活性高。輕量級。兼容性。如何下載和使用字體圖標。知識點2-文本外觀屬性教師通過PPT結合實際操作的方式講解文本外觀屬性。color屬性。letter-spacing屬性。line-height屬性。text-transform屬性。text-decoration屬性。text-shadow屬性。text-align屬性。text-indent屬性。text-overflow屬性。white-space屬性。word-break屬性。word-spacing屬性。知識點3-CSS注釋教師通過PPT結合實際操作的方式講解CSS注釋。CSS注釋的作用。CSS注釋的示例代碼。CSS注釋的快捷鍵。知識點4-項目2-1文章詳情頁面教師通過PPT結合實際操作的方式講解項目2-1文章詳情頁面。創建項目目錄，復制iconfont文件夾。編寫古詩區域的頁面結構并引入iconfont.css文件。編寫古詩區域的樣式。編寫古詩賞析區域的頁面結構。編寫古詩賞析區域的樣式。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第三課時（復合選擇器、偽類選擇器、偽元素選擇器、CSS的三大特性）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課復合選擇器由兩個或多個基礎選擇器組合而成，用于選擇具有特定關系的元素；偽類選擇器可以根據元素的特定狀態或位置來選擇元素；偽元素選擇器用于在特定元素中插人新的內容或樣式；合理利用CSS三大特性可以有效地簡化代碼結構，避免冗余。本節課將對復合選擇器、偽類選擇器、偽元素選擇器、CSS的三大特性進行講解。三、新課講解知識點1-復合選擇器教師通過PPT結合實際操作的方式講解復合選擇器。后代選擇器。子代選擇器。并集選擇器。交集選擇器。知識點2-偽類選擇器教師通過PPT結合實際操作的方式講解偽類選擇器。偽類選擇器的作用。常用的偽類選擇器。演示如何使用:link、:hover、:active偽類選擇器。知識點3-偽元素選擇器教師通過PPT結合實際操作的方式講解偽元素選擇器。::before選擇器。::after選擇器。知識點4-CSS的三大特性教師通過PPT結合實際操作的方式講解CSS的三大特性。層疊性。繼承性。CSS優先級。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第四課時（列表樣式屬性、CSS標準盒模型、邊框屬性、內邊距屬性、外邊距屬性）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過承上啟下的方式導入新課在上節課中講解了一些CSS的常用樣式，本節課將繼續講解CSS的常用樣式，包括列表樣式屬性、CSS標準盒模型、邊框屬性、內邊距屬性以及外邊距屬性。三、新課講解知識點1-列表樣式屬性教師通過PPT結合實際操作的方式講解列表樣式屬性。列表樣式屬性的作用。常用的列表樣式屬性。list-style-type屬性的常用屬性值。演示如何使用列表樣式屬性。知識點2-CSS標準盒模型教師通過PPT的方式講解CSS標準盒模型。CSS標準盒模型的概念。CSS標準盒模型的各個組成部分。content。padding。border。margin。知識點3-邊框屬性教師通過PPT結合實際操作的方式講解邊框屬性。border-style屬性。border-width屬性。border-color屬性。border屬性。border-radius屬性。border-image屬性。知識點4-內邊距屬性教師通過PPT結合實際操作的方式講解內邊距屬性。內邊距屬性的作用。padding屬性的語法格式。4個方向的內邊距的設置順序。設置元素在某個方向上的內邊距。通過示例代碼演示如何使用padding屬性。知識點5-外邊距屬性教師通過PPT結合實際操作的方式講解外邊距屬性。外邊距屬性的作用。margin屬性的語法格式。4個方向的外邊距的設置順序。設置元素在某個方向上的外邊距。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第五課時（盒子的寬度與高度、box-sizing屬性、display屬性、項目2-2下拉菜單頁面）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在使用CSS標準盒模型時，盒子（或元素）的寬度和高度按特定規則來計算。box-sizing屬性的作用是告訴瀏覽器如何計算元素的總寬度和總高度。使用display屬性可以更改元素的默認顯示方式。本節課將對盒子的寬度與高度、box-sizing屬性、display屬性、項目2-2下拉菜單頁面進行講解。三、新課講解知識點1-盒子的寬度與高度教師通過PPT的方式講解盒子的寬度與高度。盒子的寬度與高度的計算規則。演示如何設置盒子的寬度和高度。知識點2-box-sizing屬性教師通過PPT的方式講解box-sizing屬性。box-sizing屬性的作用。box-sizing屬性常用的屬性值及其含義。知識點3-display屬性教師通過PPT的方式講解display屬性。display屬性的作用。display屬性常用的屬性值及其含義。知識點4-項目2-2下拉菜單頁面教師通過PPT結合實際操作的方式講解項目2-2下拉菜單頁面。編寫下拉菜單頁面的結構。編寫下拉菜單的樣式。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第六課時（背景屬性、漸變、object-fit屬性）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在CSS中，通過使用背景屬性，開發者可以輕松地為元素設置合適的背景。漸變可以實現兩種或多種顏色間的流暢過渡，常用于設置元素背景，從而提升視覺的層次感和吸引力。object-fit屬性用于設置元素內容如何適應其所處容器的尺寸。本節課將對背景屬性、漸變、object-fit屬性進行講解。三、新課講解知識點1-背景屬性教師通過PPT結合實際操作的方式講解背景屬性。background-color屬性。background-image屬性。background-repeat屬性。background-position屬性。background-size屬性。background屬性。知識點2-漸變教師通過PPT結合實際操作的方式講解漸變。線性漸變。徑向漸變。重復漸變。知識點3-object-fit屬性教師通過PPT結合實際操作的方式講解object-fit屬性。object-fit屬性的作用。object-fit屬性常用的屬性值及其含義。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第七課時（浮動布局、清除浮動、語義化標簽、彈性盒布局）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課浮動布局是一種通過CSS中的浮動屬性實現元素水平排列的網頁布局方式。HTML5還定義了一種新的語義化標簽來描述元素的內容，讓語義化標簽代替大量無意義的<div>標簽。彈性盒布局又稱為Flex布局，是一種增加盒模型靈活性的布局方式，可以使元素的排列和對齊更加靈活。本節課將對浮動布局、清除浮動、語義化標簽、彈性盒布局進行講解。三、新課講解知識點1-浮動布局教師通過PPT結合實際操作的方式講解浮動布局。浮動布局的作用。float屬性的語法格式。使用float屬性時需要注意的兩點。演示如何使用浮動布局。知識點2-清除浮動教師通過PPT結合實際操作的方式講解清除浮動。使用clear屬性。額外標簽法。偽元素法。使用overflow屬性。知識點3-語義化標簽教師通過PPT的方式講解語義化標簽。語義化標簽的作用。HTML5中常用的語義化標簽。使用DIV+CSS布局與使用語義化標簽布局的示例效果。知識點4-彈性盒布局教師通過PPT結合實際操作的方式講解彈性盒布局。彈性盒布局的概念和作用。使用彈性盒布局的示例代碼。Flex容器的常用屬性。flex-direction屬性。flex-wrap屬性。justify-content屬性。align-items屬性。Flex元素的常用屬性。order屬性。flex-grow屬性。flex-shrink屬性。flex-basis屬性。flex屬性。演示如何使用彈性盒布局。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第八課時（元素的定位、層疊等級屬性、陰影屬性、項目2-3商城首頁）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在網頁開發中，如果需要將某個元素放置在網頁中的特定位置，就需要對元素進行精確定位。當一個父元素中的多個子元素同時被定位時，定位元素之間有可能會堆疊。層疊等級屬性用于調整具有定位屬性的元素的堆疊順序。陰影能夠為元素增加立體感，尤其是對于許多平面的元素。本節課將對元素的定位、層疊等級屬性、陰影屬性、項目2-3商城首頁進行講解。三、新課講解知識點1-元素的定位教師通過PPT結合實際操作的方式講解元素的定位。定位模式。邊偏移屬性。演示如何使用黏性定位。知識點2-層疊等級屬性教師通過PPT的方式講解層疊等級屬性。z-index屬性的作用。z-index屬性的取值。z-index屬性的注意點。知識點3-陰影屬性教師通過PPT結合實際操作的方式講解層陰影屬性。陰影屬性的作用。box-shadow屬性的語法格式。box-shadow屬性包含的6個參數。演示如何使用box-shadow屬性。知識點4-項目2-3商城首頁教師通過PPT結合實際操作的方式講解項目2-3商城首頁。創建用于保存商城首頁的樣式代碼的文件。編寫商城首頁的頁面結構并引入樣式文件。編寫導航欄的樣式。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第九、十課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習考察學生對知識點的掌握情況。上機：（考察知識點為：項目2-1文章詳情頁面、項目2-2下拉菜單頁面、項目2-3商城首頁）形式：單獨完成題目：運用本章所學的知識，獨立完成項目2-1、項目2-2和項目2-3。教學后記《響應式Web開發項目教程（HTML5+CSS3+Bootstrap）（第3版）》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第3章表格和表單計劃課時4課時教學引入在網頁中，我們常常使用表格來清晰地展示各種信息。表格的應用場景非常廣泛，如展示統計數據、產品比較情況以及價格列表等。此外，我們還經常使用表單來收集用戶反饋的信息。表單適用于多種場景，如用戶注冊、用戶登錄、聯系我們以及調查問卷填寫等。通過合理運用表格和表單，我們可以提高網頁的用戶體驗和交互性，使得網頁內容更加豐富、有序且易于操作。本章將詳細講解如何使用表格和表單。教學目標使學生掌握表格標簽的使用方法，能夠使用表格標簽創建表格使學生掌握CSS控制表格樣式，能夠使用CSS設置表格的樣式使學生掌握表格標簽屬性的使用方法，能夠使用colspan和rowspan屬性來合并單元格使學生掌握表單標簽的使用方法，能夠使用表單標簽創建表單使學生掌握<form>標簽的使用方法，能夠使用<form>標簽創建表單使學生掌握<input>標簽的使用方法，能夠定義不同的表單控件使學生掌握<label>標簽的使用方法，能夠定義表單控件的標簽文本使學生掌握<textarea>標簽的使用方法，能夠定義多行文本輸入框使學生掌握<select>、<optgroup>、<option>標簽的使用方法，能夠定義下拉菜單使學生掌握圖書列表頁面的制作方法，能夠完成圖書列表頁面的開發使學生掌握安全教育活動調查問卷頁面的制作方法，能夠完成安全教育活動調查問卷頁面的開發教學重點表格標簽<input>標簽<textarea>標簽<select>、<optgroup>、<option>標簽教學難點表格標簽<input>標簽<select>、<optgroup>、<option>標簽教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（表格標簽、CSS控制表格樣式、表格標簽屬性、項目3-1圖書列表頁面）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課網頁中的表格由一系列單元格組成，每個單元格用于展示一項數據。在HTML中，可以使用表格標簽完成表格的創建。本節課將對表格標簽、CSS控制表格樣式、表格標簽屬性、項目3-1圖書列表頁面進行講解。三、新課講解知識點1-表格標簽教師通過PPT結合實際操作的方式講解表格標簽。表格標簽的作用。常用的表格標簽。創建表格結構的完整語法格式。知識點2-CSS控制表格樣式教師通過PPT結合實際操作的方式講解CSS控制表格樣式。border屬性。border-collapse屬性。padding屬性。width屬性和height屬性。知識點3-表格標簽屬性教師通過PPT結合實際操作的方式講解表格標簽屬性。colspan屬性。rowspan屬性。知識點4-項目3-1圖書列表頁面教師通過PPT結合實際操作的方式講解項目3-1圖書列表頁面。創建項目目錄。編寫圖書列頁面的結構。編寫頁面樣式。訪問測試。四、歸納總結教師回顧本節課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業教師通過高校教輔平臺（）布置本節課的作業以及下節課的預習內容。第二課時（表單標簽、<form>標簽、<input>標簽、<label>標簽）一、復習鞏固教師通過上節課作業的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課表單主要用于收集用戶輸入的信息。<form>標簽用于創建表單，可以包含多種表單元素來接收用戶的輸入；<label>標簽用于定義表單控件的標簽文本，