網(wǎng)頁電子教案（21-30課時）

1、谷城中等職業(yè)教育中心學(xué)校電子教案20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題：我的第一個網(wǎng)站 授課教師： 蔣紅艷 NO： 11授課班級14春微機、14春商務(wù)授課日期授課類型講授+演示學(xué) 時 數(shù)2教學(xué)目標(biāo)1、 掌握透明層的制作；2、 掌握動態(tài)網(wǎng)站公告的制作；3、 掌握交互式圖像菜單的制作。教學(xué)內(nèi)容嘗試使用透明層效果、動態(tài)網(wǎng)站公告效果、交互式圖像菜單制作自己的第一個網(wǎng)站。重點難點層的繪制、調(diào)整與設(shè)置教學(xué)方法講授+演示學(xué)習(xí)方法觀察+練習(xí)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、 范例展示，明確任務(wù)二、 分析任務(wù) 怎樣完成上圖所示網(wǎng)頁的編輯？可分哪幾步？1、 新建站

2、點、素材文件夾、主頁； 2、 打開主頁，繪制表格；3、 第一行：站標(biāo)，透明層效果；4、 第二行：網(wǎng)站導(dǎo)航，交互式圖像菜單；5、 第三行：網(wǎng)站公告，<marquee>代碼；6、 第四行：主體部分三、 教師演示1、 建站點：我的第一個網(wǎng)站，指定保存位置；2、 在站點中建立素材文件夾flash和images，主頁index.html; 3、 把網(wǎng)頁中要用的動畫和圖像素材復(fù)制到對應(yīng)的站點素材文件夾中； 4、 打開主頁，繪制表格：4行1列，寬778像素； 5、 第一行，插入站標(biāo)圖片，沿著圖片邊緣繪制層，在層中插入動畫，設(shè)置動畫為透明效果；6、 第二行，導(dǎo)航菜單，使用交互式圖像效果制作網(wǎng)站導(dǎo)航

3、菜單；7、 第三行，網(wǎng)站公告：先把此行分兩列，第1列插入圖片（如圖），第二列輸入網(wǎng)站公告文字，切換到“代碼”模式，插入<marquee>代碼，制作動態(tài)網(wǎng)站公告；8、 第四行，網(wǎng)站主體：插入主廣告，在廣告圖上繪制層，插入汽泡動畫，設(shè)置動畫透明屬性。  5分鐘10分鐘20分鐘課堂練習(xí)學(xué)生演示操作：根據(jù)范例效果，結(jié)合老師演示操作，請8名學(xué)生合作分步完成整個網(wǎng)頁的制作。 35分鐘 其他 小結(jié)與作業(yè)課堂小結(jié)1、 新建站點、素材文件夾、主頁； 2、 站標(biāo)，透明層效果設(shè)置；3、 網(wǎng)站導(dǎo)航，交互式圖像菜單；4、 網(wǎng)站公告，<marquee&g

4、t;代碼。   5分鐘本課作業(yè)填寫上機實訓(xùn)報告  本課教學(xué)后記（課堂設(shè)計理念，實際教學(xué)效果及改進設(shè)想） 漂亮的范例網(wǎng)頁，炫麗的動畫效果，激發(fā)了學(xué)生的學(xué)習(xí)興趣和熱情，他們對本次課的任務(wù)興趣很大，對于本次課安排的案例表現(xiàn)出極大的熱情，肯鉆肯練，教學(xué)效果不錯。   教研組長簽字： 年 月 日20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題：我的第一個網(wǎng)站 授課教師： 蔣紅艷 NO： 12-13授課班級14春微機、14春商務(wù)授課日期授課類型實訓(xùn)課學(xué) 時 數(shù)4教學(xué)目標(biāo)1、 掌握透明層的制作；2、 掌握動

5、態(tài)網(wǎng)站公告的制作；3、掌握交互式圖像菜單的制作。教學(xué)內(nèi)容嘗試使用透明層效果、動態(tài)網(wǎng)站公告效果、交互式圖像菜單制作自己的第一個網(wǎng)站重點難點層的繪制、調(diào)整與設(shè)置教學(xué)方法檢查、指導(dǎo)學(xué)習(xí)方法動手實訓(xùn)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、布置任務(wù)分發(fā)范例網(wǎng)頁效果截圖（如下）二、分發(fā)素材向?qū)W生分發(fā)網(wǎng)頁中需要用到的動畫素材和圖像素材，讓學(xué)生分類保存到flash和images文件夾中。三、學(xué)生實訓(xùn) 向?qū)W生分發(fā)已經(jīng)整理好的實訓(xùn)操作步驟，便于學(xué)生實訓(xùn)任務(wù)的完成：1、 建站點：我的第一個網(wǎng)站，指定保存位置；2、 在站點中建立素材文件夾flash和images，主頁index.html; 3、

6、 把網(wǎng)頁中要用的動畫和圖像素材復(fù)制到對應(yīng)的站點素材文件夾中； 4、 打開主頁，繪制表格：4行1列，寬778像素； 5、 第一行，插入站標(biāo)圖片，沿著圖片邊緣繪制層，在層中插入動畫，設(shè)置動畫為透明效果；6、 第二行，導(dǎo)航菜單，使用交互式圖像效果制作網(wǎng)站導(dǎo)航菜單；7、 第三行，網(wǎng)站公告：先把此行分兩列，第1列插入圖片（如圖），第二列輸入網(wǎng)站公告文字，切換到“代碼”模式，插入<marquee>代碼，制作動態(tài)網(wǎng)站公告；8、第四行，網(wǎng)站主體：插入主廣告，在廣告圖上繪制層，插入汽泡動畫，設(shè)置動畫透明屬性。四、作業(yè)保存、點評  （學(xué)生實訓(xùn)過程中，教師不斷巡視機房，查看學(xué)生的實訓(xùn)

7、進度，必要的情況下給予指導(dǎo)，對于存在的共性問題，用教師軟件進行集中講解、演示。）課堂練習(xí)  其他 小結(jié)與作業(yè)課堂小結(jié)點評：作業(yè)完成的好的同學(xué)：好的表現(xiàn)：   本課作業(yè)完成上機實訓(xùn)報告  本課教學(xué)后記（課堂設(shè)計理念，實際教學(xué)效果及改進設(shè)想） 學(xué)生對動手實訓(xùn)興趣很大，對于本次課安排的案例表現(xiàn)出極大的熱情，肯鉆肯練，教學(xué)效果不錯。  教研組長簽字： 年 月 日20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題：時尚網(wǎng)頁 授課教師：蔣紅艷 NO： 14授課班級14春微機、14春商務(wù)授

8、課日期授課類型講授、演示學(xué) 時 數(shù)2教學(xué)目標(biāo)1、 掌握用表格進行網(wǎng)頁布局的方法；2、 掌握表格的基本調(diào)整、設(shè)置方法；3、 掌握用CSS樣式設(shè)置文本的方法；4、 知道網(wǎng)頁布局的注意事項。教學(xué)內(nèi)容1、 繪制、調(diào)整布局表格；2、 CSS樣式設(shè)置文本；3、 網(wǎng)頁布局注意事項；重點難點CSS樣式設(shè)置文本教學(xué)方法演示、講解學(xué)習(xí)方法觀察、練習(xí)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、 范例展示，明確任務(wù)二、 分析任務(wù)1、 上圖所示網(wǎng)頁布局樣式是什么型？2、 如何完成網(wǎng)頁布局？應(yīng)該插入幾行幾列的表格？3、 表格第二大行如何操作？4、 表格第三大行與其他各行有無不同？如果有，不同在哪里？如何

9、操作？5、 表格中有兩種不同的文字顏色，如何實現(xiàn)？三、 理論講解（PPT：各種布局范例網(wǎng)站）網(wǎng)頁布局樣式：“廠”字型、“同”字型、“口”字弄、分欄型、封面型、flash型等。本例時尚網(wǎng)站的主頁布局屬于“廠”字型。四、 教師演示1、 學(xué)生操作：新建站點（時尚網(wǎng)站），站點內(nèi)創(chuàng)建素材文件夾images和主頁index.html;2、 學(xué)生操作：復(fù)制網(wǎng)頁素材至站點的素材文件夾中；3、 插入表格，3行2列780像素（如何確定表格寬？）4、 第一行：合并，調(diào)整高度40像素；5、 第二行：第1列，設(shè)置寬550像素，第2列230像素，拆分成8行； 6、 第三行：第1列，嵌套表格1行4列550像素，單元格間距為

10、10，第2列，拆分成2行；7、 學(xué)生操作：添加網(wǎng)頁圖片、文字；8、 定義CSS樣式，套用樣式，使菜單文字成白色；9、 設(shè)置單元格背景顏色；10、設(shè)置頁面屬性。五、 網(wǎng)頁布局注意事項 1、主次分明，中心突出； 2、大小搭配，相互呼應(yīng)；3、圖文并茂，相得益彰； 4、疏密有度，平衡對稱。   課堂練習(xí)請多名學(xué)生分工合作分步完成時尚網(wǎng)頁的主頁編輯。 小結(jié)與作業(yè)課堂小結(jié)1、 網(wǎng)頁布局樣式種類；2、 表格嵌套；  本課作業(yè)填寫實訓(xùn)報告 本課教學(xué)后記（課堂設(shè)計理念，實際教學(xué)效果及改進設(shè)想） CS5版軟件環(huán)境下，對文本的設(shè)置要求較高，不能在

11、屬性面板上對文字直接進行設(shè)置，要通過定義CSS樣式來完成，對學(xué)生來說，有一定難度。 教研組長簽字： 年 月 日20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題：時尚網(wǎng)頁 授課教師：蔣紅艷 NO： 15授課班級14春微機、14春商務(wù)授課日期授課類型實訓(xùn)課學(xué) 時 數(shù)2教學(xué)目標(biāo)1、 掌握用表格進行網(wǎng)頁布局的方法；2、 掌握表格的基本調(diào)整、設(shè)置方法；3、掌握用CSS樣式設(shè)置文本的方法；教學(xué)內(nèi)容時尚網(wǎng)站主頁布局表格繪制、調(diào)整，網(wǎng)頁元素添加，文字樣式定義套用。重點難點布局表格繪制、調(diào)整，CSS樣式設(shè)置文本教學(xué)方法檢查、指導(dǎo)學(xué)習(xí)方法實訓(xùn)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及

12、主要內(nèi)容一、布置任務(wù) 分發(fā)上機任務(wù)范例截圖：二、分發(fā)素材給學(xué)生分發(fā)網(wǎng)頁中所需要的圖片素材，讓學(xué)生保存到站點的素材文件夾中。三、學(xué)生實訓(xùn)向?qū)W生分發(fā)已經(jīng)整理好的實訓(xùn)操作步驟，便于學(xué)生實訓(xùn)任務(wù)的完成：1、 學(xué)生操作：新建站點（時尚網(wǎng)站），站點內(nèi)創(chuàng)建素材文件夾images和主頁index.html;2、 學(xué)生操作：復(fù)制網(wǎng)頁素材至站點的素材文件夾中；3、 插入表格，3行2列780像素（如何確定表格寬？）4、 第一行：合并，調(diào)整高度40像素；5、 第二行：第1列，設(shè)置寬550像素，第2列230像素，拆分成8行； 6、 第三行：第1列，嵌套表格1行4列550像素，單元格間距為10，第2列，拆分成2行；7、 學(xué)生操作：添加網(wǎng)頁圖片、文字；8、 定義CSS樣式，套用樣式，使菜單文字成白色；9、 設(shè)置單元格背景