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

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE6《響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月課題名稱第1章HTML頁面結(jié)構(gòu)搭建計(jì)劃課時(shí)4課時(shí)教學(xué)引入隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，人們可以通過手機(jī)、平板電腦等移動(dòng)設(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用于增強(qiáng)網(wǎng)頁的交互性和動(dòng)態(tài)性。它們共同創(chuàng)建出多樣化且功能豐富的網(wǎng)頁，以滿足用戶的需求。本章將詳細(xì)講解如何使用HTML來構(gòu)建頁面結(jié)構(gòu)。教學(xué)目標(biāo)使學(xué)生熟悉HTML的概念，能夠說明HTML的作用和HTML5的優(yōu)勢(shì)使學(xué)生熟悉瀏覽器的概念，能夠說明瀏覽器的作用和Chrome瀏覽器的主要優(yōu)勢(shì)使學(xué)生掌握VisualStudioCode編輯器的使用方法，能夠使用VisualStudioCode編輯器進(jìn)行代碼開發(fā)使學(xué)生了解標(biāo)簽的概念，能夠說出標(biāo)簽的分類、標(biāo)簽的屬性和標(biāo)簽之間的關(guān)系使學(xué)生掌握頁面格式化標(biāo)簽的使用方法，能夠靈活運(yùn)用頁面格式化標(biāo)簽將文本呈現(xiàn)在網(wǎng)頁中使學(xué)生掌握文本格式化標(biāo)簽的使用方法，能夠靈活運(yùn)用文本格式化標(biāo)簽將文本以加粗、斜體、添加下劃線、添加刪除線等方式顯示使學(xué)生掌握?qǐng)D像標(biāo)簽的使用方法，能夠靈活運(yùn)用<img>標(biāo)簽定義圖像使學(xué)生熟悉HTML實(shí)體的概念，能夠歸納常用的HTML實(shí)體使學(xué)生掌握列表的使用方法，能夠定義無序列表、有序列表和定義列表使學(xué)生了解列表嵌套，能夠說出列表嵌套的方法使學(xué)生掌握超鏈接的使用方法，能夠靈活運(yùn)用<a>標(biāo)簽定義超鏈接使學(xué)生掌握容器標(biāo)簽的使用方法，能夠使用<div>標(biāo)簽劃分網(wǎng)頁的區(qū)域，使用<span>標(biāo)簽定義網(wǎng)頁中某些需要顯示為特殊樣式的文本使學(xué)生了解元素的概念，能夠說出HTML中常見的元素分類使學(xué)生掌握個(gè)人簡介頁面的制作方法，能夠完成個(gè)人簡介頁面的開發(fā)使學(xué)生掌握新聞頁面的制作方法，能夠完成新聞頁面的開發(fā)教學(xué)重點(diǎn)頁面格式化標(biāo)簽文本格式化標(biāo)簽圖像標(biāo)簽列表超鏈接容器標(biāo)簽教學(xué)難點(diǎn)圖像標(biāo)簽列表教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時(shí)（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)容。同時(shí)，HTML還支持使用屬性來進(jìn)一步定義標(biāo)簽的特性和行為。本節(jié)課將對(duì)HTML概述、瀏覽器、VisualStudioCode編輯器、標(biāo)簽概述、頁面格式化標(biāo)簽進(jìn)行講解。二、新課講解知識(shí)點(diǎn)1-HTML概述教師通過PPT的方式講解HTML概述。HTML的概念和作用。HTML的版本。HTML5的6個(gè)優(yōu)勢(shì)。更好的兼容性增加了語義化標(biāo)簽。支持視頻和音頻。支持Web存儲(chǔ)。支持Canvas繪圖。增強(qiáng)的表單控件。知識(shí)點(diǎn)2-瀏覽器教師通過PPT的方式講解瀏覽器。瀏覽器的用途和分類。Chrome瀏覽器的主要優(yōu)勢(shì)。不易崩潰。瀏覽速度快。安全性高?？缭O(shè)備同步。知識(shí)點(diǎn)3-VisualStudioCode編輯器教師通過PPT結(jié)合實(shí)際操作的方式講解VisualStudioCode編輯器。VisualStudioCode編輯器的概念。VisualStudioCode編輯器的特點(diǎn)。輕巧極速。功能強(qiáng)大。支持跨平臺(tái)。界面設(shè)計(jì)人性化。擴(kuò)展強(qiáng)大。多語言支持。下載和安裝VisualStudioCode編輯器。安裝中文語言擴(kuò)展。安裝LiveServer擴(kuò)展。VisualStudioCode編輯器的簡單使用。知識(shí)點(diǎn)4-標(biāo)簽概述教師通過PPT的方式講解標(biāo)簽概述。標(biāo)簽的分類。標(biāo)簽的屬性。標(biāo)簽之間的關(guān)系。知識(shí)點(diǎn)5-頁面格式化標(biāo)簽教師通過PPT結(jié)合實(shí)際操作的方式講解頁面格式化標(biāo)簽。標(biāo)題標(biāo)簽。段落標(biāo)簽。水平線標(biāo)簽。換行標(biāo)簽。三、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過測(cè)試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。四、布置作業(yè)教師通過高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第二課時(shí)（文本格式化標(biāo)簽、圖像標(biāo)簽、HTML實(shí)體、項(xiàng)目1-1個(gè)人簡介頁面）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課文本是網(wǎng)頁中最基礎(chǔ)的信息載體之一，用戶主要通過文本來了解網(wǎng)頁的內(nèi)容。HTML提供了文本格式化標(biāo)簽，用于修飾文本和突出重點(diǎn)；圖像不僅能夠豐富頁面的視覺效果，還能幫助用戶更好地理解和記憶頁面所呈現(xiàn)的信息；為了避免有些字符可能會(huì)被瀏覽器誤解并錯(cuò)誤地解析為代碼，開發(fā)者需要使用HTML實(shí)體來替代它們。本節(jié)課將對(duì)文本格式化標(biāo)簽、圖像標(biāo)簽、HTML實(shí)體、項(xiàng)目1-1個(gè)人簡介頁面進(jìn)行詳細(xì)講解。三、新課講解知識(shí)點(diǎn)1-文本格式化標(biāo)簽教師通過PPT結(jié)合實(shí)際操作的方式講解文本格式化標(biāo)簽。文本格式化標(biāo)簽的作用。常見的文本格式化標(biāo)簽。演示如何使用文本格式化標(biāo)簽。知識(shí)點(diǎn)2-圖像標(biāo)簽教師通過PPT結(jié)合實(shí)際操作的方式講解圖像標(biāo)簽。圖像標(biāo)簽的作用。<img>標(biāo)簽的常用屬性。相對(duì)路徑和絕對(duì)路徑。演示如何使用圖像標(biāo)簽。知識(shí)點(diǎn)3-HTML實(shí)體教師通過PPT結(jié)合實(shí)際操作的方式講解HTML實(shí)體。HTML實(shí)體的作用。常用的HTML實(shí)體。演示如何使用HTML實(shí)體。知識(shí)點(diǎn)4-項(xiàng)目1-1個(gè)人簡介頁面教師通過PPT結(jié)合實(shí)際操作的方式講解項(xiàng)目1-1個(gè)人簡介頁面。創(chuàng)建項(xiàng)目目錄。編寫個(gè)人簡介頁面的結(jié)構(gòu)。訪問測(cè)試。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過測(cè)試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺(tái)（）布置本節(jié)課的作業(yè)以及下節(jié)課的預(yù)習(xí)內(nèi)容。第三課時(shí)（列表、列表嵌套、超鏈接、容器標(biāo)簽、元素、項(xiàng)目1-2新聞頁面）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在網(wǎng)頁中，使用列表能夠?qū)⒋罅啃畔⒁越Y(jié)構(gòu)化的方式進(jìn)行排列，這樣不僅提高了網(wǎng)頁內(nèi)容的可讀性，還有助于讀者快速瀏覽和理解網(wǎng)頁中的內(nèi)容；超鏈接用于用戶在各個(gè)網(wǎng)頁之間快速導(dǎo)航；容器標(biāo)簽用于在網(wǎng)頁中劃分區(qū)域或顯示特殊樣式的文本；元素是指由開始標(biāo)簽和結(jié)束標(biāo)簽標(biāo)識(shí)的代碼塊。本節(jié)課將對(duì)列表、列表嵌套、超鏈接、容器標(biāo)簽、元素、項(xiàng)目1-2新聞頁面進(jìn)行講解。三、新課講解知識(shí)點(diǎn)1-列表教師通過PPT結(jié)合實(shí)際操作的方式講解列表。無序列表。有序列表。定義列表。知識(shí)點(diǎn)2-列表嵌套教師通過PPT結(jié)合實(shí)際操作的方式講解列表嵌套。列表嵌套的作用。演示如何實(shí)現(xiàn)列表嵌套。知識(shí)點(diǎn)3-超鏈接教師通過PPT結(jié)合實(shí)際操作的方式講解超鏈接。超鏈接的作用。<a>標(biāo)簽的常用屬性。演示如何使用<a>標(biāo)簽。知識(shí)點(diǎn)4-容器標(biāo)簽教師通過PPT結(jié)合實(shí)際操作的方式講解容器標(biāo)簽。<div>標(biāo)簽。<span>標(biāo)簽。知識(shí)點(diǎn)5-元素教師通過PPT的方式講解元素。塊元素。行內(nèi)元素。行內(nèi)塊元素。知識(shí)點(diǎn)6-項(xiàng)目1-2新聞頁面教師通過PPT結(jié)合實(shí)際操作的方式講解項(xiàng)目1-2新聞頁面。編寫新聞列表頁面的結(jié)構(gòu)。編寫列表項(xiàng)的新聞詳情頁面的結(jié)構(gòu)。訪問測(cè)試。四、歸納總結(jié)教師回顧本節(jié)課所講的知識(shí)，并通過測(cè)試題的方式檢測(cè)學(xué)生對(duì)JavaScript基本使用的掌握情況。五、布置作業(yè)教師通過高校教輔