




版權(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- DB32/T 3873-2020增材制造用塑料線材熱熔產(chǎn)生烷烴類物質(zhì)和醛酮類物質(zhì)的測(cè)定
- DB32/T 3764-2020醫(yī)療污水病毒檢測(cè)樣品制備通用技術(shù)規(guī)范
- DB32/T 3597-2019增材制造金屬材料機(jī)械性能測(cè)試方法指南
- DB31/T 534-2011通信網(wǎng)絡(luò)運(yùn)營(yíng)環(huán)節(jié)的節(jié)能要求
- DB31/T 1282-2021車用氣瓶氫氣充裝安全技術(shù)條件
- DB31/T 1184-2019特種設(shè)備隱患分類分級(jí)導(dǎo)則
- DB31/ 842-2014微電子元件制造業(yè)職業(yè)病危害控制規(guī)范
- DB31/ 731-2020船舶修正總噸單位產(chǎn)品能源消耗限額
- DB31/ 565-2013中小學(xué)課業(yè)簿冊(cè)安全衛(wèi)生與質(zhì)量要求
- DB31/ 48-2012啤酒單位產(chǎn)品能源消耗限額
- 店面出讓股權(quán)協(xié)議書
- 深圳2025年深圳市住房公積金管理中心員額人員招聘8人筆試歷年參考題庫(kù)附帶答案詳解
- 英文電影鑒賞知到智慧樹期末考試答案題庫(kù)2025年北華大學(xué)
- 美容診所合作協(xié)議書
- 2025年人教版小學(xué)一年級(jí)下學(xué)期奧林匹克數(shù)學(xué)競(jìng)賽試卷(附答案解析)
- 2025年滁州市軌道交通運(yùn)營(yíng)有限公司第二批次招聘31人筆試參考題庫(kù)附帶答案詳解
- 2025年高考英語(yǔ)考前熱點(diǎn)話題押題卷(新高考Ⅰ卷)-2025年高考英語(yǔ)模擬考試(解析版)
- 浙江國(guó)企筆試題目及答案
- 電力現(xiàn)場(chǎng)安全管理課件
- 分子生物學(xué)技術(shù)在檢驗(yàn)中的應(yīng)用試題及答案
- 中考語(yǔ)文專題一非連續(xù)性文本閱讀市公開課一等獎(jiǎng)市賽課獲獎(jiǎng)?wù)n件
評(píng)論
0/150
提交評(píng)論