下載網(wǎng)頁教案
一、學(xué)習(xí)目標(biāo)：
(1)學(xué)會下載網(wǎng)頁的方法。
(2)學(xué)會移動文件（文件夾）的方法。
(3)以教師演示講授、引導(dǎo)啟發(fā)和學(xué)生討論嘗試、自主學(xué)習(xí)相結(jié)合的方式，學(xué)會在因特網(wǎng)上下載有用的網(wǎng)頁。
(4)通過導(dǎo)入展示的精美網(wǎng)頁激發(fā)學(xué)生學(xué)習(xí)下載網(wǎng)頁的興趣，并進(jìn)一步提高學(xué)生使用信息技術(shù)的能力。
(5)在保存圖片的自主探究中，培養(yǎng)學(xué)生發(fā)現(xiàn)問題并自我解決問題的能力，提升學(xué)生的自學(xué)能力。
二、教學(xué)重點(diǎn)、難點(diǎn)：
1、學(xué)會下載網(wǎng)頁和移動文件（文件夾）的方法。
2、保存網(wǎng)頁后應(yīng)該有兩個文件，復(fù)制操作和移動操作的區(qū)別。
三、教學(xué)過程：
（一）導(dǎo)入
師：同學(xué)們，我們先一起來欣賞一些網(wǎng)頁吧！這些網(wǎng)頁好看嗎？同學(xué)們一定非常想保留下來吧？好！今天我們就來學(xué)習(xí)下載網(wǎng)頁！（出示課題）
（二）新授
1、下載網(wǎng)頁
師：如果我們作為小小老師，向別人介紹中國兒童資源網(wǎng)的時候，能把完整的網(wǎng)頁也呈現(xiàn)給大家，那同學(xué)們就更容易理解了?；貞浺幌挛覀兦懊鎸W(xué)習(xí)的下載圖片和下載文字的方法，那么能不能把網(wǎng)頁完整的下載下來，即使在斷開網(wǎng)絡(luò)時也能看到完整的網(wǎng)頁呢？
師停頓，生沉思片刻
生回答上臺演示
一生：首先全部選定
一生準(zhǔn)備按住鼠標(biāo)左鍵全部拖動 有學(xué)生插嘴：按Ctrl+A 一生用自己方法選定后，又嘗試了Ctrl+A，非常成功，然后復(fù)制，打開Word文檔，粘貼。
師：非常棒！XX學(xué)生用了我們前面下載文字的方法復(fù)制了網(wǎng)頁中所有的內(nèi)容，真會學(xué)以致用但是，我們小朋友仔細(xì)觀察一下，用這種方法，有沒有把網(wǎng)頁中所有內(nèi)容完整保存下來。
生討論回答，找出不同之處。師：那么怎么辦呢？ 二生：把它添加到收藏夾
師：我們一起回憶一下，在哪兒用過“添加到收藏夾”
生回答
師小結(jié)：添加到收藏夾是幫助我們快速訪問網(wǎng)站的方法，不是把網(wǎng)頁下載到我們計(jì)算機(jī)里。
三生：文件——另存為
師強(qiáng)調(diào)保存類型
師讓學(xué)生掌聲鼓勵操作正確的三生。
我們來看看保存好的網(wǎng)頁，和前面下載文字的文件有什么不同嗎？出現(xiàn)了兩個文件，一個是網(wǎng)頁文件，一個是同名文件夾。這個文件夾里有些什么文件？（學(xué)生可以點(diǎn)擊文件夾瀏覽）
如果這個文件夾不見了，或者網(wǎng)頁文件放到了其他文件夾里，又會怎樣？（如果有學(xué)生發(fā)生這樣的問題也可以由學(xué)生提出）自己嘗試一下，然后和小組同學(xué)交流或者翻看書本，把你的交流結(jié)果告訴大家。
討論保存網(wǎng)頁的要領(lǐng)。
好，下面同學(xué)們自己來試一試，查找我們江陰一個景點(diǎn)的網(wǎng)頁，然后把網(wǎng)頁保存到“我的文檔”里。
師生解決操作中遇到的問題。
2、移動文件和文件夾。（打開網(wǎng)頁文件夾，用縮略圖方式顯示圖片）這是剛才下載的網(wǎng)頁中的圖片，很漂亮，老師很喜歡，想把它放入自己的文件夾里，可以怎么辦呢？（復(fù)制文件）（前面有復(fù)制文件（文件夾）的基礎(chǔ)）
師讓學(xué)生獨(dú)立完成移動文件（文件夾）的操作 四人一小組討論移動的方法 組內(nèi)匯報(bào)演示
學(xué)生的匯報(bào)實(shí)在精彩，方法多種多樣
1、按右鍵剪切——粘貼
粘貼的方法（1）直接在文件夾上按右鍵粘貼
（2）打開文件夾后粘貼
2、直接拖動
3、在菜單欄上選擇“移動到文件夾”
兩人合作探究選定多個文件的方法，教師提示兩個功能鍵Ctrl，Shift 學(xué)生匯報(bào)
1、不連續(xù)的選定Ctrl
2、連續(xù)的選定Shift
3、用鼠標(biāo)框住 誤操作帶來的意外發(fā)現(xiàn)
生：按住Ctrl健選定多個文件，不小心進(jìn)行了“拖動”操作，復(fù)制了多個文件。
師總結(jié)： shift：按住shift鍵，把鼠標(biāo)指針指向最后一個要選定的文件，然后單擊，就可以選定首尾兩個文件之間的所有文件。被選中的文件都是以藍(lán)底白字顯示。（廣播演示）ctrl：選定不連續(xù)的文件
學(xué)會這幾種選定文件的方法，有再多的文件要選定我們都不怕了。下面請同學(xué)們將下載的網(wǎng)頁文件夾里的圖片移動到你的文件夾里。
小結(jié)：我們可以用復(fù)制或移動的方法把文件放入其他的文件夾里，也可以同樣的操作把文件夾復(fù)制或移動到其他的文件夾里。
3、比較。
剛才我們用了兩種方法把文件放進(jìn)自己的文件夾里，那到底復(fù)制文件和移動文件兩種操作有什么不同呢？（學(xué)生歸納總結(jié)）
三、總結(jié)。
通過今天的學(xué)習(xí)，你有了哪些收獲呢？希望同學(xué)們在以后的操作中，靈活運(yùn)用我們今天學(xué)到的知識！
三、DW安裝應(yīng)用
在學(xué)網(wǎng)頁創(chuàng)建中，有一款非常重要的軟件叫ＤＷ軟件，它件全稱：Ｄreamweaver，被稱為網(wǎng)頁三劍客之一． ＤＷ軟件學(xué)習(xí)內(nèi)容： １.ＤＷ軟件下載安裝
２.創(chuàng)建ＨＴＭＬ文檔和ＣＳＳ樣式表并將二者關(guān)聯(lián)起來 ３.ＤＷ軟件的應(yīng)用 Ａ.ＨＴＭＬ文檔的創(chuàng)建 １.打開ＤＷ軟件
２.如果想創(chuàng)建一個ＨＴＭＬ文檔，只要點(diǎn)擊“新建”下面的ＨＴＭＬ，這個就完成了一個ＨＴＭＬ文檔的創(chuàng)建。
３.在當(dāng)前頁面點(diǎn)擊“代碼”，就可以看到我們新建一個ＨＴＭＬ文檔的時候，包括“聲明”、“標(biāo)簽”、“根元素”還有
標(biāo)簽及里面的
和
網(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)站制作的基本流程?！窘虒W(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】
網(wǎng)頁設(shè)計(jì)中的若干術(shù)語?！窘虒W(xué)難點(diǎn)】
理解網(wǎng)頁設(shè)計(jì)中的若干術(shù)語。【教學(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)志的使用?！窘虒W(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)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標(biāo)。......，使文字成為前一個字符的下標(biāo)。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個轉(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)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標(biāo)志及屬性的含義。【教學(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)頁
