计算机信息系统/多媒体简介

基于 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.org.cn/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.org.cn/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.org.cn/XML/xml_whatis.asp

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

[41] ttps://w3schools.org.cn/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]