第8章 多媒体网页制作.

Presentation on theme: "第8章 多媒体网页制作."— Presentation transcript:

1 第8章 多媒体网页制作

2 学习目标: 1.了解Dreamweaver 8.0标准工作界面各个组成部分的名称和主要功能； 2.学会创建和管理本地站点的基本步骤和方法； 3.了解页面设置的主要内容和操作方法； 4.掌握利用表格进行页面布局的基本技能； 5.掌握向页面添加文本、图像、音频、视频的基本技能和不同方法，并能设置各种媒体的相关属性和常用参数； 6.掌握向页面插入Flash动画和Flash对象的基本方法，并能设置其相关属性和常用参数； 7.掌握向页面插入Shockwave动画、Java Applet应用小程序、ActiveX控件、插件、Flash元素的基本方法，并能设置它们的相关属性和常用参数。

3 8. 1 Dreamweaver 8. 0的工作界面 和其它应用程序有所不同，Dreamweaver 8

4 图8-1

5 8.2本地站点的创建与管理 站点的概念 Dreamweaver站点提供一种组织所有与Web 站点关联文档的方法，它的组成根据开发环境和所开发的Web站点类型的不同而有所不同，主要由以下三个部分组成： （1）本地文件夹 放置在本地硬盘上的网站叫做“本地站点”。用于存储站点所需要的各种页面元素文件的文件夹就是本地文件夹。

6 （2）远程文件夹 放在Web 服务器计算机上的文件夹叫做远程文件夹，把对应的站点叫做“远端站点”。 （3）测试服务器文件夹 Dreamweaver 用来处理动态页的文件夹。用来管理和提供动态内容的生成和显示。

7 8.2.2本地站点的创建 Dreamweaver 8.0实际上为用户提供了两种站点的创建办法： 一是根据向导创建； 二是根据用户的实际需求进行高级设定创建。

8 根据向导创建一个本地站点的步骤： （1）单击“站点”菜单，选择“新建站点”，弹出站点定义对话框如图8-2所示。输入站点名称和地址后，单击“下一步”按钮。
图 8-2

9 （2）接下来将弹出如图8-3所示的对话框，提示选择当前编辑的站点是否需要各种服务器技术，如ASP、ASP.NET、JSP、PHP等。
图 8-3

10 （3）选择在开发过程中使用文件的方式（在本地计算机上还是在WEB服务器上进行编辑）以及文件存储的位置，如图8-4所示。
图 8-4

11 （4）设置网站连接到远程服务器的方式，如图8-5所示。
图 8-5

12 （5）最后显示新建站点所包含的基本设置对话框，包括本地信息，远程信息和测试服务器的设置，如图8-6所示。单击“完成”，至此就完成了一个新站点的创建。同时在右侧的文件面板上就出现了刚才建立的站点文件夹，如图8-7所示。 图 8-7 图 8-6

13 8.2.3本地站点的管理 Dreamweaver 8.0还为用户提供了很好的管理站点服务，在这里可以直接新建站点，也可以对现有的站点进行编辑、复制和删除，还可通过已建立的站点定义文件直接进行导入和导出操作。可以通过“站点”菜单下的“管理站点”子菜单完成该项操作，其对话框如图8-8所示。 图 8-8

14 实际上管理站点通常采用把网站中的各种文件分门别类存储的方法，可以在文件面板当前站点所在的文件夹上单击右键进行文件夹的新建、删除、拷贝、遮盖等各项操作。这里我们建立几个分别用来存放常见网页媒体元素的文件夹，如图8-9所示。 图 8-9

15 8.3页面设计和布局 页面设置 1.文件头内容的设置 文件头内容在浏览器中是不可见的，但却携带着网页的重要信息，如关键字、作者版权等描述性文字信息。还可以实现一些非常重要的功能，如自动刷新功能等。文件头内容的设置包含META、关键字、说明、刷新、基础和链接六项。

16 文件头内容中关键字设置的基本步骤： （1）启动Dreamweaver 8. 0并新建一个文档，将其保存为“index
文件头内容中关键字设置的基本步骤： （1）启动Dreamweaver 8.0并新建一个文档，将其保存为“index.html”。 （2）单击插入面板组的下拉菜单按钮，选择“HTML”，再单击按钮，指向“关键字”子菜单，如图8-11所示。 图 8-11

17 （3）接下来会弹出如图8-12所示的关键字对话框，在其中输入相应的关键字即可。
图 8-12

18 2.设置页面属性 页面属性的设置可以确定当前页面的外观、链接、标题、标题/编码和跟踪图像等的基本信息和格式，比如：默认字体的类型、大小、颜色、背景图像及颜色、页面边框的宽度、标题名称、链接颜色和字体等。 页面属性的设置和更改可以用两种方法实现：一是单击属性面板上的“页面属性”按钮（如图8-13所示），在弹出的页面属性对话框（如图8-14所示）中来设置；另一种是通过菜单“修改|页面属性”启动页面属性对话框来设置。 图 8-13 图 8-14

19 8.3.2表格的插入 表格是网页设计与制作中非常重要的元素，主要用来将各种媒体表达元素如文本、图片、表单、Flash等整齐划一的显示在页面上，对页面排版具有重要的意义。使用表格布局页面操作灵活，而且具有较好的兼容性。

20 1.表格的插入及属性设置 （1）在“index.html”文档窗口单击鼠标，确定表格插入点。 （2）单击插入面板组的常用工具栏，如图8-16所示，单击插入表格图标。
图 8-16

21 （3）在弹出的表格属性对话框中设置如图8-17所示的参数。 （4）单击“确定”。
（3）在弹出的表格属性对话框中设置如图8-17所示的参数。 （4）单击“确定”。 图 8-17

22 2.设置表格属性 （1）通过单击插入面板组中的布局按钮，切换布局模式到扩展模式，这样可以使被设置为0的表格边框及单元格等可视化程度增加，方便操作，但实际浏览时不会有边框。 （2）通过鼠标或者标签选择器的“table”标签选择相应的表格，在对应的属性面板设置或者更改表格的属性，如图8-18所示。 图 8-18

23 ①“表格Id”用来为当前选定的表格命名。 ②“行”、“列”、“宽”、“高”分别用来设定表格的行数、列数、宽度和高度。 ③“填充”和“间距”分别用来设定表格单元格的边距和间距。 ④“对齐”和“边框”分别用来设定表格的对齐方式和边框大小。 ⑤“背景颜色”、“边框颜色”和“背景图像”分别用来设定表格的背景颜色、边框颜色和背景图像。 ⑥分别用来清除列宽和行宽以及将表格宽度和高度在百分比和像素间切换。

24 8.3.3插入图像占位符 图像占位符是在插入真正的图像之前用来起替代作用的，尤其在进行页面布局的时候是非常有用的。 （1）定位图像占位符要插入的位置。 （2）单击插入面板组中常用工具栏的插入图像占位符图标，弹出对话框如图8-19所示。 （3）输入各项参数如图8-19所示，单击“确定”。 图 8-19

25 8.4插入多媒体内容 插入文本内容 1.插入文本 文本可以直接在单元格内输入，也可以从其它文本文件中拷贝。 （1）在单元格内单击，确定文本插入的位置。 （2）按“Ctrl+C”复制文本，然后按“Ctrl+V”完成粘贴。文本就被插入到相应的位置了，并且随着文本的现有属性可能扩展单元格。 （3）在属性面板中设置文本的属性。

26 2.插入导航条文本 （1）在创建的单元格内单击，输入“导航条文本”字样。 （2）在创建表格的单元格内单击，输入导航文本内容。 （3）在属性面板中设置文本的属性。

27 3.为文本创建链接 （1）拖动鼠标选择要创建链接的文本。 （2）单击链接列表框后面的文件夹图标，选择链接文件的名称，然后单击“确定”，如图8-21所示。
图 8-21

28 8. 4. 2插入图像 图像是网页制作的重要元素之一，可以美化页面，更重要的是可以携带更加形象直观的信息。 1
8.4.2插入图像 图像是网页制作的重要元素之一，可以美化页面，更重要的是可以携带更加形象直观的信息。 1.通过替换图像占位符插入图像 （1）双击图像占位符，弹出选择图像源文件对话框如图8-22所示。 （2）选择“digital_02.JPG”文件，单击“确定”。 图 8-22

29 2.通过“插入”菜单插入图像 （1）在单元格上单击，确定图像插入的具体位置。 （2）单击“插入|图像”菜单，弹出“选择图像源文件”对话框，选择“ima_33.gif”文件，单击“确定”，图像即被插入。

30 3.从文件面板中直接拖曳插入图像 （1）单击单元格，确定图像拖曳的具体位置。 （2）在窗口右侧的浮动面板组中选择文件面板，双击或者单击“imge”文件夹前面的“+”号，展开该文件夹，如图8-23所示。 （3）选择“jiawa.jpg”图像文件，按住鼠标左键拖拽到单元格中松开。 图 8-23

31 4.从资源面板中插入图像 （1）单击定位图像插入点的位置。 （2）点击窗口右侧文件面板的“资源”选项卡并通过其左侧的图像视图图标切换到图像资源，如图8-24所示。 （3）选择要插入的图像文件“p2p.gif”，利用鼠标拖动操作将图像插入，或者使用资源页签下面的“插入”命令按钮完成图像的插入。 图 8-24

32 8.4.3插入音频 在网页中插入音频常见的方式可以说有三种： ◆手写代码添加背景音乐; ◆链接到音频文件; ◆嵌入音频文件。
8.4.3插入音频 在网页中插入音频常见的方式可以说有三种： ◆手写代码添加背景音乐; ◆链接到音频文件; ◆嵌入音频文件。

33 1. 手写代码添加背景音乐 （1）打开我们前面编辑的文件“index
1.手写代码添加背景音乐 （1）打开我们前面编辑的文件“index.html”。 （2）切换视图到“代码”视图，找到</body>标记（可以通过Ctrl+F快捷键或者菜单“编辑/查找和替换”快速查找），并将光标定位在其之前。 （3）在光标的位置写下代码<bgsound src=“midi/zdan.mp3”>，如图8-25所示。 （4）按下F12键试听刚才添加的背景音乐效果。 如果需要设置背景音乐的其它参数比如循环、延迟、平衡、音量属性还可以继续编写代码。 图 8-25

34 2.链接到音频文件 （1）选择用来链接音频文件的文本、图元或者其他对象。 （2）在对应属性面板的“链接”列表中输入音频文件的路径和名称，或者通过“浏览”按钮直接选择即可。

35 3. 嵌入音频文件 （1）打开我们前面编辑的文件“index
3.嵌入音频文件 （1）打开我们前面编辑的文件“index.html”。 （2）单击单元格将嵌入音频媒体插件的位置定位。 （3）单击插入面板组常用工具栏中的“媒体”图标，选择“插件”，如图8-26所示。 图 8-26

36 （4）在弹出的选择文件对话框中选择文件“zdan
（4）在弹出的选择文件对话框中选择文件“zdan.mp3”，然后单击“确定”。 （5）此时用于嵌入音频媒体插件的图标已显示在当前单元格中，在属性面板中定义其宽度和高度。 （6）按F12预览其效果，在浏览器中可能会弹出“限制此文件显示”的字样，在“单击此处查看选项…”处单击选择“允许阻止的内容”如图8-27所示，即可显示嵌入的音频播放器，如图8-28所示。 图 8-27 图 8-28

37 8. 4. 4插入视频 在网页中常见的视频有两种：即Flash视频和非Flash视频。 1
8.4.4插入视频 在网页中常见的视频有两种：即Flash视频和非Flash视频。 1.在网页中插入Flash视频 （1）打开前面制作的“index.html”文件，在单元格单击确定插入点的位置。 （2）点击插入面板组常用工具栏的“媒体”按钮，选择“Flash Video”，如图8-29所示。 图 8-29

38 （3）在弹出的“插入Flash视频”对话框中做如图8-30所示的设置，然后单击“确定”。
图 8-30

39 ①在“视频类型”列表框中有“累进式下载视频”和“流视频”两种类型。“累进式下载视频”将 Flash 视频文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，渐进式下载允许在下载完成之前就开始播放视频文件。“流视频”对 Flash 视频内容进行流式处理，并在一段很短时间的缓冲（可确保流畅播放）后在Web页上播放Flash 视频内容。但要在Web页上启用流视频，站点访问用户必须具有访问 Macromedia Flash Communication Server 的权限。

40 ②在“URL”列表框右侧单击“浏览”选择插入的Flash视频文件。 ③在“外观”列表框中点击右侧的下拉菜单按钮，选择Flash视频组件的外观，同时在下面可以设定其宽度和高度以及是否自动播放和自动重新播放属性，这些也可以在属性面板中设置。 ④勾选检测用户是否拥有查看 Flash 视频所需的正确 Flash Player 版本，并可以在消息列表框中输入提示和询问信息。

41 2.插入非Flash视频 在页面中插入非Flash视频的主要方法有两种，即链接到视频和嵌入视频 （1）链接到视频 ①选择用来链接到视频文件的文本或者其它对象。 ②在对应的属性面板上单击“链接”列表右侧的文件夹，选择视频文件即可。 这种插入视频的方式可以使用户具有较高的可控性和选择性。

42 （2）嵌入视频 ①在文档窗口中单击定位嵌入视频文件的位置。 ②单击插入面板组常用工具栏中的“媒体”图标，选择“插件”。 ③在弹出的选择文件对话框中选择文件“bsztyd.mpg”，然后单击“确定”。

43 ④此时用于嵌入视频媒体插件的图标已显示在单元格中，在属性面板中定义其宽度和高度。 ⑤保存页面并按F12预览其效果。 同嵌入音频文件一样，这种方式将视频文件直接并入页面中，但需访问站点的用户具有适当视频组件插件才可以播放视频。

44 8.4.5插入Flash动画及对象 1.插入Flash动画 （1）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“Flash”，如图8-31所示。
图 8-31

45 （2）在打开的“选择文件”属性对话框中选择要插入的Flash动画文件“qxpaio_0312[1]
（2）在打开的“选择文件”属性对话框中选择要插入的Flash动画文件“qxpaio_0312[1].swf”，单击“确定”。 （3）在属性面板中设置Flash动画的属性，如图8-33所示。 图 8-33

46 ①可以在图8-33所示的左上侧的文本框中为该Flash动画命名。 ②“宽”和“高”用来设置Flash动画的宽度和高度，直接输入数值，单位为像素。 ③“文件”文本框用来设置Flash动画的路径和名称。 ④“循环”和“自动播放”复选框用来设置Flash动画是否循环和自动播放。 ⑤“垂直边距”和“水平边距”用来设置Flash动画和页面其它对象间的距离。

47 ⑥“品质”和“比例”分别用来设置Flash动画的播放质量和视图比例，可以点击下拉菜单按钮进行设定。 ⑦“对齐”和“背景颜色”分别用来设置Flash动画的对齐方式和背景色彩。 ⑧单击“编辑”按钮可以启动Flash重新编辑Flash动画，单击“重设大小”使Flash动画恢复到原始大小。 ⑨“播放”按钮用来在文档窗口预览Flash动画，该按钮可以随需求在“播放”与“停止”间转换。 ⑩“参数”按钮用来设置Flash动画的相关属性，如透明属性等。

48 2. 插入Flash按钮对象 可以在Dreamweaver 8
2.插入Flash按钮对象 可以在Dreamweaver 8.0文档中创建、插入和修改Flash按钮，无需单独启动Flash应用程序。Flash按钮对象是基于Flash模板的可更新按钮，设计开发人员可以自定义Flash按钮对象，并为其添加文本、背景颜色以及指向其它文件的链接等等。

49 在页面中插入Flash按钮对象的步骤如下： （1）将光标定位在要插入Flash按钮的位置。 （2）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“Flash按钮”子菜单。 （3）在弹出的插入Flash按钮对话框中输入各项设置，如图8-34所示。 图 8-34

50 ①“范例”是用来预览当前选择的Flash按钮的最终效果。 ②“样式”是提供Flash按钮的外观。 ③“按钮”文本框用来输入按钮上的文字信息，对应下面的“字体”列表和“大小”可以设定文字的字体和大小。 ④“链接”用来设置Flash按钮的链接，可单击“浏览”按钮查找链接文件。

51 ⑤“目标”用来设置显示链接内容的窗口。 ⑥“背景色”用来设置Flash按钮的背景颜色。 ⑦“另存为”用于设定Flash按钮保存的路径和名称。 （4）在属性面板设定Flash按钮的相关属性，保存页面并按下F12键预览插入的Flash按钮的动画效果。

52 3.插入Flash文本对象 Flash 文本对象支持创建和插入只包含文本信息的SWF 文件。在页面中插入Flash文本对象的操作如下： （1）将光标定位在要插入Flash文本的位置。 （2）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“Flash文本”子菜单。 （3）在弹出的插入Flash文本对话框中输入各项设置，如图8-35所示。 图 8-35

53 ①“字体”、“大小”、“链接”、“目标”、“背景色”和“另存为”属性与Flash按钮对话框中的比较一致，这里不再赘述。 ②在“字体”列表下面可以直接设置Flash文本的加粗、倾斜以及对齐方式。 ③“文本”列表用来输入Flash文本内容。 ④“转滚颜色”用来设置在浏览器中鼠标放在Flash文本上时字体的颜色。 （4）在属性面板设定Flash文本的相关属性，保存页面并按下F12键预览插入的Flash文本对象效果。

54 4.插入Flash Paper Flash Paper可以将一些主流的文档格式（如Office文档，PDF文档，文本文件，网页，FLA文件等）轻松地转换成SWF格式，便于在网络上浏览和打印。

55 8.4.6 插入Shockwave动画 Shockwave 作为Web上交互式多媒体的Macromedia标准，是一种经压缩的格式，使得在Macromedia Director中创建的多媒体文件能够被快速下载，而且可以在大多数常用浏览器中进行播放。

56 插入Shockwave动画的步骤如下： （1）将光标定位在要插入Shockwave动画的位置。 （2）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“Shockwave”子菜单。 （3）在弹出的选择文件对话框中选择Shockwave动画文件的名称“1.swf”，然后单击“确定”按钮。同样插入后的Shockwave并不会在文档窗口中显示内容，而是以Shockwave占位符来显示。 （4）在属性面板设定Shockwave的相关属性，保存页面并按下F12键预览插入Shockwave动画的效果。

57 8.4.7 插入Java Applet Java是一种完全开放的编程语言，通过它可以开发可嵌入Web页中的小型应用程序Applet，它的“交互”性很强，只要有支持Java的浏览器就可以运行。

58 在页面中插入Java Applet的步骤如下： （1）将光标定位在要插入Java Applet的位置。 （2）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“Applet”子菜单。 （3）在弹出的选择文件对话框中选择1个Java Applet小程序，然后单击“确定”按钮，这样就可以在页面中插入1个Java Applet小程序。 （4）选中插入到页面中的Java Applet图标，在属性面板上设置其属性如图8-37所示。 图 8-37

59 ①“代码”列表用来设置这个Java Applet小程序的名称。 ②“基址”文本框用来显示这个Java Applet小程序所在的文件夹。 ③“替换”用来设置当该Java Applet小程序无法正常显示时将显示的替换对象。 （5）单击属性面板的“参数”按钮，打开“参数”对话框，设置参数如图8-38所示。其中，参数名称为图像，参数值为图像文件的实际名称，然后单击“确定”按钮。 图 8-38

60 8.4.8插入ActiveX控件 ActiveX控件是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。Windows系统上的Internet Explorer为ActiveX控件提供了良好的运行环境。

61 在页面中插入ActiveX控件的步骤如下： （1）将光标定位在要插入ActiveX控件的位置。 （2）单击常用工具栏上的按钮，从弹出的下拉菜单中选择“ActiveX”子菜单。 （3）此时在页面中会显示ActiveX控件图标。 （4）选中插入到页面中的ActiveX控件图标，在属性面板上设置其属性如图8-39所示。 图 8-39

62 ①“ClassID”用来为浏览器标识ActiveX控件，可以直接输入一个值或从弹出菜单中选择一个值。在加载页面时，浏览器使用该“类ID”来确定与该页面关联的ActiveX控件所需的ActiveX控件的位置。如果浏览器未找到指定的ActiveX控件，则它将尝试从“基址”指定的位置中下载它。 ②“嵌入”复选框如果勾选就相当于把该ActiveX控件同时设置成了插件。

63 ③“源文件”定义用于如果勾选了“嵌入”选项，将用它来设置插件的数据文件。 ④“基址”用来指定包含该ActiveX控件的路径。如果用户的系统中尚未安装该 ActiveX控件，则浏览器从该路径下载它。如果没有指定“基址”参数且尚未安装相应的 ActiveX控件，则浏览器将无法显示该ActiveX对象。

64 ⑤“替代图像”同样是用来当浏览器无法显示该ActiveX对象时将要显示的图像。注意，只有在取消对“嵌入”选项的选择后才可用此选项。 ⑥“数据”用来指定要加载的ActiveX控件所需的数据文件。

65 8. 4. 9 插入Flash元素 Flash元素文件实际上还是一个Flash SWF文件，只是它可以通过Dreamweaver 8
8.4.9 插入Flash元素 Flash元素文件实际上还是一个Flash SWF文件，只是它可以通过Dreamweaver 8.0自动完成创建，由用户插入的Flash元素可在自定义参数中轻松方便的完成参数设置，参数设置不同则应用程序的功能也就不同，这样就极大地提高了它的可控性和互动性。

66 在页面中插入Flash元素的步骤如下： （1）将光标定位在要插入Flash元素的位置。 （2）单击插入面板组切换到Flash元素工具栏，单击工具栏右侧的小按钮，此时弹出“保存Flash元素”对话框，如图8-40所示。（在Dreamweaver 8.0中内嵌了一个叫做“图像查看器”的Flash元素，还有更多的需要从其网站中下载。） 图 8-40

67 （3）单击文件名列表框并为Flash元素命名，点击“保存”按钮，Flash元素会自动帮用户创建一个SWF文件。 （4）选中插入到页面中的Flash元素图标，在文档窗口右侧的Flash元素面板中设置它的相关参数，每一种Flash元素所需的参数都不是完全一样，如图8-41所示。 （5）保存页面并按下F12键预览插入Flash元素对象效果。 图 8-41

68 习 题 八 1.利用表格制作完成如下图所示的页面布局效果。 2.制作一个页面，在其中嵌入音频和视频文件，并且具有自动循环播放功能。
3.在Dreamweaver 8.0中分别制作Flash按钮和文本对象，并为它们添加链接。 4.利用Dreamweaver 8.0内嵌的Flash元素“图像查看器”制作一个类似于幻灯片放映方式的相册，并为其添加换页效果。