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

1、文檔供參考，可復(fù)制、編制，期待您的好評(píng)與關(guān)注！ 網(wǎng)頁整理工具參考教案教學(xué)主題網(wǎng)頁整理工具（1）（Frontpage和Dreamweaver的使用）教案設(shè)計(jì)趙志教案編號(hào)13適用年級(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ì)和整理簡(jiǎn)單的動(dòng)態(tài)網(wǎng)頁所需資源和環(huán)境網(wǎng)絡(luò)資源使用搜索引擎查找網(wǎng)頁設(shè)計(jì)相關(guān)的信息（包括圖片、文字、視頻等）常規(guī)資源1、浙江教育出版社2

2、004版信息技術(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)頁的興趣。

3、“工欲善其事，必先利其器”從而引出整理網(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)畫、逼真的三維圖像），使

4、用到的輔助工具。通常網(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ì)的簡(jiǎn)單網(wǎng)頁）教師評(píng)價(jià)： 網(wǎng)頁整理DreamweaverD

5、reamweaver是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è)

6、環(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)頁工具

7、學(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)合作4較為合作3能夠合作2需要鼓勵(lì)1組員評(píng)價(jià)用Frontpage整理網(wǎng)頁，熟練有創(chuàng)意4用Frontpage整理網(wǎng)頁，比較熟練3用Frontpage整理網(wǎng)頁，整理成功2用Frontpage整理網(wǎng)頁，還需多加練習(xí)1 三、打開網(wǎng)頁整理軟件Dreamweaver，利用老師提供的素材（素

8、材位置），整理一個(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較為合作3能夠合作2需要鼓勵(lì)1組員評(píng)價(jià)用Dreamweaver層的功能整理動(dòng)態(tài)網(wǎng)頁，熟練有創(chuàng)意4用Dreamweaver層的功能整理動(dòng)態(tài)網(wǎng)