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