1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案教學(xué)課題項(xiàng)目2 網(wǎng)頁(yè)中的文本的排版2.2知識(shí)準(zhǔn)備授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握在網(wǎng)頁(yè)中添加文字列表的方法；2.掌握在網(wǎng)頁(yè)中添加圖片的方法。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；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é)情分析通過(guò)上節(jié)課的學(xué)習(xí)，已經(jīng)掌握了在網(wǎng)頁(yè)中添加各種文本的方法、文本格式化標(biāo)簽的使用以及文字的排版標(biāo)簽的應(yīng)用。本節(jié)課讓大家學(xué)習(xí)后能

2、利用標(biāo)簽自如地處理大段文字的排版和簡(jiǎn)單的圖文混排。教學(xué)重點(diǎn)1.文字列表；2.添加圖片。教學(xué)難點(diǎn)1.建立有序列表；2.建立無(wú)序列表；3.建立自定義列表；4.網(wǎng)頁(yè)中添加圖片。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示一個(gè)網(wǎng)頁(yè)頁(yè)面，通過(guò)頁(yè)面中文字列表及頁(yè)面中的圖片，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問(wèn)題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)一、文字列表1. 建立有序列表 有序列表項(xiàng) 有序列表項(xiàng) 有序列表項(xiàng)【例2-3】建立有序列表實(shí)例，代碼如下所示。1 2 3 4 5 有序列表6 7 olfloat:left;width:100px;8 9 10 11 1

3、2 HTML13 CSS14 JavaScript15 jQuery16 17 18 HTML19 CSS20 JavaScript21 jQuery22 23 24 HTML25 CSS26 JavaScript27 jQuery28 29 30 HTML31 CSS32 JavaScript33 jQuery34 35 36 HTML37 CSS38 JavaScript39 jQuery40 41 42 在瀏覽器中預(yù)覽效果如圖所示。2. 建立無(wú)序列表 無(wú)序列表項(xiàng) 無(wú)序列表項(xiàng) 無(wú)序列表項(xiàng)【例2-4】建立無(wú)序列表實(shí)例，代碼如下所示。1 2 3 4 5 無(wú)序列表6 7 ulfloat:left

4、;width:100px;8 9 10 11 12 HTML13 CSS14 JavaScript15 jQuery16 17 18 HTML19 CSS20 JavaScript21 jQuery22 23 24 HTML25 CSS26 JavaScript27 jQuery28 29 30 HTML31 CSS32 JavaScript33 jQuery34 35 36 在瀏覽器中預(yù)覽效果如圖所示。3. 建立自定義列表 定義名詞 定義描述 【例2-5】建立自定義列表實(shí)例，代碼如下所示。1 2 3 4 5 自定義列表6 7 8 9 文本排版10 換行標(biāo)簽br11 段落標(biāo)簽p12 標(biāo)題標(biāo)簽h

5、1h613 文字列表14 有序列表ol15 無(wú)序列表ul16 自定義列表dl17 18 19 在瀏覽器中預(yù)覽效果如圖所示。二、添加圖片1.img標(biāo)簽src屬性2. img標(biāo)簽alt屬性3. img標(biāo)簽title屬性【例2-6】使用相對(duì)路徑插入圖像實(shí)例，文件結(jié)構(gòu)及代碼如圖所示。在瀏覽器中預(yù)覽效果如圖所示。教師操作演示，學(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í)歸納本節(jié)課學(xué)習(xí)了在網(wǎng)頁(yè)中添加圖像、列表等標(biāo)簽元素內(nèi)容，掌握了、等標(biāo)簽的使用方法。標(biāo)簽格式說(shuō)明分割（塊元素）區(qū)域（行內(nèi)元素） 無(wú)序列表 有序列表定義名詞定義描述自定義列表圖像教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.制作網(wǎng)頁(yè)時(shí)，如果想在段落內(nèi)每個(gè)項(xiàng)目前面加上1、2、3等有順序的數(shù)字，可以使用_標(biāo)簽。A B C D 2.制作網(wǎng)頁(yè)時(shí)，如果想在段落內(nèi)每個(gè)項(xiàng)目前面加上“”符號(hào)，可以使用_標(biāo)簽。A B C D 3. img標(biāo)簽的_屬性用于指定圖像源文件所在的路徑。A src B al