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

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