1、（中職）Web前端設計基礎 項目二-2電子教案（中職）Web前端設計基礎 項目二-2電子教案（中職）Web前端設計基礎 項目二-2電子教案教學課題項目2 網頁中的文本的排版2.2知識準備授課班級授課時間教學目標知識目標1.掌握在網頁中添加文字列表的方法；2.掌握在網頁中添加圖片的方法。能力目標1.培養學生自主學習、分析問題和解決問題的能力；2.培養學生熟練運用所學知識的能力。德育目標1.鼓勵學生主動學習，提高學習興趣，提升學生的專業素質；2.培養學生的團隊合作精神。學情分析通過上節課的學習，已經掌握了在網頁中添加各種文本的方法、文本格式化標簽的使用以及文字的排版標簽的應用。本節課讓大家學習后能

2、利用標簽自如地處理大段文字的排版和簡單的圖文混排。教學重點1.文字列表；2.添加圖片。教學難點1.建立有序列表；2.建立無序列表；3.建立自定義列表；4.網頁中添加圖片。教學方法項目教學法、多媒體輔助教學法、講練結合法教學過程教學環節教學內容師生活動新課導入給學生展示一個網頁頁面，通過頁面中文字列表及頁面中的圖片，導入本節課的內容。教師提出問題，學生可分組討論，協作探究。技能學習一、文字列表1. 建立有序列表 有序列表項 有序列表項 有序列表項【例2-3】建立有序列表實例，代碼如下所示。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 在瀏覽器中預覽效果如圖所示。2. 建立無序列表 無序列表項 無序列表項 無序列表項【例2-4】建立無序列表實例，代碼如下所示。1 2 3 4 5 無序列表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 在瀏覽器中預覽效果如圖所示。3. 建立自定義列表 定義名詞 定義描述 【例2-5】建立自定義列表實例，代碼如下所示。1 2 3 4 5 自定義列表6 7 8 9 文本排版10 換行標簽br11 段落標簽p12 標題標簽h

5、1h613 文字列表14 有序列表ol15 無序列表ul16 自定義列表dl17 18 19 在瀏覽器中預覽效果如圖所示。二、添加圖片1.img標簽src屬性2. img標簽alt屬性3. img標簽title屬性【例2-6】使用相對路徑插入圖像實例，文件結構及代碼如圖所示。在瀏覽器中預覽效果如圖所示。教師操作演示，學生觀看、實訓。必要時要求一個具有典型特質的學生與老師互動，共同完成操作任務，借此查看教學效果。教師操作演示，學生觀看、實訓。必要時要求一個具有典型特質的學生與老師互動，共同完成操作任務，借此查看教學效果。教師操作演示，學生觀看、實訓。必要時要求一個具有典型特質的學生與老師互動，共同完成操作任務，借此查看教學效果。知識歸納本節課學習了在網頁中添加圖像、列表等標簽元素內容，掌握了、等標簽的使用方法。標簽格式說明分割（塊元素）區域（行內元素） 無序列表 有序列表定義名詞定義描述自定義列表圖像教師講授，學生歸納總結，并作適當的筆記。課后作業一、選擇題1.制作網頁時，如果想在段落內每個項目前面加上1、2、3等有順序的數字，可以使用_標簽。A B C D 2.制作網頁時，如果想在段落內每個項目前面加上“”符號，可以使用_標簽。A B C D 3. img標簽的_屬性用于指定圖像源文件所在的路徑。A src B al