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

1、谷城中等職業(yè)教育中心學(xué)校電子教案20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題： 個人主頁首頁 授課教師：蔣紅艷 NO： 24-25授課班級14春微機、14春商務(wù)授課日期授課類型講授、演示、實訓(xùn)學(xué) 時 數(shù)4教學(xué)目標制作一個簡單的個人網(wǎng)站，構(gòu)建網(wǎng)站意識，掌握各種鏈接的靈活應(yīng)用。教學(xué)內(nèi)容文本超鏈接、圖片超鏈接、電子郵件超鏈接重點難點圖片熱區(qū)超鏈接、水平線屬性設(shè)置教學(xué)方法演示、講解學(xué)習(xí)方法觀察、實訓(xùn)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、范例展示二、任務(wù)分析這是一個綜合的小型網(wǎng)站，由三個相互鏈接的頁面構(gòu)成。主頁布局可以用一個4行1列的表格完成，第1行，插入標題和圖

2、片；第2行，插入導(dǎo)航文字，設(shè)置鏈接；第3行，插入水平線，設(shè)置水平線樣式；第4行，插入地圖，制作圖片熱區(qū)超鏈接。三、教師演示1、學(xué)生1操作：新建站點、素材文件夾、首頁；2、學(xué)生2操作：繪制布局表格，復(fù)制素材； 3、學(xué)生3操作：第1行，插入圖片、標題文字，設(shè)置文字樣式；4、學(xué)生4操作：輸入導(dǎo)航菜單文字，網(wǎng)站中添加子頁，建立超鏈接； 5、教師演示：插入水平線，設(shè)置水平線樣式；hr width=” size=” color=” />6、學(xué)生5操作：第4行，插入地圖，創(chuàng)建圖片熱區(qū)超鏈接；7、教師演示：設(shè)置頁面背景。  課堂練習(xí)制作個人網(wǎng)站主頁  小結(jié)與作業(yè)課

3、堂小結(jié)   本課作業(yè)  本課教學(xué)后記（課堂設(shè)計理念，實際教學(xué)效果及改進設(shè)想）    教研組長簽字： 年 月 日20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題： 個人網(wǎng)站子頁 授課教師：蔣紅艷 NO： 26授課班級14春微機、14春商務(wù)授課日期授課類型講授、演示、實訓(xùn)學(xué) 時 數(shù)2教學(xué)目標制作個人網(wǎng)站子頁版主的話，熟練掌握簡單的網(wǎng)頁布局、文本編排、樣式設(shè)置，構(gòu)建網(wǎng)站意識，掌握各種鏈接的靈活應(yīng)用。教學(xué)內(nèi)容電子郵件超鏈接、文字樣式設(shè)置、水平線設(shè)置重點難點CSS設(shè)置文本樣式教學(xué)方法演示、講解學(xué)習(xí)方法觀

4、察、實訓(xùn)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、 范例展示二、任務(wù)分析這是個人網(wǎng)站的子頁：版主的話頁面，整個頁面比較簡單，主要是文字和鏈接。因此設(shè)置文字的樣式就顯得非常重要。網(wǎng)頁中的文字要做到疏密有度，便于閱讀。頁面布局可以用一個4行1列的表格完成，第1行，插入標題；第2行，插入導(dǎo)航文字，設(shè)置鏈接；第3行，插入水平線，設(shè)置水平線樣式；第4行，插入文字，設(shè)置文字樣式。三、教師演示1、學(xué)生1操作：新建子頁banzhu.html；2、學(xué)生2操作：繪制布局表格； 3、學(xué)生3操作：插入水平線，設(shè)置水平線樣式；hr width=” size=” color=” />4、教師操作

5、：第4行，插入文字，設(shè)置文字樣式；5、教師演示：設(shè)置頁面背景。  課堂練習(xí)制作個人網(wǎng)站子頁：版主的話  小結(jié)與作業(yè)課堂小結(jié)   本課作業(yè)  本課教學(xué)后記（課堂設(shè)計理念，實際教學(xué)效果及改進設(shè)想）    教研組長簽字： 年 月 日20142015學(xué)年度第一學(xué)期網(wǎng)頁制作課程電子教案 授課課題： 個人網(wǎng)站子頁（校園笑話） 授課教師：蔣紅艷 NO： 27授課班級14春微機、14春商務(wù)授課日期授課類型講授、演示、實訓(xùn)學(xué) 時 數(shù)2教學(xué)目標制作個人網(wǎng)站子頁校園笑話，熟練運用錨記超鏈

6、接、電子郵件超鏈接等知識，掌握各種鏈接的靈活應(yīng)用。教學(xué)內(nèi)容錨記超鏈接的創(chuàng)建、文字樣式設(shè)置重點難點錨記超鏈接教學(xué)方法演示、講解學(xué)習(xí)方法觀察、實訓(xùn)教學(xué)過程設(shè)計備注（時間分配、個性修改等）教學(xué)步驟及主要內(nèi)容一、 范例展示二、任務(wù)分析這是個人主頁的校園笑話頁面，頁面較長，使用錨記超鏈接進行頁面內(nèi)的跳轉(zhuǎn)。因此，熟練掌握錨記超鏈接的創(chuàng)建是本頁面的制作重點。創(chuàng)建錨記超鏈接的步驟上：1、文本編排；2、插入錨記；3、創(chuàng)建鏈接。三、教師演示1、學(xué)生1操作：繪制布局表格； 2、學(xué)生2操作：第1行，插入圖片、標題文字，設(shè)置文字樣式；3、學(xué)生3操作：輸入導(dǎo)航菜單文字，網(wǎng)站中添加子頁，建立超鏈接； 4、學(xué)生操作：插入水平線，設(shè)置水平線樣式；hr width=” size=” color=” />5、教師操作：第4行，插入文本，對文本進行編排；7、教師演示：插入命名錨記；8、教師演示：創(chuàng)建錨記超鏈接；9、教師演示：創(chuàng)建返回的錨記超鏈接。  課堂練習(xí)制作個人網(wǎng)站子頁校園笑話  小結(jié)與作業(yè)