《網(wǎng)頁(yè)制作工具》參考教案

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