第8章 多媒体网页制作
学习目标
1.了解Dreamweaver 8.0标准工作界面各个组成部分的名称和主要功能； 2.学会创建和管理本地站点的基本步骤和方法； 3.了解页面设置的主要内容和操作方法； 4.掌握利用表格进行页面布局的基本技能；
5.掌握向页面添加文本、图像、音频、视频的基本技能和不同方法，并能设置各种媒体的相关属性和常用参数；
6.掌握向页面插入Flash动画和Flash对象的基本方法，并能设置其相关属性和常用参数；
7.掌握向页面插入Shockwave动画、Java Applet应用小程序、ActiveX控件、插件、Flash元素的基本方法，并能设置它们的相关属性和常用参数。
随着多媒体技术和计算机网络技术的飞速发展，多媒体信息的呈现方式越来越趋于数字化、网络化和集成化。本章我们将通过一个实例，介绍利用Macromedia Dreamweaver 8.0软件将各种多媒体信息表达元素添加到Web页中的基本操作方法和步骤。
8.1 Dreamweaver 8.0的工作界面
启动Dreamweaver 8.0，新建或打开一个文档，进入Dreamweaver 8.0的标准工作界面。和其它应用程序有所不同，Dreamweaver 8.0提供了一个将全部元素集成在一个窗口中显示的布局方式，如图8-1所示。
它的工作界面包括：标题栏、菜单栏、插入面板组、文档工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1
标题栏菜单栏 文档窗口
插入面板组 文档工具栏 属性面板 状态栏 1.标题栏
启动Macromedia Dreamweaver 8.0后，标题栏将显示文字Macromedia Dreamweaver 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2.菜单栏
Dreamweaver 8.0的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
（1）文件：用来管理文件。例如新建、打开、保存、导入、转换、输出打印等。 （2）编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换以及首选参数设置等。
（3）查看：用来管理、切换视图模式以及显示、隐藏工具栏、标尺、网格线等辅助视图功能。
（4）插入：用来插入各种元素，例如图片、多媒体组件、表格、超链接等。 （5）修改：具有对页面属性及页面元素修改的功能，例如表格的插入、单元格的拆分、合并、对齐对象以及对库、模板和时间轴等的修改。
（6）文本：用来对文本的格式化操作等。 （7）命令：包含所有的附加命令项。 （8）站点：用来创建和管理站点。
（9）窗口：用来显示和隐藏控制面板以及各种文档窗口的切换操作。 （10）帮助：联机帮助功能。
浮动面板组
图8-1 Dreamweaver 8.0的工作界面
2
3.插入面板组
插入面板组集成了所有可以在网页中应用的对象，包括“插入”菜单中的选项。插入面板组其实就是图标化了的“插入”菜单命令，如同其它应用软件中的常用工具栏，通过一个个图标化的按钮，使用户可以很容易的加入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素，使各项操作更加简单快捷。
4.文档工具栏
“文档”工具栏中包含各种按钮，它们使用户可以在文档的不同视图间快速切换（如“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的“拆分”视图）。“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
5.文档窗口
“文档”窗口显示编辑文档，是用来对各种网页元素进行编辑操作的主要场所，Dreamweaver 8.0提供了三种不同风格的文档窗口显示模式，用户可以根据需要任选一种视图并且可以随时切换和刷新。其中“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境；“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境；“代码和设计”视图是“设计”视图和“代码”视图的有机结合，提供了可以在单个窗口中同时看到同一文档的“代码”和最终在浏览器中看到的可视化效果功能。
6.属性面板
属性面板用来显示和编辑当前选定页面元素（如文本、图像等）的最常用属性。属性面板的内容因选定的元素不同会有所不同。因为属性面板并不是将所有文档窗口中页面元素的属性加载在面板上，而是根据选择的对象来动态显示其属性。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了文本，那么属性面板就会相应的变成文本的相关属性。
7.状态栏
状态栏用于显示当前编辑文档的其它有关信息。如文档的大小、估计下载时间、窗口大小、缩放比例和标签选择器等。
8.浮动面板组
其它面板如CSS、应用程序、文件、框架、历史记录等可以简称为浮动面板，这些面板根据功能被分成了若干组，它们都可以处在编辑窗口之外，可以使用拓展按钮展开，都可以通过“窗口”菜单中的命令有选择的被打开和隐藏。
3
8.2本地站点的创建与管理 8.2.1站点的概念
Dreamweaver站点提供一种组织所有与Web 站点关联文档的方法，它的组成根据开发环境和所开发的Web站点类型的不同而有所不同，主要由以下三个部分组成：
（1）本地文件夹
要制作一个能被公众浏览的网站，首先需要在本地硬盘上制作这个网站，我们把放置在本地硬盘上的网站叫做“本地站点”。用于存储站点所需要的各种页面元素文件的文件夹就是本地文件夹，此文件夹可以位于本地计算机上，也可以位于网络服务器上。
（2）远程文件夹
网站之所以能够被很多人浏览，就是因为在本地站点的所有文件还可以存储并运行于Web 服务器的计算机上，我们把放在Web 服务器计算机上的文件夹叫做远程文件夹，把对应的站点叫做“远端站点”。
（3）测试服务器文件夹
该文件夹是 Dreamweaver 用来处理动态页的文件夹。测试服务器文件夹用来管理和提供动态内容的生成和显示。
8.2.2本地站点的创建
网站是多个网页组成的集合体，因此在开始制作网站之前首先要对站点内容进行规划，确定站点的基本结构，以使制作和开发工作更加高效。最常用的方法就是把站点中涉及到的各种类型的媒体元素以独立的文件夹存放，以方便管理和维护。
Dreamweaver 8.0实际上为用户提供了两种站点的创建办法：一是根据向导创建；二是根据用户的实际需求进行高级设定创建。这里我们看一下根据向导创建一个本地站点的步骤：
（1）单击“站点”菜单，选择“新建站点”，弹出站点定义对话框如图8-2所示。输入站点名称和地址后，单击“下一步”按钮。
（2）接下来将弹出如图8-3所示的对话框，提示选择当前编辑的站点是否需要各种服务器技术，如ASP、ASP.NET、JSP、PHP等。这里点击选择“否”，然后单击“下一步”。
4
图8-2定义网站名称
（3）然后需要选择在开发过程中使用文件的方式（在本地计算机上还是在WEB服务器上进行编辑）以及文件存储的位置，如图8-4所示。
图8-3定义使用的服务器技术
（4）下面需要设置网站连接到远程服务器的方式，一般我们都是在本地建立完成后通过FTP上传到服务器上，所以选择“无”，如图8-5所示。
图8-4设置编辑方式及文件存储位置
（5）最后显示新建站点所包含的基本设置对话框，包括本地信息，远程信息和测试服务器的设置，如图8-6所示。单击“完成”，至此就完成了一个新站点的创建。同时在右侧的文件面板上就出现了刚才建立的站点文件夹，如图8-7所示。
图8-5设置远程服务器连接方式
5
Dreamweaver 8.0 多媒体网页制作教程
