八年級下冊信息技術教案清華版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、1）規(guī)劃“框架”文件夾。（2）新建框架集步驟 1：執(zhí)行“文件”“新建”命令，打開“新建文檔”對話框，在 “類別”中選擇 “框架集”。步驟 2：單擊“創(chuàng)建”按鈕，在彈出對話框中單擊“確定” ，框架創(chuàng)建完成。（3）保存框架集步驟 1：執(zhí)行“文件”“保存全部”命令，保存到 frame文件夾中。步驟 2：重命名框架集文件和每個框架文件。（4）設置框架和框架屬性框架的屬性包括框架名稱、源文件、邊距、尺寸、滾動條等；框架集的屬性包括框架面積、框架邊界顏色、距離等。步驟 1：執(zhí)行“窗口” “框架”命令，打開框架面板。步驟 2：單擊“框架”面板中的框架邊緣部分，選中框架集，在 “屬性”面板中設置框架集的屬性。

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

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

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

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

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

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

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

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

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

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

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

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