1、（中職）Web前端設(shè)計基礎(chǔ) 項目二-3電子教案（中職）Web前端設(shè)計基礎(chǔ) 項目二-3電子教案（中職）Web前端設(shè)計基礎(chǔ) 項目二-3電子教案教學(xué)課題項目2 網(wǎng)頁中的文本的排版2.3項目實施、2.4項目拓展授課班級授課時間教學(xué)目標(biāo)知識目標(biāo)1.掌握在網(wǎng)頁中添加文字和列表的方法；2.掌握在網(wǎng)頁中添加圖片的方法。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識的能力。德育目標(biāo)1.鼓勵學(xué)生主動學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊合作精神。學(xué)情分析通過上節(jié)課的學(xué)習(xí)，已經(jīng)掌握了在網(wǎng)頁中添加各種文本的方法、文本格式化標(biāo)簽的使用、文字的排版標(biāo)簽的應(yīng)用以及在

2、網(wǎng)頁中添加圖片的方法。本節(jié)課使用上面所學(xué)知識制作圖文混排的HTML5網(wǎng)頁、圖文并茂的商品列表網(wǎng)頁和項目拓展中的實例。教學(xué)重點(diǎn)1.文字列表；2.添加圖片。教學(xué)難點(diǎn)1.建立列表；2.網(wǎng)頁中DIV標(biāo)簽的應(yīng)用；3.網(wǎng)頁中的圖文混排。教學(xué)方法項目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動新課導(dǎo)入給學(xué)生展示圖文混排的HTML5網(wǎng)頁、圖文并茂的商品列表網(wǎng)頁和項目拓展中的實例頁面，通過頁面中文字、列表及頁面中的圖片，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)一、圖文混排的HTML 5網(wǎng)頁結(jié)構(gòu)分析從圖2-10中可以看出，網(wǎng)頁的主體部分是由上下兩個標(biāo)簽組成。上面部

3、分嵌套了一個和標(biāo)簽，右邊是，左邊是。下面部分由兩個標(biāo)簽、一個標(biāo)簽和一個有序列表標(biāo)簽組成。Step01 啟動Sublime程序，執(zhí)行“文件”菜單中的“新建”命令或使用快捷鍵Ctrl + N新建一個文件，執(zhí)行“文件”菜單中的“保存”命令或使用快捷鍵Ctrl + S保存文件名稱為2-7.html。Step02 輸入“!”，按【TAB】鍵就會按照HTML 5規(guī)范自動創(chuàng)建代碼。Step03 修改網(wǎng)頁標(biāo)題、添加主體內(nèi)容、設(shè)置區(qū)塊浮動，代碼如下：1 2 3 4 5 憫農(nóng)二首6 7 divwidth:600px;background: silver;overflow:hidden;8 .flwidth:300

4、px;float:left;9 imgwidth:180px;float:left; 10 supfont-size: 12px;color:red; 11 12 13 14 15 16 憫農(nóng)二首17 唐代：李紳18 19 春種一粒粟，秋收萬顆子。20 四海無閑田，農(nóng)夫猶餓死。21 22 23 鋤禾日當(dāng)午，汗滴禾下土。24 誰知盤中餐，粒粒皆辛苦？25 26 27 28 29 30 譯文及注釋31 譯文32 33 春天只要播下一粒種子，秋天就可收獲很多糧食。34 普天之下，沒有荒廢不種的田地，勞苦農(nóng)民，仍然要餓死。35 36 37 盛夏中午，烈日炎炎，農(nóng)民還在勞作，汗珠滴入泥土。38 有誰想到

5、，我們碗中的米飯，粒粒飽含著農(nóng)民的血汗？39 40 41 注釋42 43 44 憫：憐憫。這里有同情的意思。詩一作古風(fēng)二首。這兩首詩的排序各版本有所不同。45 粟：泛指谷類。46 秋收：一作“秋成”。子：指糧食顆粒。47 四海：指全國。閑田：沒有耕種的田。48 猶：仍然。49 禾：谷類植物的統(tǒng)稱。50 餐：一作“飧”。熟食的通稱。51 52 53 54 55 Step04 再次執(zhí)行“文件”菜單中的“保存”命令或使用快捷鍵Ctrl + S保存文件。Step05 在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，在瀏覽器中預(yù)覽效果如圖所示。二、圖文并茂的商品列表網(wǎng)頁Step01 用Sub

6、lime編輯器創(chuàng)建一個文件，保存名稱為2-8.html。Step02 輸入“!”，按【TAB】鍵就會按照HTML 5規(guī)范自動創(chuàng)建代碼，輸入主體內(nèi)容、設(shè)置標(biāo)簽元素的CSS樣式，代碼如下：1 2 3 4 5 圖文并茂的商品列表6 7 lifloat:left;list-style: none;margin-left: 10px;text-align: center;8 li imgwidth:150px;height: 150px;9 atext-decoration: none;font-size: 14px;10 11 12 13 14 15 16 17 智能手機(jī)防塵塞18 19 20 21

7、智能手機(jī)防塵塞22 23 24 25 智能手機(jī)防塵塞26 27 28 29 智能手機(jī)防塵塞30 31 32 33 34 35 36 37 38 智能手機(jī)防塵塞39 40 41 42 智能手機(jī)防塵塞43 44 45 46 智能手機(jī)防塵塞47 48 49 50 智能手機(jī)防塵塞51 52 53 54 55 Step03 保存網(wǎng)頁，在瀏覽器中預(yù)覽效果如圖所示。三、項目拓展Step01 用Sublime編輯器打開文件（Ctrl + O組合鍵）2-8.html，另存為（Ctrl + Shift + S組合鍵）2-9.html。Step02 設(shè)置網(wǎng)頁背景、設(shè)置div塊的邊框和鼠標(biāo)的hover屬性。代碼如下：

8、1 2 3 4 5 圖文并茂的商品列表6 7 divwidth:750px;height: 230px;border:2px solid red;overflow: hidden;8 lifloat:left;list-style: none;margin-left: 10px;text-align: center;9 li imgwidth:150px;height: 150px;10 afont-size: 14px;11 a:hovertext-decoration: none;font-size: 16px;color:red;12 13 14 15 16 17 18 19 智能手機(jī)防

9、塵塞20 21 22 23 智能手機(jī)防塵塞24 25 26 27 智能手機(jī)防塵塞28 29 30 31 智能手機(jī)防塵塞32 33 34 35 36 37 38 39 40 智能手機(jī)防塵塞41 42 43 44 智能手機(jī)防塵塞45 46 47 48 智能手機(jī)防塵塞49 50 51 52 智能手機(jī)防塵塞53 54 55 56 57 Step03 保存網(wǎng)頁，在chrome瀏覽器預(yù)覽，效果如圖所示。教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實訓(xùn)。必要時要求一個具有典型特質(zhì)的學(xué)生與老師互動，共同完成操作任務(wù)，借此查看教學(xué)效果。知識歸納本項目通過項目實施和項目拓展制作了圖文混排的HTML 5網(wǎng)頁和兩種不同的圖文并茂的商品列表網(wǎng)頁案例，學(xué)習(xí)了在網(wǎng)頁中添加文本、圖像、列表等標(biāo)簽元素內(nèi)容，掌握了、等標(biāo)簽的使用方法。教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、上機(jī)實訓(xùn)1.上機(jī)完成圖文混排的HTML5網(wǎng)頁的實例