HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）教案-教學(xué)設(shè)計(jì) 第1章 HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)概述

《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》教學(xué)設(shè)計(jì)課程名稱：授課年級(jí)：授課學(xué)期：教師姓名：年月日課題名稱第1章HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)概述計(jì)劃課時(shí)2課時(shí)教學(xué)引入近年來，HTML5和CSS3一直是互聯(lián)網(wǎng)技術(shù)中備受矚目的話題。在開始學(xué)習(xí)HTML5和CSS3之前，了解一些與網(wǎng)頁(yè)相關(guān)的基礎(chǔ)知識(shí)是非常必要的，這有助于初學(xué)者厘清思路，快速進(jìn)入后續(xù)章節(jié)的學(xué)習(xí)。本章將詳細(xì)介紹網(wǎng)頁(yè)的相關(guān)內(nèi)容，包括網(wǎng)頁(yè)概述、網(wǎng)頁(yè)制作入門以及VisualStudioCode網(wǎng)頁(yè)代碼編輯工具。通過學(xué)習(xí)這些內(nèi)容，初學(xué)者將能夠建立堅(jiān)實(shí)的基礎(chǔ)，為后續(xù)的HTML5和CSS3學(xué)習(xí)做好充分準(zhǔn)備。教學(xué)目標(biāo)使學(xué)生了解網(wǎng)頁(yè)，能夠闡述網(wǎng)頁(yè)的作用，并使用瀏覽器查看網(wǎng)頁(yè)代碼使學(xué)生了解網(wǎng)頁(yè)名詞，能夠闡述網(wǎng)頁(yè)相關(guān)名詞的含義使學(xué)生熟悉Web標(biāo)準(zhǔn)，能夠歸納Web標(biāo)準(zhǔn)的構(gòu)成使學(xué)生了解HTML，能夠闡述HTML的作用使學(xué)生了解CSS，能夠闡述CSS的作用使學(xué)生了解JavaScript，能夠闡述JavaScript的作用使學(xué)生了解瀏覽器，能夠列舉當(dāng)前常見的瀏覽器，并介紹它們各自所使用的內(nèi)核使學(xué)生掌握VisualStudioCode的用法，能夠使用該工具編寫網(wǎng)頁(yè)代碼教學(xué)重點(diǎn)VisualStudioCode的使用教學(xué)難點(diǎn)無教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程第一課時(shí)（認(rèn)識(shí)網(wǎng)頁(yè)、網(wǎng)頁(yè)名詞解釋、Web標(biāo)準(zhǔn)、HTML、CSS、JavaScript、網(wǎng)頁(yè)的展示平臺(tái)——瀏覽器）一、通過直接導(dǎo)入的方式講解新課上網(wǎng)時(shí)瀏覽新聞、查詢信息、觀看視頻等都是在瀏覽網(wǎng)頁(yè)。網(wǎng)頁(yè)可以被看作是承載各種內(nèi)容的容器，所有可視化的內(nèi)容都可以通過網(wǎng)頁(yè)展示給用戶。那么HTML5和網(wǎng)頁(yè)有什么關(guān)系？網(wǎng)頁(yè)是由什么構(gòu)成的？網(wǎng)頁(yè)有哪些標(biāo)準(zhǔn)？本節(jié)課將詳細(xì)介紹網(wǎng)頁(yè)的基礎(chǔ)內(nèi)容。二、新課講解知識(shí)點(diǎn)1-認(rèn)識(shí)網(wǎng)頁(yè)教師通過展示PPT的方式講解認(rèn)識(shí)網(wǎng)頁(yè)。通過展示網(wǎng)頁(yè)并查看源代碼，了解網(wǎng)頁(yè)的組成介紹網(wǎng)頁(yè)的分類知識(shí)點(diǎn)2-網(wǎng)頁(yè)名詞解釋教師通過展示PPT的方式講解網(wǎng)頁(yè)名詞。InternetWWWURLDNSHTTPHTTPSWebW3C組織知識(shí)點(diǎn)3-Web標(biāo)準(zhǔn)教師通過展示PPT的方式講解Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)的出現(xiàn)Web標(biāo)準(zhǔn)中的結(jié)構(gòu)、表現(xiàn)和行為標(biāo)準(zhǔn)知識(shí)點(diǎn)4-HTML教師通過展示PPT的方式講解什么是HTML。HTML的概念HTML的主要優(yōu)勢(shì)知識(shí)點(diǎn)5-CSS教師通過展示PPT的方式講解什么是CSS。CSS的概念展示CSS的效果CSS的發(fā)展歷史知識(shí)點(diǎn)6-JavaScript教師通過展示PPT的方式講解什么是JavaScript。JavaScript的概念JavaScript的實(shí)際應(yīng)用知識(shí)點(diǎn)7-網(wǎng)頁(yè)的展示平臺(tái)——瀏覽器教師通過展示PPT的方式講解網(wǎng)頁(yè)的展示平臺(tái)——瀏覽器。瀏覽器的概念常用的瀏覽器三、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過提問的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。四、布置作業(yè)教師通過高校教輔平臺(tái)（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第二課時(shí)（VisualStudioCode的安裝和設(shè)置、VisualStudioCode的使用、階段案例——?jiǎng)?chuàng)建第一個(gè)網(wǎng)頁(yè)）復(fù)習(xí)鞏固教師通過提問等方式了解學(xué)生的學(xué)習(xí)情況，對(duì)吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。通過直接導(dǎo)入的方式導(dǎo)入新課為了便于編輯網(wǎng)頁(yè)代碼，網(wǎng)頁(yè)制作人員通常會(huì)使用一些便捷的代碼編輯工具。例如EditPlus、HBuilder、Sublime、Dreamweaver、VisualStudioCode等。其中，VisualStudioCode（簡(jiǎn)稱VSCode）是一款輕量且開源的代碼編輯器，深受網(wǎng)頁(yè)制作人員的喜愛。本節(jié)課將詳細(xì)介紹VisualStudioCode的安裝、設(shè)置和使用技巧。新課講解知識(shí)點(diǎn)1-VisualStudioCode的安裝和設(shè)置教師通過實(shí)操的方式演示VisualStudioCode的安裝和配置。下載安裝VisualStudioCodeVisualStudioCode的初始化配置知識(shí)點(diǎn)2-VisualStudioCode的使用教師通過實(shí)操的方式演示VisualStudioCode的使用。創(chuàng)建文件夾和文件保存和操作文件編寫代碼知識(shí)點(diǎn)3-階段案例——?jiǎng)?chuàng)建第一個(gè)網(wǎng)頁(yè)教師通過實(shí)操的方式創(chuàng)建第一個(gè)網(wǎng)