八年級(jí)下冊(cè)信息技術(shù)教案清華版

1、2011-2012 學(xué)年第二學(xué)期八年級(jí)信息技術(shù)教學(xué)進(jìn)度表周次時(shí)間教學(xué)內(nèi)容備注第一周2 月 20日 2 月 24 日入學(xué)準(zhǔn)備第二周2 月 27 日 3 月 2 日新手入門第三周3 月 6日 3 月 9 日輕松上路第四周3 月 12日 3 月 16 日開(kāi)篇之作第五周3 月 19日 3 月 23 日星光閃爍第六周3 月 26日 3 月 30 日統(tǒng)一風(fēng)格第七周4 月 2日 4 月 6 日事半功倍第八周4 月 9 日 4 月 13 日駕輕就熟第九周4 月 16日 4 月 20 日按圖索伊第十周4 月 23日 4 月 27 日?qǐng)D形整合第十一周4 月 30 日 5 月 4 日自由穿梭第十二周5 月 7 日

2、5 月 11 日一觸即發(fā)第十三周5 月 14日 5 月 18 日影音視聽(tīng)第十四周5 月 21日 5 月 25 日分享成果第十五周5 月 28 日 6 月 1 日第十六周6 月 4日 6 月 8 日第十七周6 月 11日 6 月 15 日第十八周6 月 18日 6 月 22 日1課題： 第 1 課新手入門課題新手入門授課時(shí)間課型新授課課時(shí)安排一課時(shí)教知識(shí)與技能：學(xué) 1掌握互聯(lián)網(wǎng)、網(wǎng)頁(yè)與首頁(yè)、網(wǎng)站等網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作的基本目知識(shí)。標(biāo)2學(xué)會(huì)使用記事本作為網(wǎng)頁(yè)編輯工具來(lái)編輯HTML 代碼并生成網(wǎng)頁(yè)。3掌握瀏覽網(wǎng)頁(yè)的方法并理解網(wǎng)頁(yè)編輯工具與瀏覽工具之間的關(guān)系過(guò)程與方法：情感態(tài)度與價(jià)值觀：教學(xué)重點(diǎn)了解網(wǎng)站

3、制作的基本知識(shí)，并制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)教學(xué)難點(diǎn)學(xué)會(huì)使用記事本作為網(wǎng)頁(yè)編輯工具來(lái)編輯HTML 代碼并生成網(wǎng)教具學(xué)具準(zhǔn)備頁(yè)。多媒體網(wǎng)絡(luò)教室 。教學(xué)方法講解、學(xué)生練習(xí)教學(xué)過(guò)程一、導(dǎo)入新課：復(fù)2在當(dāng)前的社會(huì)生活中，網(wǎng)絡(luò)正在發(fā)揮著越來(lái)越重要的作用，大備量制作精美、功能強(qiáng)大的網(wǎng)站出現(xiàn)在互聯(lián)網(wǎng)上。對(duì)于學(xué)生來(lái)說(shuō)，制作個(gè)人網(wǎng)站也正在成為一種流行時(shí)尚。通過(guò)本教材的學(xué)習(xí)可以輕松幫助學(xué)生入門，并逐步親手打造屬于自己的個(gè)性十足的網(wǎng)站。二、教學(xué)新課：1、首先打開(kāi) IE 瀏覽器，在地址欄中輸入網(wǎng)址，打開(kāi)一個(gè)范例網(wǎng)站的首頁(yè)，單擊首頁(yè)中的動(dòng)畫、超文本、圖片等網(wǎng)頁(yè)元素，可以分別鏈接到網(wǎng)站中的其他頁(yè)面中。在操作過(guò)程中教師提出問(wèn)題，引

4、導(dǎo)學(xué)生思考互聯(lián)網(wǎng)、網(wǎng)站、網(wǎng)頁(yè)、首頁(yè)等術(shù)語(yǔ)的含義，以及它們之間的關(guān)系，嘗試讓學(xué)生體會(huì)瀏覽器和網(wǎng)頁(yè)的關(guān)系，從而將網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作的基本知識(shí)進(jìn)行概括總結(jié)并明確落實(shí)到每個(gè)學(xué)生身上。在進(jìn)行教學(xué)的時(shí)候，一定要讓學(xué)生認(rèn)識(shí)到已有知識(shí)的重要性，充分利用已經(jīng)具備的技能去嘗試解決新問(wèn)題，從而變被動(dòng)學(xué)習(xí)為主動(dòng)探究。教師可引導(dǎo)學(xué)生充分利用教材中的“視野拓展”和“創(chuàng)作天地”板塊進(jìn)行自學(xué)，這實(shí)際上是在實(shí)施分層教學(xué)，以鞏固本課的知識(shí)技能為主，適當(dāng)?shù)剡M(jìn)行補(bǔ)充，讓部分基礎(chǔ)較好的同學(xué)在完成基本任務(wù)之后也能有事可做，給學(xué)生創(chuàng)造出提高的空間。作為網(wǎng)站制作的起始課，教師要切實(shí)地關(guān)注每個(gè)學(xué)生，尤其是在以前的學(xué)習(xí)過(guò)程中表現(xiàn)出學(xué)習(xí)能力較弱的

5、學(xué)生，要確保每個(gè)學(xué)生都有一個(gè)好的開(kāi)始，都能將第一個(gè)網(wǎng)頁(yè)作品保存到教師指定的位置（本地磁盤或網(wǎng)絡(luò)中的指定目錄） 。3教師應(yīng)對(duì)所有完成保存網(wǎng)頁(yè)任務(wù)的學(xué)生進(jìn)行及時(shí)地評(píng)價(jià)與鼓勵(lì)，保護(hù)學(xué)生的學(xué)習(xí)積極性。另外，對(duì)完成基本任務(wù)并有所創(chuàng)新的同學(xué)重點(diǎn)表?yè)P(yáng)，鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，有計(jì)劃地營(yíng)造良性競(jìng)爭(zhēng)的氛圍。2、網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作在本課中通過(guò)欣賞站點(diǎn)，使學(xué)生了解和掌握互聯(lián)網(wǎng)、網(wǎng)頁(yè)與首頁(yè)、網(wǎng)站、 IE 瀏覽器的基本含義，并且能夠明確它們相互之間的關(guān)系。學(xué)生在學(xué)習(xí)網(wǎng)站制作之前已經(jīng)接觸過(guò)網(wǎng)站，瀏覽過(guò)各式各樣的網(wǎng)頁(yè)，因此教師在完成此教學(xué)任務(wù)的時(shí)候，可以充分利用學(xué)生已有基礎(chǔ)，不必完全進(jìn)行講授式教學(xué)，可以結(jié)合啟發(fā)、設(shè)問(wèn)等方法，使學(xué)

6、生盡可能地自己總結(jié)出相關(guān)知識(shí)。3、使用記事本作為網(wǎng)頁(yè)編輯工具來(lái)編輯HTML代碼并生成網(wǎng)頁(yè)在進(jìn)行此部分教學(xué)的時(shí)候，可以先借助學(xué)生已有技能，啟動(dòng)記事本，復(fù)制并粘貼素材文件中提供的 HTML 代碼，命名并保存文件，然后在瀏覽器中進(jìn)行預(yù)覽。對(duì)于 HTML 代碼部分，教師可以嘗試通過(guò)修改屬性值的方法， 引導(dǎo)學(xué)生探索標(biāo)簽的含義及其與屬性值的對(duì)應(yīng)關(guān)系，這也同時(shí)是對(duì)“創(chuàng)作天地”板塊中的練習(xí)進(jìn)行提示的過(guò)程，然后通過(guò)分析此HTML 實(shí)例，講解HTML語(yǔ)言的基本結(jié)構(gòu)，對(duì)基本的 、標(biāo)簽進(jìn)行初步介紹，鼓勵(lì)有余力的同學(xué)通過(guò)“視野拓展”板塊進(jìn)行自學(xué)，并獨(dú)立完成“創(chuàng)作天地”中的練習(xí)。通過(guò)教師演示引導(dǎo)學(xué)生思考擴(kuò)展名對(duì)文件的影響

7、，既包括其對(duì)4文件圖標(biāo)的影響，也包括調(diào)用應(yīng)用程序的影響，從而引出程序關(guān)聯(lián)的知識(shí)進(jìn)行補(bǔ)充講解，見(jiàn)圖1.1 和圖 1.2。3) 保存文件三、課堂練習(xí)：使用記事本作為網(wǎng)頁(yè)編輯工具來(lái)編輯 HTML 代碼并生成網(wǎng)頁(yè)四、課堂小結(jié)：五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記5課題：第二課： 輕松上路規(guī)劃網(wǎng)站及創(chuàng)建站點(diǎn)課題輕松上路授課時(shí)間課型新授課課時(shí)安排1 節(jié)課教知識(shí)與技能：1. 了解網(wǎng)站開(kāi)發(fā)流程。學(xué) 2. 學(xué)會(huì)利用 Dreamweaver8創(chuàng)建站點(diǎn)。目過(guò)程與方法：標(biāo)情感態(tài)度與價(jià)值觀：教學(xué)重點(diǎn)了解網(wǎng)站制作的基本知識(shí)，并制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。教學(xué)難點(diǎn)多媒體網(wǎng)絡(luò)教室。教具學(xué)具講解、學(xué)生練習(xí)。準(zhǔn)備教學(xué)方法教學(xué)過(guò)程一、

8、導(dǎo)入新課：復(fù) 備開(kāi)發(fā)一個(gè)網(wǎng)站是一個(gè)相當(dāng)來(lái)說(shuō)比較繁雜的過(guò)程，對(duì)于一個(gè)網(wǎng)站而言，要有一個(gè)總的戰(zhàn)略規(guī)劃和目標(biāo)。在做一個(gè)網(wǎng)站前，要有一個(gè)全盤的考慮。我們知道一個(gè)房子一旦地基沒(méi)有打好，是要拔了重新蓋，我們做網(wǎng)站也是一樣，如果你前期規(guī)劃做的不好，后面的工作就意味著白辛苦。這節(jié)課我們以“安全自護(hù)我能行”為6主題來(lái)進(jìn)行網(wǎng)站規(guī)劃和創(chuàng)建站點(diǎn)二、教學(xué)新課：1. 了解網(wǎng)站開(kāi)發(fā)流程（1）網(wǎng)站需求分析一個(gè)網(wǎng)站在設(shè)計(jì)前，就應(yīng)該考慮網(wǎng)站規(guī)模多大，就是多少個(gè)頁(yè)面，每個(gè)頁(yè)面的大體內(nèi)容是什么，要用到那些素材，有那些導(dǎo)航，做較大一點(diǎn)的網(wǎng)站尤為如此。還要考慮以后會(huì)有什么改動(dòng)，還要增加那些網(wǎng)頁(yè)，盡量讓以后的改動(dòng)盡可能的小。網(wǎng)站的需求分析

9、所用的時(shí)間應(yīng)該占到總開(kāi)發(fā)時(shí)間的一半以上。確定網(wǎng)站主題寫作文要圍繞中心思想去寫，做網(wǎng)站要圍繞主題去做。個(gè)人主頁(yè)、休閑、體育、教育、新聞、娛樂(lè)、購(gòu)物、健康等等，不管那類網(wǎng)站，都不能脫離自己的主題，必須表現(xiàn)個(gè)性，表現(xiàn)出特色才能給人留下深刻印象，讓人流連忘返。收集素材我們?cè)谶@所說(shuō)的素材就是你的網(wǎng)頁(yè)上要用的各種素材，主要包括：文字、圖片、動(dòng)畫、音頻、視頻等。在網(wǎng)站主題明確后，就應(yīng)該把素材準(zhǔn)備好，當(dāng)然是越充分越好。不要等到用的時(shí)候到處去找，那就影響效率了。規(guī)劃站點(diǎn)站點(diǎn)規(guī)劃是需求分析中最重要的一個(gè)環(huán)節(jié)，包含很多方面的內(nèi)容。我們上節(jié)課看了一些別人做的網(wǎng)站，相信大家都多多少少了解一些：欄目設(shè)置、顏色搭配、圖文的

10、應(yīng)用等等。只有把這些內(nèi)容都考慮全面了，制作的時(shí)候你的速度就快。否則就等著不停的返工吧。（2）設(shè)計(jì)制作網(wǎng)站頁(yè)面頁(yè)面制作要先大后小，先粗后精。就是先要把每個(gè)頁(yè)面要放什么內(nèi)容，按什么結(jié)構(gòu)先做一個(gè)大概， 所有頁(yè)面的大概都做完后，再去完善和細(xì)化。（3）網(wǎng)站的發(fā)布需要域名和網(wǎng)頁(yè)文件的存放空間。2. 利用 Dreamweaver8創(chuàng)建站點(diǎn)（1）啟動(dòng) Dreamweaver8簡(jiǎn)單的進(jìn)行界面介紹（2）創(chuàng)建站點(diǎn)步驟參見(jiàn)書上第 12 頁(yè)73. 做一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)要求圖文并茂三、課堂練習(xí)：學(xué)生小組合作完成任務(wù)，并將任務(wù)上交到教師機(jī)。四、課堂小結(jié)：1、建設(shè)網(wǎng)站需要先進(jìn)行規(guī)劃，規(guī)劃的好壞直接決定著網(wǎng)站設(shè)計(jì)的成功與否。2、D

11、reamweaver8是 Macromedia 公司開(kāi)發(fā)的最新版本的網(wǎng)頁(yè)編輯器，利用 Dreamweaver8可以快速的創(chuàng)建站點(diǎn)。五、布置作業(yè)： 快樂(lè)的中學(xué)生活，一定給你留下很多美好的回憶吧！請(qǐng)你為“快樂(lè)時(shí)光有你相伴”為名的表達(dá)友情的主題網(wǎng)站進(jìn)行站點(diǎn)規(guī)劃設(shè)計(jì)。要求：（1）使用組織結(jié)構(gòu)圖來(lái)表現(xiàn)層次關(guān)系。（2）層次清晰，鏈接關(guān)系清楚，每個(gè)網(wǎng)頁(yè)的內(nèi)容要安排得當(dāng)。六、板書設(shè)計(jì)：七、教學(xué)后記8課題：第三課： 開(kāi)篇之作基于表格的頁(yè)面布局課題開(kāi)篇之作授課時(shí)間課型新授課課時(shí)安排一課時(shí)教知識(shí)與技能：1.創(chuàng)建站點(diǎn)和網(wǎng)站首頁(yè)。學(xué) 2.掌握對(duì)表格屬性的相關(guān)設(shè)置 。目過(guò)程與方法：標(biāo)情感態(tài)度與價(jià)值觀：教學(xué)重點(diǎn)能夠?qū)Ρ砀駥?/p>

12、性進(jìn)行熟練的設(shè)置教學(xué)難點(diǎn)能夠?qū)Ρ砀駥傩赃M(jìn)行熟練的設(shè)置教具學(xué)具多媒體網(wǎng)絡(luò)教室準(zhǔn)備教學(xué)方法講解、學(xué)生練習(xí)教學(xué)過(guò)程一、導(dǎo)入新課：復(fù) 備一個(gè)網(wǎng)站的規(guī)劃設(shè)計(jì)完畢了，接下來(lái)的工作就是網(wǎng)頁(yè)設(shè)計(jì)。我們知道一個(gè)網(wǎng)站的首頁(yè)就像一本書的目錄一樣，我們做網(wǎng)站也一樣，要先把首頁(yè)確定下來(lái)。我看了我們上一周做的網(wǎng)頁(yè)，有些同學(xué)想發(fā)揮點(diǎn)創(chuàng)意，但發(fā)現(xiàn)頁(yè)面布局很亂，圖片文字亂七八糟堆放在一起。這節(jié)課我們就來(lái)學(xué)學(xué)怎樣對(duì)頁(yè)面布局進(jìn)行控制。在這之前我們先來(lái)看看別人的首頁(yè)是怎么做的。 （查看事先準(zhǔn)備好的9示例網(wǎng)頁(yè)，分析表格在該頁(yè)的作用）二、教學(xué)新課：（一）復(fù)習(xí)創(chuàng)建站點(diǎn)的步驟。1.在 D 盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。2.打開(kāi) Drea

13、mweaver8,單擊“站點(diǎn)”菜單下的“新建站點(diǎn)”命令。3.新建站點(diǎn)（步驟略，參加課本p12）。（二）創(chuàng)建網(wǎng)站首頁(yè)1整理素材（1）右擊“文件”面板中站點(diǎn)名 “站點(diǎn) -安全自護(hù)我能行D:safe”，在彈出的快捷菜單中執(zhí)行“新建文件夾”命令，然后將文件夾命名為 images。（2）將首頁(yè)素材圖片index.gif ，復(fù)制粘貼到 images 文件夾中。（3）在 safe 文件夾下新建一文件夾other，將 flash 動(dòng)畫素材整理到 other 文件夾中。2.創(chuàng)建并保存首頁(yè)（1）單擊 “文件” -“新建”命令，選擇“常規(guī)”，在“基本頁(yè)”列表框中選擇 HTML 選項(xiàng)，單擊“創(chuàng)建”按鈕，即建立了一個(gè)空

14、白頁(yè)。（2）執(zhí)行“文件” - “保存”命令，保存名index.html,默認(rèn)保存路徑是站點(diǎn)的跟目錄。注意保存類型選擇“html 文檔”。（三）對(duì)首頁(yè)進(jìn)行初步布局1.為頁(yè)面添加背景顏色（1）單擊文檔窗口，使插入點(diǎn)在編輯區(qū)內(nèi)閃爍，然后單擊“屬10性”欄的“頁(yè)面屬性”按鈕。（2）找到 “背景顏色”選項(xiàng)，輸入淺黃色的顏色數(shù)值#FFFF94，單擊“確定”按鈕，背景色設(shè)置完成。2.設(shè)置網(wǎng)頁(yè)標(biāo)題并預(yù)覽網(wǎng)頁(yè)效果。3.使用表格初步布局網(wǎng)頁(yè)。（1）在文檔窗口中單擊，在頁(yè)面左上角放置插入點(diǎn)。（2）執(zhí)行“插入” -“表格”命令。（3）在彈出的“表格”對(duì)話框中設(shè)置一個(gè)2 行 1 列的表格，寬度 600 像素。（4）單擊

15、“標(biāo)簽選擇器”中的標(biāo)簽，選中此表格，在屬性欄中完成表格的相關(guān)設(shè)置。具體參數(shù)如下：行數(shù)：2，列數(shù)：1，高度： 600 像素，寬度 600 像素，對(duì)齊：居中對(duì)齊，背景圖片：index.gif。4.測(cè)試網(wǎng)頁(yè)。三、學(xué)生練習(xí)鼓勵(lì)學(xué)生大膽嘗試和創(chuàng)新，利用所學(xué)的內(nèi)容，進(jìn)行創(chuàng)意性發(fā)揮。學(xué)生小組合作完成制作一個(gè)首頁(yè)的任務(wù)，并將任務(wù)上交到教師機(jī)。2.文檔工具欄的使用。3.使用表格設(shè)計(jì)網(wǎng)頁(yè)布局，可以使網(wǎng)頁(yè)看上去更加整齊。三、課堂練習(xí)：鼓勵(lì)學(xué)生大膽嘗試和創(chuàng)新，利用所學(xué)的內(nèi)容，進(jìn)行創(chuàng)意性發(fā)揮。11學(xué)生小組合作完成制作一個(gè)首頁(yè)的任務(wù)，并將任務(wù)上交到教師機(jī)。四、課堂小結(jié)：1.站點(diǎn)目錄結(jié)構(gòu)要清晰，方便管理，素材要按類型分別存

16、放。五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記12課題： 第四課： 星光閃爍用 Flash 動(dòng)畫完善首頁(yè)課題用 Flash動(dòng)畫完善首頁(yè)授課時(shí)間課型新授課課時(shí)安排一課時(shí)教知識(shí)與技能：1. 學(xué)會(huì)表格的調(diào)整。學(xué) 2. 能在網(wǎng)頁(yè)中插入 Flash ，并對(duì)相關(guān)屬性進(jìn)行設(shè)置。3. 能在網(wǎng)頁(yè)中插入文本，并對(duì)文字格式進(jìn)行設(shè)置。目過(guò)程與方法： 學(xué)生動(dòng)手、自主探究標(biāo)情感態(tài)度與價(jià)值觀：提高學(xué)生的動(dòng)手能力、及學(xué)生們對(duì)網(wǎng)頁(yè)的認(rèn)識(shí)。教學(xué)重點(diǎn)在網(wǎng)頁(yè)中插入 Flash ，并設(shè)置相關(guān)屬性教學(xué)難點(diǎn)在網(wǎng)頁(yè)中插入 Flash ，并設(shè)置相關(guān)屬性教具學(xué)具學(xué)生電腦準(zhǔn)備教學(xué)方法演示法、講授法教學(xué)過(guò)程一、導(dǎo)入新課：復(fù) 備對(duì)于一個(gè)網(wǎng)頁(yè)，信息的表達(dá)

17、是多種多樣的，我們可以使用文字、圖片等，我們也可以為網(wǎng)頁(yè)添加動(dòng)畫、音頻、視頻等，為了讓我們的網(wǎng)站看起來(lái)有動(dòng)感，吸引別人的眼球，我們應(yīng)該學(xué)會(huì)在網(wǎng)頁(yè)中使用 Flash。這節(jié)課我們就來(lái)一塊學(xué)學(xué)怎么在網(wǎng)頁(yè)中使用Flash。二、教學(xué)新課1. 新建站點(diǎn)13（1）將“安全自護(hù)我能行”站點(diǎn)文件夾傳到學(xué)生機(jī)。（2）新建站點(diǎn)。2. 調(diào)整表格 1) 選擇對(duì)象表格、行、列、單元格屬性的設(shè)置是以選擇這些對(duì)象為前提的。a) 選擇表格：“標(biāo)簽選擇器”中單擊 標(biāo)簽；“表格”菜單下的“選擇表格”命令。b) 選擇某一單元格：按住 Ctrl 鍵，同時(shí)單擊選中的單元格；“標(biāo)簽選擇器”中單擊 標(biāo)簽。c) 選擇某一行或某一列：將光標(biāo)移動(dòng)

18、到行左側(cè)或列上方，當(dāng)鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時(shí)，單擊即可。2) 設(shè)置第一行的屬性選中表格的第一行，將高度設(shè)為420。和 flash的高度一致。3. 插入 flash動(dòng)畫1) 將光標(biāo)定位在表格第一行中，執(zhí)行“插入” “媒體” Flash 命令。2) 在彈出的對(duì)話框中選擇 other 文件夾下的 index.swf ，單擊確定。3) 觀察插入 flash 的狀態(tài)，在編輯視圖下， flash 不可見(jiàn)。4) 單擊選中 flash 文檔，在屬性面板設(shè)置相關(guān)屬性：循環(huán)、自動(dòng)播放。預(yù)覽觀察效果。5) 設(shè)置 Flash 參數(shù)，如 P23 頁(yè)，圖 4.6 所示。4. 在網(wǎng)頁(yè)中插入文本1) 插入普通文本：

19、光標(biāo)定位在單元格內(nèi)，直接輸入文字。2) 插入特殊字符：“插入”“HTML”“特殊網(wǎng)頁(yè)”。3) 設(shè)置文本屬性：根據(jù)情況選擇合適的格式或文字大小、顏色、對(duì)齊方式等。三、課堂練習(xí)：學(xué)生小組合作完成任務(wù)，并將任務(wù)上交到教師機(jī)。四、課堂小結(jié)：五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記14課題：第五課： 統(tǒng)一風(fēng)格制作框架網(wǎng)頁(yè)課題制作框架網(wǎng)頁(yè)授課時(shí)間課型新授課課時(shí)安排教知識(shí)與技能：1. 掌握表格的拆分與合并。學(xué) 2. 學(xué)會(huì)創(chuàng)建框架、制作框架網(wǎng)頁(yè)和保存框架網(wǎng)頁(yè)。目 3. 能制作鼠標(biāo)經(jīng)過(guò)圖像的動(dòng)態(tài)效果。標(biāo)過(guò)程與方法： 學(xué)生動(dòng)手、自主探究情感態(tài)度與價(jià)值觀： 使學(xué)生對(duì)框架結(jié)構(gòu)有一個(gè)初步的認(rèn)識(shí)教學(xué)重點(diǎn)創(chuàng)建框架和制作框架

20、網(wǎng)頁(yè)教學(xué)難點(diǎn)掌握目標(biāo)設(shè)置在網(wǎng)頁(yè)制作過(guò)程中的作用和方法教具學(xué)具學(xué)生電腦準(zhǔn)備教學(xué)方法演示法、講授法教學(xué)過(guò)程一、導(dǎo)入新課：復(fù) 備一個(gè)網(wǎng)站常常劃分成多個(gè)區(qū)域，對(duì)于每個(gè)區(qū)域來(lái)說(shuō)，其色彩搭配、網(wǎng)站風(fēng)格、網(wǎng)站標(biāo)題、網(wǎng)站導(dǎo)航都是統(tǒng)一的。為了能做到這種統(tǒng)一，我們每個(gè)網(wǎng)頁(yè)中相同的內(nèi)容固定在一個(gè)區(qū)域。我們通過(guò)創(chuàng)建框架制作框架網(wǎng)頁(yè)，可以輕松實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)劃分和布局。使大家對(duì)框架有一個(gè)初步的了解和感性認(rèn)識(shí)。15二、教學(xué)新課1. 新建站點(diǎn)（1）將“安全自護(hù)我能行”站點(diǎn)文件夾safe 傳到學(xué)生機(jī)。（2）新建站點(diǎn)。2. 創(chuàng)建框架和框架集制作框架網(wǎng)頁(yè)的前提是創(chuàng)建框架，并根據(jù)網(wǎng)頁(yè)布局設(shè)計(jì)框架的樣式，然后再具體設(shè)計(jì)制作網(wǎng)頁(yè)的內(nèi)容。（

21、1）規(guī)劃“框架”文件夾。（2）新建框架集步驟 1：執(zhí)行“文件”“新建”命令，打開(kāi)“新建文檔”對(duì)話框，在 “類別”中選擇 “框架集”。步驟 2：?jiǎn)螕簟皠?chuàng)建”按鈕，在彈出對(duì)話框中單擊“確定” ，框架創(chuàng)建完成。（3）保存框架集步驟 1：執(zhí)行“文件”“保存全部”命令，保存到 frame文件夾中。步驟 2：重命名框架集文件和每個(gè)框架文件。（4）設(shè)置框架和框架屬性框架的屬性包括框架名稱、源文件、邊距、尺寸、滾動(dòng)條等；框架集的屬性包括框架面積、框架邊界顏色、距離等。步驟 1：執(zhí)行“窗口” “框架”命令，打開(kāi)框架面板。步驟 2：?jiǎn)螕簟翱蚣堋泵姘逯械目蚣苓吘壊糠?，選中框架集，在 “屬性”面板中設(shè)置框架集的屬性。

22、步驟 3：?jiǎn)螕簟翱蚣堋泵姘逯械?topFrame 框架和 mainFrame框架，在“屬性”面板中設(shè)置所選框架的屬性。（5）制作框架網(wǎng)頁(yè)制作上框架網(wǎng)頁(yè)步驟 1：打開(kāi)網(wǎng)頁(yè) top.html ，設(shè)置背景顏色 #EAFF8A，上邊距為 0 像素。步驟 2：插入一個(gè) 2 行 5 列的表格并調(diào)整行列的高寬。 。步驟 3：在導(dǎo)航表格中，設(shè)置鼠標(biāo)經(jīng)過(guò)圖像。步驟 4：為圖片添加超鏈接，設(shè)置打開(kāi)方式（目標(biāo)）。制作下框架網(wǎng)頁(yè)步驟 1：打開(kāi)網(wǎng)頁(yè) main.html ，設(shè)置背景顏色 #EAFF8A，上邊距為 0 像素。步驟 2：插入一個(gè) 5 行 9 列的表格并調(diào)整行列的高寬。 。步驟 3：合并相關(guān)單元格。16步驟 4

23、：插入圖片，并為圖片添加超鏈接。步驟 5：添加郵件鏈接。三、課堂練習(xí)：學(xué)生小組合作完成書上的練習(xí)任務(wù)，并將任務(wù)上交到教師機(jī)四、課堂小結(jié)：1.創(chuàng)建框架，實(shí)現(xiàn)網(wǎng)頁(yè)風(fēng)格的統(tǒng)一，保存框架時(shí)，需要保存框架集文件和含有框架的所有文件。2.利用鼠標(biāo)經(jīng)過(guò)圖像，可以制作網(wǎng)頁(yè)導(dǎo)航動(dòng)態(tài)按鈕。3.超級(jí)鏈接是實(shí)現(xiàn)網(wǎng)頁(yè)互聯(lián)的關(guān)鍵，設(shè)置網(wǎng)頁(yè)的打開(kāi)方式， 可以調(diào)整鏈接網(wǎng)頁(yè)的顯示位置。五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記17課題： 第六課： 事半功倍制作網(wǎng)頁(yè)模板課題制作網(wǎng)頁(yè)模板授課時(shí)間課型新授課課時(shí)安排一課時(shí)教知識(shí)與技能：學(xué) 1、掌握模板的概念，特別是可編輯區(qū)域和不可編輯區(qū)域。目2、學(xué)會(huì)創(chuàng)建模板。標(biāo)3、能用模板快速的制作網(wǎng)

24、頁(yè)過(guò)程與方法： 學(xué)生動(dòng)手、自主探究情感態(tài)度與價(jià)值觀： 提高學(xué)生的自學(xué)能力，對(duì)網(wǎng)頁(yè)的認(rèn)識(shí)和對(duì)網(wǎng)頁(yè)模板的了解教學(xué)重點(diǎn)理解模板中的可編輯區(qū)域和不可編輯區(qū)域教學(xué)難點(diǎn)掌握模板的概念，特別是可編輯區(qū)域和不可編輯區(qū)域教具學(xué)具學(xué)生電腦準(zhǔn)備教學(xué)方法演示法、講授法教學(xué)過(guò)程一、導(dǎo)入新課：復(fù) 備我們?cè)谶M(jìn)行大量的頁(yè)面制作的時(shí)候，很多頁(yè)面會(huì)用到相同的布局，圖片和文字等元素。 這樣我們需要做一次次的重復(fù)性勞動(dòng)，那么有沒(méi)有更好的方法讓我們來(lái)快速的實(shí)現(xiàn)呢！有，通過(guò)制作網(wǎng)18 模板快速 建網(wǎng) 。 就是我 學(xué) 的內(nèi)容。二、教學(xué)新 一、模板的概念： 模板可以被理解成一種網(wǎng) 模型，利用 個(gè)模型能 方便的制作出很多 面，使用模板可以避免

25、重復(fù)的在每個(gè) 面 入或修改相同的部分，待網(wǎng)站改版的的 候，只要改 模板的 ，系 就能自 更改所有基于 個(gè)模板 建的網(wǎng) 。二、模板的 點(diǎn)：1. 格一致，看起來(lái)比 系 ，也省去了制作同一面 的麻 。2. 如果要修改共同的 面不必一個(gè)一個(gè)修改，只要更改 用于它 之上的模板就可以了。3. 免除了以前沒(méi)有此功能 要常?！傲泶?”，一不小心就會(huì)覆蓋重要檔案的困 。4. 模板的 點(diǎn) 有它也不是一成不 的，即使是在已 使用一個(gè)模板 建文檔之后，也 可以 模板 行修改。當(dāng)更新模板 ，文檔中的 定區(qū)都會(huì)被更新，與模板的修改相匹配。在我 知道了模板的概念和 點(diǎn)之后， 我 通 例來(lái)具體的理解吧！ 在 大家 3 分 ，

26、然后 看 思考兩個(gè) ：1、 大家找出例子中網(wǎng) 的相同地方和不同地方。 2、例子中 格接近的網(wǎng) 可以有幾種方法制作？ ( 框架？用另存 ？ )再考 ：如果用以上兩種方法做的 ，萬(wàn)一網(wǎng) 的共同部分要改 的 ，是否每 都要改 ？ 能不能一次修改，所有網(wǎng) 就會(huì)自 更新呢 ( 方法就是使用模板！ ) 在我 來(lái)看看如何 建模板（教 演示 解 ）三、如何 建模板步 1：打開(kāi)“安全自 我能行” 站點(diǎn)， 行：“窗口”“ 源”命令，打開(kāi)“ 源”面板， 模板按 ，切 到模板子面板步 2： “新建模板按 ”， 將“ 源”面板的模板列表中名稱 Untitled 修改 module, 回 ， Dreamweaver在“

27、源”面板和 Templates 文件 中 建一個(gè)新19的空模板。步驟 3：打開(kāi)“文件”面板，在 Templates 中新建 images 和 other 兩個(gè)文件夾，拷貝素材四、利用表格規(guī)劃模板網(wǎng)頁(yè)我們創(chuàng)建好了模板后，可以利用表格規(guī)劃模板了，這是我們學(xué)習(xí)過(guò)得內(nèi)容，大家根據(jù)書 38 頁(yè)具體步驟自己動(dòng)手規(guī)劃吧！三、課堂練習(xí)：大家根據(jù)書 38 頁(yè)具體步驟自己動(dòng)手規(guī)劃四、課堂小結(jié)：五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記20課題：第七課統(tǒng)一風(fēng)格制作框架網(wǎng)頁(yè)課題制作框架網(wǎng)頁(yè)授課時(shí)間課型新授課課時(shí)安排一課時(shí)教知識(shí)與技能：1掌握利用模板創(chuàng)建網(wǎng)頁(yè)的方法。學(xué) 2學(xué)會(huì)運(yùn)用 Flash按鈕制作導(dǎo)航欄進(jìn)行站內(nèi)導(dǎo)航。目

28、3了解鏈接對(duì)象的目標(biāo)框架的含義標(biāo)過(guò)程與方法：情感態(tài)度與價(jià)值觀：教學(xué)重點(diǎn)掌握利用模板創(chuàng)建網(wǎng)頁(yè)的方法。教學(xué)難點(diǎn)學(xué)會(huì)運(yùn)用 Flash按鈕制作導(dǎo)航欄進(jìn)行站內(nèi)導(dǎo)航教具學(xué)具學(xué)生電腦準(zhǔn)備教學(xué)方法講解、學(xué)生練習(xí)。教學(xué)過(guò)程一、導(dǎo)入新課：復(fù) 備創(chuàng)建模板是為了形成網(wǎng)站的統(tǒng)一風(fēng)格，加快網(wǎng)站的建設(shè)。就像工廠生產(chǎn)機(jī)器零部件一樣。模板創(chuàng)建完成后，面臨的工作就是利用模板創(chuàng)建網(wǎng)頁(yè)了。二、教學(xué)新課：211.新建站點(diǎn)（1）將“安全自護(hù)我能行”站點(diǎn)文件夾safe 傳到學(xué)生機(jī)。（2）新建站點(diǎn)。2.應(yīng)用模板創(chuàng)建網(wǎng)頁(yè)（1）規(guī)劃“日常生活”文件夾（2）應(yīng)用模板用模板直接創(chuàng)建網(wǎng)頁(yè)步驟 1：執(zhí)行“文件”“新建”命令，打開(kāi)“模板”標(biāo)簽，選擇模板文

29、件module，單擊“創(chuàng)建”按鈕，即可基于module 模板創(chuàng)建一個(gè)網(wǎng)頁(yè)。步驟 2：執(zhí)行 ”文件 ” “保存”命令，將網(wǎng)頁(yè)命名為 rcsh.html,并保存到 rcsh 文件夾中。創(chuàng)建空白網(wǎng)頁(yè)后再應(yīng)用模板。步驟 1：創(chuàng)建空白普通網(wǎng)頁(yè)。步驟 2：打開(kāi)“資源”面板，單擊“模板”按鈕，則模板資源顯示在模板中。步驟 3：選擇合適的模板，單擊“應(yīng)用”按鈕。3. 將日常生活網(wǎng)頁(yè)鏈接到框架網(wǎng)頁(yè)（1）打開(kāi) all.html 網(wǎng)頁(yè)，選擇 rcsh 圖片。（2）在屬性面板中單擊鏈接文本框后的“瀏覽文件”按鈕。選擇網(wǎng)頁(yè) rcsh.html.（3）設(shè)置目標(biāo)框架為mainFrame，表示單擊圖片后， 網(wǎng)頁(yè)“日常生活”在

30、框架網(wǎng)頁(yè)的下框架mainFrame中打開(kāi)。224. 利用 Flash 按鈕制作導(dǎo)航欄。5. 填充日常生活網(wǎng)頁(yè)中的內(nèi)容。6. 創(chuàng)建模板的其他方法。三、課堂練習(xí)：學(xué)生小組合作完成任務(wù)，并將任務(wù)上交到教師機(jī)。四、課堂小結(jié)：1.利用模板創(chuàng)建網(wǎng)頁(yè)。2.在框架中打開(kāi)網(wǎng)頁(yè)的方法。 。3 制作 Flash 按鈕鏈接。五、布置作業(yè)：六、板書設(shè)計(jì)：七、教學(xué)后記：23課題：第 8課按圖索驥課題課型教學(xué)目標(biāo)第8 課按圖索驥授課時(shí)間新授課課時(shí)安排一課時(shí)知識(shí)與技能： 1靈活地使用水平線分隔網(wǎng)頁(yè)元素。2學(xué)會(huì)插入命名錨記以創(chuàng)建錨點(diǎn)鏈接。3. 學(xué)習(xí)使用 Flash 文本作為鏈接對(duì)象。過(guò)程與方法： 講解、學(xué)生練習(xí)。情感態(tài)度與價(jià)值

31、觀：教學(xué)重點(diǎn)局部連接的插入教學(xué)難點(diǎn)局部連接的設(shè)置于運(yùn)用教具 學(xué) 具學(xué)生電腦準(zhǔn)備教學(xué)方法講授法、演示法教學(xué)過(guò)程一、導(dǎo)入新課：復(fù)當(dāng)初步制作“交通出行”網(wǎng)頁(yè)后，可以看出本頁(yè)包含的內(nèi)容很多，不同主題的文字和圖片羅列在一起，難以區(qū)分，因此我們考慮使用水平線分隔元素，并為頁(yè)面添加錨點(diǎn)鏈接，實(shí)現(xiàn)網(wǎng)頁(yè)的局部跳轉(zhuǎn)，快速地將訪問(wèn)者帶到特定主題或者網(wǎng)頁(yè)頂部。備二、教學(xué)新課（1）插入水平線水平線對(duì)于組織信息很有用。 插入水平線， 操作比較簡(jiǎn)單， 執(zhí)行菜單 “插入” HTML“水平線”命令就可以插入默認(rèn)屬性的水平線，其寬度為100%，高為 2 個(gè)像素，帶有陰影。另外，還可以打開(kāi)“插入”工具欄中的HTML工具欄，單擊“水

32、平線”按鈕插入水平線，在水平線的“屬性檢查器”面板中，可以設(shè)置水平線的寬度、高度、對(duì)齊方式、是24否帶有陰影，應(yīng)用的CSS樣等，如要設(shè)置水平線的顏色可使用“快速標(biāo)簽編輯器”按鈕或在“拆分”視圖中通過(guò)添加代碼操作。寬和高：以像素為單位或以頁(yè)面尺寸百分比的形式指定水平線的寬度和高度。對(duì)齊：指定水平線的對(duì)齊方式（ “默認(rèn)”、“左對(duì)齊”、“居中對(duì)齊”或“右對(duì)齊” ）。僅當(dāng)水平線的寬度小于瀏覽器窗口的寬度時(shí)，該設(shè)置才適用。陰影：指定繪制水平線時(shí)是否帶陰影。取消選擇此選項(xiàng)系統(tǒng)將使用純色繪制水平線。需要注意的是，水平線的有些設(shè)置在編輯窗口無(wú)法直接看到效果，需要在IE 瀏覽器中預(yù)覽，例如圖8.2 所示的為 2

33、 條不同屬性設(shè)置的水平線在編輯窗口中的狀態(tài)和 IE 瀏覽器中預(yù)覽效果的對(duì)比。（2）創(chuàng)建錨點(diǎn)鏈接在教材中我們將創(chuàng)建錨點(diǎn)鏈接分為兩個(gè)步驟：命名錨記和鏈接錨記。在進(jìn)行鏈接錨記的時(shí)候，我們采用是在“屬性檢查器”的“鏈接”文本框中輸入錨記名稱的方法，這就要求我們記住各個(gè)錨記對(duì)應(yīng)的主題內(nèi)容才能操作，否則還需要單擊相應(yīng)的錨記名稱，通過(guò)該錨記的“屬性檢查器”找到錨記名。其實(shí)，在進(jìn)行鏈接設(shè)置的時(shí)候，錨記也可以像文件一樣，直接被鼠標(biāo)選擇作為鏈接目標(biāo)，其步驟如下： 選擇要添加鏈接的主題文本，如“非機(jī)動(dòng)車交通安全”。 單擊“屬性檢查器”中“鏈接”文本框后的“指向文件”按鈕 ，直接拖動(dòng)按鈕到頁(yè)面上，此時(shí)將會(huì)出現(xiàn)黑色的箭頭，我們將此箭頭拖動(dòng)到需要鏈接的錨記即可，如圖 8.3 所示。25圖8.3用?指向文件 ?鏈接錨記（3）插入 Flash 文本Flash 文本與 Flash 按鈕十分相似，都是在 Dreamwe