《網頁制作項目實訓教程》 教案 項目1 網頁設計制作入門；項目2 制作包含圖片與超鏈接的網頁_第1頁
《網頁制作項目實訓教程》 教案 項目1 網頁設計制作入門；項目2 制作包含圖片與超鏈接的網頁_第2頁
《網頁制作項目實訓教程》 教案 項目1 網頁設計制作入門；項目2 制作包含圖片與超鏈接的網頁_第3頁
《網頁制作項目實訓教程》 教案 項目1 網頁設計制作入門；項目2 制作包含圖片與超鏈接的網頁_第4頁
《網頁制作項目實訓教程》 教案 項目1 網頁設計制作入門；項目2 制作包含圖片與超鏈接的網頁_第5頁
已閱讀5頁，還剩31頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

PAGEPAGE0廣東省×××職業技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網頁制作項目實訓教程學校（School）網頁制作項目實訓教程學科（Subject）_______________________________年級（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學出版社制

《網頁制作項目實訓教程》目錄注意：①注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作第一個網頁文檔任務2HYPERLINK活動1制作樹形菜單HYPERLINK活動2制作在線考試試卷教學課題任務1活動1創建與修改站點課題類型理論+實作課時安排2上課時間教學目標1.了解DreamweaverCS6的工作界面2.掌握站點的創建與編輯操作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.你上網瀏覽過網頁嗎？2.你覺得網頁由哪些元素構成？3.你知道的網頁制作工具有哪些？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創建一個名稱為“項目1”的本地站點，站點文件夾為D盤。2、修改“項目1”站點文件夾為桌面上的“Task1-1”文件夾。二、師生討論學習新知識1、啟動DreamweaverCS6軟件雙擊桌面上的DreamweaverCS6圖標，啟動軟件，如下圖所示。2、DreamweaverCS6工作界面介紹在“歡迎界面”中單擊“新建”欄下的“HTML”按鈕，新建一個HTML網頁文件，進入新的窗口界面。三、教師演示活動實施過程并讓學生完成活動任務1、新建站點（1）依次單擊“站點”->“新建站點”菜單命令，打開“站點設置對象”對話框。（2）在打開的“站點設置對象”對話框中設置站點名稱為“項目1”，點擊“本地站點文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開的對話框中選擇D盤，如下圖所示。（3）單擊“保存”按鈕，完成站點的創建操作。2、管理站點（1）依次單擊“站點”->“管理站點”菜單命令，打開“管理站點”對話框。（2）在“管理站點”對話框中選擇“項目1”站點，單擊“編輯”按鈕，打開“站點設置對象項目1”對話框，點擊“本地站點文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開的對話框中選擇桌面上的“Task1-1”文件夾。（3）單擊“保存”按鈕，完成站點的編輯操作。布置任務：讓學生明確本次課的內容提問或討論：DW的工作界面與PS有何異同網絡搜索：站點有什么作用演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務1活動2制作第一個網頁文檔課題類型理論+實作課時安排2上課時間教學目標1.了解網頁的基本結構2.掌握如何新建與保存網頁3.掌握如何在瀏覽器中瀏覽網頁教學重點1、2教學難點3輔助資源課件、多媒體、網絡復習引入1.如何創建站點？2.如何編輯站點？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求新建一個網頁文件，輸入兩行文字，并將網頁文件以“task1-1-2.html”為文件名保存到“項目1”站點根目錄下。如下圖所示。二、師生討論學習新知識1、DreamweaverCS6的三種編輯模式，分別是：代碼、拆分、設計。2、網頁的基本結構由三部分組成：聲明、頭部、主體。（1）網頁文檔類型聲明使用<!doctypehtml>來聲明網頁的文檔類型，用來告訴瀏覽器使用什么樣的HTML或XHTML規范來解析網頁，它存在于頁面的第一行，不區分大小寫。（2）網頁的頭部<head></head>：定義文檔的頭部。標簽內包含<meta>、<title>等標簽。<meta/>：提供有關頁面的元信息（針對搜索引擎和更新頻度的描述和關鍵詞等），寫在<head></head>標簽內。①<metacharset="UTF-8"/>：設置頁面的編碼格式UTF-8。②<metaname="Author"content=""/>：告訴搜索引擎站點制作的作者。③<metaname="Keywords"content=""/>：告訴搜索引擎網站的關鍵字。④<metaname="Description"content=""/>：告訴搜索引擎網站的內容。<title></title>：該標簽用于定義文檔的標題。寫在<head></head>標簽內。<title>HTML筆記</title>：網頁標題為“HTML筆記”，在瀏覽器標題欄上顯示。（3）網頁的主體<body></body>：定義網頁文檔的主體。三、教師演示活動實施過程并讓學生完成活動任務1、依次單擊“文件”->“新建”命令，打開“新建文檔”對話框，在打開的“新建文檔”對話框中選擇“空白頁”選項卡，在“頁面類型”中選擇“HTML”，然后單擊“創建”按鈕，新建一個HTML網頁文件。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“我的第一個網頁”。3、在“文檔工具欄”中單擊“設計”按鈕，切換到設計視圖模式，在文檔窗口中輸入“Hello，World！”，然后按回車鍵，再輸入“歡迎光臨，這是我的第一個網頁！”。4、依次單擊“文件”->“保存”命令，打開“另存為”對話框，在“文件名”文本框中輸入“task1-1-2”，單擊“保存”按鈕保存網頁文件，最后點擊“task1-1-2.html”文檔標簽中的關閉按鈕關閉網頁文件。5、在DreamweaverCS6軟件的“歡迎界面”中單擊“打開”按鈕，打開“打開”對話框，選擇“task1-1-2.html”文件，單擊“打開”按鈕打開該網頁文件。（在“文件”面板中展開“站點–項目1”，雙擊“task1-1-2.html”文件名也可以打開該文件。）6、在“文檔工具欄”中單擊“在瀏覽器中預覽/調試”工具按鈕，在彈出的快捷菜單中單擊“編輯瀏覽器列表”命令，打開“首選參數”對話框。7、在“在瀏覽器中預覽”選項卡中單擊“瀏覽器”文字后面的“+”號按鈕，打開“添加瀏覽器”對話框，在“名稱”文本框中輸入“GoogleChrome”，單擊“應用程序”文本框后面的“瀏覽”按鈕，在打開的“選擇瀏覽器”對話框中按谷歌瀏覽器的實際安裝路徑查找并選擇，勾選“主瀏覽器”復選框。單擊“確定”按鈕完成谷歌瀏覽器的添加操作。8、在“文檔工具欄”中單擊“在瀏覽器中預覽/調試”工具按鈕，在彈出的快捷菜單中單擊“預覽在GoogleChrome”命令（或按F12鍵），即可啟動谷歌瀏覽器瀏覽網頁。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：DW的三種編輯模式；網頁的基本結構演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務2活動1制作詩詞賞析頁面課題類型理論+實作課時安排2上課時間教學目標1.掌握標題標簽的使用2.掌握段落與換行標簽的使用教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.網頁的新建與保存。2.如何添加設置默認瀏覽器？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成詩詞賞析頁面的制作，完成后以“task1-2.html”為文件名保存。二、師生討論學習新知識1、標題標簽標題標簽表示一段文字的標題，共劃分六級標題<h1>…<h6>，從1級到6級，逐級字體減小。在DreamweaverCS6中，單擊“格式”“段落格式”菜單命令，在打開的子菜單中選擇“標題1”～“標題6”中的一個，或者在“屬性”面板的“格式”下拉列表框中選擇“標題1”～“標題6”中的一個，都可在網頁中插入相對應的標題標簽。2、段落與換行標簽（1）段落標簽在設計模式下，按回車鍵即可自動添加段落標簽<p></p>。（2）換行標簽在設計模式下，按Shift+回車鍵，即可添加換行標簽<br/>。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task1-2.html”為文件名保存。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“詩詞賞析”。3、單擊“格式”->“段落格式”->“標題1”菜單命令，在文檔窗口中插入“標題1”標簽，輸入詩詞標題文字。4、輸入完標題文字后按回車鍵另起一行，輸入詩詞作者，輸入完后再按回車鍵另起一行。5、單擊“格式”->“段落格式”->“標題3”菜單命令，輸入完第1行詩詞后，按Shift+回車鍵插入換行符，輸入第2行詩詞。6、按回車鍵另起一行，輸入“譯文及注釋”文字，選擇輸入的“譯文及注釋”文字，在“屬性”面板“格式”下拉列表框中選擇“標題2”。7、按回車鍵另起一行，輸入“譯文”，再按回車鍵另起一行，輸入譯文正文部分；重復上述操作，完成注釋部分的輸入操作。（注意：在“涼州詞”注釋文字的最后按Shift+回車鍵，插入換行符后再輸入“夜光杯”注釋文字部分。）8、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：標題標簽；段落與換行標簽演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務2活動2對詩詞賞析頁面進行簡單排版課題類型理論+實作課時安排2上課時間教學目標1.掌握粗體標簽與斜體標簽的使用2.掌握特殊符號的使用教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.標題標簽。2.段落標簽與換行標簽。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開“task1-2.html”文件，對詩詞賞析頁面進行簡單排版操作。二、師生討論學習新知識1、粗體標簽<strong></strong>粗體標簽主要用于文字加粗，可以通過以下兩種方法給網頁文字添加粗體標簽：在“代碼”視圖模式中，在需要設置加粗效果的文字兩端添加<strong>…</strong>標簽。在“設計”視圖模式中，選擇要設置加粗效果的文字，在“屬性”面板中單擊“粗體”按鈕（快捷鍵為：Ctrl+B）。2、斜體標簽<em></em>斜體標簽主要用于文字傾斜顯示，可以通過以下兩種方法給網頁文字添加斜體標簽：在“代碼”視圖模式中，在需要設置傾斜效果的文字兩端添加<em>…</em>標簽。在“設計”視圖模式中，選擇要設置傾斜效果的文字，在“屬性”面板中單擊“斜體”按鈕（快捷鍵為：Ctrl+I）。3、特殊符號4、水平線標簽<hr/>三、教師演示活動實施過程并讓學生完成活動任務1、使用DreamweaverCS6打開“task1-2.html”并切換到“設計”視圖模式。2、選擇詩詞作者，在“屬性”面板中單擊“斜體”按鈕，設置傾斜效果。3、選擇“譯文”兩個字，在“屬性”面板中單擊“粗體”按鈕，設置加粗效果。使用同樣的方法設置其他需要加粗的文字。4、在需要設置縮進的文字前單擊鼠標，然后依次單擊“插入”->“HTML”->“特殊字符”->“不換行空格”菜單命令（快捷鍵為：Ctrl+Shift+空格），添加不換行空格使文字縮進，縮進量不夠可多添加幾個不換行空格，具體效果以瀏覽器瀏覽的效果為準。5、在文檔末尾添加文字“版權所有2018”，然后將光標定位到“2018”的前面，依次單擊“插入”->“HTML”->“特殊字符”->“版權”菜單命令，插入版權符號。6、在詩詞正文的后面單擊鼠標，然后依次單擊“插入”->“HTML”->“水平線”菜單命令，插入水平線。使用同樣的方法在文檔末尾版權信息前插入水平線。7、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：粗體標簽；斜體標簽；特殊符號與水平線標簽演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動1制作樹形菜單課題類型理論+實作課時安排2上課時間教學目標1.掌握如何設置項目列表2.掌握項目列表的類型有哪些教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.粗體與斜體標簽。2.如何在網頁中添加不換行空格？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成樹形菜單的制作，完成后以“task1-3-1.html”為文件名保存。二、師生討論學習新知識1、項目列表：也稱無序列表，列表項之間無順序之分，每個列表項前均有一個項目符號。2、項目列表的設置：項目列表可以通過“屬性”面板進行設置。3、項目列表的類型：項目列表的類型可以通過type屬性設置列表顯示符號的類型。disc：實心圓點square：實心方框circle：空心圓點三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task1-3-1.html”為文件名保存。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“ul-li多層嵌套制作樹形菜單”。3、在文檔窗口中依次輸入相應的文字。選擇所輸入的文字，單擊“屬性”面板上的“項目列表”按鈕，給輸入的文字添加項目列表。4、在任意一個列表項中單擊鼠標，然后依次單擊“格式”->表”->“項目列表”菜單命令，打開的“列表屬性”對話框，在“樣式”下拉列表框中選擇“正方形”，然后單擊“確定”按鈕。5、選擇“本地磁盤(C:)”～“本地磁盤(D:)”文字，單擊“屬性”面板上的“縮進”按鈕，制作第2級列表項。6、選擇“我的文檔”與“我的收藏”文字，單擊“屬性”面板上的“縮進”按鈕，制作第3級列表項。在“我的文檔”文字中單擊鼠標，再單擊“屬性”面板上的“列表項目…”按鈕，打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“項目符號”，然后單擊“確定”按鈕。7、選擇“我的游戲”～“我的電影”文字，單擊“屬性”面板上的“縮進”按鈕兩次，在“我的游戲”文字中單擊鼠標，再單擊“屬性”面板上的“列表項目…”按鈕，打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“項目符號”，然后單擊“確定”按鈕。8、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：項目列表及項目列表的設置；項目列表的類型演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動2制作在線考試試卷課題類型理論+實作課時安排2上課時間教學目標1.掌握如何設置編號列表2.掌握編號列表的類型有哪些教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.設置項目列表。2.如何更改項目列表的類型？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成在線考試試卷的制作，完成后以“task1-3-2.html”為文件名保存。二、師生討論學習新知識1、編號列表編號列表，也稱有序列表，以數字或字母作為列表項符號。2、編號列表的類型編號列表的類型可以通過type屬性設置列表顯示編號的類型。1：數字A：大寫英文a：小寫英文i：小寫羅馬字符I：大寫羅馬字符三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6軟件并新建一個HTML文檔，將新建的HTML文檔切換至“設計”視圖模式，并以“task1-3-2.html”為文件名保存。2、在“文檔工具欄”中的“標題”文本框中，將“無標題文檔”更改為“在線考試試卷”。3、在文檔窗口中輸入在線考試試卷的名稱“DreamWeaver在線考試試題”，選擇輸入的文字，在“屬性”面板的“格式”下拉列表框中選擇“標題1”，完成在線考試試卷名稱的制作。4、在文檔窗口中輸入在線考試試卷的題干。選擇所輸入的文字，單擊“屬性”面板上的“編號列表”按鈕，完成題干的制作。5、在第1題題干的后面單擊鼠標后按回車鍵，輸入第1題的四個選項。選擇所輸入的第1題的所有選項，單擊“屬性”面板上的“縮進”按鈕。在任意一個選項中單擊鼠標，然后單擊“屬性”面板上的“列表項目…”按鈕，打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“大寫字母(A,B,C…)”，然后單擊“確定”按鈕。6、按照第5步的操作完成其他各題的選項制作，完成后保存文件并在瀏覽器瀏覽效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：編號列表；編號列表的類型演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記廣東省×××職業技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網頁制作項目實訓教程學校（School）網頁制作項目實訓教程學科（Subject）_______________________________年級（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學出版社制

《網頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作圖書介紹頁任務2HYPERLINK活動1制作文字超鏈接HYPERLINK活動2制作圖片熱點超鏈接HYPERLINK活動3制作錨點鏈接教學課題任務1活動1在網頁中使用圖片課題類型理論+實作課時安排2上課時間教學目標1.了解圖像占位符2.掌握如何在網頁中插入圖片3.掌握鼠標經過圖像的創建操作4.掌握如何將圖像設置為網頁背景教學重點2、3、4教學難點2、3輔助資源課件、多媒體、網絡復習引入1.設置編號列表。2.如何更改編號列表的類型？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創建一個名稱為“項目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、創建鼠標經過圖像圖片在網頁中的第3種使用方法是創建鼠標經過圖像，鼠標經過圖像由原始圖像和鼠標經過圖像兩部分組成，當鼠標光標在圖片范圍之外時顯示原始圖像，當鼠標光標經過圖片時顯示鼠標經過圖像。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、在彈出的“圖像標簽輔助功能屬性”對話框中，補充信息，其中“替換文本”的作用是當瀏覽網頁圖片無法顯示或者當鼠標指向圖片時就會顯示所輸入的內容，“詳細說明”文本框可輸入圖片的詳細位置，方便網頁開發者查閱、修改。8、在圖片的最右側按回車鍵，輸入相應的文字，并將文字設置為“標題3”格式，按Shift+回車鍵換行，單擊“插入”->“圖像對象”->“圖像占位符”菜單命令（或單擊“常用”工具欄中的“圖像占位符”按鈕），輸入名稱、寬度、高度、設置顏色和替換文本，再點擊“確定”。9、圖像占位符上顯示了圖片的名稱以及大小，在圖像占位符的區域內雙擊，在對話框的查找范圍中選擇圖片所在的文件夾，點選需要插入的圖片即可替換圖像占位符，圖片素材在“Chapter02\素材文件\任務1\活動1\雙12.jpg中。10、在第2張圖片的最右側按回車鍵，輸入相應的文字，并將文字設置為“標題3”格式，按Shift+回車鍵換行，單擊“插入”->“圖像對象”->“鼠標經過圖像”菜單命令（或單擊“常用”工具欄中的“鼠標經過圖像”按鈕），在彈出的對話框中設置“原始圖像”、“鼠標經過圖像”的圖片，圖片素材在“Chapter02\素材文件\任務1\活動1\行李箱.jpg和女包.jpg”中，然后再設置“替換文本”、“前往的URL”中設置鏈接網址，最后單擊“確定”即可。11、單擊“修改”->“頁面屬性”菜單命令（或者按快捷鍵Ctrl+J），在彈出的“頁面屬性”對話框中點擊“背景圖像”后面的“瀏覽”按鈕，在“選擇圖像源文件”對話框中找到要設為背景的圖片文件，圖片素材在“Chapter02\素材文件\任務1\活動1\網頁背景.gif”中，并單擊“確定”按鈕。12、保存網頁文件并在瀏覽器中瀏覽網頁效果。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：插入圖片與圖像點位符；鼠標經過圖像；將圖片設置為網頁背景演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務1活動2制作圖書介紹頁課題類型理論+實作課時安排2上課時間教學目標1.掌握<img/>標簽2.了解圖片的編輯操作教學重點1、2教學難點1輔助資源課件、多媒體、網絡復習引入1.插入圖片與圖像占位符。2.插入鼠標經過圖像。3.將圖片設置為網頁背景。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，完成圖書介紹網頁的制作，完成后以“task2-1-2.html”為文件名保存到“項目2-1”站點根目錄下。二、師生討論學習新知識1、圖片的HTML標簽，如下圖所示。“<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/>標簽；圖片的簡單編輯演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務2活動1在網頁中添加音頻與視頻課題類型理論+實作課時安排2上課時間教學目標1.了解常用的音頻格式2.掌握如何在網頁中添加音頻3.掌握如何在網頁中添加視頻教學重點2、3教學難點3輔助資源課件、多媒體、網絡復習引入1.<img/>標簽。2.圖片的編輯操作。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求1、創建一個名稱為“項目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、在“循環”下拉列表中選擇“無限（-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視頻文件點擊“播放”按鈕播放。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：添加音頻文件；添加視頻文件演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務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軟件創建的源文件，只能在Flash軟件中打開和編輯，不能在Dreamweaver或瀏覽器中打開。要在Dreamweave進行添加Flash動畫，需要在Flash軟件中將Flash源文件導出為.swf格式的文件。.swf格式：Flash軟件導出的電影文件，可以在瀏覽器中播放，也可以在Dreamweaver中預覽，但不能進行編輯。.swf格式文件可以用AdobeFlashPlayer打開，瀏覽器必須安裝AdobeFlashPlayer插件。在DreamweaverCS6中，其主要屬性有：FlashID：可以輸入SWF影片文件唯一的名稱；寬和高：默認單位像素，設置SWF影片文件的尺寸；文件：指定SWF影片文件的路徑；背景顏色：設置SWF影片文件動畫區域的背景顏色；循環：選中則連續播放，不選只播放一次停止；自動播放：選中瀏覽網頁時則會自動播放該影片；垂直邊距、水平邊距：設置影片上下、左右空白區域的像素數；品質：有低品質、自動低品質、自動高品質、高品質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動畫相關屬性演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動1制作包含超鏈接的網頁課題類型理論+實作課時安排2上課時間教學目標1.了解什么是超鏈接2.掌握如何創建超鏈接教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.Flash動畫的格式。2.如何在網頁中添加Flash動畫？教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求為網頁素材“task2-3-1.html”中的文本“華南地區”、“華東地區”、“華北地區”分別設定超鏈接，鏈接的網頁文件分別為“hndq.html”、“hddq.html”、“hbdq.htm

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論