《網(wǎng)頁制作工具》參考教案 教學(xué)主題
網(wǎng)頁制作工具（1）（Frontpage和Dreamweaver的使用）
教案設(shè)計(jì)
趙志
教案編號(hào)
適用年級(jí)
高二年級(jí)
教學(xué)課時(shí)
1課時(shí)
教材分析
概述：通過網(wǎng)頁設(shè)計(jì)，了解并熟悉網(wǎng)頁設(shè)計(jì)軟件的基本使用方法，掌握常用工具的使用方法 重點(diǎn)：初步了解網(wǎng)頁設(shè)計(jì)軟件Dreamweaver中層和時(shí)間軸的設(shè)置，體會(huì)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì) 難點(diǎn)：層和時(shí)間軸的設(shè)置
學(xué)習(xí)目標(biāo)
1、掌握網(wǎng)頁制作軟件Dreamweaver的基本使用方法
2、學(xué)會(huì)設(shè)計(jì)和制作簡單的動(dòng)態(tài)網(wǎng)頁
所需資源和環(huán)境
網(wǎng)絡(luò)資源
使用搜索引擎查找網(wǎng)頁設(shè)計(jì)相關(guān)的信息（包括圖片、文字、視頻等）
常規(guī)資源
1、浙江教育出版社2004版《信息技術(shù)基礎(chǔ)》第五章5.3.1節(jié)配套光盤
2、教材配套教師用書
3、小組合作學(xué)習(xí)任務(wù)單
教學(xué)支撐環(huán)境
計(jì)算機(jī)網(wǎng)絡(luò)教室、所有計(jì)算機(jī)能夠上網(wǎng)、多媒體網(wǎng)絡(luò)教室軟件或者投影儀
教學(xué)設(shè)計(jì)
教學(xué)引導(dǎo)問題設(shè)計(jì)
問題
目的你知道網(wǎng)頁上面文字的滾動(dòng)效果是怎么制作出來的嗎？
激發(fā)學(xué)生的好奇心
你知道如何讓網(wǎng)頁中的一幅圖片動(dòng)起來？
引導(dǎo)學(xué)生設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁中圖片運(yùn)動(dòng)的效果
你知道有哪些網(wǎng)頁動(dòng)態(tài)效果？
為學(xué)生的課后探究學(xué)習(xí)做鋪墊
你知道用Dreamweaver軟件如何預(yù)覽你設(shè)計(jì)的動(dòng)態(tài)網(wǎng)頁？
體會(huì)動(dòng)態(tài)網(wǎng)頁的效果，進(jìn)一步完善網(wǎng)頁設(shè)計(jì)
教學(xué)過程設(shè)計(jì)
教師活動(dòng)
學(xué)生活動(dòng)
1、新課導(dǎo)入
展示全國中小學(xué)電腦制作活動(dòng)中的優(yōu)秀的網(wǎng)頁制作《母親河》，激發(fā)學(xué)生制作網(wǎng)頁的興趣?！肮び破涫?，必先利其器”從而引出制作網(wǎng)頁需要掌握必要的制作工具。只有掌握了必要的網(wǎng)頁制作工具軟件才能做出動(dòng)感十足、耳目一新、獨(dú)具體色的網(wǎng)頁。
2、教學(xué)內(nèi)容
隨著因特網(wǎng)技術(shù)的不斷發(fā)展，網(wǎng)頁制作工具越來越多，選擇一種得心應(yīng)手的工具軟件，能夠收到事半功倍的效果。
⑴設(shè)問：面對(duì)那么誘人的網(wǎng)頁，要想學(xué)習(xí)網(wǎng)頁制作，我們應(yīng)該選擇什么樣的網(wǎng)頁制作工具，首先同學(xué)們需要先了解有哪些軟件，它們各有什么樣的特點(diǎn)？ 布置任務(wù)：請(qǐng)同學(xué)們完成任務(wù)單中的第一個(gè)任務(wù)。教師點(diǎn)撥：網(wǎng)頁工具軟件大體上分為兩類：一種著眼于網(wǎng)頁、網(wǎng)站整體規(guī)劃使用的基本工具；另一類是著眼于網(wǎng)頁上面的某些元素（如：漂亮的按鈕、栩栩如生的動(dòng)畫、逼真的三維圖像），使用到的輔助工具。
通常網(wǎng)頁設(shè)計(jì)需要考慮整體思想。先全局規(guī)劃網(wǎng)頁的思想或整體風(fēng)格，然后對(duì)局部的圖像處理、顏色搭配、動(dòng)畫圖片設(shè)置的優(yōu)化工作。先大后小的思想。本節(jié)課先來學(xué)習(xí)基本工具Frontpage和Dreamweaver。⑵網(wǎng)頁設(shè)計(jì)工具Frontpage：
Frontpage是微軟公司開發(fā)的一款網(wǎng)頁設(shè)計(jì)軟件，其軟件界面和文字編輯功能與Word軟件相似，熟悉Word的人很容易學(xué)會(huì)。同時(shí)提供的模板可以令初學(xué)者很容易的制作相當(dāng)美觀的網(wǎng)頁。布置任務(wù)：
請(qǐng)同學(xué)們完成任務(wù)單中的第二個(gè)任務(wù)：利用教師提供的素材（圖片，文字內(nèi)容），制作一個(gè)網(wǎng)頁。（教師提供一個(gè)已設(shè)計(jì)的簡單網(wǎng)頁）教師評(píng)價(jià)：
⑶網(wǎng)頁制作Dreamweaver Dreamweaver是Macromedia公司的一款專業(yè)的網(wǎng)頁設(shè)計(jì)軟件，提供了很多方便操作和使用的工具欄，如：對(duì)象工具欄、站點(diǎn)管理窗口、快速工具欄。并且該公司還有一系列的配套產(chǎn)品可用，比如圖形編輯軟件Fireworks、動(dòng)畫制作軟件Flash。運(yùn)用他特有的“行為”、“層”等功能可以容易的生成網(wǎng)頁的動(dòng)態(tài)效果。
下面讓我們來體驗(yàn)Dreamweaver軟件的動(dòng)態(tài)網(wǎng)頁制作 布置任務(wù)：
請(qǐng)同學(xué)們完成任務(wù)單中的第三個(gè)任務(wù)： 運(yùn)用Dreamweaver中的層、時(shí)間軸制作動(dòng)態(tài)網(wǎng)頁——圖像移動(dòng) 設(shè)問
1、為什么要調(diào)整“層”與“背景圖像”的大小，使其等大？ 設(shè)問
2、時(shí)間軸上面的“關(guān)鍵幀”有什么特點(diǎn)？ 設(shè)問
3、操作過程中感到最難的一個(gè)環(huán)節(jié)是什么？ 設(shè)問
4、對(duì)自己設(shè)計(jì)的作品的評(píng)價(jià)是什么？ 結(jié)尾：同學(xué)們觀察到，我們?cè)O(shè)計(jì)的作品和本節(jié)課一開始展示的作品有很大的差距，原因在于，僅僅使用我們學(xué)習(xí)的Frontpage和Dreamweaver是不能制作出那么美麗的網(wǎng)頁的，我們還需要掌握一些制作網(wǎng)頁的輔助工具。也就是我們下節(jié)課需要講解的“輔助工具” 最后給同學(xué)們留下了一個(gè)課后任務(wù)。
借助我們的因特網(wǎng)完成任務(wù)一
各小組總結(jié)不同的網(wǎng)頁制作工具軟件的特點(diǎn)、主要功能。
學(xué)生回憶必修教材使用Frontpage設(shè)計(jì)“故宮”主題網(wǎng)頁的過程 學(xué)生小組合作完成任務(wù)二 填寫“任務(wù)二”評(píng)價(jià)表格 小組合作完成任務(wù)三
并填寫“任務(wù)三”評(píng)價(jià)表格
網(wǎng)頁工具學(xué)習(xí)任務(wù)單
一、借助因特網(wǎng)，組內(nèi)成員分工查詢制作網(wǎng)頁常用到的工具軟件，最后匯總完成下面的表格。常用工具
主要功能（總結(jié)每個(gè)軟件的主要功能）
完成人員
二、打開網(wǎng)頁制作軟件FrontPage，利用老師提供的一些素材（素材放在D盤的“網(wǎng)頁素材”文件夾內(nèi)），制作一個(gè)網(wǎng)頁，并保存。評(píng)價(jià)表
評(píng)價(jià)指標(biāo)
組長評(píng)價(jià) 合作精神
主動(dòng)合作
較為合作
能夠合作
需要鼓勵(lì)
組員評(píng)價(jià)
用Frontpage制作網(wǎng)頁，熟練有創(chuàng)意
用Frontpage制作網(wǎng)頁，比較熟練 3
用Frontpage制作網(wǎng)頁，制作成功
用Frontpage制作網(wǎng)頁，還需多加練習(xí)
三、打開網(wǎng)頁制作軟件Dreamweaver，利用老師提供的素材（素材位置），制作一個(gè)動(dòng)態(tài)網(wǎng)頁，并仔細(xì)觀察、琢磨其動(dòng)態(tài)效果。步驟提示：（提醒：每一步都需要注意觀察有沒有多種方法實(shí)現(xiàn)同一個(gè)操作）
1、打開軟件，新建一個(gè)“基本頁”。（可參考課本具體步驟）
2、修改網(wǎng)頁的標(biāo)題為“我的第一個(gè)動(dòng)態(tài)網(wǎng)頁”；
3、插入“圖層”，選擇“描繪層”插入，找到并觀察“層屬性面板”，修改“背景圖像”；
4、調(diào)整層的大小，使其與圖像等大；
5、找到“時(shí)間軸”，將層拖入“時(shí)間軸”的第一幀內(nèi)；
6、按住第15幀上的空心圓點(diǎn)，向右拖動(dòng)到第60幀；
7、在30幀處右鍵點(diǎn)擊，彈出菜單，選擇“增加關(guān)鍵幀”；
8、對(duì)“時(shí)間軸”上的每處“關(guān)鍵幀”進(jìn)行設(shè)置，從而產(chǎn)生層的運(yùn)動(dòng)效果；
9、在瀏覽器中觀看這一動(dòng)態(tài)網(wǎng)頁的效果。
<學(xué)習(xí)小竅門>：具體操作，觀察課本，共同討論，集體研究，會(huì)者演示，伴隨講解，自己上機(jī)，再練一遍。
評(píng)價(jià)指標(biāo)
組長評(píng)價(jià)
合作精神
主動(dòng)合作 4
較為合作
能夠合作
需要鼓勵(lì)
組員評(píng)價(jià)
用Dreamweaver層的功能制作動(dòng)態(tài)網(wǎng)頁，熟練有創(chuàng)意
用Dreamweaver層的功能制作動(dòng)態(tài)網(wǎng)頁，比較熟練
用Dreamweaver層的功能制作動(dòng)態(tài)網(wǎng)頁，制作成功
用Dreamweaver層的功能制作動(dòng)態(tài)網(wǎng)頁，還需多加練習(xí)
四、請(qǐng)同學(xué)們課下討論，如果要想做出漂亮的網(wǎng)頁，還需要學(xué)習(xí)哪些方面的知識(shí)，需要掌握哪些網(wǎng)頁制作工具？ 欠缺知識(shí)
待學(xué)軟件
網(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的文本、圖片與超級(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中簡單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計(jì).............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級(jí)鏈接的運(yùn)用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動(dòng)態(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é)生對(duì)網(wǎng)站及網(wǎng)頁有一定的認(rèn)識(shí)，激發(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ù)語?！窘虒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地址：端口號(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í)式?！窘虒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的文本、圖片與超級(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.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)頁中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級(jí)鏈接標(biāo)志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級(jí)鏈接標(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)元素對(duì)應(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)頁
