網頁制作項目實訓教程 教案 項目2 制作包含圖片與超鏈接的網頁

PAGEPAGE0廣東省×××職業(yè)技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20____________________________________________網頁制作項目實訓教程網頁制作項目實訓教程學科（Subject）____________________________________________________________________________________________________________________________重慶大學出版社制

《網頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作圖書介紹頁任務2HYPERLINK活動1制作文字超鏈接HYPERLINK活動2制作圖片熱點超鏈接HYPERLINK活動3制作錨點鏈接

教學課題任務1活動1在網頁中使用圖片課題類型理論+實作課時安排2上課時間教學目標1.了解圖像占位符2.掌握如何在網頁中插入圖片3.掌握鼠標經過圖像的創(chuàng)建操作4.掌握如何將圖像設置為網頁背景教學重點2、3、4教學難點2、3輔助資源課件、多媒體、網絡復習引入1.設置編號列表。2.如何更改編號列表的類型？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創(chuàng)建一個名稱為“項目2-1”的本地站點，本地站點文件夾為D盤下的“Task2-1”文件夾，默認圖像文件夾路徑設置為D:\Task2-1\images。2、如下圖所示，新建一個網頁文件，輸入文字、添加圖片和各種圖像對象并設置網頁的背景，最后將網頁文件以“task2-1-1.html”為文件名保存到“項目2-1”站點根目錄下。二、師生討論學習新知識1、直接添加圖片圖片在網頁中的第1種使用方法是直接添加，網頁中能添加的圖片文件格式比較多，常見的格式有以下3種：JPG、GIF、PNG。2、插入圖像占位符圖片在網頁中的第2種使用方法是插入圖像占位符，在網頁文檔中添加圖片時，如果圖片不確定或者還沒設計出來，但可以確定圖片的位置、尺寸時，可以先在該位置上插入臨時的“圖像占位符”進行占位，然后等圖片確定后再進行替換。3、創(chuàng)建鼠標經過圖像圖片在網頁中的第3種使用方法是創(chuàng)建鼠標經過圖像，鼠標經過圖像由原始圖像和鼠標經過圖像兩部分組成，當鼠標光標在圖片范圍之外時顯示原始圖像，當鼠標光標經過圖片時顯示鼠標經過圖像。4、將圖片設置為網頁的背景圖片在網頁中的第4種使用方法是將圖片設置為網頁的背景，依次單擊“修改”->“頁面屬性”菜單命令（或按Ctrl+J鍵），選擇一張圖片作為網頁的背景。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件，依次單擊“站點”->“新建站點”菜單命令，在打開的“站點設置對象”對話框中設置站點名稱為“項目2-1”，點擊“本地站點文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開的對話框中選擇D盤，然后在D盤新建一個文件夾“Task2-1”。2、單擊“高級設置”->“本地信息”選項，點擊“默認圖像文件夾”文本框后面的“瀏覽文件夾”按鈕，定位到D盤的“Task2-1”文件夾，在“Task2-1”文件夾中再新建一個子文件夾“images”，以后網頁中添加的圖片都會自動保存在“images”文件夾中，最后點擊“保存”即可。3、新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task2-1-1.html”為文件名保存。4、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“網頁圖片的使用”。5、在文檔窗口中輸入相應的文字，并將輸入的文字設置為“標題3”格式，按Shift+回車鍵換行，單擊“插入”->“圖像”菜單命令（或單擊“常用”工具欄中的“圖像”按鈕，或按快捷鍵Ctrl+Alt+I）。6、在“選擇圖像源文件”對話框的查找范圍中選擇圖片所在的位置，圖片素材在“Chapter02\素材文件\任務1\活動1\雙11.jpg中，點選需要插入的圖片。7、在彈出的“圖像標簽輔助功能屬性”對話框中，補充信息，其中“替換文本”的作用是當瀏覽網頁圖片無法顯示或者當鼠標指向圖片時就會顯示所輸入的內容，“詳細說明”文本框可輸入圖片的詳細位置，方便網頁開發(fā)者查閱、修改。8、在圖片的最右側按回車鍵，輸入相應的文字，并將文字設置為“標題3”格式，按Shift+回車鍵換行，單擊“插入”->“圖像對象”->“圖像占位符”菜單命令（或單擊“常用”工具欄中的“圖像占位符”按鈕），輸入名稱、寬度、高度、設置顏色和替換文本，再點擊“確定”。9、圖像占位符上顯示了圖片的名稱以及大小，在圖像占位符的區(qū)域內雙擊，在對話框的查找范圍中選擇圖片所在的文件夾，點選需要插入的圖片即可替換圖像占位符，圖片素材在“Chapter02\素材文件\任務1\活動1\雙12.jpg中。10、在第2張圖片的最右側按回車鍵，輸入相應的文字，并將文字設置為“標題3”格式，按Shift+回車鍵換行，單擊“插入”->“圖像對象”->“鼠標經過圖像”菜單命令（或單擊“常用”工具欄中的“鼠標經過圖像”按鈕），在彈出的對話框中設置“原始圖像”、“鼠標經過圖像”的圖片，圖片素材在“Chapter02\素材文件\任務1\活動1\行李箱.jpg和女包.jpg”中，然后再設置“替換文本”、“前往的URL”中設置鏈接網址，最后單擊“確定”即可。11、單擊“修改”->“頁面屬性”菜單命令（或者按快捷鍵Ctrl+J），在彈出的“頁面屬性”對話框中點擊“背景圖像”后面的“瀏覽”按鈕，在“選擇圖像源文件”對話框中找到要設為背景的圖片文件，圖片素材在“Chapter02\素材文件\任務1\活動1\網頁背景.gif”中，并單擊“確定”按鈕。12、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：插入圖片與圖像點位符；鼠標經過圖像；將圖片設置為網頁背景演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內容教學后記

教學課題任務1活動2制作圖書介紹頁課題類型理論+實作課時安排2上課時間教學目標1.掌握<img/>標簽2.了解圖片的編輯操作教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.插入圖片與圖像占位符。2.插入鼠標經過圖像。3.將圖片設置為網頁背景。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成圖書介紹網頁的制作，完成后以“task2-1-2.html”為文件名保存到“項目2-1”站點根目錄下。二、師生討論學習新知識1、圖片的HTML標簽，如下圖所示?！?lt;img>”代表圖片，是單標簽，以/結束；“src”代表圖片的存放路徑；“alt”代表替換文本，用來設置當前鼠標移到圖片上所顯示的提示文本；“width”代表圖片的寬度，默認單位是像素；“height”代表圖片的高度，默認單位是像素；“align”代表圖片的對齊方式，常見的值可以設置為：top（頂端）、bottom（底部）、middle（中間）、left（左對齊）、right（右對齊）；“hspace”代表圖片左側和右側的水平邊距，默認單位是像素；“vspace”代表圖片頂部和底部的垂直邊距，默認單位是像素。2、圖片的簡單編輯網頁中的圖片除了可以通過HTML標簽進行設置以外，也可以通過屬性欄中各個選項進行處理，同時還有一些內置工具可以對圖片進行簡單編輯。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task2-1-2.html”為文件名保存到“項目2-1”站點根目錄下。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“圖書簡介”。3、在文檔窗口中輸入文字“圖書簡介”，選擇文字，在“屬性”面板的“格式”下拉列表框中選擇“標題1”。4、按回車鍵插入一張圖片（素材在Chapter02\素材文件\任務1\活動2\圖書.png），輸入“替換文本”和“詳細說明”。5、用鼠標點擊選中圖片，在“屬性”面板中鎖定尺寸約束，將圖片的寬設置為350px。6、將光標定位在圖片右側按回車鍵，輸入相應文本，冒號前的文字加粗（快捷鍵Ctrl+B），選中所有文字，然后單擊“屬性”面板上的“項目列表”按鈕，“格式”選擇“段落”。7、鼠標選中圖片右擊，在彈出的快捷菜單中選擇“對齊”，選擇“左對齊”。8、觀察和調整圖片與文字的距離，鼠標選中圖片右擊，在彈出的快捷菜單中選“編輯標簽<img>”，設置“水平邊距”和“垂直邊距”的值，并保存網頁。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：<img/>標簽；圖片的簡單編輯演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內容教學后記

教學課題任務2活動1在網頁中添加音頻與視頻課題類型理論+實作課時安排2上課時間教學目標1.了解常用的音頻格式2.掌握如何在網頁中添加音頻3.掌握如何在網頁中添加視頻教學重點2、3教學難點3輔助資源課件、多媒體、網絡復習引入1.<img/>標簽。2.圖片的編輯操作。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創(chuàng)建一個名稱為“項目2-2”的本地站點，本地站點文件夾為D盤下的“Task2-2”文件夾，默認圖像文件夾路徑設置為D:\Task2-2\images。2、如下圖所示，完成音樂頁面的制作，完成后以“task2-2-1.html”為文件名保存到“項目2-2”站點根目錄下。二、師生討論學習新知識1、網頁中常用的音頻文件格式：MP3格式、WAV格式、MIDI格式。2、網頁中添加音頻文件的方法在網頁中添加音頻文件的方法有兩種：一是背景音樂，二是插件形式。（1）為網頁添加背景音樂音頻文件可以以背景音樂的形式添加到網頁中，在預覽網頁時背景音樂會自動播放，其HTML標簽如下圖所示。（2）通過插件添加音頻在DreamweaverCS6還可以通過插件的方法在網頁文檔中添加音頻，在預覽頁面中會出現一個播放控件，通過該控件可以進行暫停、播放、停止、調整音量等操作，其HTML標簽如下圖所示。3、網頁中添加視頻文件的方法瀏覽器可以播放的視頻格式有MP4、MOV、AVI、FLV等，可以通過插件方式添加視頻，其添加方法、HTML標簽和音頻類似。此外，有FLV是Flash的視頻文件，在網頁中以SWF組件顯示，將光標移至要插入FLV視頻的位置，選擇“插入”菜單中選擇“媒體”中的FLV命令，打開“插入FLV”對話框，分為兩種視頻類型：累進式下載視頻與流視頻。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建HTML文檔切換至“設計”視圖模式，并以“task2-2-1.html”為文件名保存到站點為“項目2-2”的站點根目錄下。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“音樂網頁”。3、將光標定位在網頁的空白處，依次單擊“插入”->“標簽”菜單命令，打開“標簽選擇器”對話框，選擇“HTML標簽”選項，再選擇“頁面元素”選項，然后在右側的列表中選擇“bgsound選項”，單擊“插入”按鈕。4、在彈出的“標簽編輯器-bgsound”對話框中，點擊“源”選項的“瀏覽”文件夾按鈕，選擇音頻文件（素材在Chapter02\素材文件\任務2\活動1\茉莉花純音樂.mp3），在彈出的“您愿意將該文件復制到根文件夾中嗎？”對話框中選擇“是”。5、在“循環(huán)”下拉列表中選擇“無限（-1）”選項，單擊“確定”按鈕，返回“標簽選擇器”對話框，單擊“關閉”按鈕完成背景音樂的添加。6、切換回“設計視圖”，在第一行文字“我的音樂”，文字格式為標題2，按回車鍵，添加一張名字為“祖國.jpg”圖片，按Shfit+回車鍵換行，依次單擊“插入”->“媒體”->“插件”菜單命令，找到一個名字為“我和我的祖國.mp3”音頻文件，素材都在“Chapter02\素材文件\任務2\活動1”文件夾中.7、選中插入的音頻控件，在“屬性”面板中設置“寬”為“650”，“高”為“60”，點擊“參數”選項，彈出對話框點擊“+”按鈕，添加“參數”為“autostart”，“值”為“false”。8、在音頻控件的右側按回車鍵，輸入文字“我的視頻”，文字格式為標題2，再按回車鍵，依次單擊“插入”->“媒體”->“FLV”菜單命令。9、彈出“插入FLV”對話框，在“視頻類型”下拉列表框中選擇“累進式下載視頻”，“URL”選項點擊“瀏覽”按鈕找到名字為“北京歡迎你.flv”視頻文件，素材在“Chapter02\素材文件\任務2\活動1”文件夾中，點擊“檢測大小”按鈕。10、保存網頁文件并在瀏覽器中瀏覽網頁效果，其中背景音樂會自動播放，以插件方式添加的音樂和FLV視頻文件點擊“播放”按鈕播放。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：添加音頻文件；添加視頻文件演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內容教學后記

教學課題任務2活動2在網頁中添加Flash動畫課題類型理論+實作課時安排2上課時間教學目標1.了解Flash動畫的格式2.掌握如何在網頁中添加Flash動畫教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.在網頁中添加音頻文件。2.在網頁中添加視頻文件。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成Flash動畫和設置SWF文件透明背景效果頁面的制作，完成后分別以“task2-2-2.html”、“task2-2-3.html”為文件名保存到站點為“項目2-2”的“Task2-2”根文件夾中。二、師生討論學習新知識在DreamweaverCS6中，Flash動畫將聲音、圖像和動畫等內容加入到一個文件中，能制作出炫酷的動畫效果，而且文件容量較小，是網頁制作中上最流行的多媒體插件之一。Flash動畫主要有兩種格式：.fla格式：Flash軟件創(chuàng)建的源文件，只能在Flash軟件中打開和編輯，不能在Dreamweaver或瀏覽器中打開。要在Dreamweave進行添加Flash動畫，需要在Flash軟件中將Flash源文件導出為.swf格式的文件。.swf格式：Flash軟件導出的電影文件，可以在瀏覽器中播放，也可以在Dreamweaver中預覽，但不能進行編輯。.swf格式文件可以用AdobeFlashPlayer打開，瀏覽器必須安裝AdobeFlashPlayer插件。在DreamweaverCS6中，其主要屬性有：FlashID：可以輸入SWF影片文件唯一的名稱；寬和高：默認單位像素，設置SWF影片文件的尺寸；文件：指定SWF影片文件的路徑；背景顏色：設置SWF影片文件動畫區(qū)域的背景顏色；循環(huán)：選中則連續(xù)播放，不選只播放一次停止；自動播放：選中瀏覽網頁時則會自動播放該影片；垂直邊距、水平邊距：設置影片上下、左右空白區(qū)域的像素數；品質：有低品質、自動低品質、自動高品質、高品質4個選項；比例：設置SWF影片文件顯示的尺寸，有（默認）全部顯示、無邊框、嚴格匹配3種選項；對齊：設置SWF影片文件在網頁中的對齊方式；Wmode：設置SWF影片文件是否透明顯示，默認是不透明顯示。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task2-2-2.html”為文件名保存到站點為“項目2-2”的“Task2-2”根文件夾中。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“房產Flash廣告”。3、在文檔窗口中輸入文字“房產Flash廣告”，選擇文字，在“屬性”面板的“格式”下拉列表框中選擇“標題2”。4、文字右側按回車鍵，依次單擊“插入”->“媒體”->“SWF”菜單命令（快捷鍵Ctrl+Alt+F），打開“選擇文件”對話框，選擇名字為“房產廣告.swf”的文件（素材在“Chapter02\素材文件\任務2\活動2”文件夾中），單擊“確定”按鈕，即可插入到網頁文檔中。5、保存網頁文件并在瀏覽器中瀏覽網頁效果。6、新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task2-2-3.html”為文件名保存到站點為“項目2-2”的“Task2-2”根文件夾中。7、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“swf屬性設置”。8、依次單擊“修改”“頁面屬性”菜單命令（快捷鍵Ctrl+J），設置背景圖像（素材在“Chapter02\素材文件\任務2\活動2\我的校園.jpg”），“重復”選項選擇“no-reapet”，左邊距、上邊距設置為0，單擊“確定”按鈕。9、將光標定位在最左上角，依次單擊“插入”->“媒體”->“SWF”菜單命令（快捷鍵Ctrl+Alt+F），打開“選擇文件”對話框，選擇名字為“閃光效果.swf”的文件（素材在“Chapter02\素材文件\任務2\活動2”文件夾中），單擊“確定”按鈕，在“屬性”面板設置“寬”為“800”，“高”為“500”，“Wmode”選擇為“透明”。10、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：Flash動畫格式；網頁中插入Flash動畫相關屬性演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內容教學后記

教學課題任務3活動1制作包含超鏈接的網頁課題類型理論+實作課時安排2上課時間教學目標1.了解什么是超鏈接2.掌握如何創(chuàng)建超鏈接教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.Flash動畫的格式。2.如何在網頁中添加Flash動畫？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求為網頁素材“task2-3-1.html”中的文本“華南地區(qū)”、“華東地區(qū)”、“華北地區(qū)”分別設定超鏈接，鏈接的網頁文件分別為“hndq.html”、“hddq.html”、“hbdq.html”，頁面打開目標為新建頁面。二、師生討論學習新知識文本超鏈接是分配了目標URL的字或短語，它可以通過“屬性”面板進行設置，如下圖所示。三、教師演示活動實施過程并讓學生完成活動任務1、啟動DreamweaverCS6軟件，打開網頁素材文件“task2-3-1.html”，選中文本“華南地區(qū)”，在屬性面板中設置文本格式后，鏈接文件選擇素材文件“hndq.html”，目標設定為“_blank”，完成“華南地區(qū)”文本超鏈接。2、用同樣的方法完成“華東地區(qū)”和“華北地區(qū)”文本超鏈接。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：為網頁添加超鏈接演示：教師演示活動實施過程實訓活動：學生練習及點評作業(yè)布置填寫提交實訓報告和實訓表格預習作業(yè)：預習下一節(jié)內容教學后記

教學課題任務3活動2制作圖片熱點超鏈接課題類型理論+實作課時安排2上課時間教學目標1.了解圖片熱點鏈接2.掌握如何添加圖片熱點鏈接教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.超鏈接。2.如何為網頁添加超鏈接？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求為網頁素材“task2-3-1.html”中的“中國氣候類型”圖片設置4個熱點超鏈接，鏈接的網頁文件分別為“hndq.html”、“hddq.html”、“hxdq.html”、“hbdq.html”，頁面打開目標為新建頁面。二、師生討論學習新知識圖片超鏈接是為整個圖片分配默認超鏈接，也可以為圖片分配一個或多個熱點，即在圖片中劃分多個區(qū)域分配超鏈接，它可以通過“屬性”面板進行設置，如下圖所示。（對整張圖片設置超鏈接，操作方法與以上設置文本超鏈接相同，這里就不再贅述）三、