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

1、教學(xué)課題工程1 HTML文檔結(jié)構(gòu)一1. 1工程描述、1. 2知識準(zhǔn)備授課班級授課時(shí)間教學(xué)目標(biāo)知識目標(biāo)1.掌握HTML 5文件的基本結(jié)構(gòu)；2,掌握HTML 5基本標(biāo)簽；掌握Sublime編輯器的使用；了解HTML5語法的變化；了解Chrome瀏覽器中的開發(fā)者工具。能力目標(biāo).培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2 ,培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析網(wǎng)絡(luò)已經(jīng)成為人們學(xué)習(xí)、工作和娛樂中不可缺少的一局部，網(wǎng)頁設(shè) 計(jì)也成為學(xué)習(xí)計(jì)算機(jī)知識的重要內(nèi)容之一。本工程來學(xué)習(xí)HTML基本概念和編寫方法及瀏覽HTM

2、L文件的方法， 使讀者初步了解HTML。教學(xué)重點(diǎn)HTML 5文件的基本結(jié)構(gòu)；HTML 5基本標(biāo)簽;Sublime編輯器的使用。教學(xué)難點(diǎn)HTML 5文件的基本結(jié)構(gòu)；HTML 5基本標(biāo)簽；Sublime編輯器的使用技巧。教學(xué)方法工程教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動新課導(dǎo)入給學(xué)生展示一個(gè)簡單的網(wǎng)頁頁面，并通過網(wǎng)頁頁面的源 代碼，導(dǎo)入HTML文件的基本結(jié)構(gòu)。教師提出問題，學(xué) 生可分組討論，協(xié)作探 究。技能學(xué)習(xí)一、HTML5文件基本結(jié)農(nóng)一個(gè)HTML 5文檔中，4 且放在一個(gè)HTML 5文檔中E 之間通 n/l 部信息，例如文檔標(biāo)題、樣3 分，即網(wǎng)頁內(nèi)容。(DOCTYP

3、E HTML文檔聲明HTML文檔的開始標(biāo)簽 HTML的頭部信息開始標(biāo)簽HTML的頭部信息、結(jié)束標(biāo)簽 HTML的文檔主體開始標(biāo)簽HTML的文檔主體結(jié)束標(biāo)簽HTML文檔的結(jié)束標(biāo)簽g3 須包含 v/html KJ開始和結(jié)束位置。常包含兩個(gè)局部, body，head 標(biāo)簽包 t定義等。body包含）meta charsetx UTF-S 網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容標(biāo)簽，并分別為 含html頭 工檔主體部教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動， 共同完成操作任務(wù)，借 此查看教學(xué)效果。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動，共同完成操作

4、任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。二、HTML5基本標(biāo)簽1.文檔類型說明 !DOCTYPE html2.HTML標(biāo)簽html3.head標(biāo)簽標(biāo)簽中的title標(biāo)簽HTML頁面的標(biāo)題一般是用來說明頁面用途的，它顯示在瀏覽器的標(biāo)題欄中，在HTML文檔中，標(biāo)題信息設(shè)置在 vhead與v/head之間。標(biāo)題標(biāo)簽以title,開始，以/title, 結(jié)束。語法格式如下：/titlevhead標(biāo)簽中的meta標(biāo)簽meta標(biāo)簽是head標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽。 vmeta標(biāo)簽提供的信息不顯示在頁面中，一

5、般用來定義頁面 的關(guān)鍵字、頁面的描述等，以方便搜索引擎來搜索到頁面的 信息。vhead標(biāo)簽中的vlink標(biāo)簽v|ink標(biāo)簽用于外部文件的鏈接，一般用于鏈接外部 CSS樣式表文件和JS文件。link rel=HstylesheetH type=Htext/cssH href=theme.css” /W 1-11創(chuàng)立一個(gè)link鏈接外部CSS文件的實(shí)例。新建CSS文件夾(此文件夾與1-1.html文件在同一目 錄中)，在CSS文件夾中創(chuàng)立style.css文件。在chrome瀏覽器中預(yù)覽，效果如下圖。vhead標(biāo)簽中的script,標(biāo)簽標(biāo)簽用于定義客戶端頁面腳本。標(biāo)簽中的style)標(biāo)簽style

6、標(biāo)簽用于定義元素的CSS樣式。【例1-2將例1-1用內(nèi)嵌樣式表示。.body標(biāo)簽教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動， 共同完成操作任務(wù)，借 此查看教學(xué)效果。網(wǎng)頁所要顯示的內(nèi)容都要放在body標(biāo)簽內(nèi)，它是HTML 文件的重點(diǎn)，標(biāo)簽的作用就是定義了網(wǎng)頁主題內(nèi)容的 開始和結(jié)束。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動， 共同完成操作任務(wù)，借 此查看教學(xué)效果。.頁面注釋標(biāo)簽注釋是在HTML代碼中插入描述性的文本，用來解釋該 代碼或提示其他信息。知識歸納K 頭部局部ITF-8H/title網(wǎng)頁知識歸納K 頭部局部ITF-8

7、H/title網(wǎng)頁meta charset=HDocument網(wǎng)頁標(biāo)題hello world!網(wǎng)頁內(nèi)容教師講授，學(xué)生歸 納總結(jié)，并作適當(dāng)?shù)墓P 記。二、HTML5基本標(biāo)簽及說明如下表所示。標(biāo)簽y內(nèi)部標(biāo)簽一說明一HTML*整個(gè)網(wǎng)頁是從這里開始，然后到 /html 冷束 2head標(biāo)簽代表頁面 的“頭%定義些 特殊內(nèi)容，這些內(nèi)容 都是在瀏覽器不可 見的head”定義網(wǎng)頁的標(biāo)題一定義網(wǎng)頁的基本信息（供搜索引擎，style定義CSS樣式一(link4捱接外部CSS文件或腳本文件。script”定義腳本語言定義頁面所有遭接的基礎(chǔ)定位（用得很少）*?代表頁面的“身”，定義網(wǎng)頁展示內(nèi)容，這些內(nèi)容都是在瀏覽器可

8、 見的。：子元素符號，表示嵌套的元素；+ ：同級標(biāo)簽符號；%可以使該符號前的標(biāo)簽提升一行。代碼組合使用標(biāo)簽的嵌套和括號可以快速生成代碼組合隱式標(biāo)簽進(jìn)行快速輸入時(shí)，根據(jù)父標(biāo)簽進(jìn)行判定從而得到不同的代碼。 隱式標(biāo)簽名稱為：li:用于3和ol中；tr：用于 table、tbody、thead 和 tfoot 中夕，td：用于tr中；一option ：用于 select 和 optgroup 中一定義多個(gè)元素。使用符號來定義多個(gè)元素定義多個(gè)帶屬性 的萬者U使用符號來指定編號，使用符號來指定反向編號，課后作業(yè)一、選擇題.所有的HTML標(biāo)簽都有固定的格式，必須由 符號括起來。A （）BC/* */D/,以下標(biāo)簽用于顯示網(wǎng)頁標(biāo)題。ABCD,以下標(biāo)簽用于顯