網(wǎng)頁設(shè)計(jì)電子教案項(xiàng)目備課.docx

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