（中職）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)目2 網(wǎng)頁中的文本的排版2.1項(xiàng)目描述、2.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握在網(wǎng)頁中添加各種文本的方法；2.掌握文本排版常用的標(biāo)簽。能力目標(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é)情分析通過項(xiàng)目1的學(xué)習(xí)，已經(jīng)掌握了HTML基本概念和編寫方法及瀏覽HTML文件的方法，初步了解了HTML。網(wǎng)頁的外觀

2、是否美觀，很大程度上取決于其排版。在頁面中出現(xiàn)大段的文字，通常采用分段進(jìn)行規(guī)劃，對(duì)換行也有極其嚴(yán)格的劃分。本項(xiàng)目從添加文字、圖片、列表等細(xì)節(jié)設(shè)置開始，讓大家學(xué)習(xí)后能利用標(biāo)簽自如地處理大段文字的排版和簡(jiǎn)單的圖文混排。教學(xué)重點(diǎn)1.網(wǎng)頁中各種文本的添加；2.文本格式化標(biāo)簽；3.文字的排版標(biāo)簽。教學(xué)難點(diǎn)1.添加特殊字符文本；2.文本格式化標(biāo)簽；3.文字的排版標(biāo)簽。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁頁面，通過頁面中文本及文本格式，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)一、添加文本1.添加普通文本兩種方法，

3、一是在需要的位置直接輸入漢字或字符，二是使用復(fù)制、粘貼的方法。2.添加特殊字符文本在HTML代碼中輸入該特殊字符相對(duì)應(yīng)的代碼。這些特殊字符相對(duì)應(yīng)的代碼都是以“&”開頭，以“;”（注意是英文分號(hào)）結(jié)束的。如不斷行的空格用“”來表示。特殊符號(hào)名稱HTML代碼雙引號(hào)（英文）左單引號(hào)右單引號(hào)乘號(hào)除號(hào)小于號(hào)大于號(hào)&與符號(hào)&長(zhǎng)破折號(hào)|豎線|分節(jié)符版權(quán)符注冊(cè)商標(biāo)商標(biāo)歐元英鎊日元度對(duì)于部分鍵盤上沒有的字符，可以借助中文輸入法的軟鍵盤。3.文本格式化標(biāo)簽粗體標(biāo)簽、斜體標(biāo)簽、上標(biāo)標(biāo)簽和下標(biāo)標(biāo)簽刪除線標(biāo)簽和下劃線標(biāo)簽【例2-1】文本格式化標(biāo)簽實(shí)例，代碼如下所示。1 2 3 4 5 文本格式化標(biāo)簽標(biāo)簽實(shí)例6 7 8

4、粗體標(biāo)簽9 使用<b>標(biāo)簽的粗體文本10 使用<strong>標(biāo)簽的粗體文本11 12 斜體標(biāo)簽13 使用<i>標(biāo)簽的斜體文本14 使用<em>標(biāo)簽的斜體文本15 16 上標(biāo)、下標(biāo)標(biāo)簽17 使用<sup>標(biāo)簽的上標(biāo)文本18 使用<sub>標(biāo)簽的下標(biāo)文本19 20 刪除線標(biāo)簽21 使用<s>標(biāo)簽的刪除線標(biāo)簽22 23 下劃線標(biāo)簽24 使用<u>標(biāo)簽的下劃線標(biāo)簽25 26 在瀏覽器中預(yù)覽效果如圖所示。二、文本排版1.換行標(biāo)簽換行標(biāo)簽是一個(gè)單標(biāo)簽，作用是將文字在一個(gè)段內(nèi)強(qiáng)制換行。一個(gè)標(biāo)簽代表一個(gè)換行，連續(xù)的多個(gè)標(biāo)簽可以實(shí)現(xiàn)多次換行。2.

5、段落標(biāo)簽段落標(biāo)簽是雙標(biāo)簽，即，在開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容形成一個(gè)段落。段落標(biāo)簽會(huì)自動(dòng)換行，并且段落與段落之間有一定的空隙。3.標(biāo)題標(biāo)簽各種級(jí)別的標(biāo)題由元素來定義，其中標(biāo)題的重要性最高，標(biāo)題最低。一般一個(gè)頁面只能有一個(gè)，而可以有多個(gè)?！纠?-2】標(biāo)題標(biāo)簽實(shí)例，代碼如下所示（示例文件2-2.html）。1 2 3 4 5 標(biāo)題標(biāo)簽實(shí)例6 7 8 山不在高，有仙則名9 水不在深，有龍則靈10 斯是陋室，惟吾德馨11 苔痕上階綠，草色入簾青12 談笑有鴻儒，往來無白丁13 可以調(diào)素琴，閱金經(jīng)14 15 教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此

6、查看教學(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í)歸納本節(jié)課學(xué)習(xí)了在網(wǎng)頁中添加文本標(biāo)簽元素內(nèi)容，掌握了、等標(biāo)簽的使用方法。標(biāo)簽格式說明標(biāo)題文字（n為1,2,3,4,5,6）標(biāo)題段落內(nèi)容段落換行標(biāo)記加粗的內(nèi)容加粗標(biāo)記加粗的內(nèi)容加粗標(biāo)記傾斜的內(nèi)容斜體標(biāo)記傾斜的內(nèi)容斜體上標(biāo)文字上標(biāo)下標(biāo)文字下標(biāo)刪除線標(biāo)記內(nèi)容刪除線下劃線標(biāo)記內(nèi)容下劃線教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.下列_是換行標(biāo)簽。A B C D 2.HTML文件的源代碼中含有“123”，其作用是_。A 將123以斜體顯示 B 在123前劃一條水平線 C 將123與其前后內(nèi)容分成不同段 D將123以粗體顯示3.如果想在網(wǎng)頁添加上標(biāo)字，應(yīng)該使用_標(biāo)簽。A B C D 4.如果想在網(wǎng)頁