(精品)《多媒体技术与应用》第8章：网络多媒体技术.ppt

《(精品)《多媒体技术与应用》第8章：网络多媒体技术.ppt》由会员分享，可在线阅读，更多相关《(精品)《多媒体技术与应用》第8章：网络多媒体技术.ppt（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第八章 网络多媒体技术本章主要介绍WWW站点设计的基本知识；讲解利用Dreamweaver 8进行网页制作的方法和过程。第八章 网络多媒体技术8.1 网站设计基本知识8.2 Dreamweaver 8简介8.3 本章小结8.1 网站设计基本知识8.1.1 Internet与Web技术8.1.2 网站建设的流程8.1.1 Internet与Web技术Internet是全球范围内的计算机组成的信息网络，又被称为国际互联网。Internet的前身是由美国的军用实验网络APRAnet（阿帕网）。随着TCP/IP通信协议的成功研制，使不同品牌、不同操作系统的计算机之间可以实现互联，目前有上亿台计算机和几

2、十亿个用户在使用Internet。8.1.1 Internet与Web技术（续）Web是World Wide Web的简称，因此又被称为WWW，中文译为万维网；是一个建立在Internet基础上的网络化超文本传输系统。构成Web体系结构的基本元素包括：Web服务器、Web浏览器、HTTP协议、HTML语言以及URL地址。Web服务器：这里指一种软件系统，如Windows 2000中的Internet信息服务（IIS）Web服务器对数据进行加工、处理，然后将结果返回给浏览器，浏览器便看到了具体的网页。Web浏览器：用于显示网站上的信息。浏览器安装在客户端，能够理解多种协议，如HTTP、FTP，也

3、能理解多种文档格式，如TEXT、HTML、JPEG、XML等格式的文档。浏览器有许多种，如Netscape Navigator、Microsoft Internet Explorer（即IE）、Mozilla Firefox等等。8.1.1 Internet与Web技术（续）HTTP（超文本传输协议）：是一种在Web服务器和Web客户之间传输Web页面的通信协议，它是一种请求/应答式的协议。它是建立在TCP/IP之上的应用协议，是Web上最常用、最重要的协议。HTML（超文本标记语言）：是一种用来制作网络中超级文本文档的简单标记语言。它是在文本文件的基础上加上一系列标记。URL（Uniform

4、 Resource Locator）：统一资源定位器，即人们常说的网址。它用来指定网上资源所在的位置和获取资源的方式。其统一格式为：协议名称：/主机域名或IP地址/路径/文件名。8.1.2 网站建设的流程1、需求分析、确定主题：需求分析是做好网站设计与规划的前提工作。设计者要了解网站的服务群体，这包括网站的拥有者和访问者。网站的主题只能有一个，主题的确定应当短小而精要。2、域名注册：注册域名是在因特网上建立任何服务的基础。域名采用层次结构，每一层构成一个子域名，子域名之间用圆点隔开。域名的选择要简短、切题、通俗，这样才会给用户留下深刻的印象。在域名注册之前，应先到InterNIC和CNNIC查

5、询该域名是否已经被别人抢先注册了。8.1.2 网站建设的流程（续）3、设立主机：主机必须是一台服务器级的计算机，并且要用专线或其它形式24小时与互联网相连。可以根据投入资金的多少和信息流量的大小选择虚拟主机或服务器托管等方式。4、规划网站内容并制作网页：要先画出网页的设计结构草图。草图要直观，网站的首页内容、栏目名称以及各栏目网页的数量在草图中一目了然。根据设计草图，创建网站的基本框架，建立相应的文件夹，设计首页和各栏目页面。8.1.2 网站建设的流程（续）5、网站测试：当把多张网页整合成网站后，要对整个网站进行测试，看其是否能够正常运行，并将其中的运行错误加以修改。主要的测试内容包括：功能测

6、试、性能测试、安全性测试、稳定性测试、浏览器兼容性测试、链接测试等。6、网站发布与推广：当网站经过测试可以正常运行后，就可以发布到Internet上。网站发布成功后，还要展开一系列的推广活动，提高网站知名度，提升网站的访问量。8.1.2 网站建设的流程（续）7、网站维护与更新：网站维护与更新是网站建设中极其重要的部分，也是最容易被忽略的部分。严格来说，每一个站点都应该由专业人员定期更新维护。8.2 Dreamweaver 8简介8.2.1 Dreamweaver 8的工作环境8.2.2 创建本地站点8.2.3文档的创建及设置8.2.4 插入文本8.2.5插入表格8.2.6 插入图像8.2.7

7、创建超链接8.2.8 创建框架8.2.9 播放多媒体对象8.2.10网站的发布与测试 8.2.11 网页制作实例8.2.1 Dreamweaver 8的工作环境图 8-2-1 Dreamweaver 8操作界面8.2.1 Dreamweaver 8的工作环境（续）1、标题栏：显示当前正在编辑的网页文档的文件名。2、菜单栏：包含Dreamweaver 8的所有操作命令。3、文档工具栏：提供文档操作的常用命令，【代码】表示仅在“文档窗口”中显示HTML源代码视图，【拆分】表示同时显示HTML源代码视图和设计视图，【设计】是系统默认设置，表示在“文档窗口”中只显示设计视图，【标题】用于输入当前网页在

8、浏览器上显示时标题栏中的内容。4、插入工具栏：汇集了网页中可以插入的所有元素。5、浮动面板组：包括一系列编辑网页时的控制内容。其打开和关闭可以通过执行【窗口】菜单中的相应命令实现。8.2.1 Dreamweaver 8的工作环境（续）6、文档窗口：实际编写网页的区域，根据不同的视图形式显示不同的内容。7、标签选择器：单击某个标签，可以选择网页中相应的编辑对象。8、缩放比例：可以按照一定比例显示“文档窗口”中的内容。9、窗口设置：可以设置网页文档窗口的大小。10、下载指示器：显示当前网页文件所占容量，以及网页被下载时所需要的时间。11、属性面板：在“文档窗口”中选择某个元素，显示该元素的相关属性

9、。8.2.2 创建本地站点创建本地站点的步骤。（具体参考教材）1、创建文件夹，收集网页素材：2、打开站点定义对话框：3、为站点起名字：4、选择服务器技术：5、设置站点文件编辑方式：6、选择远程服务器连接方式：7、进行站点设置总结：站点定义结束后，【文件】浮动面板中会显示出当前站点的文件夹及文件信息。8.2.3文档的创建及设置在Dreamweaver中编辑的网页通常被称为文档，文档的创建、存储和文档页面属性的设置是制作网页最基本的操作。1、创建空白文档，可以采用下面两种方法：在【起始页】的【创建新项目】一栏中选择要创建的文档类型，执行菜单【文件】|【新建】命令，选择需要创建的文档类型。2、存储文

10、档：执行菜单【文件】|【保存】命令，或按【Ctrl+S】组合键便可以进行文档存储。如果要保存的文档为网站的“首页”，则应将文档保存在站点根文件夹下，而且文件名必须为“index.htm”或“default.htm”中的一个。如果保存的文档为网站中的普通页面，可以将文档存放到“html”子文件夹下，文件主名可以任意（不能用汉字），文件扩展名应为“.htm”。8.2.3文档的创建及设置（续）3、文档的页面设置：执行菜单【修改】|【页面属性】命令，或在【属性】面板中单击【页面属性】按钮，可以打开【页面属性】对话框，对网页进行设置。8.2.4 插入文本1、添加文本：可以直接在文档窗口中输入文本，也可以

11、粘贴其他网页或word文档中的文本。按【回车】键会结束一个段落的输入，并且插入一个空行。按【shift+回车】组合键会换行但不结束当前段落。2、设置文本大小：在【属性】面板的【大小】选项改变文本的大小。字体默认单位为“像素”。3、设置字体：在【属性】面板【字体】下拉列表中可以设置所选文本的字体。“默认字体”依据操作系统环境而不同，对于简体中文环境，“默认字体”为宋体。最好不要使用特殊的字体，如果确实需要可以将特殊字体的文字保存为图像格式。8.2.4 插入文本（续）4、改变文本颜色：网页中的文本颜色采用RGB的颜色体系。5、对齐文本：包括四种对齐方式。6、段落的格式：包括已经设置好的段落格式和六

12、种标题格式，以及段落缩进和列表形式。8.2.5插入表格表格不仅可以有序的排列数据，还可以精确地定位文本、图像及网页中的其他元素，成为网页排版布局不可或缺的工具。1、表格的组成：Dreamweaver中的表格包括3个基本组成部分：行、列、单元格。2、表格的建立：执行菜单【插入】|【表格】命令可以插入表格。【行数】、【列数】设置插入表格的行和列的数量。【边框粗细】设置表格边框线的粗细，以像素为单位。【单元格边距】设置单元格中的内容与单元格边框线之间的距离，以像素为单位，默认为“3像素”。【单元格间距】设置两个单元格之间的距离，以像素为单位，默认为“3像素”。8.2.5插入表格（续）3、选择表格及表

13、格元素：（1）选择整个表格：单击表格中任意一个单元格的边框线（2）选择行与列：将鼠标置于某行的最左边或某列的最上方的边框线时，单击鼠标。（3）选择单元格：将鼠标指针定位到某个单元格内相当于选中该单元格；按住【Ctrl】键单击欲选择的单元格可以选择不连续的多个单元格。8.2.5插入表格（续）4、设置表格属性：选中表格之后，可以设置表格的属性。【表格Id】可以为表格命名，【行】、【列】设置表格的行数和列数，【填充】设置单元格中内容与边框线之间的距离，【间距】设置单元格之间的距离，【边框】设置表格边框线的宽度，【对齐】设置整个表格在页面中的对齐方式，8.2.5插入表格（续）5、设置行、列、单元格属性

14、：选中行、列或单元格，可以设置行、列或单元格的属性【水平】、【垂直】设置单元格中的内容水平与垂直方向的对齐方式，【宽】、【高】设置行、列或单元格的宽度和高度，单元格宽度和高度的调整会使整列或整行同时调整，“”按钮可以将所选的多个相邻单元格合并为一个，“”按钮，可以将一个单元格拆分成多个单元格。6、增加或删除行和列：8.2.6 插入图像Dreamweaver 8支持网页中广泛使用的JPG和GIF格式的图像文件，这两种格式的文件经过了压缩处理，文件所占空间较小，有利于网上传输。1、添加图片：将光标定位到插入点，然后执行菜单【插入】|【图像】命令，选择要插入的图像。8.2.6 插入图像（续）2、编辑

15、图像：选择图像，【属性】面板会显示图像的属性设置：【源文件】：指定图像的地址，应为相对路径的形式显示。【链接】：为整张图像输入超级链接的地址。【替换】：设置图像的提示信息，无法显示图像时可以在图像占位符中显示该信息。【地图】：可以为图像的不同位置设置不同的超级链接。【垂直边距】、【水平边距】：可以设置图像在垂直方向和水平方向与其他元素之间的空白间距，以像素为单位。3、设置背景图像：执行菜单【修改】|【页面属性】命令，单击其中的【背景图像】选项右侧的【浏览】按钮，可以选择图像文件作为网页的背景图像。8.2.7 创建超链接超级链接是网页中最为重要的部分。超级链接改变了按顺序浏览内容的传统方式，实现

16、了“点到点”浏览。1、链接到文档：链接到本网站的其他页面。选择需要链接的文字或图像，单击【属性】面板中【链接】文本框后的“”按钮，选择要链接的文档后。2、链接到其他网站：链接到其他网站。在【链接】文本框中输入链接网站的域名。3、链接到E-Mail邮箱：链接到指定收件人的邮箱地址。在【链接】文本框中输入“mailto：邮箱地址”。电子邮箱的地址必须以标准格式书写，应为“用户名邮件服务器名”。8.2.7 创建超链接（续）4、空链接：暂时又不链接到任何网站或页面，又需要超级链接效果。在【链接】文本框中输入“#”。5、锚记链接：在本文档中快速定位。（具体操作参考教材）8.2.7 创建超链接（续）如需要

17、修改链接文字的样式显示，可以执行菜单【修改】|【页面属性】命令，选择【链接】进行调整。【链接字体】、【大小】分别设置超级链接文字的字体和字号；【链接颜色】设置超级链接文字的默认颜色；【已访问链接】设置已经点击过的超级链接文本颜色；【变换图像链接】设置鼠标指向超级链接文字时的文本的颜色；【活动链接】设置当前链接（在链接文字上按下鼠标左键）时文本的颜色；【下划线样式】设置超级链接文字下划线的显示和隐藏。8.2.8 创建框架框架的作用是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页。使用框架技术不仅可以方便用户浏览，节省页面空间，还可以使整个网站页面保持统一的风格。框架由框架集和子框架

18、组成。框架集是子框架的集合，它定义了子框架的数量、每个子框架的大小、载入子框架的方式等属性。子框架是指在框架集中显示的网页，只有将所有的子框架网页都创建了，在浏览器中才会正确地显示出框架页面框架的创建和使用参考教材。8.2.9 播放多媒体对象1、播放声音：声音是网页中经常使用的元素，MIDI音乐常被用在网页中。插入音乐的方法有两种：（具体操作参考教材）利用利用HTML语句插入背景音乐：语句插入背景音乐：利用利用【行为行为】面板，插入声音：面板，插入声音：8.2.9 播放多媒体对象（续）2、播放Flash动画：插入Flash动画：执行菜单【插入】|【媒体】|【Flash】命令，选择要插入的Fla

19、sh影片文件。插入后的Flash动画在网页中只显示占位符，而不显示内容。Flash动画的属性：【Flash文本框】：输入当前Flash影片的名称。【重设大小】：将Flash影片恢复成初始大小。【循环】：选择此项，将循环重复的播放Flash影片。【自动播放】：选择此项，将在浏览器打开该网页时自动开始播放Flash影片。8.2.9 播放多媒体对象（续）控制Flash影片播放：在Flash的【属性】面板中勾选【循环】和【自动播放】两个复选框后，Flash影片会在浏览器打开网页时自动的循环播放，可以利用【行为】面板控制Flash影片的播放和暂停（具体操作参考教材）。8.2.10网站的发布与测试 1、网

20、页预览：网页编辑完成后，如果想在浏览器中预览网页的内容，可以按【F12】键。2、检查链接错误执行菜单【站点】|【检查站点范围的链接】命令，可以检查链接情况。3、发布网站：网站的发布实际上就是将网站文件夹中的所有内容复制到服务器上。局域网的用户可以直接在服务器上管理站点，采用虚拟主机或服务器托管的方式，在Internet上发布网站的用户，则需要将网页上传至远程服务器端。8.2.11 网页制作实例【实例实例8-2-18-2-1】表格的特殊应用表格的特殊应用1、细线表格：（具体操作见教材）1像素边框的表格 细线表格图8-2-51 两种边框表格对比2、1像素分割条：（具体操作见教材）8.2.11 网页制作实例（续）【实例实例8-2-28-2-2】动听网页（具体操作见教材）动听网页（具体操作见教材）8.2.11 网页制作实例(续)【实例实例8-2-38-2-3】框架应用（具体操作见教材）框架应用（具体操作见教材）8.3 本章小结本章中主要介绍网络的基本知识，网站建设的主要步骤，以及使用Dreamweaver 8建立多媒体网站的方法。讲解了在Dreamweaver 8中建立本地站点、创建网页文档以及在网页中插入文本、表格、图片、超级链接、框架、声音、动画等多媒体对象的方法，利用实例加深了读者对网页制作过程的认识。利用本章中讲解的内容可以制作简单的多媒体网站。