計(jì)算機(jī)導(dǎo)論 課件 第9章 多媒體和Web

第9章多媒體和Web主要內(nèi)容多媒體和Web基礎(chǔ)知識(shí)多媒體元素多媒體網(wǎng)站的設(shè)計(jì)多媒體網(wǎng)站的開發(fā)多媒體和Web多媒體這一術(shù)語指的是任意類型的，涉及到多種媒體的應(yīng)用。這里的媒體可以指文本、圖片、視頻、動(dòng)畫和音頻。無論是否在網(wǎng)絡(luò)環(huán)境中，多媒體都被廣泛應(yīng)用于多種類型的應(yīng)用中。本章的重點(diǎn)著眼于Web上的多媒體，但介紹的關(guān)于多媒體的概念和技術(shù)也是可以被應(yīng)用到非Web環(huán)境中的多媒體的?；赪eb的多媒體（也稱富媒體）主要指的是頁面上的文本和圖片，以及聲音、視頻或動(dòng)畫。這些頁面本身是可交互的，它們會(huì)展示通過鏈接請(qǐng)求的信息。多媒體和Web現(xiàn)今的絕大多數(shù)網(wǎng)站都包含了多媒體內(nèi)容，如網(wǎng)頁上常見的廣告、網(wǎng)站上常見的內(nèi)容，或者是上傳到網(wǎng)站上的用戶提供的內(nèi)容。今天的多媒體已經(jīng)成為因特網(wǎng)不可或缺的一部分，企業(yè)和個(gè)人都可以創(chuàng)建網(wǎng)站并給網(wǎng)絡(luò)上的游客提供內(nèi)容，因此了解不同形式的媒體元素及知道把它們加入到網(wǎng)站上后帶來的影響是很重要的。基于Web的多媒體應(yīng)用在Web上，最常見的多媒體應(yīng)用有：信息傳遞：如新聞網(wǎng)站、在線教育電子商務(wù)：如網(wǎng)上商城的產(chǎn)品目錄娛樂：如電視節(jié)目、電影、娛樂資源社會(huì)化媒體和虛擬世界：如社交網(wǎng)站網(wǎng)上商城中的虛擬模特基于Web的多媒體的優(yōu)缺點(diǎn)優(yōu)勢(shì)：相比于其他途徑，通過網(wǎng)頁可以傳遞更多種類的內(nèi)容。Web多媒體可以帶來新的學(xué)習(xí)方式。很多想法能夠通過多媒體輕松地表達(dá)出來。劣勢(shì)：開發(fā)過程需要花費(fèi)更多的時(shí)間和費(fèi)用。保證系統(tǒng)性能時(shí)，存儲(chǔ)和傳輸多媒體內(nèi)容的花費(fèi)可能會(huì)很大。需要考慮不同用戶的網(wǎng)速。多媒體元素在網(wǎng)站中常見的多媒體元素有：文本圖片動(dòng)畫音頻視頻文本文本可以以各式各樣的字體、顏色、大小和樣式表現(xiàn)出來。字體是由擁有同樣設(shè)計(jì)的字符文本組成的集合，如TimesNewRoman、Arial、宋體以及黑體等。字體可分為襯線字體和無襯線字體：襯線字體（serif，如TimesNewRoman、宋體）指的是在字母筆畫末端帶有小襯線的字體。無襯線字體（sansserif，如Arial）沒有襯線，經(jīng)常被用在標(biāo)題、頁首、網(wǎng)頁橫幅等位置上。襯線字體（左）和非襯線字體（右）文本通常文本的大小是11號(hào)或12號(hào)。更小的字號(hào)文本會(huì)變得難以閱讀字號(hào)太大會(huì)占據(jù)屏幕的太多空間注意網(wǎng)站的配色：保持文本顏色和網(wǎng)頁背景顏色之間的高對(duì)比度。決定文本大小時(shí)，需考慮用戶使用的瀏覽器、屏幕的大小和屏幕分辨率。圖片常用的圖片格式有很多，如：TIF、BMP、GIF、JPEG和PNG。掃描的圖片、醫(yī)用圖片和用于桌面排版的圖片通常都是以TIF的格式存儲(chǔ)的。使用Windows操作系統(tǒng)的畫圖工具和其他類似的圖片處理工具生成的圖片通常都是以BMP格式存儲(chǔ)的。網(wǎng)頁上使用的圖片通常都是以GIF、JPEG或PNG格式存儲(chǔ)的。圖片的文件格式和大小可以通過圖像處理軟件進(jìn)行更改。GIFGIF（GraphicsInterchangeFormat，圖像交換格式）格式是一種標(biāo)準(zhǔn)的網(wǎng)頁圖片格式，這種格式的圖片經(jīng)常被用在商標(biāo)、橫幅和其他非攝影級(jí)別的圖片上。GIF是一種使用無損壓縮的、高效的圖片格式，即以GIF格式存儲(chǔ)的圖片，其質(zhì)量不會(huì)下降。GIF格式的圖片只有256種顏色。GIF圖片通常是矩形的，但是它們可以利用透明的背景來使圖片看起來是非矩形的。GIF圖片可以是交插的（打開時(shí)是模糊的，逐漸變清晰），也可以是非交插的（從上到下逐漸加載清晰圖片）PNGPNG（PortableNetworkGraphics，流式網(wǎng)絡(luò)圖像）格式是為了應(yīng)對(duì)GIF格式的專利問題而于1996年特別設(shè)計(jì)出來的。PNG格式同GIF格式一樣，使用無損壓縮算法，但它的壓縮率在很多非攝影級(jí)別的圖片上要比GIF格式更高，使得圖片的文件大小更小。PNG圖片可以使用256色的顏色板（同GIF格式的圖片一樣），或是使用真彩色（同JPEG格式一樣，超過一千六百萬種顏色）。PNG圖片也可以設(shè)置透明或交插的特性。JPEGJPEG（JointPhotographicExpertsGroup，聯(lián)合圖像專家組）格式是網(wǎng)頁照片的標(biāo)準(zhǔn)格式。JPEG使用有損壓縮格式，所以在壓縮過程中，圖像的質(zhì)量會(huì)降低?？梢詫?duì)JPEG文件設(shè)置從0%到100%的壓縮量。當(dāng)選擇更高的壓縮量時(shí)，文件的大小將會(huì)變得更小，但圖片的質(zhì)量也會(huì)變得更低。JPEG圖片的顯示類似于交插的GIF圖片，一開始會(huì)以低分辨率顯示，然后圖像的質(zhì)量會(huì)逐漸提高。JPEG圖片可以使用真彩色，因此JPEG格式通常會(huì)被用在照片和其他一些需要超過256種顏色的圖片上。動(dòng)畫在網(wǎng)頁中，通常用Java小程序（Javaapplets）或動(dòng)態(tài)GIF加入簡單的動(dòng)畫。Java小程序是被插入網(wǎng)頁的用來執(zhí)行特定任務(wù)的小型程序，如在證券投資中更改數(shù)值或者放大縮小網(wǎng)頁中的元素。動(dòng)態(tài)GIF是存儲(chǔ)在一個(gè)文件中的一組GIF圖片，這些圖片可按照時(shí)間次序依次展示出來，模擬動(dòng)畫的效果。許多廣告條幅就使用動(dòng)態(tài)GIF來達(dá)到改變內(nèi)容的效果。動(dòng)畫網(wǎng)頁也可以包含更復(fù)雜的動(dòng)畫，例如當(dāng)點(diǎn)擊按鈕或文本改變時(shí)，會(huì)有動(dòng)畫顯示出來。這些動(dòng)畫大多數(shù)是用JavaScript或其他類似的腳本語言編寫的，另外一些則是用Flash或Silverlight等動(dòng)畫開發(fā)工具制作的。瀏覽器需要支持JavaScript或者有合適的插件（如AdobeFlashPlayer）才能觀看這些復(fù)雜的動(dòng)畫。音頻為了加速傳輸，網(wǎng)頁中的音頻通常是流式的，即最初只有音頻文件的一小部分會(huì)被下載和緩沖，這允許音頻文件快速播放——可以先播放下載的部分，并在播放的同時(shí)下載剩余部分。常用的音頻格式如：WAV（Waveform），無損格式，為大多數(shù)CD光盤所應(yīng)用，WAV文件通常尺寸較大。MP3（MovingPictureExpertsGroupAudioLayer3），有損壓縮格式，用來制作非常高效、高品質(zhì)的壓縮音頻文件。WAV文件可以通過轉(zhuǎn)換為MP3文件來減少其占用的空間。AIFF（AudioInterchangeFormatFile），無損格式，是為蘋果計(jì)算機(jī)制作的。對(duì)應(yīng)的有損格式是AIFFC（AIFF-Compressed）。高級(jí)音頻編碼（AAC或M4A），用MP4的標(biāo)準(zhǔn)來編碼音頻，是除MP3之外的另一種可用于Web的選擇。視頻視頻也是由一張張“圖片”構(gòu)成的，一張“圖片”稱為一幀，當(dāng)圖片開始連續(xù)地展現(xiàn)（典型的是每秒24幀或更高的速率），它們看起來就像是原始的連續(xù)信息流。常用的視頻格式：AVI（Audio-Videointerleave），微軟開發(fā)的標(biāo)準(zhǔn)視頻文件格式。FLV（FlashVideoFormat），動(dòng)畫視頻格式。MP2（MovingPictureExpertsGroup2），高質(zhì)量的壓縮視頻文件格式。MP4（MovingPictureExpertsGroup4），為Web傳輸而開發(fā)的萬能格式。MOV（AppleQuickTime影片格式），蘋果公司開發(fā)的適用于Web傳輸?shù)娜f能視頻格式。WMV（WindowsMediaVideo），微軟公司開發(fā)的用于WindowsMediaPlayer的視頻格式。多媒體網(wǎng)站的設(shè)計(jì)基本設(shè)計(jì)原則：訪客喜歡有趣并且令人激動(dòng)的應(yīng)用程序時(shí)常用最新的信息來更新網(wǎng)站網(wǎng)站的易用性是決定人們是否會(huì)時(shí)常訪問它的決定性因素盡早決定網(wǎng)站的目標(biāo)受眾是用臺(tái)式計(jì)算機(jī)還是上網(wǎng)本，抑或是智能手機(jī)，以及是否需要優(yōu)化內(nèi)容以適應(yīng)不同尺寸的設(shè)備響應(yīng)式網(wǎng)站設(shè)計(jì)多媒體網(wǎng)站的設(shè)計(jì)設(shè)計(jì)網(wǎng)站時(shí)需考慮訪客的多樣性：一些功能不適用于所有瀏覽器。盡量不要要求用戶下載不常用的插件。不同的瀏覽器和屏幕分辨率會(huì)產(chǎn)生不同大小的頁面內(nèi)容展現(xiàn)區(qū)域?？紤]訪客帶寬的多樣性。設(shè)計(jì)多媒體網(wǎng)站的重要步驟：確定網(wǎng)站的目標(biāo)及目標(biāo)訪客。設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)和布局。設(shè)計(jì)網(wǎng)站的導(dǎo)航結(jié)構(gòu)。確定網(wǎng)站的目標(biāo)及目標(biāo)訪客網(wǎng)站設(shè)計(jì)者需要確定網(wǎng)站的首要目標(biāo)（比如營銷、產(chǎn)品、服務(wù)），還要確定一些補(bǔ)充性的元素或活動(dòng)（比如游戲功能、博客，可以使得訪客定期回訪；在線的顧客交流等）。如果網(wǎng)站是為手機(jī)用戶設(shè)計(jì)的，還需要決定是否要包含與位置相關(guān)的應(yīng)用或者其他流行的手機(jī)應(yīng)用。此外，還需要確定要將哪些社交應(yīng)用整合到網(wǎng)站上（比如分享到新浪微博），并在多個(gè)社交平臺(tái)注冊(cè)網(wǎng)站的官方賬號(hào)，以與對(duì)應(yīng)平臺(tái)的用戶進(jìn)行交流。確定網(wǎng)站的目標(biāo)及目標(biāo)訪客目標(biāo)訪客會(huì)影響到網(wǎng)站多媒體元素的樣式。如果網(wǎng)站只用于內(nèi)部局域網(wǎng)，就不必像設(shè)計(jì)因特網(wǎng)網(wǎng)站那樣精心考慮文件大小和文件格式。如果目標(biāo)訪客基本使用一種瀏覽器（比如InternetExplorer），就可以主要為這種瀏覽器設(shè)計(jì)網(wǎng)站。如果訪客是青少年，可以設(shè)計(jì)得花哨一些，而商務(wù)人士更喜歡簡約的網(wǎng)站。確定目標(biāo)訪客后，就需要確定網(wǎng)站要包含的主題?？梢酝ㄟ^瀏覽類似網(wǎng)站、和潛在用戶聊天等方式來確定網(wǎng)站主題。設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)和布局可以使用一些設(shè)計(jì)工具來設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)和布局，如流程圖、頁面布局和故事板，它們既可以用手工設(shè)計(jì)也可以借助特定的計(jì)算機(jī)軟件來設(shè)計(jì)。網(wǎng)站的流程圖（flowchart）描述了網(wǎng)站的頁面間是如何互相連接的。設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)和布局頁面布局經(jīng)常用來說明網(wǎng)站的布局和導(dǎo)航結(jié)構(gòu).設(shè)計(jì)網(wǎng)站的結(jié)構(gòu)和布局故事板是一系列描述頁面或屏幕動(dòng)態(tài)變化的草圖。故事板常用于電影制作，但在設(shè)計(jì)多媒體網(wǎng)站上的動(dòng)畫元素時(shí)也可以使用，其形式類似于漫畫書。網(wǎng)站的導(dǎo)航結(jié)構(gòu)在畫完網(wǎng)站的初步流程圖后，檢查一下網(wǎng)頁間的鏈接是否平衡——用戶應(yīng)該可以在三次點(diǎn)擊之內(nèi)到達(dá)網(wǎng)站的大多數(shù)頁面。常用的導(dǎo)航工具如下拉菜單、網(wǎng)站地圖、導(dǎo)航欄和搜索框。如果一個(gè)網(wǎng)頁的內(nèi)容較多，可以考慮把內(nèi)容分到幾個(gè)頁面中，以減少向下滾動(dòng)和網(wǎng)頁加載時(shí)間，頁面之間可以用分頁標(biāo)簽連接。對(duì)于長網(wǎng)頁，確?？偸怯幸粋€(gè)可以讓用戶回到網(wǎng)頁頂部的鏈接。網(wǎng)站的導(dǎo)航結(jié)構(gòu)網(wǎng)站地圖示例多媒體網(wǎng)站的開發(fā)開發(fā)多媒體網(wǎng)站的重要步驟：確定多媒體元素制作網(wǎng)站測(cè)試、發(fā)布與維護(hù)確定多媒體元素開發(fā)多媒體網(wǎng)站的第一步是確定網(wǎng)站要用的多媒體元素，如圖片、動(dòng)畫、音頻和視頻?？梢允褂脠D像編輯、視頻編輯和音頻編輯等軟件編輯多媒體元素。確定多媒體元素后，要將它們以合適的大小、分辨率和格式插入到網(wǎng)頁中。制作網(wǎng)站制作網(wǎng)站時(shí)常用的語言、標(biāo)準(zhǔn)或工具：HTML5CSS腳本語言AJAXVRML和X3D網(wǎng)站生成器HTML5相比于HTML，HTML5支持制作更加復(fù)雜和動(dòng)態(tài)化的網(wǎng)頁或應(yīng)用，比如在無需插件的情況下添加多媒體播放功能，并增加網(wǎng)頁的交互性。標(biāo)記用途<video>插入視頻<audio>插入音頻<canvas>定義表格或圖表<keygen>定義密鑰<nav>定義導(dǎo)航鏈接HTML5的部分新標(biāo)記CSSCSS（CascadingStyleSheets，層疊樣式表）可以用來確定一個(gè)頁面甚至是一整個(gè)網(wǎng)站的樣式。CSS樣式可以直接寫在一個(gè)網(wǎng)頁的開頭（稱為內(nèi)部樣式表），但更多情況下是保存于一個(gè)獨(dú)立的文件中（稱為外部樣式表）。網(wǎng)頁可以通過引用CSS文件與其建立鏈接——CSS文件里定義的樣式會(huì)應(yīng)用于所有鏈接的網(wǎng)頁上。相對(duì)于HTML而言，CSS能夠?qū)W(wǎng)頁中對(duì)象的位置進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，并能夠進(jìn)行初步的交互設(shè)計(jì)。CSS外部樣式表腳本語言腳本可以讓開發(fā)人員通過在網(wǎng)頁代碼中直接編入程序命令或者腳本，從而將內(nèi)容動(dòng)態(tài)化。流行的腳本語言如JavaScript。編程人員可以用JavaScript往頁面中添加交互性內(nèi)容，比如在鼠標(biāo)放在某個(gè)條目上時(shí)彈出小窗或者文件。JavaScript同CSS一樣，可以嵌入網(wǎng)頁中，也可以作為單獨(dú)的文件存在。腳本語言JavaScript語言腳本語言VBScript(VisualBasicScriptingEdition)另一個(gè)當(dāng)下較常用的腳本語言是VBScript，VBScript由微軟公司開發(fā),其用途與JavaScript類似一編程人員可以用它在網(wǎng)頁中加人交互性元素。熟悉可視化編程的人員可以很容易地將VBScript腳本加人到他們的網(wǎng)頁中。Perl(PracticalExtractionandReportLanguage，實(shí)用報(bào)表提取語言)Perl最初是為了加工文本而開發(fā)出的程序語言。因?yàn)樗鼜?qiáng)大的文本處理能力,Perl已經(jīng)成為編寫CGI腳本(一種用于加工網(wǎng)頁中與數(shù)據(jù)庫相關(guān)的數(shù)據(jù)的腳本)最常用的語言。AJAX為了提高網(wǎng)頁的交互性，一系列的網(wǎng)頁標(biāo)準(zhǔn)應(yīng)運(yùn)而生——它們統(tǒng)稱為AJAX（AsynchronousJavaScriptandXML，異步JavaScript和XML）。傳統(tǒng)Web應(yīng)用將用戶數(shù)據(jù)提交給網(wǎng)絡(luò)服務(wù)器，然后服務(wù)器將含有對(duì)應(yīng)信息的新網(wǎng)頁傳送給用戶——用戶一有新的輸入信息，服務(wù)器就得重新發(fā)送一個(gè)新頁面給他，因此傳統(tǒng)Web應(yīng)用的速度較慢。AJAX則不同，AJAX應(yīng)用在用戶輸入新信息時(shí)只更新現(xiàn)有網(wǎng)頁沒有的數(shù)據(jù)，傳輸內(nèi)容較少，速度也就較快。VRML和X3DVRML（VirtualRealityModelingLanguage，虛擬現(xiàn)實(shí)建模語言）是用于在網(wǎng)頁中模擬三維對(duì)象的語言——VRML實(shí)際上就是3D世界中的HTML。VRML對(duì)象，如車子、房子等可以