《多媒体技术与应用》第8章网络多媒体技术

1、多媒体技术与应用第8章网络 多媒体技术 第八章 网络多媒体技术 本章主要介绍WWW站点设计的基本知识； 多媒体技术与应用第8章网络 多媒体技术 第八章 网络多媒体技术 8.1 网站设计基本知识 8.2 Dreamweaver 8简介 8.3 本章小结 多媒体技术与应用第8章网络 多媒体技术 8.1 网站设计基本知识 Internet与Web技术 多媒体技术与应用第8章网络 多媒体技术 Internet与Web技术 Internet是全球范围内的计算机组成的信息网络， 又被称为国际互联网。 Internet的前身是由美国的军用实验网络APRAnet （阿帕网）。 随着TCP/IP通信协议的成功研

2、制，使不同品牌、 不同操作系统的计算机之间可以实现互联， 目前有上亿台计算机和几十亿个用户在使用 Internet。 多媒体技术与应用第8章网络 多媒体技术 Internet与Web技术（续） Web是World Wide Web的简称，因此又被称为WWW，中文译为万维 网； 是一个建立在Internet基础上的网络化超文本传输系统。 构成Web体系结构的基本元素包括：Web服务器、Web浏览器、HTTP 协议、HTML语言以及URL地址。 Web服务器：这里指一种软件系统，如Windows 2000中的Internet 信息服务（IIS）Web服务器对数据进行加工、处理，然后将结果 返回给浏

3、览器，浏览器便看到了具体的网页。 Web浏览器：用于显示网站上的信息。浏览器安装在客户端，能 够理解多种协议，如HTTP、FTP，也能理解多种文档格式，如 TEXT、HTML、JPEG、XML等格式的文档。浏览器有许多种， 如Netscape Navigator、Microsoft Internet Explorer（即IE）、 Mozilla Firefox等等。 多媒体技术与应用第8章网络 多媒体技术 Internet与Web技术（续） HTTP（超文本传输协议）：是一种在Web服务器和Web客户之间 传输Web页面的通信协议，它是一种请求/应答式的协议。它是建 立在TCP/IP之上的应用

4、协议，是Web上最常用、最重要的协议。 HTML（超文本标记语言）：是一种用来制作网络中超级文本文 档的简单标记语言。它是在文本文件的基础上加上一系列标记。 URL（Uniform Resource Locator）：统一资源定位器，即人们常 说的网址。它用来指定网上资源所在的位置和获取资源的方式。 其统一格式为：协议名称：/主机域名或IP地址/路径/文件名。 多媒体技术与应用第8章网络 多媒体技术 1、需求分析、确定主题： 需求分析是做好网站设计与规划的前提工作。设计者要了解网站 的服务群体，这包括网站的拥有者和访问者。 网站的主题只能有一个，主题的确定应当短小而精要。 2、域名注册： 注册

5、域名是在因特网上建立任何服务的基础。 域名采用层次结构，每一层构成一个子域名，子域名之间用圆点 隔开。 域名的选择要简短、切题、通俗，这样才会给用户留下深刻的印 象。 在域名注册之前，应先到InterNIC和CNNIC查询该域名是否已经被 别人抢先注册了。 多媒体技术与应用第8章网络 多媒体技术 3、设立主机： 主机必须是一台服务器级的计算机，并且要用专线或其它形式24 小时与互联网相连。 可以根据投入资金的多少和信息流量的大小选择虚拟主机或服务 器托管等方式。 4、规划网站内容并制作网页： 要先画出网页的设计结构草图。 草图要直观，网站的首页内容、栏目名称以及各栏目网页的数量 在草图中一目了

6、然。 根据设计草图，创建网站的基本框架，建立相应的文件夹，设计 首页和各栏目页面。 多媒体技术与应用第8章网络 多媒体技术 5、网站测试： 当把多张网页整合成网站后，要对整个网站进行测试，看其是否 能够正常运行，并将其中的运行错误加以修改。 主要的测试内容包括：功能测试、性能测试、安全性测试、稳定 性测试、浏览器兼容性测试、链接测试等。 6、网站发布与推广： 当网站经过测试可以正常运行后，就可以发布到Internet上。 网站发布成功后，还要展开一系列的推广活动，提高网站知名度， 提升网站的访问量。 多媒体技术与应用第8章网络 多媒体技术 7、网站维护与更新： 网站维护与更新是网站建设中极其重

7、要的部分，也是最容易被忽 略的部分。 严格来说，每一个站点都应该由专业人员定期更新维护。 多媒体技术与应用第8章网络 多媒体技术 8.2 Dreamweaver 8简介 多媒体技术与应用第8章网络 多媒体技术 图 8-2-1 Dreamweaver 8操作界面 多媒体技术与应用第8章网络 多媒体技术 1、标题栏：显示当前正在编辑的网页文档的文件名。 2、菜单栏：包含Dreamweaver 8的所有操作命令。 3、文档工具栏：提供文档操作的常用命令， 【代码】表示仅在“文档窗口”中显示HTML源代码视图， 【拆分】表示同时显示HTML源代码视图和设计视图， 【设计】是系统默认设置，表示在“文档窗

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

9、1、属性面板：在“文档窗口”中选择某个元素，显示该元 素的相关属性。 多媒体技术与应用第8章网络 多媒体技术 创建本地站点的步骤。（具体参考教材） 1、创建文件夹，收集网页素材： 2、打开站点定义对话框： 3、为站点起名字： 4、选择服务器技术： 5、设置站点文件编辑方式： 6、选择远程服务器连接方式： 7、进行站点设置总结： 站点定义结束后，【文件】浮动面板中会显示出 当前站点的文件夹及文件信息。 多媒体技术与应用第8章网络 多媒体技术 在Dreamweaver中编辑的网页通常被称为文档，文档的创建、存储和文 档页面属性的设置是制作网页最基本的操作。 1、创建空白文档，可以采用下面两种方法：

10、 在【起始页】的【创建新项目】一栏中选择要创建的文档类型， 执行菜单【文件】|【新建】命令，选择需要创建的文档类型。 2、存储文档： 执行菜单【文件】|【保存】命令，或按【Ctrl+S】组合键便可以进 行文档存储。 如果要保存的文档为网站的“首页”，则应将文档保存在站点根文 件夹下，而且文件名必须为“index.htm”或“default.htm”中的一个。 如果保存的文档为网站中的普通页面，可以将文档存放到“html”子 文件夹下，文件主名可以任意（不能用汉字），文件扩展名应为 “.htm”。 多媒体技术与应用第8章网络 多媒体技术 3、文档的页面设置： 执行菜单【修改】|【页面属性】命令，

11、或在【属性】面板中单击 【页面属性】按钮，可以打开【页面属性】对话框，对网页进行 设置。 多媒体技术与应用第8章网络 多媒体技术 1、添加文本： 可以直接在文档窗口中输入文本，也可以粘贴其他网页或word文 档中的文本。 按【回车】键会结束一个段落的输入，并且插入一个空行。按 【shift+回车】组合键会换行但不结束当前段落。 2、设置文本大小： 在【属性】面板的【大小】选项改变文本的大小。 字体默认单位为“像素”。 3、设置字体： 在【属性】面板【字体】下拉列表中可以设置所选文本的字体。 “默认字体”依据操作系统环境而不同，对于简体中文环境， “默认字体”为宋体。 最好不要使用特殊的字体，如

12、果确实需要可以将特殊字体的文字 保存为图像格式。 多媒体技术与应用第8章网络 多媒体技术 4、改变文本颜色： 网页中的文本颜色采用RGB的颜色体系。 5、对齐文本： 包括四种对齐方式。 6、段落的格式： 包括已经设置好的段落格式和六种标题格式，以及段 落缩进和列表形式。 多媒体技术与应用第8章网络 多媒体技术 表格不仅可以有序的排列数据，还可以精确地定位文本、图像及网页 中的其他元素，成为网页排版布局不可或缺的工具。 1、表格的组成： Dreamweaver中的表格包括3个基本组成部分：行、列、单元格。 2、表格的建立： 执行菜单【插入】|【表格】命令可以插入表格。 【行数】、【列数】设置插入

13、表格的行和列的数量。 【边框粗细】设置表格边框线的粗细，以像素为单位。 【单元格边距】设置单元格中的内容与单元格边框线之间的距离， 以像素为单位，默认为“3像素”。 【单元格间距】设置两个单元格之间的距离，以像素为单位，默 认为“3像素”。 多媒体技术与应用第8章网络 多媒体技术 3、选择表格及表格元素： （1）选择整个表格：单击表格中任意一个单元格的边框线 （2）选择行与列：将鼠标置于某行的最左边或某列的最上方的边 框线时，单击鼠标。 （3）选择单元格：将鼠标指针定位到某个单元格内相当于选中该 单元格；按住【Ctrl】键单击欲选择的单元格可以选择不连续的多 个单元格。 多媒体技术与应用第8章

14、网络 多媒体技术 4、设置表格属性：选中表格之后，可以设置表格的属性。 【表格Id】可以为表格命名， 【行】、【列】设置表格的行数和列数， 【填充】设置单元格中内容与边框线之间的距离， 【间距】设置单元格之间的距离， 【边框】设置表格边框线的宽度， 【对齐】设置整个表格在页面中的对齐方式， 多媒体技术与应用第8章网络 多媒体技术 5、设置行、列、单元格属性： 选中行、列或单元格，可以设置行、列或单元格的属性 【水平】、【垂直】设置单元格中的内容水平与垂直方向的对齐 方式， 【宽】、【高】设置行、列或单元格的宽度和高度，单元格宽度 和高度的调整会使整列或整行同时调整， “ ”按钮可以将所选的多个

15、相邻单元格合并为一个， “ ”按钮，可以将一个单元格拆分成多个单元格。 6、增加或删除行和列： 多媒体技术与应用第8章网络 多媒体技术 Dreamweaver 8支持网页中广泛使用的JPG和GIF格式的图像文件， 这两种格式的文件经过了压缩处理，文件所占空间较小，有利于网上 传输。 1、添加图片： 将光标定位到插入点，然后执行菜单【插入】|【图像】命令，选 择要插入的图像。 多媒体技术与应用第8章网络 多媒体技术 2、编辑图像： 选择图像，【属性】面板会显示图像的属性设置： 【源文件】：指定图像的地址，应为相对路径的形式显示。 【链接】：为整张图像输入超级链接的地址。 【替换】：设置图像的提示

16、信息，无法显示图像时可以在图像占 位符中显示该信息。 【地图】：可以为图像的不同位置设置不同的超级链接。 【垂直边距】、【水平边距】：可以设置图像在垂直方向和水平 方向与其他元素之间的空白间距，以像素为单位。 3、设置背景图像： 执行菜单【修改】|【页面属性】命令，单击其中的【背景图像】 选项右侧的【浏览】按钮，可以选择图像文件作为网页的背景图 像。 多媒体技术与应用第8章网络 多媒体技术 超级链接是网页中最为重要的部分。 超级链接改变了按顺序浏览内容的传统方式，实现了“点到点”浏览。 1、链接到文档： 链接到本网站的其他页面。选择需要链接的文字或图像，单击【属 性】面板中【链接】文本框后的“

17、”按钮，选择要链接的文档后。 2、链接到其他网站： 链接到其他网站。在【链接】文本框中输入链接网站的域名。 3、链接到E-Mail邮箱： 链接到指定收件人的邮箱地址。在【链接】文本框中输入“mailto： 邮箱地址”。 电子邮箱的地址必须以标准格式书写，应为“用户名邮件服务器 名”。 多媒体技术与应用第8章网络 多媒体技术 4、空链接： 暂时又不链接到任何网站或页面，又需要超级链接效果。在【链 接】文本框中输入“#”。 5、锚记链接： 在本文档中快速定位。（具体操作参考教材） 多媒体技术与应用第8章网络 多媒体技术 如需要修改链接文字的样式显示，可以执行菜单【修改】|【页面属性】 命令，选择【

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

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

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