信息技術：第十七課 編輯網頁代碼

1、浙教版信息技術八年級上第十七課編輯網頁代碼教學設計課題編輯網頁代碼單兀第二單兀 學科信息技術年級 八年級學習 目標知識目標：了解HTML語言的概念、結構及其在網頁制作中的作用 技能目標：初步掌握網頁特效的添加方法。情感目標：樹立正確的版權保護意識；提高審美意識。重點了解HTML語言，添加網頁特效代碼。難點了解HTML語言，添加網頁特效代碼。教學過程教學環(huán)節(jié)教師活動學生活動設計意圖導入新課同學們?yōu)g覽網頁時是不是經常能看到一些特 殊的效果，如跟隨鼠標的文字、自動更新的日期等 等，那這些是怎么實現(xiàn)的呢？今天我們就來學習一 下如何來實現(xiàn)這些效果給網頁添加特效代碼。思考激發(fā)學生學習興趣并快速進入學習狀態(tài)

2、講授新課知識鏈接網頁特效指網頁上的特殊效果，主要是通過將 Javascript程序代碼加入到網頁中，使網頁頁面更加 生動、活波。一、認識HTML代碼超文本標記語言，是用于描述網頁文檔的一種 標記語言，它是萬維網上的通用語言。在Sharepoint Designer中，選擇“代碼”視圖， 就可以編輯HTML和各種腳本語言代碼，如下圖 即為“網絡世界”主頁的代碼。交流通過觀察這段源代碼，你發(fā)現(xiàn)了什么？ 網絡世界 網絡是個怎樣的世界通過教師的講 解，以小組合 作的方式，開 展探討交流， 完成任務。通過小組合作， 加強學生組內團 結、共同完成任 務，在源代碼中，我們看到有一些由“”括起來 的字符串，如

3、title,、/title、 等, 這些就是HTML標記。每個HTML標記代表著一 些特定的含義。HTML標記分單標記和雙標記兩種。雙標記是 以開始標簽開始，以結束標簽結束，結束標簽比開 始標簽多一個斜杠“/”。單標記只有開始標記，沒 有結束標記。交流仔細觀察“插入圖像”源代碼有什么發(fā)現(xiàn)？vtitle插入圖像在源代碼中可以看到，網頁標題放在和 標記之間網頁顯示的內容放在和v/body之間在HTML文檔中插入圖像是通過vimg標記來 實現(xiàn)的是單標記，img后面是頁面顯示的圖像 屬性。仔細觀察“插入表格”源代碼有什么發(fā)現(xiàn)？插入表格 班級相冊widths “50%” 才藝展示通過源代碼可以看到：頁面

4、標題放在vtitle和標記之間421加 表格標記，和v/table之間定義了 一個表格表格屬性為：表格邊框(border)寬度為1個 像素，表格的寬度(width)為瀏覽器窗口寬度(width= “148%” )vtr和v/tr是行標記，表示某一行;和v/td 是列標記，表示某一列，標記內的屬性意為單 元格寬度(width)為瀏覽器窗口寬度50% (width= “50%”)oHTML文件結構如下標記網頁的開始Vhead標記頭部的開始顯示在瀏覽器左上方的標題/ title標記頭部的結束body標記頁面正文開始/body標記頁面止文結束/html 標記網頁的結束HTML標簽是由尖括號包圍的關鍵詞

5、，通常成 對出現(xiàn)。親身體驗學生動手實踐培養(yǎng)學生動手操 作能力，并且鍛 煉學生的語言組 織能力和表達的 能力。培養(yǎng)學生組間合選擇“拆分”視圖編輯主頁對照網頁的兩種表 達形式，初步認識網頁的代碼結構。二、添加特效代碼因特網上有很多專門提供特效代碼的網站，通 過復制特效代碼加入到自己的網頁中可以實現(xiàn)網 頁特效以“網絡世界”網站主頁加入鼠標特效為例， 操作方法如下.翻開“網絡世界”網站，選擇主頁為當前編 輯窗口。.翻開E瀏覽器，搜索“網頁特效”網站，找 一個喜歡的特效，并復制該特效代碼如進入“網頁特效集錦 :/ helpor. net/”網站，復制“飄動的字符跟隨鼠標”代碼（如 圖）。.切換到 Sha

6、repoint Designer 界面選擇“代碼”視圖，將光標定位到之間粘貼已復制的代碼，并修改文字內容為“網絡 世界歡迎你的光臨!”，如下圖，鼠標特效設置完 成。溫馨提示一個頁面添加的特效不宜過多，否那么會影響整 個頁面的視覺美感。親身體驗嘗試添加一種鼠標特效閱讀材料HTML文檔的常用標簽功能介紹基本標簽創(chuàng)立一個HTML文檔操作，學生小 組間討論，共 同完成任務。通過教師的講 解，以小組合 作的方式，開 展探討交流， 完成任務。學生動手實踐 操作，學生小 組間討論，共 同完成任務。作能力，并且煉 動手能力培養(yǎng)學生動手操 作能力，并且鍛 煉學生的語言組 織能力和表達的 能力。設置文檔頭部設置文

7、檔的可見局部標題標簽設置標題文檔整體屬性設置背景顏色設置文本文字顏色設置鏈接顏色圖形元素添加一幅圖像Img src= name文本標簽創(chuàng)立預格式化文本創(chuàng)立最大的標題創(chuàng)立最小的標題創(chuàng)立黑體字創(chuàng)立斜體字設置字體大小，從1到7設置字體的顏色格式排版創(chuàng)立一個新的行插入一個回車換行符表格創(chuàng)立一個表格開始表格中的每一行開始一行中的每一格課堂練習1.給網頁添加特效。特效代碼的例子很多，嘗 試選擇多個特效代碼，如“自動更新的日期”，將 它加入到網頁中。學生小組間討 論，共同完成 任務，并分組 匯報。培養(yǎng)學生獨立完 成練習的能力。課堂小結分小組總結歸納，教師補充。各組匯報總 結，其他小組 成員做補充。鍛煉學生的

8、總結 能力，邏輯思維、 語言表達能力。布置作業(yè)1 .嘗試運用HTML更改網頁內容，觀察其變化。板書一、認識HTML代碼二、添加特效代碼版權聲明21世紀教育網 （以下簡稱“本網站”）系屬深圳市二一教育 股份（以下簡稱“本公司”）旗下網站，為維護本公司合法權益，現(xiàn)依 據相關法律法規(guī)作出如下鄭重聲明：一、本網站上所有原創(chuàng)內容，由本公司依據相關法律法規(guī)，安排專項經費, 運營規(guī)劃，組織名校名師創(chuàng)作完成，著作權歸屬本公司所有。二、經由網站用戶上傳至本網站的試卷、教案、課件、學案等內容，由本公 司獨家享有信息網絡傳播權，其作品僅代表作者本人觀點，本網站不保證其內容 的有效性，凡因本作品引發(fā)的任何法律糾紛，均由上傳用戶承當法律責任，本網 站僅有義務協(xié)助司法機關了解事實情況。三、任何個人、企事業(yè)單位（含教育網站）或者其他組織，未經本公司許可， 不得使用本網站任何作品及作品的組成局部（包括但不限于復制、發(fā)行、表演、 廣播、信息網絡傳播、改編 匯編、翻譯等方式），一旦發(fā)現(xiàn)侵權，本公司將聯(lián) 合司法機關獲取相關用戶信息并要求侵權者承當相關法律責任。四、一旦發(fā)現(xiàn)侵犯本網站作品著