（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目一-1電子教案

1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目一-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目一-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目一-1電子教案教學(xué)課題項(xiàng)目1 HTML文檔結(jié)構(gòu)1.1項(xiàng)目描述、1.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握HTML 5文件的基本結(jié)構(gòu)；2.掌握HTML 5基本標(biāo)簽；3.掌握Sublime編輯器的使用；4.了解HTML5語法的變化；5.了解Chrome瀏覽器中的開發(fā)者工具。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析網(wǎng)

2、絡(luò)已經(jīng)成為人們學(xué)習(xí)、工作和娛樂中不可缺少的一部分，網(wǎng)頁設(shè)計(jì)也成為學(xué)習(xí)計(jì)算機(jī)知識(shí)的重要內(nèi)容之一。本項(xiàng)目來學(xué)習(xí)HTML基本概念和編寫方法及瀏覽HTML文件的方法，使讀者初步了解HTML。教學(xué)重點(diǎn)1.HTML 5文件的基本結(jié)構(gòu)；2.HTML 5基本標(biāo)簽；3.Sublime編輯器的使用。教學(xué)難點(diǎn)1.HTML 5文件的基本結(jié)構(gòu)；2.HTML 5基本標(biāo)簽；3.Sublime編輯器的使用技巧。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)簡(jiǎn)單的網(wǎng)頁頁面，并通過網(wǎng)頁頁面的源代碼，導(dǎo)入HTML文件的基本結(jié)構(gòu)。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)

3、一、HTML5文件基本結(jié)構(gòu)一個(gè)HTML 5文檔中，必須包含標(biāo)簽，并且放在一個(gè)HTML 5文檔中的開始和結(jié)束位置。之間通常包含兩個(gè)部分，分別為和，head標(biāo)簽包含html頭部信息，例如文檔標(biāo)題、樣式定義等。body包含文檔主體部分，即網(wǎng)頁內(nèi)容。二、HTML5基本標(biāo)簽1.文檔類型說明2.HTML標(biāo)簽 3.head標(biāo)簽（1）標(biāo)簽中的標(biāo)簽HTML頁面的標(biāo)題一般是用來說明頁面用途的，它顯示在瀏覽器的標(biāo)題欄中，在HTML文檔中，標(biāo)題信息設(shè)置在與之間。標(biāo)題標(biāo)簽以開始，以結(jié)束。語法格式如下：（2）標(biāo)簽中的標(biāo)簽標(biāo)簽是標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽。標(biāo)簽提供的信息不顯示在頁面中，一般用來定義頁面的關(guān)鍵字、頁面的描述等，以

4、方便搜索引擎來搜索到頁面的信息。（3）標(biāo)簽中的標(biāo)簽標(biāo)簽用于外部文件的鏈接，一般用于鏈接外部CSS樣式表文件和JS文件。【例1-1】創(chuàng)建一個(gè)link鏈接外部CSS文件的實(shí)例。新建CSS文件夾（此文件夾與1-1.html文件在同一目錄中），在CSS文件夾中創(chuàng)建style.css文件。在chrome瀏覽器中預(yù)覽，效果如圖所示。（4）標(biāo)簽中的標(biāo)簽 標(biāo)簽用于定義客戶端頁面腳本。（5）標(biāo)簽中的標(biāo)簽標(biāo)簽用于定義元素的CSS樣式?！纠?-2】將例1-1用內(nèi)嵌樣式表示。4.body標(biāo)簽網(wǎng)頁所要顯示的內(nèi)容都要放在body標(biāo)簽內(nèi)，它是HTML文件的重點(diǎn)，標(biāo)簽的作用就是定義了網(wǎng)頁主題內(nèi)容的開始和結(jié)束。5.頁面注釋標(biāo)簽

5、注釋是在HTML代碼中插入描述性的文本，用來解釋該代碼或提示其他信息。三、 Sublime編輯器的使用1Sublime Text編輯器的安裝2Sublime Text 3下Emmet的使用技巧四、 HTML 5語法的變化五、 Chrome瀏覽器的開發(fā)者工具1如何打開開發(fā)者工具2開發(fā)者工具簡(jiǎn)介教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識(shí)歸納一、HTML 5基本結(jié)構(gòu)如圖所示。二、 HTML 5基本標(biāo)簽及說明如下表所示。三、 Sublime編輯器的使用技巧教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.所有的HTML標(biāo)簽都有固定的格式，必須由_符號(hào)括起來。A () B C /*/ D /2.下列_標(biāo)簽用于顯示網(wǎng)頁標(biāo)題。A B C D 3.下列_標(biāo)簽用于顯示網(wǎng)頁主體內(nèi)容。A B C D 二、簡(jiǎn)答題1.簡(jiǎn)述HTML5文件的基本結(jié)構(gòu)。2.簡(jiǎn)述Su