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

1、文檔供參考，可復制、編制，期待您的好評與關注！ 網(wǎng)頁整理工具參考教案教學主題網(wǎng)頁整理工具（1）（Frontpage和Dreamweaver的使用）教案設計趙志教案編號13適用年級高二年級教學課時1課時教材分析概述：通過網(wǎng)頁設計，了解并熟悉網(wǎng)頁設計軟件的基本使用方法，掌握常用工具的使用方法重點：初步了解網(wǎng)頁設計軟件Dreamweaver中層和時間軸的設置，體會動態(tài)網(wǎng)頁設計難點：層和時間軸的設置學習目標1、掌握網(wǎng)頁整理軟件Dreamweaver的基本使用方法2、學會設計和整理簡單的動態(tài)網(wǎng)頁所需資源和環(huán)境網(wǎng)絡資源使用搜索引擎查找網(wǎng)頁設計相關的信息（包括圖片、文字、視頻等）常規(guī)資源1、浙江教育出版社2

2、004版信息技術基礎第五章5.3.1節(jié)配套光盤2、教材配套教師用書3、小組合作學習任務單教學支撐環(huán)境計算機網(wǎng)絡教室、所有計算機能夠上網(wǎng)、多媒體網(wǎng)絡教室軟件或者投影儀教學設計教學引導問題設計問題目的你知道網(wǎng)頁上面文字的滾動效果是怎么整理出來的嗎？激發(fā)學生的好奇心你知道如何讓網(wǎng)頁中的一幅圖片動起來？引導學生設計動態(tài)網(wǎng)頁中圖片運動的效果你知道有哪些網(wǎng)頁動態(tài)效果？為學生的課后探究學習做鋪墊你知道用Dreamweaver軟件如何預覽你設計的動態(tài)網(wǎng)頁？體會動態(tài)網(wǎng)頁的效果，進一步完善網(wǎng)頁設計教學過程設計教師活動學生活動1、新課導入展示全國中小學電腦整理活動中的優(yōu)秀的網(wǎng)頁整理母親河， 激發(fā)學生整理網(wǎng)頁的興趣。

3、“工欲善其事，必先利其器”從而引出整理網(wǎng)頁需要掌握必要的整理工具。只有掌握了必要的網(wǎng)頁整理工具軟件才能做出動感十足、耳目一新、獨具體色的網(wǎng)頁。2、教學內(nèi)容隨著因特網(wǎng)技術的不斷發(fā)展，網(wǎng)頁整理工具越來越多，選擇一種得心應手的工具軟件，能夠收到事半功倍的效果。 設問：面對那么誘人的網(wǎng)頁，要想學習網(wǎng)頁整理，我們應該選擇什么樣的網(wǎng)頁整理工具，首先同學們需要先了解有哪些軟件，它們各有什么樣的特點？布置任務：請同學們完成任務單中的第一個任務。教師點撥：網(wǎng)頁工具軟件大體上分為兩類：一種著眼于網(wǎng)頁、網(wǎng)站整體規(guī)劃使用的基本工具；另一類是著眼于網(wǎng)頁上面的某些元素（如：漂亮的按鈕、栩栩如生的動畫、逼真的三維圖像），使

4、用到的輔助工具。通常網(wǎng)頁設計需要考慮整體思想。先全局規(guī)劃網(wǎng)頁的思想或整體風格，然后對局部的圖像處理、顏色搭配、動畫圖片設置的優(yōu)化工作。先大后小的思想。本節(jié)課先來學習基本工具Frontpage和Dreamweaver。 網(wǎng)頁設計工具Frontpage：Frontpage是微軟公司開發(fā)的一款網(wǎng)頁設計軟件，其軟件界面和文字編輯功能與Word軟件相似，熟悉Word的人很容易學會。同時提供的模板可以令初學者很容易的整理相當美觀的網(wǎng)頁。布置任務：請同學們完成任務單中的第二個任務：利用教師提供的素材（圖片，文字內(nèi)容），整理一個網(wǎng)頁。（教師提供一個已設計的簡單網(wǎng)頁）教師評價： 網(wǎng)頁整理DreamweaverD

5、reamweaver是Macromedia公司的一款專業(yè)的網(wǎng)頁設計軟件，提供了很多方便操作和使用的工具欄，如：對象工具欄、站點管理窗口、快速工具欄。并且該公司還有一系列的配套產(chǎn)品可用，比如圖形編輯軟件Fireworks、動畫整理軟件Flash。運用他特有的“行為”、“層”等功能可以容易的生成網(wǎng)頁的動態(tài)效果。下面讓我們來體驗Dreamweaver軟件的動態(tài)網(wǎng)頁整理布置任務：請同學們完成任務單中的第三個任務：運用Dreamweaver中的層、時間軸整理動態(tài)網(wǎng)頁圖像移動設問1、為什么要調(diào)整“層”與“背景圖像”的大小，使其等大？設問2、時間軸上面的“關鍵幀”有什么特點？設問3、操作過程中感到最難的一個

6、環(huán)節(jié)是什么？設問4、對自己設計的作品的評價是什么？結(jié)尾：同學們觀察到，我們設計的作品和本節(jié)課一開始展示的作品有很大的差距，原因在于，僅僅使用我們學習的Frontpage和Dreamweaver是不能整理出那么美麗的網(wǎng)頁的，我們還需要掌握一些整理網(wǎng)頁的輔助工具。也就是我們下節(jié)課需要講解的“輔助工具”最后給同學們留下了一個課后任務。借助我們的因特網(wǎng)完成任務一各小組總結(jié)不同的網(wǎng)頁整理工具軟件的特點、主要功能。學生回憶必修教材使用Frontpage設計“故宮”主題網(wǎng)頁的過程學生小組合作完成任務二填寫“任務二”評價表格小組合作完成任務三并填寫“任務三”評價表格   網(wǎng)頁工具

7、學習任務單 一、借助因特網(wǎng)，組內(nèi)成員分工查詢整理網(wǎng)頁常用到的工具軟件，最后匯總完成下面的表格。常用工具主要功能（總結(jié)每個軟件的主要功能）完成人員二、打開網(wǎng)頁整理軟件FrontPage，利用老師提供的一些素材（素材放在D盤的“網(wǎng)頁素材”文件夾內(nèi)），整理一個網(wǎng)頁，并保存。評價表評價指標組長評價合作精神主動合作4較為合作3能夠合作2需要鼓勵1組員評價用Frontpage整理網(wǎng)頁，熟練有創(chuàng)意4用Frontpage整理網(wǎng)頁，比較熟練3用Frontpage整理網(wǎng)頁，整理成功2用Frontpage整理網(wǎng)頁，還需多加練習1 三、打開網(wǎng)頁整理軟件Dreamweaver，利用老師提供的素材（素

8、材位置），整理一個動態(tài)網(wǎng)頁，并仔細觀察、琢磨其動態(tài)效果。步驟提示：（提醒：每一步都需要注意觀察有沒有多種方法實現(xiàn)同一個操作）1、打開軟件，新建一個“基本頁”。（可參考課本具體步驟）2、修改網(wǎng)頁的標題為“我的第一個動態(tài)網(wǎng)頁”；3、插入“圖層”，選擇“描繪層”插入，找到并觀察“層屬性面板”，修改“背景圖像”；4、調(diào)整層的大小，使其與圖像等大；5、找到“時間軸”，將層拖入“時間軸”的第一幀內(nèi)；6、按住第15幀上的空心圓點，向右拖動到第60幀；7、在30幀處右鍵點擊，彈出菜單，選擇“增加關鍵幀”；8、對“時間軸”上的每處“關鍵幀”進行設置，從而產(chǎn)生層的運動效果；9、在瀏覽器中觀看這一動態(tài)網(wǎng)頁的效果。<學習小竅門>：具體操作，觀察課本，共同討論，集體研究，會者演示，伴隨講解，自己上機，再練一遍。評價指標組長評價合作精神主動合作4較為合作3能夠合作2需要鼓勵1組員評價用Dreamweaver層的功能整理動態(tài)網(wǎng)頁，熟練有創(chuàng)意4用Dreamweaver層的功能整理動態(tài)網(wǎng)