網(wǎng)頁設計電子教案項目備課.docx

項目一 網(wǎng)頁概述【項目描述】 在學習制作一個網(wǎng)頁之前，首先應該了解一些網(wǎng)頁和網(wǎng)站的基本知識，培養(yǎng)對網(wǎng)頁設計與制作這門學科的興趣，了解常用的網(wǎng)頁制作工具，熟悉網(wǎng)站開發(fā)的工作流程?！窘虒W目標】1. 師生互動，講解網(wǎng)頁設計與制作這門學科的發(fā)展前景，培養(yǎng)起學生的興趣。2. 了解Web的起源、特征和基本結構。3. 掌握web的常用術語。4. 了解網(wǎng)頁制作工具，掌握紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。5. 熟悉網(wǎng)站開發(fā)的工作流程。6. 瀏覽器與HTML?！卷椖糠峙洹?任務一 講解網(wǎng)頁設計與制作這門學科的發(fā)展前景。（1課時） 任務二 認識網(wǎng)頁制作軟件。（1課時） 任務三 網(wǎng)站規(guī)劃。（2課時） 任務四 Web簡介。（1課時） 任務五 用html代碼編寫“我的第一個網(wǎng)頁”的網(wǎng)頁。（1課時）任務二 認識網(wǎng)頁制作軟件（1課時）一、【教學目標】知識目標：通過介紹網(wǎng)頁制作軟件三劍客FrontPage、Fireworks、Dreamweaver各自的功能以及優(yōu)缺點后，帶領學生認識并學會使用紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。技能目標：選擇一個網(wǎng)頁，教學生使用紅蜻蜓抓圖軟件，分結構的把網(wǎng)頁各部分抓到Microsoft Office Visio 2007頁面中，完成網(wǎng)頁的布局，為下一任務的學習打下堅實的基礎，要求每位同學完成一個網(wǎng)頁抓圖、布局。情感目標：通過本次學習后，能培養(yǎng)學生對網(wǎng)頁制作軟件的進一步了解，增強學生學習網(wǎng)頁設計的興趣和欲望，熟知網(wǎng)頁制作軟件給我們設計網(wǎng)頁帶來的便捷。二、【教學重點】1認識網(wǎng)頁制作軟件三劍客FrontPage、Fireworks、Dreamweaver各自的功能以及優(yōu)缺點。2認識并學會使用紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。三、【教學難點】學會使用紅蜻蜓抓圖軟件和Microsoft Office Visio 2007的基本功能。四、【教學過程】 （一）明確項目任務（包括了導入項目任務和布置項目任務）上節(jié)課，我們介紹了網(wǎng)頁起源以及其基本組成部分，請同學來回答一下網(wǎng)頁的基本組成部分有哪些？（在電腦上展示一張下載好的網(wǎng)頁）大家想不想知道這些網(wǎng)頁的各個部分是用什么軟件制作的？今天我們一起學習吧！（二）制定項目實施計劃（項目實施）1教師講解示范：步驟1：介紹網(wǎng)頁制作軟件三劍客falsh、Fireworks、Dreamweaver各自的功能以及優(yōu)缺點后，向學生示范安裝紅蜻蜓抓圖軟件和Microsoft Office Visio 2007。步驟2：安裝好紅蜻蜓抓圖軟件和Microsoft Office Visio 2007后，紅蜻蜓抓圖軟件的圖標在桌面，帶領學生一起找到Microsoft Office Visio 2007，并啟動兩軟件。2學生活動：教師演示完步驟后交由學生完成，教師做好對學生的輔導檢查，對做的好的學生給予鼓勵。教師最好是先將學生進行分組，讓有基礎的學生做好帶頭作用充當小老師，這樣也減輕了教師的輔導量。待大部分學生做完后開始下一步講解。3教師講解示范：打開一個網(wǎng)頁（下載好的電子科大的網(wǎng)頁），用紅蜻蜓抓圖軟件，分別把網(wǎng)頁的logo、導航條、橫幅、版面文字內容、版尾板塊抓圖下來，并分別以圖片保存下來。4學生活動：讓學生選擇任意網(wǎng)頁進行抓圖保存。教師做巡查和輔導，對后進生進行手把手操作示范，充分鼓勵學生自主完成作業(yè)，鼓勵組長幫助組員。5老師講解示范：在Microsoft Office Visio 2007窗口，單擊菜單中“文件”，鼠標移到“新建”上，在列表中選擇“網(wǎng)絡”的“網(wǎng)站圖”；把事先保存好的圖片合理布局到Visio 文件中；保存繪圖文件：快捷鍵ctrl+s或者單擊菜單中“文件”，點擊“保存”選項，把繪圖文件（.vsd）保存到個人文件夾下。6學生活動：學生根據(jù)自己裁剪的圖片，合理安排布局。教師做好指導，督促所有學生都能完成任務。五、【練習鞏固發(fā)展】找張自己喜歡的網(wǎng)頁，根據(jù)網(wǎng)頁基本組成部分裁剪，并在Visio 中完成網(wǎng)頁的布局。六、【評價與反思】本次上課，學生們學會了在Visio 中完成網(wǎng)頁的布局，但是Visio功能強大，在上課過程中我也沒有對此知識點進行擴充，導致學生用起這個軟件一知半解的。七、【學生作業(yè)及上交】未布置作業(yè)。任務三 網(wǎng)站規(guī)劃（2課時）一、【教學目標】知識目標：熟悉網(wǎng)站開發(fā)的工作流程，自行設計一個網(wǎng)站頁面的鏈接圖。學習網(wǎng)站制作流程，帶領學生確定網(wǎng)站的主題與名稱，怎樣收集材料，規(guī)劃好自己的網(wǎng)站。技能目標：基本了解網(wǎng)站的制作步驟，為下一任務的學習打下堅實的基礎，要求每位同學完成網(wǎng)站的主題與名稱的確定，并構思網(wǎng)站有幾個怎樣的頁面組成，學會布局網(wǎng)站基本的鏈接圖。情感目標：通過本次學習后，能培養(yǎng)學生對網(wǎng)頁制作軟件的進一步了解，增強學生學習網(wǎng)頁設計的興趣和欲望。二、【教學重點】1了解網(wǎng)站規(guī)劃中要做的預備工作。2學會布局網(wǎng)站基本的鏈接圖。3.完成網(wǎng)站的主題與名稱的確定。三、【教學難點】1.學會布局網(wǎng)站基本的鏈接圖。2.完成網(wǎng)站的主題與名稱的確定。四、【教學過程】 （一）明確項目任務（包括了導入項目任務和布置項目任務）上節(jié)課，我們認識了網(wǎng)頁制作工具，在進行頁面布局時，都是用的別人做好的網(wǎng)頁。我們今天要網(wǎng)站了，但是在做網(wǎng)站之前，我們還需要做那些裝備工作呢，做網(wǎng)頁又需要些什么呢，我們心目中的網(wǎng)頁又是怎樣的呢？今天我們就一起來學習準備規(guī)劃吧?。ǘ┲贫椖繉嵤┯媱潱椖繉嵤?教師講解示范：步驟1：網(wǎng)站設計是一個系統(tǒng)工程，具有特定的工作流程網(wǎng)站規(guī)劃、網(wǎng)站制作、網(wǎng)站維護，今天我們就先來看看網(wǎng)站的規(guī)劃。網(wǎng)站的規(guī)劃分為確定網(wǎng)站的主題和名稱、搜集材料和規(guī)劃網(wǎng)站，確定網(wǎng)站的主題和名稱“個人網(wǎng)站”，規(guī)劃網(wǎng)站的頁面有主頁（個人簡介）、我的日志、我的榮譽、我的相冊、我的好友。步驟2：在Visio 中畫出這五個頁面。在Visio 中新建一個繪圖文檔；在左邊的“形狀”框中用鼠標左鍵選中“主頁”圖標，拉到右邊的頁面上，適當調整大??；在左邊的“形狀”框中用鼠標左鍵選中“HTML”圖標，拉到右邊的頁面上，適當調整大小（重復三遍）。2學生活動：教師演示完步驟后交由學生完成，教師做好對學生的輔導檢查，對做的好的學生給予鼓勵。教師最好是先將學生進行分組，讓有基礎的學生做好帶頭作用充當小老師，這樣也減輕了教師的輔導量。待大部分學生做完后開始下一步講解。3教師講解示范：在Visio 中為“主頁”和四個“HTML”圖標添加文字描述。單擊“插入”菜單，選中“文本框”，單擊“水平”，在“主頁”圖標下，按住鼠標左鍵，向右下方拖拽，畫出文本框，頁面自動放大，輸入“主頁”二字，按“enter”（重復四遍，為我的日志、我的榮譽、我的相冊、我的好友添加文字描述）。4學生活動：讓學生根據(jù)教師的示范講解，完成為頁面添加文字描述的任務。教師做巡查和輔導，對后進生進行手把手操作示范，充分鼓勵學生自主完成作業(yè)，鼓勵組長幫助組員。5老師講解示范：對已添加文字描述的五個頁面建立邏輯上的鏈接。將“主頁”圖標與四個“HTML”圖標建立鏈接，確定主頁在上。右鍵單擊文本空白處，選擇“格式”-“線條”，點擊文本空白處，即可添加一線條；調整線條的樣式，連接主頁與內頁。6學生活動：學生根據(jù)頁面，合理安排連接樣式。教師做好指導，督促所有學生都能完成任務。五、【練習鞏固發(fā)展】自行設計一個