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

1、教學(xué)課題工程2網(wǎng)頁(yè)中的文本的排版一2.1工程描述、2.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo).掌握在網(wǎng)頁(yè)中添加各種文本的方法；.掌握文本排版常用的標(biāo)簽。能力目標(biāo).培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)L鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)； 2 .培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過(guò)工程1的學(xué)習(xí)，已經(jīng)掌握了 HTML基本概念和編寫(xiě)方法及瀏覽 HTML文件的方法，初步了解了 HTML。網(wǎng)頁(yè)的外觀是否美觀，很大程度上取決于其排版。在頁(yè)面中出現(xiàn)大 段的文字，通常采用分段進(jìn)行規(guī)劃，對(duì)換行也有極其嚴(yán)格的劃分。本項(xiàng) 目從添加文字、圖片、列表

2、等細(xì)節(jié)設(shè)置開(kāi)始，讓大家學(xué)習(xí)后能利用標(biāo)簽 自如地處理大段文字的排版和簡(jiǎn)單的圖文混排。教學(xué)重點(diǎn).網(wǎng)頁(yè)中各種文本的添加；.文本格式化標(biāo)簽；.文字的排版標(biāo)簽。教學(xué)難點(diǎn).添加特殊字符文本；.文本格式化標(biāo)簽；.文字的排版標(biāo)簽。教學(xué)方法工程教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁(yè)頁(yè)面，通過(guò)頁(yè)面中文本及文本格式, 導(dǎo)入本節(jié)課的內(nèi)容。教師提巾問(wèn)題，學(xué) 生可分組討論，協(xié)作探 究。技能學(xué)習(xí)一、添加文本.添加普通文本兩種方法，一是在需要的位置直接輸入漢字或字符:，二 是使用復(fù)制、粘貼的方法。.添加特殊字符文本在HTML代碼中輸入該特殊字符相對(duì)應(yīng)的代碼。這些特 殊字

3、符相對(duì)應(yīng)的代碼都是以開(kāi)頭，以（注意是英文 分號(hào)）結(jié)束的。如不斷行的空格用“”來(lái)表示。教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借 此查看教學(xué)效果。特殊符號(hào)名稱HTML代碼II雙引號(hào)（英文）左單引號(hào)右單引號(hào)X乘號(hào)鍵盤。*除號(hào)小于號(hào)大于號(hào)&與符號(hào)&長(zhǎng)破折號(hào)1豎線|分節(jié)符版權(quán)符注冊(cè)商標(biāo)TM商標(biāo)歐元英鎊日元O度對(duì)于局部鍵盤上沒(méi)有的字符，可以借助中文輸入法的軟教師操作演示，學(xué) 生觀看、實(shí)訓(xùn)。必要時(shí) 要求一個(gè)具有典型特 質(zhì)的學(xué)生與老師互動(dòng)， 共同完成操作任務(wù)，借此查看教學(xué)效果。3 .文本格式化標(biāo)簽粗體標(biāo)簽、斜體標(biāo)簽、上標(biāo)標(biāo)簽（sup和下標(biāo)標(biāo)簽刪除線

4、標(biāo)簽vs和下劃線標(biāo)簽vu【例2-1】文本格式化標(biāo)簽實(shí)例，代碼如下所示。文本格式化標(biāo)簽標(biāo)簽實(shí)例v/title粗體標(biāo)簽v/pvb使用標(biāo)簽的粗體文本v/b使用<strong>標(biāo)簽的粗體文本斜體標(biāo)簽vp使用<i>標(biāo)簽的斜體文本vp使用<em>標(biāo)簽的斜體文本上標(biāo)、下標(biāo)標(biāo)簽/p使用<sup>標(biāo)簽的上標(biāo)文本使用<sub>標(biāo)簽的下標(biāo)文本刪除線標(biāo)簽使用<s>標(biāo)簽的刪除線標(biāo)簽教師操作演示，學(xué)下劃線標(biāo)簽生觀看、實(shí)訓(xùn)。必要時(shí)使用<u>標(biāo)簽的vu下劃線標(biāo)簽v/u要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借在瀏覽器中預(yù)覽效果如下圖。此查看教學(xué)效果。V

5、0文本格式化標(biāo)簽標(biāo)筌實(shí)例C D file：/D:/Deino/2/2-l.html =粗體標(biāo)簽使用標(biāo)簽的粗體文本使角strong標(biāo)姿的粗體文本斜體標(biāo)簽使用標(biāo)簽的斜體文本使用代出標(biāo)簽的斜體文本上標(biāo)、下標(biāo)標(biāo)簽使用標(biāo)簽的上標(biāo)文本使用標(biāo)簽的下標(biāo)文本刪除線標(biāo)簽使用標(biāo)簽的劇除續(xù)標(biāo)簽下劃線標(biāo)簽使用心標(biāo)符的下劃線標(biāo)簽二、文本排版1 .換行標(biāo)簽vbr換行標(biāo)簽vbr是一個(gè)單標(biāo)簽，作用是將文字在一個(gè)段內(nèi) 強(qiáng)制換行。一個(gè)標(biāo)簽代表一個(gè)換行，連續(xù)的多個(gè)標(biāo)簽可 以實(shí)現(xiàn)屢次換行。.段落標(biāo)簽vp段落標(biāo)簽是雙標(biāo)簽，即vpv/p,在vp開(kāi)始標(biāo)簽和v/p 結(jié)束標(biāo)簽之間的內(nèi)容形成一個(gè)段落。段落標(biāo)簽會(huì)自動(dòng)換行， 并且段落與段落之間有一定

6、的空隙。.標(biāo)題標(biāo)簽vh1vh6各種級(jí)別的標(biāo)題由vh6元素來(lái)定義，其中vh1標(biāo) 題的重要性最高，標(biāo)題最低。一般一個(gè)頁(yè)面只能有一個(gè) ,而可以有多個(gè)?！纠?-2標(biāo)題標(biāo)簽實(shí)例，代碼如下所示（例如文件 2-2.html ）o1 title標(biāo)題標(biāo)簽實(shí)例v/titlevh1山不在高，有仙那么名v/h1vh2水不在深，有龍那么靈v/h2斯是陋室，惟吾德馨v/h3vh4苔痕上階綠，草色入簾青v/h4談笑有鴻儒,往來(lái)無(wú)白丁vh6可以調(diào)素琴，閱金經(jīng)v/h6f一口二丁口1 X- IC i file:/D:/Demo/2/2-2. html .三山不在高，有仙那么名水不在深，有龍那么靈斯是陋室，惟吾德馨苔痕上階綠，草色

7、入市青談笑有鴻隹，往來(lái)無(wú)白丁可以調(diào)素琴，閱金經(jīng)知識(shí)歸納本節(jié)課學(xué)習(xí)了在網(wǎng)頁(yè)中添加文本標(biāo)簽元素內(nèi)容，掌握了 vbr等標(biāo)簽的使用方法。教師講授，學(xué)生歸 納總結(jié)，并作適當(dāng)?shù)墓P 記。標(biāo)簽格式說(shuō)明-vhn標(biāo)題文字v/hn(n 為 1,2,3,4,5,6)標(biāo)題vp段落內(nèi)容段落換行標(biāo)記加粗的內(nèi)容心加粗strong標(biāo)記加粗的內(nèi)容/strong加粗vi標(biāo)記傾斜的內(nèi)容v/i斜體vem標(biāo)記傾斜的內(nèi)容斜體上標(biāo)文字v/sup上標(biāo)下標(biāo)文字v/sub下標(biāo)刪除線標(biāo)記內(nèi)容v/s刪除線下劃線標(biāo)記內(nèi)容v/u下劃線課后作業(yè)一、選擇題1 .以下是換行標(biāo)簽。A B C D 2.HTML文件的源代碼中含有123,其作用是學(xué)生上機(jī)完成任 務(wù)并提交，進(jìn)行分組互 評(píng)。OA將123以斜體顯示B在123前劃一條水平線C將123與其前后內(nèi)容分成不同段D將123以粗體顯示.如果