《網(wǎng)頁制作》教案
潘有寅
一、說教材：
(一)教材分析：現(xiàn)在網(wǎng)絡(luò)快速發(fā)展，廣大的學(xué)生接觸，使用INTERNET的機(jī)會也大大增加，學(xué)生在使用網(wǎng)絡(luò) 獲取信息時(shí)，更多的是通過瀏覽網(wǎng)頁這一方式，我認(rèn)為上好這節(jié)課是非常必要的，這對學(xué)生進(jìn)一步認(rèn)識、使用INTERNET更有益處，同時(shí)通過網(wǎng)頁制作這一過程也利于學(xué)生對計(jì)算機(jī)常用素材的類型有更深入的了解，在一定程度上也起著培養(yǎng)學(xué)生運(yùn)用綜合知識能力作用，所以我認(rèn)為這節(jié)課是非常值得我們?nèi)パ芯可虾玫?，考慮這節(jié)課的內(nèi)容及教法、學(xué)法的需要，我把這節(jié)分為兩課時(shí)，第一時(shí)：在引導(dǎo)下學(xué)生學(xué)，練 DREAMWEAVER制作網(wǎng)頁的基本方法；第二課：讓學(xué)生自己構(gòu)思創(chuàng)意一個(gè)與自身相關(guān)的內(nèi)容豐富的，頁面美觀的網(wǎng)頁。
(二)教學(xué)目標(biāo)：根據(jù)對教材的分析及學(xué)生實(shí)際情況，制定如下的教學(xué)目標(biāo)：
(1)知識目標(biāo)：
1、有關(guān)建設(shè)第一個(gè)網(wǎng)頁的理念思想構(gòu)成。
2、熟悉用DREAMWEAVER制作網(wǎng)頁的基本方法
3、超級鏈接是網(wǎng)頁實(shí)現(xiàn)互相鏈接的基本方法
(2)能力目標(biāo)：
1、培養(yǎng)學(xué)生的自學(xué)能力
2、創(chuàng)意構(gòu)思能力
3、能制作出具有多重鏈接、多種素材、內(nèi)容豐富的網(wǎng)頁。
(3)情感目標(biāo)：
1、教育學(xué)生正確認(rèn)識和理解信息技術(shù)相關(guān)文化，倫理和社會問題，負(fù)責(zé)地使用信息技術(shù)。
(三)教學(xué)的重、難點(diǎn)：
根據(jù)對教材的分析及網(wǎng)頁制作過程中的 實(shí)際情況，我認(rèn)為要出制作內(nèi)容豐富的網(wǎng)頁，關(guān)鍵是要知道為什么要做網(wǎng)頁，明確你做網(wǎng)頁的目標(biāo)。從培養(yǎng)學(xué)生運(yùn)用信息技術(shù)綜合能力這點(diǎn)出發(fā)，我認(rèn)為如何引導(dǎo)學(xué)生進(jìn)行思考定位、以及通過網(wǎng)頁的制作這過程使學(xué)生對互聯(lián)網(wǎng)有更深入的了解和運(yùn)用，應(yīng)該做為本節(jié)的難點(diǎn)內(nèi)容。
二、說教法：
我采用了主體式教學(xué)模式，首先我創(chuàng)設(shè)了一個(gè)學(xué)習(xí)情景，讓學(xué)生在情景中積極地完成任務(wù)，在任務(wù)完成階段，我是一名幫助者、引導(dǎo)者，教學(xué)時(shí)注意觀察學(xué)生，及時(shí)總結(jié)共性問題，個(gè)性問題留給小組學(xué)生討論，不斷激發(fā)學(xué)生的學(xué)習(xí)興趣，以達(dá)到最佳教學(xué)效果。教學(xué)方式上①我采用了“任務(wù)驅(qū)動”教學(xué)方式，強(qiáng)調(diào)“實(shí)踐出真知”的科學(xué)思想，授課時(shí)出示明確的，可操作性強(qiáng)的教學(xué)任務(wù)②分層教學(xué)，分類指導(dǎo)即兩分：考慮學(xué)生計(jì)算機(jī)水平的差異，我把學(xué)生分為A、B兩層，不同層次學(xué)生完成的學(xué)習(xí)目標(biāo)不同，不同層次的學(xué)生教師指導(dǎo)方法不同。A層學(xué)生只要求完成知識目標(biāo)，及能力目標(biāo)第一個(gè)，B層學(xué)生同時(shí)要求能力目標(biāo)的2、3 項(xiàng)。
三、說學(xué)法：
以學(xué)生為中心，要求學(xué)生由知識的灌輸對象轉(zhuǎn)變?yōu)樾畔⒓庸さ闹黧w，引導(dǎo)學(xué)生按以下兩種方式來完成任務(wù)：①自學(xué)自練：通過學(xué)生自己在計(jì)算機(jī)進(jìn)行操作從中獲取對知識的正確理解，探求問題解決的方法；②協(xié)作學(xué)習(xí)：在實(shí)際操作中遇到的問題鼓勵(lì)學(xué)生共同研究討論、解決，使學(xué)生可以看到問題的不同側(cè)面和不同的解決途徑，開闊學(xué)生的思路，從而對知識產(chǎn)生新的理解。
四、說教學(xué)過程
教學(xué)環(huán)節(jié)
教師主導(dǎo)
學(xué)生主體
設(shè)計(jì)意圖
導(dǎo)入新課：
同學(xué)們，互聯(lián)網(wǎng)近年發(fā)展迅猛，大家都離不開網(wǎng)絡(luò)了，那么同學(xué)們平時(shí)上網(wǎng)看的都是別人做的網(wǎng)頁，如果自己也可以在網(wǎng)上看到自己制作網(wǎng)頁，那中動手的滿足感該有多好啊。這節(jié)的學(xué)習(xí)的目標(biāo)就是網(wǎng)頁的制作，準(zhǔn)備共用兩課時(shí)完成這部分內(nèi)容，第一課時(shí)：自學(xué)自練DREAMWEAVER制作網(wǎng)頁的基本方法；第二課時(shí)： 自己設(shè)計(jì)制作網(wǎng)頁。學(xué)生回答，明確學(xué)習(xí)目標(biāo) 通過展示教師制作的學(xué)校網(wǎng)頁，激發(fā)學(xué)生的學(xué)習(xí)興趣，同時(shí)給出學(xué)習(xí)目標(biāo)，讓學(xué)生明確學(xué)習(xí)任務(wù)，做到有的放矢。
講授新課第一課時(shí)： 再具體操作之前，同學(xué)們應(yīng)先了解有關(guān)網(wǎng)頁的一些相關(guān)知識。
閱讀內(nèi)容、分析，總結(jié)激發(fā)學(xué)生主體參與意識，培養(yǎng)學(xué)生閱讀歸納知識的能力 理念的構(gòu)成，尋找可模仿的同齡人制作的網(wǎng)頁。找出網(wǎng)頁內(nèi)在的邏輯關(guān)系及理念。先模仿再創(chuàng)造。觀察，調(diào)動的興趣，明確學(xué)習(xí)的途徑，方法，堅(jiān)定學(xué)習(xí)成功的信心。通過展示學(xué)生們制作的班級網(wǎng)頁，進(jìn)一步激發(fā)學(xué)生的學(xué)習(xí)興趣，同時(shí)堅(jiān)定學(xué)生的學(xué)習(xí)信心，告訴學(xué)生通過自己的自學(xué)自練就可實(shí)現(xiàn)學(xué)習(xí)目標(biāo)，進(jìn)而培養(yǎng)學(xué)生的自學(xué)習(xí)慣。
總結(jié)或補(bǔ)充
1、網(wǎng)頁制作方法很多，我們要學(xué)習(xí)的只是其中的一種；
2、無論哪種方法制作的網(wǎng)頁，生成文 件擴(kuò)展名均為html或htm，即對應(yīng)是html語言
3、當(dāng)瀏覽網(wǎng)頁時(shí)，看到的不是語言代碼而是語言代碼所描述 的形象?？偨Y(jié) 理解、記憶在上課的最佳時(shí)間內(nèi)，讓學(xué)生了解有關(guān)網(wǎng)頁的相關(guān)知識，這利于學(xué)生的記憶
教師指導(dǎo)(分類指導(dǎo))共性問題做小結(jié)
自學(xué)、自練協(xié)作學(xué)習(xí)培養(yǎng)學(xué)生自學(xué)能力，閱讀、分析、解決問題實(shí)際操作，使學(xué)生成為學(xué)習(xí)的主體，學(xué)習(xí)的主人 小結(jié) 1解決操作中的共性問題
2指出超級鏈接是實(shí)現(xiàn)多網(wǎng)頁鏈接的的基本方法：
3、保存文件為htm或html格式并預(yù)覽 學(xué)生總結(jié)并提出問題，理解超級鏈接，預(yù)覽自己的練習(xí)作品
解決操作中的問題，為下步學(xué)習(xí)掃清障礙，將本節(jié)的重點(diǎn)問題突出，通過預(yù)覽對網(wǎng)頁設(shè)計(jì)有一個(gè)初步設(shè)想
展示第二課時(shí)目標(biāo)：
設(shè)計(jì)一個(gè)網(wǎng)頁，內(nèi)容豐富，突出主題，展示個(gè)性
多種素材綜合運(yùn)用(可以自己準(zhǔn)備素材)
明確下課時(shí)學(xué)習(xí)任務(wù)，主動思考
通過一下課時(shí)的目標(biāo)展示，使學(xué)生可以有更多時(shí)間去構(gòu)思、創(chuàng)意，促動學(xué)生主動的去思考、去學(xué)習(xí)，引導(dǎo)學(xué)生習(xí)慣于創(chuàng)新，展示獨(dú)特創(chuàng)意。
第二課時(shí)
展示第二課時(shí)目標(biāo)：
計(jì)一個(gè)網(wǎng)頁，內(nèi)容豐富，突出主題，展示個(gè)性
多種素材綜合運(yùn)用(可以使用自己的準(zhǔn)備素材)
明確任務(wù)
明確目標(biāo)、任務(wù)，理清設(shè)計(jì)思路
指導(dǎo)(分類)
設(shè)計(jì)自己的網(wǎng)頁
培養(yǎng)學(xué)生實(shí)際操作能力，綜合運(yùn)用知識能力在這過程中學(xué)生將會將上節(jié)自學(xué)的內(nèi)容及以上學(xué)習(xí)綜合運(yùn)用，這對培養(yǎng)學(xué)生綜合能力是相當(dāng)有好處的。
通過局域網(wǎng)展示網(wǎng)頁
學(xué)生推薦、自薦、評論
激發(fā)學(xué)生向上進(jìn)取的學(xué)習(xí)態(tài)度，也可以使學(xué)生橫向?qū)W習(xí)
課堂小結(jié)及課后要求
小結(jié)：找優(yōu)缺點(diǎn)
思考、總結(jié)
進(jìn)步引導(dǎo)學(xué)生學(xué)習(xí)
課后思考
1、讓你的網(wǎng)頁互相網(wǎng)上也被全世界人所瀏覽，那你該怎樣實(shí)現(xiàn)
2、用DREAMWEAVER制作的網(wǎng)頁與我們平時(shí)所見的網(wǎng)頁效果一樣嗎？
全班互動學(xué)習(xí)進(jìn)一步拓展學(xué)生的學(xué)習(xí)思路，學(xué)習(xí)空間，加強(qiáng)自學(xué)、互學(xué)的能力
五、說板書設(shè)計(jì)：
考慮到信息技術(shù)學(xué)科教學(xué)的實(shí)際特點(diǎn)，所以在板書設(shè)計(jì)上我主要體現(xiàn)了以下三個(gè)特點(diǎn)。
突出簡要內(nèi)容
突出課時(shí)目標(biāo)
設(shè)置“共性問題”、“總結(jié)解決”版面
板書設(shè)計(jì) 網(wǎng)頁制作
第一課時(shí)：
網(wǎng)頁文件說明
1、常見的網(wǎng)頁制作工具
2、網(wǎng)頁文件的擴(kuò)展名為htm或html
3、瀏覽器所顯示的不是語言代碼而描述的形象
二、理念構(gòu)成
1、目標(biāo)：熟悉用dreamweaver制作網(wǎng)頁的基本方法
2、分類指導(dǎo)
共性問題
總結(jié)解決 第二課時(shí)目標(biāo)
設(shè)計(jì)網(wǎng)頁，內(nèi)容豐富，突出主題，展示個(gè)性多種素材綜合運(yùn)用(可以自己準(zhǔn)備素材)第二課時(shí)：
一、目標(biāo)：
1、設(shè)計(jì)網(wǎng)頁，內(nèi)容豐富，突出主題，展示個(gè)
2、種素材綜合運(yùn)用(可以使用自己準(zhǔn)備的素材)
二、設(shè)計(jì)制作：
共性問題
總結(jié)解決
三、展示、討論
四、課后思考
網(wǎng)頁制作與設(shè)計(jì)教案
第一講 網(wǎng)頁設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計(jì).............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動態(tài)網(wǎng)頁設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網(wǎng)頁設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁設(shè)計(jì)的相關(guān)術(shù)語及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)難點(diǎn)】
理解網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)方式】
講授式、討論式、案例分析式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁工場》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址：端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語法
1、雙標(biāo)記
語法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行 2.2.10 插入水平線 使用
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說明
- 列表?xiàng)l目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作?！窘虒W(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性?！窘虒W(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標(biāo)志及屬性的含義?！窘虒W(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁
