響應(yīng)式Web開發(fā)項目教程（HTML5 CSS3 Bootstrap）（第3版）教案-教學(xué)設(shè)計 第1-3章 HTML頁面結(jié)構(gòu)構(gòu)建 -表格和表單

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