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

工程七多媒體應(yīng)用系統(tǒng)開發(fā)—“多媒體技術(shù)學(xué)習(xí)網(wǎng)站〞設(shè)計與開發(fā)學(xué)習(xí)目標(biāo)知識目標(biāo)能力目標(biāo)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ù)主題收集資料、準(zhǔn)備素材并能對素材做好編輯處理工作。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工程提出多媒體應(yīng)用系統(tǒng)是開發(fā)人員應(yīng)用計算機編程或多媒體從創(chuàng)作工具制作的計算機應(yīng)用程序，如多媒體網(wǎng)站、多媒體課件、多媒體交互系統(tǒng)等。多媒體系統(tǒng)具有完整性、多樣化、集成性、實用性和交互性等特性，它屬于應(yīng)用軟件范疇并直接為行業(yè)用戶提供效勞。本工程采用Photoshop技術(shù)實現(xiàn)靜態(tài)頁面效果圖的制作，F(xiàn)lash技術(shù)實現(xiàn)網(wǎng)頁動態(tài)導(dǎo)航及Banner，Dreamweaver技術(shù)實現(xiàn)多媒體應(yīng)用系統(tǒng)的合成，Nero刻錄光盤，將該多媒體系統(tǒng)應(yīng)用于課程教學(xué)，為教學(xué)提供方便快捷的效勞。工程突出在Dreameeaver環(huán)境中，插入圖片、Flash、音頻、視頻等多媒體元素。該工程以Dreamweaver技術(shù)為主，以Photoshop技術(shù)、Flash動畫制作技術(shù)等為輔。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)知識1．關(guān)于工程主題本工程的任務(wù)是完成“多媒體技術(shù)學(xué)習(xí)網(wǎng)站〞的設(shè)計與制作，包括多媒體技術(shù)學(xué)習(xí)網(wǎng)站的首頁及各級頁面的設(shè)計與制作、將網(wǎng)站進行光盤刻錄等內(nèi)容。通過多媒體應(yīng)用系統(tǒng)的建構(gòu)，集成了文本、平面、動畫、視頻、音頻等學(xué)習(xí)內(nèi)容的一級模塊，每個模塊包含各類媒體的作品欣賞、素材瀏覽、創(chuàng)作工具、知識鏈接等內(nèi)容，從而為多媒體技術(shù)課程的學(xué)習(xí)提供方便。2．工程用戶分析“多媒體技術(shù)學(xué)習(xí)網(wǎng)站〞為廣闊在校大學(xué)生、培訓(xùn)部學(xué)員等多媒體技術(shù)愛好者、學(xué)習(xí)者提供一個圖、文、聲并茂的學(xué)習(xí)平臺，讓用戶在輕松、愉悅的學(xué)習(xí)環(huán)境中欣賞優(yōu)秀多媒體作品，了解文本、圖形圖像、動畫、視頻等多媒體領(lǐng)域的知識，促進多媒體技能的提升。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ù)。2．網(wǎng)站內(nèi)容設(shè)計“多媒體技術(shù)學(xué)習(xí)網(wǎng)站〞為從多媒體技術(shù)學(xué)習(xí)者提供學(xué)習(xí)效勞出發(fā)，設(shè)計了主頁模板頁面index.dwt、主頁面index.html、二級頁面素材瀏覽的scll.html等4個模塊。主頁二級頁面二級頁面欄目主頁模板主頁作品欣賞平面、圖形圖像、音頻、動畫、視頻作品

素材瀏覽平面、圖形圖像、音頻、動畫、視頻素材創(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)航背景提示：除導(dǎo)航欄的文字外，本網(wǎng)站中技術(shù)主頁的“學(xué)習(xí)公告〞、“技術(shù)介紹〞以及二級頁面的“文本〞、“圖形圖像〞、“音頻〞、“動畫〞、“視頻〞、“當(dāng)前位置〞等文字的制作，都用了和導(dǎo)航欄文字相同的文字大小及圖層樣式。7.4工程實現(xiàn)“技術(shù)介紹〞等模塊文字及底圖7.4.2運用Photoshop制作圖形圖像素材3．制作“技術(shù)介紹〞等模塊背景最終效果圖:7.4工程實現(xiàn)文字底圖主要操作步驟:①制作文字底圖。②制作文字特效。③保存文件?！凹夹g(shù)介紹〞模塊7.4工程實現(xiàn)運用Flash制作網(wǎng)頁動畫素材1.新建并保存文件。2.制作“沙灘貝殼〞影片剪輯元件。①新建“沙灘貝殼〞影片剪輯元件。②制作“沙灘貝殼〞逐幀動畫。7.4工程實現(xiàn)“邊框〞影片剪輯運用Flash制作網(wǎng)頁動畫素材3.制作“邊框〞影片剪輯元件。①新建“邊框〞影片剪輯元件。②插入圖片并處理。7.4工程實現(xiàn)運用Flash制作網(wǎng)頁動畫素材4.制作“多媒體技術(shù)〞影片剪輯元件。①新建“邊框〞影片剪輯元件。②插入圖片并處理。③創(chuàng)立“多〞圖層補間動畫。④創(chuàng)立“媒〞圖層的補間動畫?！岸嗝襟w技術(shù)〞影片剪輯7.4工程實現(xiàn)運用Flash制作網(wǎng)頁動畫素材5.合成網(wǎng)站Banner。①制作“沙灘貝殼〞圖層。②制作“邊框〞圖層。③制作“文字〞圖層。④保存并導(dǎo)出swf文件。網(wǎng)站Banner7.4工程實現(xiàn)7.4.4運用Dreamweaver制作各級頁面1.新建站點。①定義站點名稱。②選擇是否使用效勞器技術(shù)。③設(shè)置文件保存位置。④設(shè)置文件在效勞器上的存儲位置。⑤設(shè)置是否存回和取出文件。⑥完成站點定義。定義網(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)的文字。圖像標(biāo)簽輔助功能屬性對話框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是個容器標(biāo)簽，設(shè)置相對應(yīng)的屬性可使容器中的內(nèi)容產(chǎn)生相應(yīng)的移動—>注意：為使?jié)L動效果正常，此段代碼標(biāo)簽將包含表格標(biāo)簽。7.4工程實現(xiàn)7.4.4運用Dreamweaver制作各級頁面〔3〕制作“作品集錦〞模塊“作品集錦〞模塊最終效果圖:7.4工程實現(xiàn)7.4.4運用Dreamweaver制作各級頁面〔3〕制作“作品集錦〞模塊主要操作步驟:注意：為使?jié)L動效果正常，此段代碼標(biāo)簽將包含表格標(biāo)簽。①合并最下方的單元格并插入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ā)布文件管理器遠程效勞器定義7．5工程評價

7．5．1評價指標(biāo)〔表格見書本附錄〕考核對站點的目錄結(jié)構(gòu)、各頁面的布局結(jié)構(gòu)、顏色搭配、文字、圖像、動畫設(shè)置是否合理，網(wǎng)頁鏈接是否順暢，網(wǎng)頁制作技術(shù)的應(yīng)用及整體瀏覽效果等。7．5．2評價方法〔表格見書本附錄〕在組內(nèi)個人評價根底上，小組互評與教師總評由各組指定代表演示和講演作品完成過程時進行按上表評價體系打分。小組將個人任務(wù)在評價完成后交于教師簽寫任務(wù)的總體評價。7．6工程總結(jié)問題探究1.如何在網(wǎng)頁中插入空格？2.如何讓網(wǎng)頁緊貼頂部和左部？3.如何制作表格細(xì)邊框？4.如何利用Dreamweaver徒手編輯網(wǎng)頁代碼？5.如何搜尋網(wǎng)頁并替換內(nèi)容？6.網(wǎng)頁的布局有哪些常用方法？7.有時修改了模板內(nèi)容，但運行基于此模板的頁面時發(fā)現(xiàn)內(nèi)容沒有更新?7．6工程總結(jié)知識拓展1.HTML標(biāo)簽2.XML 3.CSS4.DIV+CSS布局5.動態(tài)網(wǎng)頁制作工具制作多媒體技術(shù)學(xué)習(xí)光盤

①選擇數(shù)據(jù)刻錄類型。②添加文件或文件夾。制作數(shù)據(jù)光盤添加文件或文件夾技術(shù)提升7．6工程總結(jié)7.5技術(shù)提升③設(shè)置參數(shù)并進行刻錄。④顯示刻錄進度。⑤完成刻錄。設(shè)置磁盤名稱顯示刻錄進度刻錄完成制作多媒體技術(shù)學(xué)習(xí)光盤技術(shù)提升7.7拓展訓(xùn)練改進訓(xùn)練1.訓(xùn)練內(nèi)容運用Photoshop、Flash、Dreamweaver等工具為“多媒體技術(shù)學(xué)習(xí)網(wǎng)〞的導(dǎo)航欄添加“案例學(xué)習(xí)〞模塊，即當(dāng)瀏覽者單擊導(dǎo)航中“案例學(xué)習(xí)〞圖形按鈕時，“案例學(xué)習(xí)〞模塊。2.訓(xùn)練要求〔1〕“案例學(xué)習(xí)〞模塊的布局、字體樣式等與其它二級頁面相近?！?〕“案例學(xué)習(xí)〞的內(nèi)容包括文本、圖形圖像、動畫、視頻、音頻制作的典型案例至少每類1個。3.重點提示〔1〕合理設(shè)計“案例學(xué)習(xí)〞模塊，內(nèi)容與頁面風(fēng)格可以借鑒前面模塊，也可自行創(chuàng)新，但整體風(fēng)