




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 計算機二級MS Office易錯點試題及答案
- 車間培訓課程
- 2025年中考語文記敘文閱讀理解答題技巧與解題策略卷
- 客運培訓練習試題及答案
- 2025年護士執業資格實踐能力測試兒科護理卷:兒童皮膚護理與保健
- 2025年鄉村醫生考試題庫:農村常見病癥中醫適宜技術試題集
- 2025年國際天文學奧賽(IAO)模擬試卷:天體物理與天文觀測競賽策略解析
- 2025年心理咨詢師考試心理咨詢技能全真模擬試卷
- 2025年考研政治中國特色社會主義理論論述題庫:難點解析
- 2025年注冊計量師(一級)計量專業實務與案例分析模擬試卷(測量不確定度評定)考點梳理
- 廣東省茂名市信宜市2023-2024學年四年級下學期4月期中數學試題
- 西方古代建筑史智慧樹知到期末考試答案2024年
- 輪胎滾動阻力及其優化策略
- 子宮腹壁懸吊術手術配合
- 人教版高中生物必修一全套課件406張精美
- 肛瘺與炎癥性腸病
- 腦卒中科普知識宣傳總結報告
- 四年級數學下冊必考重難點
- 煙道改造居民同意協議書
- AI對人類生活的影響
- 安全設備檢查記錄表模板
評論
0/150
提交評論