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

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

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

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

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

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

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

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