（中職）Web前端設計基礎 項目一-1電子教案

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

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

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

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

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