第一篇：網(wǎng)頁(yè)教案1
網(wǎng)頁(yè)制作---序言(理論課：1節(jié))
一、常用網(wǎng)頁(yè)制作工具
1、FontPage2000（Office辦公軟件）
2、Dreamweaver MX 2004
二、美化網(wǎng)頁(yè)的工具
1、Flash動(dòng)畫(huà)（動(dòng)畫(huà)制作工具）
2、PhotoShop(圖像處理工具)
3、Premiere(非線性視頻處理工具，音樂(lè)和視頻剪輯工具)
三、網(wǎng)頁(yè)類型
1、靜態(tài)網(wǎng)頁(yè)
2、動(dòng)態(tài)網(wǎng)頁(yè)
四、常用概念
1、網(wǎng)頁(yè)、網(wǎng)站
2、站點(diǎn)、文件夾
3、客戶端、服務(wù)器端
五、Dreamweaver MX 2004啟動(dòng)
1、桌面
2、開(kāi)始按鈕
3、我的電腦
六、Dreamweaver MX 2004工作界面
1、標(biāo)題欄
2、菜單欄
3、常用快捷鈕
4、視圖類型
5、編輯區(qū)
6、面板組
七、建立站點(diǎn)的方法
注意：
1、自己建立網(wǎng)站所用到的文件（網(wǎng)頁(yè)、圖片、聲音、動(dòng)畫(huà)、視頻等）必須放在站點(diǎn)所對(duì)應(yīng)的文件夾下
2、站點(diǎn)與文件夾的名字可相同，也可不同
3、網(wǎng)頁(yè)的測(cè)試方法
實(shí) 驗(yàn)
實(shí)驗(yàn)題目：
1、熟悉Dreamweaver MX 2004的工作界面
2、建立站點(diǎn)（包含網(wǎng)頁(yè)、圖像、動(dòng)畫(huà)及文件夾）
第二篇：下載網(wǎng)頁(yè)教案
下載網(wǎng)頁(yè)教案
一、學(xué)習(xí)目標(biāo)：
(1)學(xué)會(huì)下載網(wǎng)頁(yè)的方法。
(2)學(xué)會(huì)移動(dòng)文件（文件夾）的方法。
(3)以教師演示講授、引導(dǎo)啟發(fā)和學(xué)生討論嘗試、自主學(xué)習(xí)相結(jié)合的方式，學(xué)會(huì)在因特網(wǎng)上下載有用的網(wǎng)頁(yè)。
(4)通過(guò)導(dǎo)入展示的精美網(wǎng)頁(yè)激發(fā)學(xué)生學(xué)習(xí)下載網(wǎng)頁(yè)的興趣，并進(jìn)一步提高學(xué)生使用信息技術(shù)的能力。
(5)在保存圖片的自主探究中，培養(yǎng)學(xué)生發(fā)現(xiàn)問(wèn)題并自我解決問(wèn)題的能力，提升學(xué)生的自學(xué)能力。
二、教學(xué)重點(diǎn)、難點(diǎn)：
1、學(xué)會(huì)下載網(wǎng)頁(yè)和移動(dòng)文件（文件夾）的方法。
2、保存網(wǎng)頁(yè)后應(yīng)該有兩個(gè)文件，復(fù)制操作和移動(dòng)操作的區(qū)別。
三、教學(xué)過(guò)程：
（一）導(dǎo)入
師：同學(xué)們，我們先一起來(lái)欣賞一些網(wǎng)頁(yè)吧！這些網(wǎng)頁(yè)好看嗎？同學(xué)們一定非常想保留下來(lái)吧？好！今天我們就來(lái)學(xué)習(xí)下載網(wǎng)頁(yè)！（出示課題）
（二）新授
1、下載網(wǎng)頁(yè)
師：如果我們作為小小老師，向別人介紹中國(guó)兒童資源網(wǎng)的時(shí)候，能把完整的網(wǎng)頁(yè)也呈現(xiàn)給大家，那同學(xué)們就更容易理解了。回憶一下我們前面學(xué)習(xí)的下載圖片和下載文字的方法，那么能不能把網(wǎng)頁(yè)完整的下載下來(lái)，即使在斷開(kāi)網(wǎng)絡(luò)時(shí)也能看到完整的網(wǎng)頁(yè)呢？
師停頓，生沉思片刻
生回答上臺(tái)演示
一生：首先全部選定
一生準(zhǔn)備按住鼠標(biāo)左鍵全部拖動(dòng) 有學(xué)生插嘴：按Ctrl+A 一生用自己方法選定后，又嘗試了Ctrl+A，非常成功，然后復(fù)制，打開(kāi)Word文檔，粘貼。
師：非常棒！XX學(xué)生用了我們前面下載文字的方法復(fù)制了網(wǎng)頁(yè)中所有的內(nèi)容，真會(huì)學(xué)以致用但是，我們小朋友仔細(xì)觀察一下，用這種方法，有沒(méi)有把網(wǎng)頁(yè)中所有內(nèi)容完整保存下來(lái)。
生討論回答，找出不同之處。師：那么怎么辦呢？ 二生：把它添加到收藏夾
師：我們一起回憶一下，在哪兒用過(guò)“添加到收藏夾”
生回答
師小結(jié)：添加到收藏夾是幫助我們快速訪問(wèn)網(wǎng)站的方法，不是把網(wǎng)頁(yè)下載到我們計(jì)算機(jī)里。
三生：文件——另存為
師強(qiáng)調(diào)保存類型
師讓學(xué)生掌聲鼓勵(lì)操作正確的三生。
我們來(lái)看看保存好的網(wǎng)頁(yè)，和前面下載文字的文件有什么不同嗎？出現(xiàn)了兩個(gè)文件，一個(gè)是網(wǎng)頁(yè)文件，一個(gè)是同名文件夾。這個(gè)文件夾里有些什么文件？（學(xué)生可以點(diǎn)擊文件夾瀏覽）
如果這個(gè)文件夾不見(jiàn)了，或者網(wǎng)頁(yè)文件放到了其他文件夾里，又會(huì)怎樣？（如果有學(xué)生發(fā)生這樣的問(wèn)題也可以由學(xué)生提出）自己嘗試一下，然后和小組同學(xué)交流或者翻看書(shū)本，把你的交流結(jié)果告訴大家。
討論保存網(wǎng)頁(yè)的要領(lǐng)。
好，下面同學(xué)們自己來(lái)試一試，查找我們江陰一個(gè)景點(diǎn)的網(wǎng)頁(yè)，然后把網(wǎng)頁(yè)保存到“我的文檔”里。
師生解決操作中遇到的問(wèn)題。
2、移動(dòng)文件和文件夾。（打開(kāi)網(wǎng)頁(yè)文件夾，用縮略圖方式顯示圖片）這是剛才下載的網(wǎng)頁(yè)中的圖片，很漂亮，老師很喜歡，想把它放入自己的文件夾里，可以怎么辦呢？（復(fù)制文件）（前面有復(fù)制文件（文件夾）的基礎(chǔ)）
師讓學(xué)生獨(dú)立完成移動(dòng)文件（文件夾）的操作 四人一小組討論移動(dòng)的方法 組內(nèi)匯報(bào)演示
學(xué)生的匯報(bào)實(shí)在精彩，方法多種多樣
1、按右鍵剪切——粘貼
粘貼的方法（1）直接在文件夾上按右鍵粘貼
（2）打開(kāi)文件夾后粘貼
2、直接拖動(dòng)
3、在菜單欄上選擇“移動(dòng)到文件夾”
兩人合作探究選定多個(gè)文件的方法，教師提示兩個(gè)功能鍵Ctrl，Shift 學(xué)生匯報(bào)
1、不連續(xù)的選定Ctrl
2、連續(xù)的選定Shift
3、用鼠標(biāo)框住 誤操作帶來(lái)的意外發(fā)現(xiàn)
生：按住Ctrl健選定多個(gè)文件，不小心進(jìn)行了“拖動(dòng)”操作，復(fù)制了多個(gè)文件。
師總結(jié)： shift：按住shift鍵，把鼠標(biāo)指針指向最后一個(gè)要選定的文件，然后單擊，就可以選定首尾兩個(gè)文件之間的所有文件。被選中的文件都是以藍(lán)底白字顯示。（廣播演示）ctrl：選定不連續(xù)的文件
學(xué)會(huì)這幾種選定文件的方法，有再多的文件要選定我們都不怕了。下面請(qǐng)同學(xué)們將下載的網(wǎng)頁(yè)文件夾里的圖片移動(dòng)到你的文件夾里。
小結(jié)：我們可以用復(fù)制或移動(dòng)的方法把文件放入其他的文件夾里，也可以同樣的操作把文件夾復(fù)制或移動(dòng)到其他的文件夾里。
3、比較。
剛才我們用了兩種方法把文件放進(jìn)自己的文件夾里，那到底復(fù)制文件和移動(dòng)文件兩種操作有什么不同呢？（學(xué)生歸納總結(jié)）
三、總結(jié)。
通過(guò)今天的學(xué)習(xí)，你有了哪些收獲呢？希望同學(xué)們?cè)谝院蟮牟僮髦校`活運(yùn)用我們今天學(xué)到的知識(shí)！
第三篇：網(wǎng)頁(yè)教案
三、DW安裝應(yīng)用
在學(xué)網(wǎng)頁(yè)創(chuàng)建中，有一款非常重要的軟件叫ＤＷ軟件，它件全稱：Ｄreamweaver，被稱為網(wǎng)頁(yè)三劍客之一． ＤＷ軟件學(xué)習(xí)內(nèi)容： １.ＤＷ軟件下載安裝
２.創(chuàng)建ＨＴＭＬ文檔和ＣＳＳ樣式表并將二者關(guān)聯(lián)起來(lái) ３.ＤＷ軟件的應(yīng)用 Ａ.ＨＴＭＬ文檔的創(chuàng)建 １.打開(kāi)ＤＷ軟件
２.如果想創(chuàng)建一個(gè)ＨＴＭＬ文檔，只要點(diǎn)擊“新建”下面的ＨＴＭＬ，這個(gè)就完成了一個(gè)ＨＴＭＬ文檔的創(chuàng)建。
３.在當(dāng)前頁(yè)面點(diǎn)擊“代碼”，就可以看到我們新建一個(gè)ＨＴＭＬ文檔的時(shí)候，包括“聲明”、“標(biāo)簽”、“根元素”還有
標(biāo)簽及里面的第四篇：網(wǎng)頁(yè)策劃書(shū)1
網(wǎng)頁(yè)策劃書(shū)
網(wǎng)站首頁(yè)：
?少采用大型圖片，用戶關(guān)心的信息在首頁(yè)體現(xiàn)，不應(yīng)多次點(diǎn)擊；
?首頁(yè)下載速度要快；
?首頁(yè)有效信息量豐富；
?首頁(yè)有標(biāo)題；
?提供一種以上外語(yǔ)鏈接頁(yè)面。
?主頁(yè)布局比整潔，重要信息得以重點(diǎn)體現(xiàn)；
?打開(kāi)網(wǎng)頁(yè)不宜彈出多個(gè)窗口，影響正常瀏覽；
?不要刻意追求“創(chuàng)意”效果，以至于很難理解網(wǎng)站要表達(dá)的意思。
頁(yè)面信息：
?重要信息完整，如聯(lián)系方式和產(chǎn)品介紹等；
?頁(yè)面信息足夠，減少多次翻頁(yè)；
?去除與企業(yè)形象、產(chǎn)品、促銷等方面無(wú)關(guān)的信息；
?產(chǎn)品詳細(xì)介紹內(nèi)容過(guò)少；
?內(nèi)容頁(yè)面沒(méi)有標(biāo)題，或者全部使用公司名為標(biāo)題；
?客戶能夠方便的及時(shí)維護(hù)補(bǔ)充，保持其時(shí)效性；
?不允許有無(wú)任何內(nèi)容的欄目。
網(wǎng)頁(yè)字體和美工：
?注重美術(shù)效果，但不必w大量采用圖片，影響網(wǎng)頁(yè)下載速度；
?注重美觀，但有些連基本信息內(nèi)容都不可用圖片格式，影響基本信息獲取；?文字適中、顏色明晰、不影響正常視覺(jué)；
?頁(yè)面不應(yīng)過(guò)于花哨。
網(wǎng)編部蒙琴
第五篇：網(wǎng)頁(yè)制作教案
網(wǎng)頁(yè)制作與設(shè)計(jì)教案
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁(yè)中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁(yè)的基本方法............................................................................................................4 第二講 HTML的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級(jí)鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡(jiǎn)單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................13 3.2 在頁(yè)面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁(yè)中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì).............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁(yè)設(shè)計(jì)案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語(yǔ)言簡(jiǎn)介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語(yǔ)句、循環(huán)語(yǔ)句和過(guò)程.............................................................20 4.3 VBSCRIPT基本語(yǔ)句.............................................................................................................20
第一講 網(wǎng)頁(yè)設(shè)計(jì)概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)難點(diǎn)】
理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁(yè)工場(chǎng)》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡(jiǎn)稱，一般也稱之為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地址：端口號(hào)/路徑名/文件名
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í)式。【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語(yǔ)法
1、雙標(biāo)記
語(yǔ)法：
<標(biāo)記>內(nèi)容
2、單標(biāo)記 語(yǔ)法：<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語(yǔ)法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語(yǔ)句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無(wú)序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級(jí)鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對(duì)于前面的文字增大一級(jí)。
......，使文字大小相對(duì)于前面的文字減小一級(jí)。......，使文字成為前一個(gè)字符的上標(biāo)。......，使文字成為前一個(gè)字符的下標(biāo)。
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開(kāi)始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行
標(biāo)記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無(wú)序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
2、有序列表
- 列表?xiàng)l目1
- 列表?xiàng)l目2......
3、定義列表
- 列表?xiàng)l目1
- 條目1的說(shuō)明
- 列表?xiàng)l目2
- 條目2的說(shuō)明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)志中，書(shū)簽鏈接是一類特殊的鏈接方式，理解和使用書(shū)簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作。【教學(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的含義。【教學(xué)方式】
案例分析式、項(xiàng)目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計(jì)》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁(yè)制作教程》材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁(yè)中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |