計算機資訊系統/多媒體簡介

基於 Web 的多媒體

概述

無論你是否知道，你都見過多媒體，你應該對此有所瞭解。多媒體的意思就是它的字面意思，它指的是多種媒體型別的組合。如果你去 humble bundle.com^[1]，你會看到各種各樣的多媒體。你會看到倒計時，這就是你的動畫，你會看到你可以獲得的遊戲的圖片。當你點選一張圖片時，你會看到一個擴充套件，顯示了描述和一個嵌入的 YouTube^[2] 影片。現在你已經瞭解了基本知識，你就可以在你的最喜歡的網站上看到多媒體的不同用途。雖然這聽起來很棒，並且使用多媒體會讓任何網站都更好，但請記住，任何東西太多都不好。

然而，基於 Web 的多媒體是一個用來描述網頁中找到的多媒體（聲音、影片、動畫、文字和圖片）的術語。類似於其他網站，基於 Web 的多媒體頁面顯示使用者透過超連結請求的資訊。多媒體網站是互動式的，通常包含訪客直接操作的元素。例如，播放或暫停影片剪輯或遊戲，以及控制 3D 物件。在某個時期，基於 Web 的多媒體受到嚴格的限制，因為計算機和網際網路服務都太慢，無法支援它。隨著時間的推移，計算機和寬頻連線速度的顯著提高使得基於 Web 的多媒體成為可能，並且基於 Web 的多媒體的成功正在迅速增長。如今，絕大多數網站都包含某種形式的多媒體。例如，它經常用於廣告，作為常規網站內容（電視節目和電視網路釋出的照片或播客），公司提供的可用產品的說明性影片，或作為“使用者生成的內容”，例如上傳到 YouTube 的影片或上傳到 Flickr 的圖片。 ^[3]

基於 Web 的多媒體應用程式種類繁多，可以在整個網際網路上找到。包含不止一種媒體型別的網站被認為是多媒體網站。包含聲音、影片、動畫和/或圖片以及文字的網站屬於這一類別。通常，這些網站使用多種應用程式，例如這些應用程式，將某些資訊傳遞給網頁的檢視者。製造商可能會使用照片和基於 PDF 的使用者手冊來將產品的主要要點傳達給檢視者。在其他情況下，多媒體可以用作教學工具，訪客可以透過教學影片學習，或者新聞網站可能會使用播客和電視素材來透過他們的網站更新讀者。許多音樂家訪問他們的網站時，也會使用圖片和聲音，以及他們的巡迴演出的文字日期。娛樂在基於 Web 的多媒體應用程式中也扮演著重要角色。隨著網際網路影片流媒體的興起，人們現在可以在有空的時候，在有網際網路連線的任何地方觀看他們最喜歡的電視節目。Netflix 和 Hulu 等網站使用聲音、影片，以及他們提供的節目的描述性文字旁邊的縮圖照片圖示。在使用這些多媒體應用程式時，需要牢記一些事項，例如網際網路連線速度和頻寬。大多數這些影片流媒體網站，無論是新聞、體育、電視節目等等，都需要至少 500Kbs 的寬頻連線速度才能觀看標準清晰度影片。隨著清晰度的提高，最低速度要求也會相應增加，反之亦然。頻寬也起著重要作用，因為一些服務提供商會限制可以處理的資訊量。大多數“智慧”手機服務提供商設定了每月 1Gb 或 2Gb 的限制，如果超過這個限額，就會收取額外的費用。考慮到一部標準清晰度的、一小時的電視節目可能接近 200Mb，因此明智的做法是關注正在消耗的頻寬，因為這會迅速累積起來。 ^[4]

基於 Web 的多媒體可以提供許多優勢。基於 Web 的多媒體的最大優勢之一是它可以滿足許多不同的學習風格。例如，當被教導如何製作紙飛機時，有些人可能更喜歡文字說明，而另一些人可能更喜歡圖片說明。多媒體可以提供帶標題的圖片說明，以滿足人們的學習風格。基於 Web 的多媒體的另一個優勢是它可以使資訊對使用者來說更有趣。只有文字的資訊會變得很無聊，但可以實現多媒體來使網頁更豐富。例如，當學習國家在地圖上的位置時，一張簡單的圖片可能無法以有趣的方式傳達資訊。使用多媒體，可以建立並使用互動式地圖來代替圖片。互動式地圖可能是使用者學習材料的更有趣的方式，因為他們必須與多媒體互動。除了基於 Web 的多媒體的優點外，還有缺點。基於 Web 的多媒體的一個缺點是它可能非常昂貴且耗時。 ^[5] 使用多媒體的網站通常比基於文字的網站需要更多時間和技能來開發。企業通常會僱傭專門的人員來建立和安排他們網頁上的多媒體。 ^[6]

增強虛擬現實

增強虛擬現實是透過顯示器將某些計算機生成的元素新增到現實世界中。增強虛擬現實可以應用於許多不同型別的技術和行業，並且目前在電子商務領域發展迅速。一些公司，例如宜家，正在使用增強虛擬現實技術來讓消費者更好地瞭解傢俱在他們家中的樣子。其他用途包括增強虛擬現實技術在汽車行業的應用。某些製造商在擋風玻璃上使用這項技術。這被稱為平視顯示，用於讓駕駛員看到他們的速度、燃油表以及駕駛時需要的許多其他資訊，而無需將目光從道路上移開。增強虛擬現實的另一個用途是 Google Glass。Google Glass 允許使用者在眼鏡上使用顯示器獲得手機的所有功能，並使用語音命令。此外，一些開發正在進行，以將增強虛擬現實技術整合到醫療領域。雖然增強虛擬現實是一種新興技術，但它在許多裝置中越來越多地被使用，並且可能會在幾年內成為一種社會常態。 ^[7]

多媒體元素

五種多媒體元素

文字、影像、音訊、影片和動畫是五種多媒體元素。第一個多媒體元素是文字。文字是最常見的多媒體元素。文字表達了開發人員試圖傳達給觀眾的資訊。即使圖片吸引了觀眾的注意力，文字也是一個好主意，以防圖片無法載入。第二個多媒體元素是影像。與簡單的文字相比，影像可以更快地吸引觀眾的注意力。幾乎每個多媒體應用程式都包含影像。最常見的影像格式是 JPEG 和 PNG。此外，Photoshop 和 Paint.NET 建立了高科技視覺效果，這些效果在影像中很常見。第三個多媒體元素是音訊。大多數情況下，音訊檔案使用外掛媒體播放器部署。一些音訊格式包括 RealAudio、MIDI、Wave、WMA 和 MP3。開發人員將壓縮格式以縮短時間。在檔案下載之前，可以流式傳輸音訊。第四個多媒體元素是影片。在關於多媒體元素的影片中，網路是最常見的地方。一些數字影片格式有 Flash、MPEG、AVI、WMV 和 QuickTime。流式傳輸數字影片可以提高播放速度。開發人員使用影片來吸引觀眾的注意力。第五個多媒體網站是動畫。動畫吸引了年輕人群。adobe flash 是建立這些動畫最常見的工具。動畫是最具創意和趣味性的多媒體元素！^[8]

襯線字型與無襯線字型 & 字型選擇

所有字型或字形要麼是襯線字型，要麼是無襯線字型。“襯線”是拉丁語中的“帶腳”，而“無襯線”是拉丁語中的“不帶腳”，這就是區別：襯線字型在字母底部有小的線條或襯線，就像字母有腳一樣。無襯線字型沒有這些“腳”。^[9] Times New Roman 是最常見且易於識別的襯線字型，而最常見且易於識別的無襯線字型是 Arial、Helvetica 和 Comic Sans MS。關於襯線字型是否比無襯線字型更容易閱讀，或者反之，存在一些分歧，但總的來說，襯線字型更適合大段文字，尤其是物理印刷文字，而無襯線字型更適合小文字，例如標題和電子訊息。^[10] 除了使用襯線字型與無襯線字型的問題之外，還應該注意使用哪種特定字型。不同的字形有不同的含義。一種可能更正式的字型，例如 Times New Roman，不適合更非正式的場合，例如對小孩生日派對的邀請；同樣，Comic Sans 這種非正式的字型非常不適合正式資訊。在選擇字型時，請考慮資訊的目的和受眾。

影片

影片在多媒體程式中具有強大的影響力。它從連續事件開始，將其分解成幀，而動畫從幀開始。影片格式由容器和編解碼器組成。容器描述了檔案的結構，例如各個部分儲存的位置、它們如何交織以及哪些部分使用哪些編解碼器。編解碼器是一種壓縮檔案以減小檔案大小並保持質量的方法。^[11] 一些最常見的影片檔案格式有 Audio-Video Interleave (.avi)、Flash Video Format (.flv)、Moving Picture Experts Group 2 (.mp2)、Moving Picture Experts Group 4 (.mp4)、QuickTime (.mov) 和 Windows Media Video (.wmv)。^[12] 在多媒體應用程式中，數字影片越來越受歡迎，因為影片剪輯可以輕鬆編輯，可以像計算機中的其他檔案一樣儲存，並且可以保持影片質量，並且可以傳輸到計算機網路中，這允許對影片的任何部分進行非線性編輯。^[13] 就像音訊一樣，在流式影片中，傳輸資訊是從伺服器到客戶端的資料流。2006 年，人們每天在 YouTube 上觀看超過一百萬個流式影片。^[14]

JPEG、GIF 和 PNG 格式

GIF 和 PNG 是兩種不同的格式，影像可以採用這些格式。GIF 代表 Graphics Interchange Format，通常用於動畫，有時也用於單個影像。影像被壓縮或縮小；它們使用一種稱為無損資料壓縮的方法。這種壓縮方式可以使影像在壓縮後不會損失質量，因為其具有統一的顏色和清晰的邊緣。GIF 不是影像的最佳質量格式，因為它對顏色的限制，這是 PNG 建立的原因之一。PNG 是 Portable Network Graphics。它們的壓縮能力更高，並支援 alpha 透明度，這基本上是在影像上建立一個背景，使其看起來部分或完全透明。^[15] 它們可以儲存更多的顏色深度，但在某些情況下也比 GIF 佔用更多的空間。在這種情況下並非如此，因為它們在 8 位資料中具有更好的壓縮能力，最終比 GIF 更小。^[16] PNG 與 GIF 不同，因為它們不支援動畫，並且是基於單張影像的格式。^[17] 這些格式如今在許多網頁中使用，兩者都同樣重要。

聯合影像專家組委員會建立了檔案格式，即 JPEG。JPEG 是一種壓縮彩色影像、數字照片和其他數字圖形的技術和檔案格式。許多在計算機上儲存照片的使用者會認識 JPEG 副檔名，它被稱為“.jpeg”或“jpg”。所選影像的檔案大小可以針對不同的用途進行最佳化，也稱為將照片編輯到所需的尺寸。該檔案格式透過使用一種稱為“有失真壓縮”的壓縮方式來實現這一點。“有失真壓縮”的定義是指影像可以減小檔案大小，但會略微降低影像質量。JPEG 檔案被消費者廣泛使用，作為一種在他們的計算機上儲存照片的方式，以便他們可以隨意檢視。但是，使用者可能希望透過電子郵件或網站共享這些影像。在考慮在網站或電子郵件中使用 JPEG 檔案時，使用者必須權衡檔案大小與影像質量。例如，如果使用者希望在他們的網站上釋出一張照片，他們必須考慮檔案大小和格式。此外，在電子郵件中，使用者必須考慮要傳送的影像質量。傳送的影像質量越高，檔案大小就必須越大。如果使用者透過手機發送此檔案，可能需要使用更多資料來發送更大的檔案大小。^[18]

音訊

音訊檔案有很多不同的型別，每種型別都有其獨特的優勢。最普遍的音訊檔案是 MP3。MP3 已成為大多數裝置和網站上的標準音頻檔案。MP3 檔案相對於其他格式的優勢在於其體積小。MP3 檔案可以壓縮，因為它們不包含音訊軌道的不可聽部分。雖然這會導致高質量的音訊，同時佔用很小的空間，但在某些情況下，音訊質量可能會下降。MP3 檔案的壓縮可能會扭曲人聲，並可能導致“金屬”音。因此，一些計算機，主要是基於 Windows 的 PC 使用 WAV 檔案儲存音訊檔案。這些檔案未壓縮，因此佔用大量空間，但它們比大多數 MP3 檔案質量更高。由於大多數臺式 PC 都擁有充足的空間，因此更好的音訊質量可以彌補更多空間的使用。Windows 計算機上的另一種常見檔案型別是 WMA。此格式針對 Windows Media Player 進行了最佳化。其主要優勢在於它是受版權保護的，但只能在 Windows Media Player 上使用。另一種常見的音訊檔案是 DCT。這種型別的檔案是加密的，用於需要患者保密的醫療應用。^[19]

多媒體網頁設計

基本設計原則

設計網站的主要目的，就是建立一個有趣並能吸引客戶或使用者訪問的網站。不僅要有趣，而且要保持新鮮感。使用者不想一直看到網站上相同的內容。網站需要隨著時間的推移而更新和改變。另一個需要記住的重要事項是，許多人並不精通技術。因此，保持網站的簡潔很重要。複雜的網站會讓使用者望而卻步。確保網頁載入速度很快也很重要。可以透過仔細選擇多媒體元素並根據需要修改它們來實現，例如最佳化照片以使其儘可能高效。如今，建立網站時另一個需要考慮的重要因素是，使用者是否能夠透過其他裝置（例如手機、平板電腦等）訪問網站。建立移動版網站可能會有益。瞭解使用者可以用來訪問此網站的瀏覽器也很重要。有些網站具有一些僅限於特定瀏覽器訪問的功能。因此，確保使用在所有常見瀏覽器上都能正常工作的功能很重要。使用不需要外掛的功能也有益。使用者訪問網站時，不會想要安裝任何東西才能訪問網站或網站上的內容。檢視頁面內容的大小也很重要。^[20] 您需要確保您的資訊可以在所有電腦螢幕上顯示。

網站設計可能非常耗時且昂貴。成功的企業和代理機構通常擁有充足的時間和資金來設計複雜的網站。然而，對於剛起步的公司來說，這些可能還不具備。幸運的是，如今有很多網站提供免費的網站設計服務。一些提供此服務的優秀網站包括 Wix.com、Weebly.com、Yola.com 和 Moonfruit.com。對於全新的公司或組織來說，這可能是一個很好的方式，使他們在網上獲得曝光度並開始獲得一些認可。這些免費網站對於那些對網頁設計瞭解不多的人來說非常容易上手，因為它們通常提供易於使用的模板，並在設計過程中提供一步一步的說明來指導使用者。雖然網站設計本身是免費的，但使用者首先需要購買一個域名。這些域名可以在 GoDaddy、Register.com、Domaine.com 和 Dyn.com 等公司購買。購買域名後，使用者就可以開始填充網站內容。使用者在定製網站以包含所需元素方面擁有很大的自由度。前面提到的許多網站還提供教程，幫助使用者將網站上線並執行。網站設計完成後，建立者就可以釋出網站，併為獲得認可做好準備。建立者需要經常更新網站，並儘可能多地宣傳網站。對於任何剛剛起步的組織或公司來說，選擇使用免費網站進行網站設計可能是一個不錯的選擇，而且現在有這麼多網站提供此服務，不使用就太可惜了。^[21]

使用流程圖、頁面佈局和故事板

在談論網站設計時，流程圖用於展示不同網頁之間的關係。流程圖本質上是網站的地圖。流程圖的線條之間可以連結，引導使用者前往想要訪問的地方。在設計網站時，可以根據自己的需求進行設計，可以是簡單的，也可以是複雜的。通常，流程圖是在網站開發的早期階段設計的，因為它為網站提供了良好的基礎。^[22] 頁面佈局用於網站設計。通常，人們會建立兩種頁面佈局：一種用於首頁，另一種用於所有其他頁面。這時您就可以設計 logo 的位置，例如首頁按鈕，以及決定網站的視覺效果。雖然保持視覺上的趣味性很重要，但保持簡潔也很重要，這樣才能避免網站過於複雜。^[23] 故事板也是網站設計中常用的工具。故事板是一系列圖片，描繪了每個螢幕上將要發生的事情。它們通常用於製作動畫內容。^[24]

如何開始製作故事板

製作出色的網站設計故事板需要幾個步驟。即使您認為自己的想法不怎麼樣，也一定要把它們提出來。接下來，需要將它們畫在紙上。用一張紙更方便，而且如果設計不符合您的要求，您隨時可以丟掉它。此外，使用紙張也是一件好事，因為在紙上，任何人都可以對設計進行新增，而且您不需要有太多製作網站的經驗。將想法畫下來後，下一步是找到一個焦點，確保網站的每個部分都已完成。接下來，記下需要新增的內容。之後，將完成的圖紙放在思維導圖中，以更直觀地展示網站。然後，對故事板進行批判性評估，並對設計進行調整。讓其他人也看看故事板也很重要，這樣您就可以獲得各種意見。^[25] 故事板完成後，請確保導航、網站結構和內容做得很好。對於導航，確保所有內容都可以在最多三步點選內訪問。對於網站結構，檢查是否過於複雜，以及是否有視覺效果、詞彙表、目錄或索引。內容應該易於理解、富有創意，並且能夠自然地銜接在一起。Google.com^[26]

導航設計注意事項

在建立網站時，不要忽視小的細節。網站的結構是方便導航的最重要部分。標題和主選單需要以使用者可以理解的方式進行組織。許多專家和網際網路使用者都同意，只需要最多三次滑鼠點選就可以返回主頁，並更容易地進行搜尋。網站中使用的不同形式包括搜尋框、下拉選單、網站地圖、文字連結、導航欄和選單標籤。影像也可以是另一個連結，用於跳轉到網站上的另一個頁面。網站必須在與上一個頁面相同的位置具有相同的連結。如果使用者每次進入網站的新區域時都必須檢視每個導航按鈕，事情就會變得混亂。較長的網頁應分成較短、更簡潔的頁面，以避免載入和滾動。在當今的許多網站上，使用者會看到“返回頂部”按鈕以返回頁面頂部，主要是在長網頁上。最重要的是，根據網站，每個網頁上都應列出指向主頁的連結。^[27]

訪問考慮因素

在建立多媒體網站時，應考慮裝置相容性和輔助技術。隨著我們社會發展出更多訪問網際網路的方式，不僅僅是電腦，網站建立者需要意識到公眾正在使用智慧手機、平板電腦、iPad等裝置訪問他們的網站。在這些更小的裝置上的佈局可能與臺式電腦不同。現在網站正在建立多種方式來適應任何形式的技術。隨著更嚴格的殘疾人法律的實施，我們開始思考透過網際網路上的網站以不同的方式告知身體殘疾人。盲文顯示器^[28]和螢幕閱讀器^[29]只是新興的先進技術中的一部分。可以採用備用文字^[30]，它是網頁影像的文字描述。這些影像的文字描述對於網站的視障使用者來說非常有價值。

可重新整理盲文顯示器是一種電子裝置，透過序列或 USB 電纜連線到計算機，它使用小的金屬或塑膠針腳上下移動以顯示盲文字元，以便盲人可以閱讀在計算機上視覺顯示的內容。^[31]“可重新整理”的特性意味著盲文顯示器在使用者滾動網頁或文件上的滑鼠時會不斷變化。使用者可以透過裝置上的命令鍵或游標路由鍵，或透過 Windows 和螢幕閱讀器命令來移動滑鼠。^[32]通常，螢幕閱讀軟體或只是螢幕閱讀器與數字盲文顯示器一起使用，以提供視力障礙人士的最佳體驗。螢幕閱讀器將網站上的資訊轉換為電子文字，然後傳送到語音合成器（以便可聽見地輸出）或可重新整理盲文顯示器。螢幕閱讀器無法讀取的唯一內容是圖形；這就是為什麼在設計網頁以對視力障礙人士友好時，包含圖片描述和“懸停”標題很重要。^[33]雖然有些人可能只需要語音合成器，但大多數人更喜歡使用可重新整理盲文顯示器，因為它提供了對資訊的直接訪問，從而提高了完成任務的效率；允許使用者檢查自己的輸入的拼寫、語法和格式，並且很安靜，因此可以在任何地方使用而不會打擾其他人。可重新整理盲文顯示器有 40、70 和 80 個字元的顯示，價格從 3,500 美元到 15,000 美元不等，具體取決於字元顯示。^[34]

使用 HTML、XML、XHTML、CSS 建立網站

HTML

檔案：HTML 標籤.png

HTML 標籤^[35]

HTML 或超文字標記語言主要用於建立網頁。HTML 是一種由稱為標籤的小片段組成的程式碼。標籤是 HTML 程式碼的小片段，它們向計算機發出有關如何格式化與它們連結的內容的命令。標籤以小於號 (<) 開頭，然後是命令，然後用大於號 (>) 關閉。這是開始標籤。接下來插入它所應用的文字。然後，使用小於號 (<)、斜槓 (/)、與開始時相同的命令程式碼以及大於號 (>) 來結束標籤。因此，您的基本程式碼將類似於以下內容： <(插入程式碼)> 這裡應用文字 </(插入程式碼)> 。

使用 HTML 可以做很多不同的事情。你可以突出顯示文字(甚至使用不同的顏色)，你可以使文字顏色不同，你可以(將滑鼠懸停在此處)，以及使文字加粗或斜體。這些只是使用 HTML 格式化可以建立的一些基本修改。甚至還有方法可以插入影像以及超連結。在這裡，我插入了指向我們華夏公益教科書主頁的連結，甚至還插入了您在右側看到的圖片。使用 HTML 時，可能性幾乎是無限的。

HTML 最大的問題是，大多數人不想花時間坐下來學習所有這些小程式碼和規範。一旦掌握了 HTML，它在組織網頁方面非常有用。HTML 允許使用者管理影像、影片、動畫和文字格式的位置。它是一個非常強大和有用的設計工具，似乎有些被忽視和被認為理所當然。

HTML 的最新版本是 HTML5，它正在被建立來取代 HTML 和 XHTML。HTML5 的設計更簡單，並且 HTML5 的編碼發生了很多變化或新增。DOCTYPE 和字元編碼宣告都已更改為更易於編碼。隨著新宣告的出現，新的語義、控制元件、圖形和多媒體元素也出現了，因為越來越多的網站變得更加複雜，越來越多的資訊被打包到網站中。一些新的語義元素包括 <header> 和 <footer>，它們使網頁設計人員更容易指示新頁面在哪裡開始和結束。HTML5 標記語言的新控制元件包括日期、時間和日曆，以幫助使用者更加了解情況。HTML5 最大的補充是 <audio> 和 <video> 多媒體元素，因為許多使用者喜歡能夠收聽或觀看對網站有用的內容。對於電子商務網站來說尤其如此，因為潛在買家希望能夠看到產品的使用方式，這可以透過影片來展示。總而言之，HTML5 是一種更新的標記語言，它簡化了網頁設計人員的編碼，同時使他們的網站更具吸引力。^[36]

CSS 簡史

為了讓您的網站真正脫穎而出，它需要一種超越 HTML 及其同類產品所能提供的風格。這就是 CSS 發揮作用的地方。 CSS 代表層疊樣式表，它提供了一種不僅可以專門為網頁設定樣式，甚至可以為它所屬的整個網站設定樣式的方法。在 CSS 出現之前，有些人曾為自己的目的建立過樣式表，但認為釋出他們開發的語法沒有必要，認為每個瀏覽器都應該決定如何最好地向其使用者顯示頁面。當網頁編寫者抱怨他們無法更深入地定製時，他們通常會被忽視，被迫處理為簡化而提供始終較少選項的瀏覽器。為了解決這個問題，一位名叫 Hakon Wium Lie 的挪威人於 1994 年提供了層疊 HTML 樣式表的第一個草案。他無法想象他的發展會變得多麼流行。^[37] CSS 提供了大量的風格空間，而不會像一些競爭對手的設定（如 DSSSL）那樣過於複雜。描述 CCS 作為一種語言的突出之處最簡單的方法是它如何將頁面的內容與其顯示分開。^[38] CSS3 是目前最流行的 CSS 變體，但第 4 個版本已經越來越出名。

XML 和 XHTML

與 HTML 相似但又截然不同，另一種型別的標記語言稱為可擴充套件標記語言，它是一種用於 Web 上結構化文件和資料的通用格式。這兩種標記語言之間最大的區別在於，HTML 描述了呈現，而 XML 描述了內容。簡而言之，HTML 描述了實際內容，如文字和圖形影像，但僅限於如何顯示和互動。另一方面，XML 描述了內容的什麼資料正在被描述。為此，XML 標籤被分配給資料片段。一旦資料被標記，它就可以與任何 XML 文件一起使用。 XML 被稱為“可擴充套件的”，因為 XML 文件中包含的資料可以在需要時提取和使用。^[39]

基於 XML 的另一種 HTML 版本稱為可擴充套件超文字標記語言，或 XHTML。它將 HTML 的靈活性與 XML 的可擴充套件性相結合。與 HTML 不同，這種語言用於建立網頁，同時還支援 XML。這樣，XML 控制實際顯示的內容，而 XHTML 控制網頁的外觀和格式。但是，XHTML 標籤和 HTML 標籤之間的一個主要區別是，關於如何編寫標記標籤的規則更加嚴格。例如，與 HTML 不同，在使用 XHTML 時，所有標籤都必須用小寫字母編寫，每個標籤都必須有一個結束標籤，並且值需要引號。^[40]

AJAX

許多現代網站使用一項名為 AJAX 的技術，以實現與訪問者快速有效的互動。 AJAX 已經成為從伺服器後臺檢索資料和動態更新頁面的非常流行的方法。 AJAX 代表“非同步 JavaScript 和 XML”。從頭開始開發用於 AJAX 實現的 JavaScript 程式碼非常耗時且繁瑣。但是，許多 JavaScript 庫，包括 jQuery，具有出色的高階 AJAX 實現，作為一組方法和函式，使構建網站變得更容易更快。 AJAX 是一種用於 Web 應用程式的開發技術，其中訪問者瀏覽器中的 JavaScript 程式碼非同步地與 Web 伺服器通訊，即在後臺。當您單擊傳統網頁上包含的連結或表單時，將向 Web 伺服器上的新 URL 傳送請求。伺服器傳送一個全新的 HTML 頁面，瀏覽器會顯示它，替換原始頁面。當使用 AJAX 技術時，JavaScript 程式碼向伺服器上的 URL 發出請求。該程式碼還可以將資料與請求一起傳送。然後，JavaScript 程式碼處理來自伺服器的響應，並相應地採取行動。例如，可以使用返回的資料進行計算，將計算結果新增到頁面上的小部件或更新小部件，或者向訪問者傳送訊息以更新伺服器上的資料庫。由於 AJAX 請求在後臺執行，因此 JavaScript 程式碼（以及訪問者）可以在查詢處理期間繼續使用頁面。這個過程對訪問者是隱藏的，他們不需要離開他們當前正在檢視的頁面。這使得使用 AJAX 的頁面非常令人愉快。^[41]

多媒體網頁開發（指令碼、開發工具、創作軟體和測試）

建立多媒體元素

多媒體演示使用圖形、聲音剪輯、影片剪輯和文字向受眾傳遞資訊。您只需要一個多媒體創作程式和一臺計算機即可建立演示。使用多媒體的原因不僅能夠將您想要傳達給受眾的資訊傳達出去，而且還提供了一種創造性的方法，使其對觀看者來說更具吸引力。以下是一些您可能會想要使用多媒體演示來提供創意演示的情況。一種是在專案中，以便在更正式的環境中向老師或同學展示，另一種是在圖書館或計算機實驗室進行的課堂展覽，為了更個人的使用，您可以將其用作日記，最後兩種方法是在幻燈片格式中使用或將其用作年鑑。建立良好的多媒體演示的三個 C 是保持簡潔、一致並賦予演示個性。接下來，您需要設計演示，使其能夠被呈現並吸引受眾的注意力。接著，您必須計劃您的演示。制定一個大綱，並確保您理解演示的主要主題。接下來，演示者必須選擇他們的媒體；多媒體元素支援演示的主要要點。一些資料也會對演示有所幫助，例如圖表、圖形、地圖、影像和影片。之後，審查、修改和重新排列，這樣您就知道資訊是準確的，並且已準備好進行演示。

建立網站

網站開發人員使用多種工具來建立網站。這些可以分為三大類：標記語言、指令碼語言和網站創作軟體。 標記語言是基礎；它們是編碼系統，透過使用標籤建立網頁的整體結構/外觀。標籤是允許網頁設計師排列文字和多媒體的命令。 HTML 或超文字標記語言是當今使用的主流標記語言。當前版本是 HTML5，旨在取代 HTML 和 XHTML，另一種標記語言。

指令碼語言允許開發人員建立在網頁程式碼中執行的指令或指令碼。當今使用的一種非常流行的指令碼語言的例子是 Javascript。指令碼語言無處不在。^[42] 例如，Ajax 技術存在於廣泛使用的服務 Google 地圖和 Gmail 中。當與標記語言結合使用時，指令碼語言可以使開發人員能夠在其網頁中實現廣泛的功能和內容。

網站創作軟體用於建立更復雜的網頁，開發人員可以在其中利用自動生成標籤和層疊樣式表的命令，這些命令用於標記語言編寫的文字的外觀和格式。這使開發人員能夠以更高效的方式工作，因為動畫、效果、背景等可以一次應用。例如，當選擇選單選項時，將生成用於新增動畫或互動性的相應 JavaScript 或其他程式碼。除此之外，網站創作程式幾乎總是能夠包含各種多媒體元素，例如 Shockwave 和 Flash 動畫、動畫 GIF、影片剪輯和音訊剪輯。兩個最流行的網站創作程式是Adobe Dreamweaver和Microsoft Expression web。 網站創作應用程式的設計人員應該瞭解一些一般功能。這包括 WYSIWYG，代表所見即所得，使用者可以將各種網站元素拖放到設計畫布上，而無需手動編碼這些小部件。創作軟體的優勢還包括能夠設定和使用模板以確保網頁之間的一致性，並且可以將多媒體插入網頁中。但是，使用網站創作軟體的缺點是它並不直觀且易於選擇和使用，需要一些培訓或技術知識。使用這些工具開發的網站可能無法有效地編碼，這會導致使用者載入時間增加。此外，一個人需要對 HTML 有基本瞭解。此外，網站創作軟體可能是一筆昂貴的購買。^[43]

網站建設工具 是一種基於網路的工具，可以幫助小企業或個人輕鬆建立網站。使用網站建設工具的一大優勢是它不再需要對 HTML 有非常深入的瞭解。因此，建立網站需要最少的技術知識。另一個優勢是它易於使用。因此，製作網站變得更加容易和不那麼令人望而生畏。另一個重要優勢，特別是對於企業來說，是它們提供移動網站設計。現在智慧手機已經成為常態。大多數網站都有一個移動版本。因此，一些網站建設工具為網站提供響應式設計，網站在移動裝置上檢視時會發生變化，而不是在電腦上檢視時。還有很多網站建設工具。有些可能是免費的，有些則可能不是。但通常情況下，需要付費的網站建設工具最終也是功能最多的。不過，網站建設工具的一個缺點是它們可能很昂貴，雖然它們會為你提供域名和地址，但一旦你想將你的網站遷移到另一個主機，有些網站建設工具可能無法做到，因為它們使用了自定義程式碼。^[44] 大多數網站建設工具將包括“所見即所得”的構建器，讓你可以透過將網站元素拖放到內容區域來建立網站。但是，有時很難區分優質的網站建設工具，因為有些產品無法勝任自己的任務（花費比預期的更多金錢或時間），但它仍然是建立“虛擬店面”的便捷而簡單的方法。^[45]

其他內容開發工具

ActiveX 是微軟 Windows 作業系統軟體的一個元件。許多 Windows 應用程式，如 Internet Explorer、Microsoft Office 和 Windows Media Player，使用 ActiveX 將其功能嵌入到其他應用程式中。微軟 Internet Explorer 的替代瀏覽器 Microsoft Edge 將不支援 ActiveX，標誌著該技術的終結。

網站測試、釋出和維護

在你的網頁釋出之前，確保它能夠正常執行並以 100% 的能力運作，這一點至關重要。這意味著，當用戶使用你的網頁時，不能出現任何錯誤、故障或錯誤頁面。雖然這似乎很容易，但有許多不同的步驟需要執行，以確保你的頁面能夠正常運作。每個連結、圖示、動畫、圖片等都需要測試。許多網站喜歡使用現有的軟體來手動執行這些必要的檢查，但個人仍然需要留意任何可能引起警示的因素。此時，在經過嚴格測試後，網站應該準備就緒，可以釋出。雖然網頁已經成功釋出，但工作並沒有到此結束。許多人喜歡認為他們已經為未來做好了準備，但這些網頁需要不斷的維護。釋出者需要不斷檢查，以確保一切正常執行，內容是最新的，連結和動畫仍然可以正常運作。如果沒有這些必要的維護，網站就會變得難以使用且過時，使用者會盡力避免使用它。^[46] ^[47]

頻寬考慮

在網際網路時代，幾乎每個人都以某種方式線上；但是，並不是每個人都擁有無限的訪問許可權。仍然有一些人只擁有能夠訪問全球資訊網的手機，但有資料限制。在建立網站時，這一點很重要。^[48] 當建立一個網站時，它具有大小不同的單個元素。例如，最近搜尋引擎“谷歌”重新設計了他們的徽標，反過來，將影像大小從 6,380 位元組（6Kb）減少到 305 位元組。^[49] 這使資料有限的人更容易訪問網站，因為每次載入頁面時，它都會使用更少的資料。

對多媒體網站開發的需求

在當今時代，一切都在網上進行，每個人都上網，他們使用網際網路進行不同的目的。製作網站是這個行業中的一筆鉅額資金。對這些網站的需求是它們對使用者具有吸引力、有用且可導航。公司僱用網頁設計師和網頁開發人員來建立多媒體元素並建立網站，以建立公司的線上形象。作為網頁設計師，你需要掌握 Photoshop、Illustrator、HTML、CSS 和 JavaScript 的知識。優秀的網頁開發人員需要了解網頁設計師需要了解的所有內容，以及高階程式設計技能。隨著多媒體和軟體的新技術發展，平面設計已真正成為經濟中一個需求量很大的領域。如上所述，HTML5 和 CSS3 是可供開發人員使用的新的編碼技術。對這些領域感興趣的學生應該繼續學習 HTML 和 CSS。^[50]

參考文獻

概述

在當今我們所處的世界中，我們不斷地被各種各樣的多媒體所包圍，例如廣告牌、標誌、標識、文字、廣告、電子郵件以及我們日常的網頁瀏覽。以下是本章詞彙表以及這些詞彙的一般定義。詞彙表下方是一組填空題。使用詞彙表來幫助你填空。有些詞語可能不會被使用。然後在頁面底部檢視你的答案。

1) 多媒體: 各種媒體的整合。

2) 基於網路的多媒體: （也稱為富媒體）是指位於網頁上的任何型別多媒體。

3) 虛擬現實 (VR): 在電子商務中使用，以展示產品或服務在現實世界中的外觀或功能。

4) 文字: 用於提供基本內容，在大多數網站中都很重要。

5) 影像/圖形: 照片、圖畫、圖表和其他視覺物件的數字表示。

6) GIF: (圖形交換格式) 最常用於非照片影像，是網頁影像的標準格式。

7) PNG: (行動式網路圖形) 由於 GIF 格式存在問題，在 1996 年建立的響應格式。

8) JPEG: (聯合影像專家組) 基於網路的標準照片格式。

9) 縮圖: 更小的影像（類似於圖示），連結到較大檔案中的全尺寸影像。

10) Java 小程式: 網頁中的一個小程式，旨在執行從計算到動畫的特定任務。

11) 動畫 GIF: 一組儲存在一個動畫檔案中的 GIF 影像。

12) Flash 或 Silverlight: 動畫開發工具。

13) 音訊: 所有型別的音訊（音樂、語音和效果等）。

14) 影片: 連續的視覺資訊流，在錄製影片時被分解成幀。

15) 網站設計: 指的是規劃網站的外觀和工作方式的過程。

16) 流程圖: 描述事物之間的相互關係。

17) 頁面佈局: 說明網站的佈局和導航結構。

18) 故事板: 一系列按順序排列的草圖，描繪動畫序列中的每個頁面或螢幕。

19) 替代文字: 影像的標題，可以讓那些無法檢視影像的人清楚地瞭解他們錯過了什麼。

20) 網站開發: 網站設計完成後，建立網站。

21) 標記語言: 用於定義網頁內容的結構、佈局和總體外觀的編碼系統。

22) HTML (超文字標記語言): 用於建立網頁的原始標記語言。

23) XML (可擴充套件標記語言): 一組在網路上交換資料的規則。

24) XHTML (可擴充套件超文字標記語言): 基於 XML 的 HTML 版本。

25) 層疊樣式表 (CSS): 指定與網頁或整個網站一起使用的樣式。

26) 無線標記語言 (WML): 基於 XML 的語言，用於建立要在支援 WAP 的無線裝置（如較舊的手機和一些發展中國家使用的手機）上顯示的網頁。

27) JavaScript: 開發用於使網頁作者能夠實現互動式網站。

28) AJAX: 一組網路標準，旨在透過只從網路伺服器下載新資料，而不是重新下載整個網頁，更好地處理網頁互動性。

29) 網站創作軟體: 一種用於建立網頁和整個網站的應用程式程式。

快速測驗

1. HTML、XML 和 _______ 都是 _______ 的形式。

2. 位於網頁上的多媒體（聲音、影片、動畫、文字和影像）被稱為 __________ 或富媒體。

3. 許多網站，如 https://www.youtube.com 集成了 _______ 和 _______ 到他們的網站中，為觀眾和/或聽眾提供娛樂。

4. 三種主要的影像型別包括 ¬¬¬¬¬¬______、_______ 和 ______。

5. 將頁面放在 ¬¬¬_____ 中顯示它們之間的關係，而使用 _____ 顯示特定動畫序列的順序。

答案: 1. XHTML（也接受：CSS 或 WML 或 XRML）；標記語言 2. 基於網路的多媒體 3. 音訊；影片 4. GIF；PNG；JPEG 5. 流程圖；故事板

[1] ttps://www.humblebundle.com

[2] ttp://www.youtube.com

[3] ttp://ng.cengage.com/static/nb/ui/index.html?nbId=7345&nbNodeId=1013914#!&parentId=1013939

[4] ttp://www.slideshare.net/kenshin1017/introduction-to-multimedia-4663053

[5] Understanding Computers 14 ed. by Deborah Morley & Charles Parker

[6] ttp://computingclass6hishamuddin.blogspot.com/2012/07/advantages-and-disadvantages-of-using.html

[7] ttp://www.vidhyalive.com/

[8] ttp://smallbusiness.chron.com/5-components-multimedia-28279.html

[9] ttp://graphicdesign.stackexchange.com/tags/serif/info

[10] ttp://www.fonts.com/content/learning/fontology/level-2/making-type-choices/serif-v-sans-for-text

[11] ttp://www.slideshare.net/shortcomp/4-multimedia-elements-video

[12] ttps://w3schools.tw/html/html_media.asp

[13] ttp://www.slideshare.net/azmankadir/multimedia-element-presentation

[14] ttp://computer.howstuffworks.com/internet/basics/streaming-video-and-audio.htm

[15] ttps://en.wikipedia.org/wiki/Alpha_compositing

[16] ttps://en.wikipedia.org/wiki/Graphics_Interchange_Format

[17] ttps://en.wikipedia.org/wiki/Portable_Network_Graphics

[18] ttp://graphicdesign.about.com/od/Definitions/g/Jpg-Files.htm

[19] ttp://www.nch.com.au/acm/formats.html

[20] ttp://desktoppub.about.com/od/designprinciples/

[21] ttp://www.wikihow.com/Create-a-Free-Website

[22] ttp://www.edrawsoft.com/flow-chart-design.php

[23] ttp://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

[24] ttp://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard

[25] ttp://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard

[26] ttp://public.wsu.edu/~ericsson/story_bd.html

[27] ttp://en.wikipedia.org/wiki/Web_navigation

[28] ttp://en.wikipedia.org/wiki/Refresh able_braille_display

[29] ttp://en.wikipedia.org/wiki/Screen_reader

[30] ttp://en.wikipedia.org/wiki/Wikipedia:Alternative_text_for_images

[31] ttp://www.afb.org/info/living-with-vision-loss/for-job-seekers/careerconnect-virtual-worksites/retail-worksite-for-blind-users/refreshable-braille-display-3652/12345

[32] ttp://www.afb.org/ProdBrowseCatResults.asp?CatID=43

[33] ttp://www.afb.org/info/screen-reading-technology/5

[34] ttp://www.afb.org/ProdBrowseCatResults.asp?CatID=43

[35] ttp://www.compapp.dcu.ie/~humphrys/Notes/Internet/index.html

[36] ttps://w3schools.tw/html/html5_intro.asp

[37] ttp://www.w3.org/Style/LieBos2e/history/

[38] ttp://mashable.com/2012/10/24/css-for-dummies/

[39] ttps://w3schools.tw/XML/xml_whatis.asp

[40] ttp://personalweb.about.com/od/basichtml/a/409xhtml_2.htm

[41] ttps://w3schools.tw/ajax/ajax_intro.asp

[42] ttps://en.wikipedia.org/wiki/Scripting_language

[43] ttp://www.teach-ict.com/as_a2_ict_new/ocr/AS_G061/313_standard_applications/types_software/miniweb/pg6.htm

[44] ttp://www.pcmag.com/article2/0,2817,2484510,00.asp

[45] ttp://1stwebdesigner.com/easiest-website-builder/

[46] ttp://office.microsoft.com/en-us/publisher-help/prepare-publish-and-maintain-your-publisher-web-site-HA010094760.aspx

[47] ttp://go.hrw.com/eolang/myomed/bringit.htm

[48] ttp://ng.cengage.com/static/nb/ui/index.html?nbId=7345&nbNodeId=1013914#!&parentId=1013939

[49] ttp://gizmodo.com/how-could-googles-new-logo-be-only-305-bytes-while-its-1728793790

[50] ttp://www.orientinfosolutions.com/articles/multimedia-web-design.php

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[37]

[38]

[39]

[40]

[41]

[42]

[43]

[44]

[45]

[46]

[47]

[48]

[49]

[50]