(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案_第1頁(yè)
(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案_第2頁(yè)
(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案_第3頁(yè)
(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案_第4頁(yè)
(中職)Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目二-2電子教案_第5頁(yè)
已閱讀5頁(yè),還剩2頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論