《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)制作入門(mén)；項(xiàng)目2 制作包含圖片與超鏈接的網(wǎng)頁(yè)_第1頁(yè)
《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)制作入門(mén)；項(xiàng)目2 制作包含圖片與超鏈接的網(wǎng)頁(yè)_第2頁(yè)
《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)制作入門(mén)；項(xiàng)目2 制作包含圖片與超鏈接的網(wǎng)頁(yè)_第3頁(yè)
《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)制作入門(mén)；項(xiàng)目2 制作包含圖片與超鏈接的網(wǎng)頁(yè)_第4頁(yè)
《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)制作入門(mén)；項(xiàng)目2 制作包含圖片與超鏈接的網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩31頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

PAGEPAGE0廣東省×××職業(yè)技術(shù)學(xué)校學(xué)科教案本TeachingPlan20年———20年學(xué)年度學(xué)期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程學(xué)校（School）網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程學(xué)科（Subject）_______________________________年級(jí)（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學(xué)出版社制

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

《網(wǎng)頁(yè)制作項(xiàng)目實(shí)訓(xùn)教程》目錄注意：①按住Ctrl鍵后單擊每個(gè)任務(wù)即可跳轉(zhuǎn)到對(duì)應(yīng)的教案②注意：①按住Ctrl鍵后單擊每個(gè)任務(wù)即可跳轉(zhuǎn)到對(duì)應(yīng)的教案②單擊按鈕可返回目錄③頁(yè)面設(shè)置參數(shù)為：紙張：B5頁(yè)邊距左：1.5頁(yè)邊距右：1.5任務(wù)1HYPERLINK活動(dòng)2制作圖書(shū)介紹頁(yè)任務(wù)2HYPERLINK活動(dòng)1制作文字超鏈接HYPERLINK活動(dòng)2制作圖片熱點(diǎn)超鏈接HYPERLINK活動(dòng)3制作錨點(diǎn)鏈接教學(xué)課題任務(wù)1活動(dòng)1在網(wǎng)頁(yè)中使用圖片課題類(lèi)型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.了解圖像占位符2.掌握如何在網(wǎng)頁(yè)中插入圖片3.掌握鼠標(biāo)經(jīng)過(guò)圖像的創(chuàng)建操作4.掌握如何將圖像設(shè)置為網(wǎng)頁(yè)背景教學(xué)重點(diǎn)2、3、4教學(xué)難點(diǎn)2、3輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.設(shè)置編號(hào)列表。2.如何更改編號(hào)列表的類(lèi)型？教學(xué)手段教學(xué)過(guò)程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求1、創(chuàng)建一個(gè)名稱(chēng)為“項(xiàng)目2-1”的本地站點(diǎn)，本地站點(diǎn)文件夾為D盤(pán)下的“Task2-1”文件夾，默認(rèn)圖像文件夾路徑設(shè)置為D:\Task2-1\images。2、如下圖所示，新建一個(gè)網(wǎng)頁(yè)文件，輸入文字、添加圖片和各種圖像對(duì)象并設(shè)置網(wǎng)頁(yè)的背景，最后將網(wǎng)頁(yè)文件以“task2-1-1.html”為文件名保存到“項(xiàng)目2-1”站點(diǎn)根目錄下。二、師生討論學(xué)習(xí)新知識(shí)1、直接添加圖片圖片在網(wǎng)頁(yè)中的第1種使用方法是直接添加，網(wǎng)頁(yè)中能添加的圖片文件格式比較多，常見(jiàn)的格式有以下3種：JPG、GIF、PNG。2、插入圖像占位符圖片在網(wǎng)頁(yè)中的第2種使用方法是插入圖像占位符，在網(wǎng)頁(yè)文檔中添加圖片時(shí)，如果圖片不確定或者還沒(méi)設(shè)計(jì)出來(lái)，但可以確定圖片的位置、尺寸時(shí)，可以先在該位置上插入臨時(shí)的“圖像占位符”進(jìn)行占位，然后等圖片確定后再進(jìn)行替換。3、創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像圖片在網(wǎng)頁(yè)中的第3種使用方法是創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像，鼠標(biāo)經(jīng)過(guò)圖像由原始圖像和鼠標(biāo)經(jīng)過(guò)圖像兩部分組成，當(dāng)鼠標(biāo)光標(biāo)在圖片范圍之外時(shí)顯示原始圖像，當(dāng)鼠標(biāo)光標(biāo)經(jīng)過(guò)圖片時(shí)顯示鼠標(biāo)經(jīng)過(guò)圖像。4、將圖片設(shè)置為網(wǎng)頁(yè)的背景圖片在網(wǎng)頁(yè)中的第4種使用方法是將圖片設(shè)置為網(wǎng)頁(yè)的背景，依次單擊“修改”->“頁(yè)面屬性”菜單命令（或按Ctrl+J鍵），選擇一張圖片作為網(wǎng)頁(yè)的背景。三、教師演示活動(dòng)實(shí)施過(guò)程并讓學(xué)生完成活動(dòng)任務(wù)1、打開(kāi)DreamweaverCS6軟件，依次單擊“站點(diǎn)”->“新建站點(diǎn)”菜單命令，在打開(kāi)的“站點(diǎn)設(shè)置對(duì)象”對(duì)話(huà)框中設(shè)置站點(diǎn)名稱(chēng)為“項(xiàng)目2-1”，點(diǎn)擊“本地站點(diǎn)文件夾”文本框后面的“瀏覽文件夾”按鈕，在打開(kāi)的對(duì)話(huà)框中選擇D盤(pán)，然后在D盤(pán)新建一個(gè)文件夾“Task2-1”。2、單擊“高級(jí)設(shè)置”->“本地信息”選項(xiàng)，點(diǎn)擊“默認(rèn)圖像文件夾”文本框后面的“瀏覽文件夾”按鈕，定位到D盤(pán)的“Task2-1”文件夾，在“Task2-1”文件夾中再新建一個(gè)子文件夾“images”，以后網(wǎng)頁(yè)中添加的圖片都會(huì)自動(dòng)保存在“images”文件夾中，最后點(diǎn)擊“保存”即可。3、新建一個(gè)HTML文檔，將新建的HTML文檔切換至“設(shè)計(jì)”視圖模式，并以“task2-1-1.html”為文件名保存。4、在“文檔工具欄”中的“標(biāo)題”文本框中，將“無(wú)標(biāo)題文檔”更改為“網(wǎng)頁(yè)圖片的使用”。5、在文檔窗口中輸入相應(yīng)的文字，并將輸入的文字設(shè)置為“標(biāo)題3”格式，按Shift+回車(chē)鍵換行，單擊“插入”->“圖像”菜單命令（或單擊“常用”工具欄中的“圖像”按鈕，或按快捷鍵Ctrl+Alt+I）。6、在“選擇圖像源文件”對(duì)話(huà)框的查找范圍中選擇圖片所在的位置，圖片素材在“Chapter02\素材文件\任務(wù)1\活動(dòng)1\雙11.jpg中，點(diǎn)選需要插入的圖片。7、在彈出的“圖像標(biāo)簽輔助功能屬性”對(duì)話(huà)框中，補(bǔ)充信息，其中“替換文本”的作用是當(dāng)瀏覽網(wǎng)頁(yè)圖片無(wú)法顯示或者當(dāng)鼠標(biāo)指向圖片時(shí)就會(huì)顯示所輸入的內(nèi)容，“詳細(xì)說(shuō)明”文本框可輸入圖片的詳細(xì)位置，方便網(wǎng)頁(yè)開(kāi)發(fā)者查閱、修改。8、在圖片的最右側(cè)按回車(chē)鍵，輸入相應(yīng)的文字，并將文字設(shè)置為“標(biāo)題3”格式，按Shift+回車(chē)鍵換行，單擊“插入”->“圖像對(duì)象”->“圖像占位符”菜單命令（或單擊“常用”工具欄中的“圖像占位符”按鈕），輸入名稱(chēng)、寬度、高度、設(shè)置顏色和替換文本，再點(diǎn)擊“確定”。9、圖像占位符上顯示了圖片的名稱(chēng)以及大小，在圖像占位符的區(qū)域內(nèi)雙擊，在對(duì)話(huà)框的查找范圍中選擇圖片所在的文件夾，點(diǎn)選需要插入的圖片即可替換圖像占位符，圖片素材在“Chapter02\素材文件\任務(wù)1\活動(dòng)1\雙12.jpg中。10、在第2張圖片的最右側(cè)按回車(chē)鍵，輸入相應(yīng)的文字，并將文字設(shè)置為“標(biāo)題3”格式，按Shift+回車(chē)鍵換行，單擊“插入”->“圖像對(duì)象”->“鼠標(biāo)經(jīng)過(guò)圖像”菜單命令（或單擊“常用”工具欄中的“鼠標(biāo)經(jīng)過(guò)圖像”按鈕），在彈出的對(duì)話(huà)框中設(shè)置“原始圖像”、“鼠標(biāo)經(jīng)過(guò)圖像”的圖片，圖片素材在“Chapter02\素材文件\任務(wù)1\活動(dòng)1\行李箱.jpg和女包.jpg”中，然后再設(shè)置“替換文本”、“前往的URL”中設(shè)置鏈接網(wǎng)址，最后單擊“確定”即可。11、單擊“修改”->“頁(yè)面屬性”菜單命令（或者按快捷鍵Ctrl+J），在彈出的“頁(yè)面屬性”對(duì)話(huà)框中點(diǎn)擊“背景圖像”后面的“瀏覽”按鈕，在“選擇圖像源文件”對(duì)話(huà)框中找到要設(shè)為背景的圖片文件，圖片素材在“Chapter02\素材文件\任務(wù)1\活動(dòng)1\網(wǎng)頁(yè)背景.gif”中，并單擊“確定”按鈕。12、保存網(wǎng)頁(yè)文件并在瀏覽器中瀏覽網(wǎng)頁(yè)效果。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：插入圖片與圖像點(diǎn)位符；鼠標(biāo)經(jīng)過(guò)圖像；將圖片設(shè)置為網(wǎng)頁(yè)背景演示：教師演示活動(dòng)實(shí)施過(guò)程實(shí)訓(xùn)活動(dòng)：學(xué)生練習(xí)及點(diǎn)評(píng)作業(yè)布置填寫(xiě)提交實(shí)訓(xùn)報(bào)告和實(shí)訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記教學(xué)課題任務(wù)1活動(dòng)2制作圖書(shū)介紹頁(yè)課題類(lèi)型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.掌握<img/>標(biāo)簽2.了解圖片的編輯操作教學(xué)重點(diǎn)1、2教學(xué)難點(diǎn)1輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.插入圖片與圖像占位符。2.插入鼠標(biāo)經(jīng)過(guò)圖像。3.將圖片設(shè)置為網(wǎng)頁(yè)背景。教學(xué)手段教學(xué)過(guò)程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求如下圖所示，完成圖書(shū)介紹網(wǎng)頁(yè)的制作，完成后以“task2-1-2.html”為文件名保存到“項(xiàng)目2-1”站點(diǎn)根目錄下。二、師生討論學(xué)習(xí)新知識(shí)1、圖片的HTML標(biāo)簽，如下圖所示。“<img>”代表圖片，是單標(biāo)簽，以/結(jié)束；“src”代表圖片的存放路徑；“alt”代表替換文本，用來(lái)設(shè)置當(dāng)前鼠標(biāo)移到圖片上所顯示的提示文本；“width”代表圖片的寬度，默認(rèn)單位是像素；“height”代表圖片的高度，默認(rèn)單位是像素；“align”代表圖片的對(duì)齊方式，常見(jiàn)的值可以設(shè)置為：top（頂端）、bottom（底部）、middle（中間）、left（左對(duì)齊）、right（右對(duì)齊）；“hspace”代表圖片左側(cè)和右側(cè)的水平邊距，默認(rèn)單位是像素；“vspace”代表圖片頂部和底部的垂直邊距，默認(rèn)單位是像素。2、圖片的簡(jiǎn)單編輯網(wǎng)頁(yè)中的圖片除了可以通過(guò)HTML標(biāo)簽進(jìn)行設(shè)置以外，也可以通過(guò)屬性欄中各個(gè)選項(xiàng)進(jìn)行處理，同時(shí)還有一些內(nèi)置工具可以對(duì)圖片進(jìn)行簡(jiǎn)單編輯。三、教師演示活動(dòng)實(shí)施過(guò)程并讓學(xué)生完成活動(dòng)任務(wù)1、打開(kāi)DreamweaverCS6軟件并新建一個(gè)HTML文檔，將新建的HTML文檔切換至“設(shè)計(jì)”視圖模式，并以“task2-1-2.html”為文件名保存到“項(xiàng)目2-1”站點(diǎn)根目錄下。2、在“文檔工具欄”中的“標(biāo)題”文本框中，將“無(wú)標(biāo)題文檔”更改為“圖書(shū)簡(jiǎn)介”。3、在文檔窗口中輸入文字“圖書(shū)簡(jiǎn)介”，選擇文字，在“屬性”面板的“格式”下拉列表框中選擇“標(biāo)題1”。4、按回車(chē)鍵插入一張圖片（素材在Chapter02\素材文件\任務(wù)1\活動(dòng)2\圖書(shū).png），輸入“替換文本”和“詳細(xì)說(shuō)明”。5、用鼠標(biāo)點(diǎn)擊選中圖片，在“屬性”面板中鎖定尺寸約束，將圖片的寬設(shè)置為350px。6、將光標(biāo)定位在圖片右側(cè)按回車(chē)鍵，輸入相應(yīng)文本，冒號(hào)前的文字加粗（快捷鍵Ctrl+B），選中所有文字，然后單擊“屬性”面板上的“項(xiàng)目列表”按鈕，“格式”選擇“段落”。7、鼠標(biāo)選中圖片右擊，在彈出的快捷菜單中選擇“對(duì)齊”，選擇“左對(duì)齊”。8、觀察和調(diào)整圖片與文字的距離，鼠標(biāo)選中圖片右擊，在彈出的快捷菜單中選“編輯標(biāo)簽<img>”，設(shè)置“水平邊距”和“垂直邊距”的值，并保存網(wǎng)頁(yè)。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：<img/>標(biāo)簽；圖片的簡(jiǎn)單編輯演示：教師演示活動(dòng)實(shí)施過(guò)程實(shí)訓(xùn)活動(dòng)：學(xué)生練習(xí)及點(diǎn)評(píng)作業(yè)布置填寫(xiě)提交實(shí)訓(xùn)報(bào)告和實(shí)訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記教學(xué)課題任務(wù)2活動(dòng)1在網(wǎng)頁(yè)中添加音頻與視頻課題類(lèi)型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.了解常用的音頻格式2.掌握如何在網(wǎng)頁(yè)中添加音頻3.掌握如何在網(wǎng)頁(yè)中添加視頻教學(xué)重點(diǎn)2、3教學(xué)難點(diǎn)3輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.<img/>標(biāo)簽。2.圖片的編輯操作。教學(xué)手段教學(xué)過(guò)程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求1、創(chuàng)建一個(gè)名稱(chēng)為“項(xiàng)目2-2”的本地站點(diǎn)，本地站點(diǎn)文件夾為D盤(pán)下的“Task2-2”文件夾，默認(rèn)圖像文件夾路徑設(shè)置為D:\Task2-2\images。2、如下圖所示，完成音樂(lè)頁(yè)面的制作，完成后以“task2-2-1.html”為文件名保存到“項(xiàng)目2-2”站點(diǎn)根目錄下。二、師生討論學(xué)習(xí)新知識(shí)1、網(wǎng)頁(yè)中常用的音頻文件格式：MP3格式、WAV格式、MIDI格式。2、網(wǎng)頁(yè)中添加音頻文件的方法在網(wǎng)頁(yè)中添加音頻文件的方法有兩種：一是背景音樂(lè)，二是插件形式。（1）為網(wǎng)頁(yè)添加背景音樂(lè)音頻文件可以以背景音樂(lè)的形式添加到網(wǎng)頁(yè)中，在預(yù)覽網(wǎng)頁(yè)時(shí)背景音樂(lè)會(huì)自動(dòng)播放，其HTML標(biāo)簽如下圖所示。（2）通過(guò)插件添加音頻在DreamweaverCS6還可以通過(guò)插件的方法在網(wǎng)頁(yè)文檔中添加音頻，在預(yù)覽頁(yè)面中會(huì)出現(xiàn)一個(gè)播放控件，通過(guò)該控件可以進(jìn)行暫停、播放、停止、調(diào)整音量等操作，其HTML標(biāo)簽如下圖所示。3、網(wǎng)頁(yè)中添加視頻文件的方法瀏覽器可以播放的視頻格式有MP4、MOV、AVI、FLV等，可以通過(guò)插件方式添加視頻，其添加方法、HTML標(biāo)簽和音頻類(lèi)似。此外，有FLV是Flash的視頻文件，在網(wǎng)頁(yè)中以SWF組件顯示，將光標(biāo)移至要插入FLV視頻的位置，選擇“插入”菜單中選擇“媒體”中的FLV命令，打開(kāi)“插入FLV”對(duì)話(huà)框，分為兩種視頻類(lèi)型：累進(jìn)式下載視頻與流視頻。三、教師演示活動(dòng)實(shí)施過(guò)程并讓學(xué)生完成活動(dòng)任務(wù)1、打開(kāi)DreamweaverCS6軟件并新建一個(gè)HTML文檔，將新建HTML文檔切換至“設(shè)計(jì)”視圖模式，并以“task2-2-1.html”為文件名保存到站點(diǎn)為“項(xiàng)目2-2”的站點(diǎn)根目錄下。2、在“文檔工具欄”中的“標(biāo)題”文本框中，將“無(wú)標(biāo)題文檔”更改為“音樂(lè)網(wǎng)頁(yè)”。3、將光標(biāo)定位在網(wǎng)頁(yè)的空白處，依次單擊“插入”->“標(biāo)簽”菜單命令，打開(kāi)“標(biāo)簽選擇器”對(duì)話(huà)框，選擇“HTML標(biāo)簽”選項(xiàng)，再選擇“頁(yè)面元素”選項(xiàng)，然后在右側(cè)的列表中選擇“bgsound選項(xiàng)”，單擊“插入”按鈕。4、在彈出的“標(biāo)簽編輯器-bgsound”對(duì)話(huà)框中，點(diǎn)擊“源”選項(xiàng)的“瀏覽”文件夾按鈕，選擇音頻文件（素材在Chapter02\素材文件\任務(wù)2\活動(dòng)1\茉莉花純音樂(lè).mp3），在彈出的“您愿意將該文件復(fù)制到根文件夾中嗎？”對(duì)話(huà)框中選擇“是”。5、在“循環(huán)”下拉列表中選擇“無(wú)限（-1）”選項(xiàng)，單擊“確定”按鈕，返回“標(biāo)簽選擇器”對(duì)話(huà)框，單擊“關(guān)閉”按鈕完成背景音樂(lè)的添加。6、切換回“設(shè)計(jì)視圖”，在第一行文字“我的音樂(lè)”，文字格式為標(biāo)題2，按回車(chē)鍵，添加一張名字為“祖國(guó).jpg”圖片，按Shfit+回車(chē)鍵換行，依次單擊“插入”->“媒體”->“插件”菜單命令，找到一個(gè)名字為“我和我的祖國(guó).mp3”音頻文件，素材都在“Chapter02\素材文件\任務(wù)2\活動(dòng)1”文件夾中.7、選中插入的音頻控件，在“屬性”面板中設(shè)置“寬”為“650”，“高”為“60”，點(diǎn)擊“參數(shù)”選項(xiàng)，彈出對(duì)話(huà)框點(diǎn)擊“+”按鈕，添加“參數(shù)”為“autostart”，“值”為“false”。8、在音頻控件的右側(cè)按回車(chē)鍵，輸入文字“我的視頻”，文字格式為標(biāo)題2，再按回車(chē)鍵，依次單擊“插入”->“媒體”->“FLV”菜單命令。9、彈出“插入FLV”對(duì)話(huà)框，在“視頻類(lèi)型”下拉列表框中選擇“累進(jìn)式下載視頻”，“URL”選項(xiàng)點(diǎn)擊“瀏覽”按鈕找到名字為“北京歡迎你.flv”視頻文件，素材在“Chapter02\素材文件\任務(wù)2\活動(dòng)1”文件夾中，點(diǎn)擊“檢測(cè)大小”按鈕。10、保存網(wǎng)頁(yè)文件并在瀏覽器中瀏覽網(wǎng)頁(yè)效果，其中背景音樂(lè)會(huì)自動(dòng)播放，以插件方式添加的音樂(lè)和FLV視頻文件點(diǎn)擊“播放”按鈕播放。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：添加音頻文件；添加視頻文件演示：教師演示活動(dòng)實(shí)施過(guò)程實(shí)訓(xùn)活動(dòng)：學(xué)生練習(xí)及點(diǎn)評(píng)作業(yè)布置填寫(xiě)提交實(shí)訓(xùn)報(bào)告和實(shí)訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記教學(xué)課題任務(wù)2活動(dòng)2在網(wǎng)頁(yè)中添加Flash動(dòng)畫(huà)課題類(lèi)型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.了解Flash動(dòng)畫(huà)的格式2.掌握如何在網(wǎng)頁(yè)中添加Flash動(dòng)畫(huà)教學(xué)重點(diǎn)1、2教學(xué)難點(diǎn)2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.在網(wǎng)頁(yè)中添加音頻文件。2.在網(wǎng)頁(yè)中添加視頻文件。教學(xué)手段教學(xué)過(guò)程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求如下圖所示，完成Flash動(dòng)畫(huà)和設(shè)置SWF文件透明背景效果頁(yè)面的制作，完成后分別以“task2-2-2.html”、“task2-2-3.html”為文件名保存到站點(diǎn)為“項(xiàng)目2-2”的“Task2-2”根文件夾中。二、師生討論學(xué)習(xí)新知識(shí)在DreamweaverCS6中，F(xiàn)lash動(dòng)畫(huà)將聲音、圖像和動(dòng)畫(huà)等內(nèi)容加入到一個(gè)文件中，能制作出炫酷的動(dòng)畫(huà)效果，而且文件容量較小，是網(wǎng)頁(yè)制作中上最流行的多媒體插件之一。Flash動(dòng)畫(huà)主要有兩種格式：.fla格式：Flash軟件創(chuàng)建的源文件，只能在Flash軟件中打開(kāi)和編輯，不能在Dreamweaver或?yàn)g覽器中打開(kāi)。要在Dreamweave進(jìn)行添加Flash動(dòng)畫(huà)，需要在Flash軟件中將Flash源文件導(dǎo)出為.swf格式的文件。.swf格式：Flash軟件導(dǎo)出的電影文件，可以在瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但不能進(jìn)行編輯。.swf格式文件可以用AdobeFlashPlayer打開(kāi)，瀏覽器必須安裝AdobeFlashPlayer插件。在DreamweaverCS6中，其主要屬性有：FlashID：可以輸入SWF影片文件唯一的名稱(chēng)；寬和高：默認(rèn)單位像素，設(shè)置SWF影片文件的尺寸；文件：指定SWF影片文件的路徑；背景顏色：設(shè)置SWF影片文件動(dòng)畫(huà)區(qū)域的背景顏色；循環(huán)：選中則連續(xù)播放，不選只播放一次停止；自動(dòng)播放：選中瀏覽網(wǎng)頁(yè)時(shí)則會(huì)自動(dòng)播放該影片；垂直邊距、水平邊距：設(shè)置影片上下、左右空白區(qū)域的像素?cái)?shù)；品質(zhì)：有低品質(zhì)、自動(dòng)低品質(zhì)、自動(dòng)高品質(zhì)、高品質(zhì)4個(gè)選項(xiàng)；比例：設(shè)置SWF影片文件顯示的尺寸，有（默認(rèn)）全部顯示、無(wú)邊框、嚴(yán)格匹配3種選項(xiàng)；對(duì)齊：設(shè)置SWF影片文件在網(wǎng)頁(yè)中的對(duì)齊方式；Wmode：設(shè)置SWF影片文件是否透明顯示，默認(rèn)是不透明顯示。三、教師演示活動(dòng)實(shí)施過(guò)程并讓學(xué)生完成活動(dòng)任務(wù)1、打開(kāi)DreamweaverCS6軟件并新建一個(gè)HTML文檔，將新建的HTML文檔切換至“設(shè)計(jì)”視圖模式，并以“task2-2-2.html”為文件名保存到站點(diǎn)為“項(xiàng)目2-2”的“Task2-2”根文件夾中。2、在“文檔工具欄”中的“標(biāo)題”文本框中，將“無(wú)標(biāo)題文檔”更改為“房產(chǎn)Flash廣告”。3、在文檔窗口中輸入文字“房產(chǎn)Flash廣告”，選擇文字，在“屬性”面板的“格式”下拉列表框中選擇“標(biāo)題2”。4、文字右側(cè)按回車(chē)鍵，依次單擊“插入”->“媒體”->“SWF”菜單命令（快捷鍵Ctrl+Alt+F），打開(kāi)“選擇文件”對(duì)話(huà)框，選擇名字為“房產(chǎn)廣告.swf”的文件（素材在“Chapter02\素材文件\任務(wù)2\活動(dòng)2”文件夾中），單擊“確定”按鈕，即可插入到網(wǎng)頁(yè)文檔中。5、保存網(wǎng)頁(yè)文件并在瀏覽器中瀏覽網(wǎng)頁(yè)效果。6、新建一個(gè)HTML文檔，將新建的HTML文檔切換至“設(shè)計(jì)”視圖模式，并以“task2-2-3.html”為文件名保存到站點(diǎn)為“項(xiàng)目2-2”的“Task2-2”根文件夾中。7、在“文檔工具欄”中的“標(biāo)題”文本框中，將“無(wú)標(biāo)題文檔”更改為“swf屬性設(shè)置”。8、依次單擊“修改”“頁(yè)面屬性”菜單命令（快捷鍵Ctrl+J），設(shè)置背景圖像（素材在“Chapter02\素材文件\任務(wù)2\活動(dòng)2\我的校園.jpg”），“重復(fù)”選項(xiàng)選擇“no-reapet”，左邊距、上邊距設(shè)置為0，單擊“確定”按鈕。9、將光標(biāo)定位在最左上角，依次單擊“插入”->“媒體”->“SWF”菜單命令（快捷鍵Ctrl+Alt+F），打開(kāi)“選擇文件”對(duì)話(huà)框，選擇名字為“閃光效果.swf”的文件（素材在“Chapter02\素材文件\任務(wù)2\活動(dòng)2”文件夾中），單擊“確定”按鈕，在“屬性”面板設(shè)置“寬”為“800”，“高”為“500”，“Wmode”選擇為“透明”。10、保存網(wǎng)頁(yè)文件并在瀏覽器中瀏覽網(wǎng)頁(yè)效果。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實(shí)現(xiàn)該案例效果閱讀知識(shí)窗：Flash動(dòng)畫(huà)格式；網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)相關(guān)屬性演示：教師演示活動(dòng)實(shí)施過(guò)程實(shí)訓(xùn)活動(dòng)：學(xué)生練習(xí)及點(diǎn)評(píng)作業(yè)布置填寫(xiě)提交實(shí)訓(xùn)報(bào)告和實(shí)訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記教學(xué)課題任務(wù)3活動(dòng)1制作包含超鏈接的網(wǎng)頁(yè)課題類(lèi)型理論+實(shí)作課時(shí)安排2上課時(shí)間教學(xué)目標(biāo)1.了解什么是超鏈接2.掌握如何創(chuàng)建超鏈接教學(xué)重點(diǎn)1、2教學(xué)難點(diǎn)2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.Flash動(dòng)畫(huà)的格式。2.如何在網(wǎng)頁(yè)中添加Flash動(dòng)畫(huà)？教學(xué)手段教學(xué)過(guò)程師生互動(dòng)活動(dòng)設(shè)計(jì)課件討論實(shí)作課件舉例討論課件實(shí)作一、教師布置活動(dòng)要求為網(wǎng)頁(yè)素材“task2-3-1.html”中的文本“華南地區(qū)”、“華東地區(qū)”、“華北地區(qū)”分別設(shè)定超鏈接，鏈接的網(wǎng)頁(yè)文件分別為“hndq.html”、“hddq.html”、“hbdq.htm

溫馨提示

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

評(píng)論

0/150

提交評(píng)論