多媒體技術(shù)應(yīng)用案例教程項(xiàng)目七多媒體應(yīng)用系統(tǒng)開(kāi)發(fā)-“多媒體技術(shù)學(xué)習(xí)網(wǎng)站”設(shè)計(jì)與開(kāi)發(fā)

項(xiàng)目七多媒體應(yīng)用系統(tǒng)開(kāi)發(fā)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)1.了解多媒體應(yīng)用系統(tǒng)基本知識(shí)。2.熟悉Dreamweaver軟件界面與基本工具，掌握運(yùn)用Dreamweaver軟件創(chuàng)作與發(fā)布多媒體網(wǎng)頁(yè)的基本過(guò)程。3.熟悉運(yùn)用Photoshop、Ｆlash等媒體制作工具進(jìn)行制作與處理多媒體素材的基本過(guò)程。1.能根據(jù)需求分析確定系統(tǒng)主題及風(fēng)格、規(guī)劃系統(tǒng)結(jié)構(gòu)并進(jìn)行頁(yè)面版式設(shè)計(jì)。2.能根據(jù)主題收集資料、準(zhǔn)備素材并能對(duì)素材做好編輯處理工作。3.能進(jìn)行系統(tǒng)的總體設(shè)計(jì)、界面設(shè)計(jì)、制作各頁(yè)面并將各頁(yè)進(jìn)行有效整合；能應(yīng)用多媒體創(chuàng)作軟件設(shè)計(jì)、制作、測(cè)試、發(fā)布多媒體網(wǎng)頁(yè)。4.能編寫(xiě)多媒體應(yīng)用系統(tǒng)設(shè)計(jì)說(shuō)明書(shū)。5.能與人良好溝通，合作完成學(xué)習(xí)任務(wù)。目錄7.1項(xiàng)目提出7.2項(xiàng)目分析7.3相關(guān)知識(shí)7.4項(xiàng)目實(shí)現(xiàn)

7.5項(xiàng)目評(píng)價(jià)7.6項(xiàng)目總結(jié)7.7拓展訓(xùn)練7.1項(xiàng)目提出7.2項(xiàng)目分析

多媒體應(yīng)用系統(tǒng)設(shè)計(jì)與制作的全過(guò)程，是指從系統(tǒng)需求分析開(kāi)始，到完成發(fā)布的整個(gè)過(guò)程。如果是小規(guī)模項(xiàng)目，可以一個(gè)人承擔(dān)多項(xiàng)任務(wù)自己完成，但通常情況是3～4名開(kāi)發(fā)者（設(shè)計(jì)師、程序員等）一起組成一個(gè)小組來(lái)完成項(xiàng)目。多媒體應(yīng)用系統(tǒng)設(shè)計(jì)與制作的基本流程多媒體應(yīng)用系統(tǒng)設(shè)計(jì)與制作的基本流程7.3相關(guān)知識(shí)7.3相關(guān)知識(shí)3．Dreamweaver相關(guān)知識(shí)DreamweaverCS3工作界面7.4項(xiàng)目實(shí)現(xiàn)7.4.1網(wǎng)站總體設(shè)計(jì)1．網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

網(wǎng)站的頁(yè)面基本結(jié)構(gòu)包括主頁(yè)面、二級(jí)頁(yè)面等次級(jí)頁(yè)面。在實(shí)際建設(shè)網(wǎng)站過(guò)程中可根據(jù)實(shí)際需求，適當(dāng)調(diào)整頁(yè)面的級(jí)數(shù)。主頁(yè)二級(jí)頁(yè)面二級(jí)頁(yè)面欄目主頁(yè)模板主頁(yè)作品欣賞平面、圖形圖像、音頻、動(dòng)畫(huà)、視頻作品

素材瀏覽平面、圖形圖像、音頻、動(dòng)畫(huà)、視頻素材創(chuàng)作工具平面、圖形圖像、音頻、動(dòng)畫(huà)、視頻作品創(chuàng)作工具知識(shí)鏈接平面、圖形圖像、音頻、動(dòng)畫(huà)、視頻制作相關(guān)知識(shí)鏈接網(wǎng)址網(wǎng)站基本內(nèi)容結(jié)構(gòu)7.4項(xiàng)目實(shí)現(xiàn)主頁(yè)左、右背景邊框7.4.2運(yùn)用Photoshop制作圖形圖像素材1．制作主頁(yè)背景邊框最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)漸變效果主要操作步驟:①新建一個(gè)黃色到白色漸變背景圖。

濾鏡效果②對(duì)背景進(jìn)行濾鏡效果處理。7.4項(xiàng)目實(shí)現(xiàn)褐色漸變矩形框主要操作步驟:③繪制褐色漸變矩形框（右側(cè)）。棕色矩形框④繪制棕色矩形框（右側(cè)）。7.4項(xiàng)目實(shí)現(xiàn)主頁(yè)左側(cè)背景邊框主要操作步驟:⑤保存文件。⑥制作主頁(yè)右側(cè)背景邊框。主頁(yè)右側(cè)背景邊框7.4項(xiàng)目實(shí)現(xiàn)網(wǎng)站導(dǎo)航欄背景7.4.2運(yùn)用Photoshop制作圖形圖像素材2．制作網(wǎng)站導(dǎo)航欄背景最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)斜面和浮雕、顏色疊加、光澤圖層樣式參數(shù)主要操作步驟:①新建“zslj”圖像文件。②添加“文字”圖層。③應(yīng)用文字圖層樣式。7.4項(xiàng)目實(shí)現(xiàn)主要操作步驟:④保存文件?！爸R(shí)鏈接”導(dǎo)航背景7.4項(xiàng)目實(shí)現(xiàn)7.4.2運(yùn)用Photoshop制作圖形圖像素材最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)文字底圖主要操作步驟:①制作文字底圖。②制作文字特效。③保存文件。7.4項(xiàng)目實(shí)現(xiàn)運(yùn)用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)素材1.新建并保存文件。7.4項(xiàng)目實(shí)現(xiàn)“邊框”影片剪輯運(yùn)用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)素材3.制作“邊框”影片剪輯元件。①新建“邊框”影片剪輯元件。②插入圖片并處理。7.4項(xiàng)目實(shí)現(xiàn)運(yùn)用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)素材①新建“邊框”影片剪輯元件。②插入圖片并處理。③創(chuàng)建“多”圖層補(bǔ)間動(dòng)畫(huà)。④創(chuàng)建“媒”圖層的補(bǔ)間動(dòng)畫(huà)。7.4項(xiàng)目實(shí)現(xiàn)運(yùn)用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)素材5.合成網(wǎng)站Banner。網(wǎng)站Banner7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面1.新建站點(diǎn)。定義網(wǎng)站名字提示：為了方便后續(xù)制作網(wǎng)頁(yè)時(shí)的素材查找與使用，建議在站點(diǎn)當(dāng)前目錄中分別建立text、images、flash、audio、video等素材文件夾，并將之前各類素材分別放置于相應(yīng)文件夾中。完成站點(diǎn)定義7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2.制作網(wǎng)站模板①新建并保存模板文件。新建HTML模板“另存模板”對(duì)話框注意：新建模板文件后，將在站點(diǎn)下自動(dòng)生成Templates文件夾，并將模板保存于所選站點(diǎn)中。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2.制作網(wǎng)站模板②插入一個(gè)1行3列的表格。表格對(duì)話框參數(shù)注意：“代碼”視圖顯示HTML代碼，“拆分”視圖同時(shí)在上下方分別顯示代碼和設(shè)計(jì)效果，“設(shè)計(jì)”視圖中只顯示設(shè)計(jì)效果。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2.制作網(wǎng)站模板③左右側(cè)單元格中插入邊框圖片。背景邊框插入效果注意：在插入圖片時(shí)，可以根據(jù)需要設(shè)置替換文本?！疤鎿Q文本”主要是用于當(dāng)網(wǎng)頁(yè)中無(wú)法正常顯示圖片時(shí)，在圖片處出現(xiàn)的文字。圖像標(biāo)簽輔助功能屬性對(duì)話框7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2.制作網(wǎng)站模板④在中間單元格中插入1行4列的表格。⑤插入Banner動(dòng)畫(huà)。⑥插入導(dǎo)航欄圖片。插入中間表格插入Banner動(dòng)畫(huà)導(dǎo)航欄7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2.制作網(wǎng)站模板⑦設(shè)置可編輯區(qū)域。⑧輸入“版權(quán)所有”等信息。⑨保存模板文件。網(wǎng)站模板7.4項(xiàng)目實(shí)現(xiàn)網(wǎng)站主頁(yè)瀏覽效果7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面最終效果圖:3.制作網(wǎng)站主頁(yè)7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（1）利用模板新建主頁(yè)文檔①新建基于模板的主頁(yè)。②保存主頁(yè)。模板選擇對(duì)話框7.4項(xiàng)目實(shí)現(xiàn)“學(xué)習(xí)公告”效果7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面最終效果圖:（2）制作“學(xué)習(xí)公告”模塊主要操作步驟:①在可編輯區(qū)域插入2行2列表格。②在左側(cè)上方單元格中插入2行1列表格。③設(shè)置“學(xué)習(xí)公告”模塊表格邊框。④插入“學(xué)習(xí)公告”圖片。⑤在“學(xué)習(xí)公告”下方的單元格中插入1行1列的表格。⑥插入“喇叭”圖片。⑦輸入“學(xué)習(xí)公告”文字并設(shè)置文字樣式。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（2）制作“學(xué)習(xí)公告”模塊主要操作步驟:⑧制作公告滾動(dòng)效果。為使公告產(chǎn)生滾動(dòng)效果，將視圖切換為“拆分”視圖，在這個(gè)2行1列的表格中外圍添加如下語(yǔ)句：<marqueeonmousemove="stop()"onmouseout="start()"scrollamount="1"scrolldelay="50"direction="up"width="100%"height="166"></marquee><!--marquee是個(gè)容器標(biāo)簽，設(shè)置相對(duì)應(yīng)的屬性可使容器中的內(nèi)容產(chǎn)生相應(yīng)的移動(dòng)—>注意：為使?jié)L動(dòng)效果正常，此段代碼標(biāo)簽將包含表格標(biāo)簽。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（3）制作“作品集錦”模塊“作品集錦”模塊最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（3）制作“作品集錦”模塊主要操作步驟:注意：為使?jié)L動(dòng)效果正常，此段代碼標(biāo)簽將包含表格標(biāo)簽。①合并最下方的單元格并插入1行7列的表格。②在表格中插入相應(yīng)多媒體內(nèi)容。③制作圖片滾動(dòng)效果。切換到代碼視圖，在這個(gè)1行7列的表格中外圍添加如下代碼：<marqueeonmousemove=“stop()”onmouseout=“start()”scrollamount=“2”scrolldelay=“10”direction=“l(fā)eft”width=“100%”height=“195”behavior=“alternate”>④保存文件。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2．制作網(wǎng)站二級(jí)頁(yè)面二級(jí)頁(yè)面“作品欣賞”模塊瀏覽效果最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面2．制作網(wǎng)站二級(jí)頁(yè)面主要操作步驟:1）利用模板新建二級(jí)頁(yè)面文件。①新建網(wǎng)頁(yè)。②應(yīng)用模板。③保存文件。3）制作作品欣賞列表內(nèi)容。①在第2行中插入表格并設(shè)置表格屬性。②導(dǎo)入“文本”模塊作品并設(shè)置屬性。③導(dǎo)入“圖形圖像”模塊作品并設(shè)置屬性。④制作“音頻”模塊作品超鏈接。⑤導(dǎo)入“動(dòng)畫(huà)”模塊作品并設(shè)置屬性。⑥制作“視頻”模塊作品超鏈接。2)制作當(dāng)前位置信息。①插入2行1列的表格。②在第1行輸入“當(dāng)前位置”等信息。7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（2）素材瀏覽模塊制作二級(jí)頁(yè)面“素材瀏覽”模塊瀏覽效果最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（3）創(chuàng)作工具模塊制作二級(jí)頁(yè)面“創(chuàng)作工具”模塊瀏覽效果最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面（3）知識(shí)鏈接模塊制作二級(jí)頁(yè)面“知識(shí)鏈接”模塊瀏覽效果最終效果圖:7.4項(xiàng)目實(shí)現(xiàn)7.4.4運(yùn)用Dreamweaver制作各級(jí)頁(yè)面3.設(shè)置主頁(yè)與二級(jí)頁(yè)面的鏈接①編輯模板，設(shè)置鏈接。②保存模板。更新模板文件對(duì)話框7.4項(xiàng)目實(shí)現(xiàn)網(wǎng)站測(cè)試與發(fā)布1.網(wǎng)站測(cè)試文檔工具欄中的“檢查頁(yè)面”工具7.4項(xiàng)目實(shí)現(xiàn)網(wǎng)站測(cè)試與發(fā)布2.網(wǎng)站發(fā)布文件管理器遠(yuǎn)程服務(wù)器定義7．5項(xiàng)目評(píng)價(jià)

7．6項(xiàng)目總結(jié)問(wèn)題探究1.如何在網(wǎng)頁(yè)中插入空格？2.如何讓網(wǎng)頁(yè)緊貼頂部和左部？3.如何制作表格細(xì)邊框？4.如何利用Dreamweaver徒手編輯網(wǎng)頁(yè)代碼？5.如何搜尋網(wǎng)頁(yè)并替換內(nèi)容？6.網(wǎng)頁(yè)的布局有哪些常用方法？7.有時(shí)修改