Dreamweaver 8.0 多媒体网页制作教程.doc

上传人:飞****2 文档编号:54339714 上传时间:2022-10-28 格式:DOC 页数:24 大小:1.55MB
返回 下载 相关 举报
Dreamweaver 8.0 多媒体网页制作教程.doc_第1页
第1页 / 共24页
Dreamweaver 8.0 多媒体网页制作教程.doc_第2页
第2页 / 共24页
点击查看更多>>
资源描述

《Dreamweaver 8.0 多媒体网页制作教程.doc》由会员分享,可在线阅读,更多相关《Dreamweaver 8.0 多媒体网页制作教程.doc(24页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

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

2、计算机网络技术的飞速发展,多媒体信息的呈现方式越来越趋于数字化、网络化和集成化。本章我们将通过一个实例,介绍利用Macromedia Dreamweaver 8.0软件将各种多媒体信息表达元素添加到Web页中的基本操作方法和步骤。8.1 Dreamweaver 8.0的工作界面启动Dreamweaver 8.0,新建或打开一个文档,进入Dreamweaver 8.0的标准工作界面。和其它应用程序有所不同,Dreamweaver 8.0提供了一个将全部元素集成在一个窗口中显示的布局方式,如图8-1所示。它的工作界面包括:标题栏、菜单栏、插入面板组、文档工具栏、文档窗口、状态栏、属性面板和浮动面板

3、组。状态栏属性面板标题栏菜单栏插入面板组文档工具栏文档窗口浮动面板组图8-1 Dreamweaver 8.0的工作界面1.标题栏启动Macromedia Dreamweaver 8.0后,标题栏将显示文字Macromedia Dreamweaver 8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。2.菜单栏Dreamweaver 8.0的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。(1)文件:用来管理文件。例如新建、打开、保存、导入、转换、输出打印等。(2)编辑:用来编辑文本。例如剪切、复制、粘贴、查找、替换以及首选参数设置等。(3)查

4、看:用来管理、切换视图模式以及显示、隐藏工具栏、标尺、网格线等辅助视图功能。(4)插入:用来插入各种元素,例如图片、多媒体组件、表格、超链接等。(5)修改:具有对页面属性及页面元素修改的功能,例如表格的插入、单元格的拆分、合并、对齐对象以及对库、模板和时间轴等的修改。 (6)文本:用来对文本的格式化操作等。(7)命令:包含所有的附加命令项。(8)站点:用来创建和管理站点。(9)窗口:用来显示和隐藏控制面板以及各种文档窗口的切换操作。(10)帮助:联机帮助功能。3.插入面板组插入面板组集成了所有可以在网页中应用的对象,包括“插入”菜单中的选项。插入面板组其实就是图标化了的“插入”菜单命令,如同其

5、它应用软件中的常用工具栏,通过一个个图标化的按钮,使用户可以很容易的加入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素,使各项操作更加简单快捷。4.文档工具栏 “文档”工具栏中包含各种按钮,它们使用户可以在文档的不同视图间快速切换(如“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的“拆分”视图)。“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。5.文档窗口“文档”窗口显示编辑文档,是用来对各种网页元素进行编辑操作的主要场所,Dreamweaver 8.0提供了三种不同风格的文档窗口显示模式,用户可以根据需要

6、任选一种视图并且可以随时切换和刷新。其中“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境;“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境;“代码和设计”视图是“设计”视图和“代码”视图的有机结合,提供了可以在单个窗口中同时看到同一文档的“代码”和最终在浏览器中看到的可视化效果功能。6.属性面板属性面板用来显示和编辑当前选定页面元素(如文本、图像等)的最常用属性。属性面板的内容因选定的元素不同会有所不同。因为属性面板并不是将所有文档窗口中页面元素的属性加载在面板上,而是根据选择的对象来动态显示其属性。

7、例如,当前选择了一幅图像,那么属性面板上就出现该图像的相关属性;如果选择了文本,那么属性面板就会相应的变成文本的相关属性。7.状态栏状态栏用于显示当前编辑文档的其它有关信息。如文档的大小、估计下载时间、窗口大小、缩放比例和标签选择器等。8.浮动面板组其它面板如CSS、应用程序、文件、框架、历史记录等可以简称为浮动面板,这些面板根据功能被分成了若干组,它们都可以处在编辑窗口之外,可以使用拓展按钮展开,都可以通过“窗口”菜单中的命令有选择的被打开和隐藏。8.2本地站点的创建与管理8.2.1站点的概念Dreamweaver站点提供一种组织所有与Web 站点关联文档的方法,它的组成根据开发环境和所开发

8、的Web站点类型的不同而有所不同,主要由以下三个部分组成:(1)本地文件夹要制作一个能被公众浏览的网站,首先需要在本地硬盘上制作这个网站,我们把放置在本地硬盘上的网站叫做“本地站点”。用于存储站点所需要的各种页面元素文件的文件夹就是本地文件夹,此文件夹可以位于本地计算机上,也可以位于网络服务器上。(2)远程文件夹网站之所以能够被很多人浏览,就是因为在本地站点的所有文件还可以存储并运行于Web 服务器的计算机上,我们把放在Web 服务器计算机上的文件夹叫做远程文件夹,把对应的站点叫做“远端站点”。(3)测试服务器文件夹该文件夹是 Dreamweaver 用来处理动态页的文件夹。测试服务器文件夹用

9、来管理和提供动态内容的生成和显示。8.2.2本地站点的创建网站是多个网页组成的集合体,因此在开始制作网站之前首先要对站点内容进行规划,确定站点的基本结构,以使制作和开发工作更加高效。最常用的方法就是把站点中涉及到的各种类型的媒体元素以独立的文件夹存放,以方便管理和维护。Dreamweaver 8.0实际上为用户提供了两种站点的创建办法:一是根据向导创建;二是根据用户的实际需求进行高级设定创建。这里我们看一下根据向导创建一个本地站点的步骤:(1)单击“站点”菜单,选择“新建站点”,弹出站点定义对话框如图8-2所示。输入站点名称和地址后,单击“下一步”按钮。(2)接下来将弹出如图8-3所示的对话框

10、,提示选择当前编辑的站点是否需要各种服务器技术,如ASP、ASP.NET、JSP、PHP等。这里点击选择“否”,然后单击“下一步”。图8-2定义网站名称图8-3定义使用的服务器技术(3)然后需要选择在开发过程中使用文件的方式(在本地计算机上还是在WEB服务器上进行编辑)以及文件存储的位置,如图8-4所示。(4)下面需要设置网站连接到远程服务器的方式,一般我们都是在本地建立完成后通过FTP上传到服务器上,所以选择“无”,如图8-5所示。图8-4设置编辑方式及文件存储位置图8-5设置远程服务器连接方式(5)最后显示新建站点所包含的基本设置对话框,包括本地信息,远程信息和测试服务器的设置,如图8-6

11、所示。单击“完成”,至此就完成了一个新站点的创建。同时在右侧的文件面板上就出现了刚才建立的站点文件夹,如图8-7所示。图8-6完成本地站点定义图8-7文件面板显示新建站点8.2.3本地站点的管理Dreamweaver 8.0还为用户提供了很好的管理站点服务,在这里可以直接新建站点,也可以对现有的站点进行编辑、复制和删除,还可通过已建立的站点定义文件直接进行导入和导出操作。可以通过“站点”菜单下的“管理站点”子菜单完成该项操作,其对话框如图8-8所示。实际上管理站点通常采用把网站中的各种文件分门别类存储的方法,可以在文件面板当前站点所在的文件夹上单击右键进行文件夹的新建、删除、拷贝、遮盖等各项操

12、作。这里我们建立几个分别用来存放常见网页媒体元素的文件夹,如图8-9所示。图8-8管理站点对话框图8-9新建站点子文件夹建立本地站点之后,就可以在Dreamweaver 8.0中创建一个基于该站点的Web页面,并为其添加各种多媒体信息的表达元素。下面我们结合实例介绍如何将各种多媒体信息表达元素添加到Web页面,该页面的最终浏览效果如图8-10所示。图8-10实例效果8.3页面设计和布局8.3.1页面设置现在,我们就开始制作如图8-10所示的Web页面。在开始制作之前,首先要对页面进行总体的设计,主要是文件头内容和页面属性的总体设置。1.文件头内容的设置文件头内容在浏览器中是不可见的,但却携带着

13、网页的重要信息,如关键字、作者版权等描述性文字信息。还可以实现一些非常重要的功能,如自动刷新功能等。文件头内容的设置包含META、关键字、说明、刷新、基础和链接六项。其中,META标签是记录有关当前页面的信息(如字符编码、作者、版权信息或关键字),也可以用来向服务器提供信息,如页面的失效日期、刷新间隔等。关键字用来帮助搜索引擎搜索网页,因此此项设置是比较重要的。这里我们介绍一下文件头内容中关键字设置的基本步骤。(1)启动Dreamweaver 8.0并新建一个文档,将其保存为“index.html”。(2)单击插入面板组的下拉菜单按钮,选择“HTML”,再单击按钮,指向“关键字”子菜单,如图8

14、-11所示。(3)接下来会弹出如图8-12所示的关键字对话框,在其中输入相应的关键字即可。图8-11设置文件头内容关键字图8-12输入关键字2.设置页面属性页面属性的设置可以确定当前页面的外观、链接、标题、标题/编码和跟踪图像等的基本信息和格式,比如:默认字体的类型、大小、颜色、背景图像及颜色、页面边框的宽度、标题名称、链接颜色和字体等。页面属性的设置和更改可以用两种方法实现:一是单击属性面板上的“页面属性”按钮(如图8-13所示),在弹出的页面属性对话框(如图8-14所示)中来设置;另一种是通过菜单“修改|页面属性”启动页面属性对话框来设置。图8-13属性面板中的页面属性按钮图8-14页面属

15、性对话框8.3.2表格的插入表格是网页设计与制作中非常重要的元素,主要用来将各种媒体表达元素如文本、图片、表单、Flash等整齐划一的显示在页面上,对页面排版具有重要的意义。使用表格布局页面操作灵活,而且具有较好的兼容性。下面我们就利用表格实现图8-10所示页面的布局,其布局如图8-15所示。图8-15表格布局效果1.表格的插入及属性设置(1)在“index.html”文档窗口单击鼠标,确定表格插入点。(2)单击插入面板组的常用工具栏,如图8-16所示,单击插入表格图标。图8-16常用工具栏(3)在弹出的表格属性对话框中设置如图8-17所示的参数。图8-17表格属性对话框(4)单击“确定”。这

16、样一个宽度为750像素,边框粗细、单元格边距和间距均为0的1行2列的表格就显示在文档窗口中,同时在属性面板上也会显示出该表格的相关属性。(5)单击文档窗口的其它任意位置取消对当前表格的选择状态,然后执行同样的操作再插入第2和第3个表格,将其行数设为2,列数设为4,其它参数同上。(6)如第5步所做再插入第4个表格,并将其行数设为2,列数设为3,其它参数不变。注意:这里我们使用了4个表格来完成对页面的编排,也可以使用其他表格组合方式来完成排版或者利用嵌套表格的方法来完成,一般情况下如果页面元素比较大的话,应当使用多个表格来完成,因为网页最终浏览时是逐步显示各个表格所包含的元素,这样可以缓解因长时间

17、下载元素导致的页面空白区过大的问题。2.设置表格属性(1)通过单击插入面板组中的布局按钮,切换布局模式到扩展模式,这样可以使被设置为0的表格边框及单元格等可视化程度增加,方便操作,但实际浏览时不会有边框。(2)通过鼠标或者标签选择器的“table”标签选择相应的表格,在对应的属性面板设置或者更改表格的属性,如图8-18所示。图8-18设置表格属性“表格Id”用来为当前选定的表格命名。“行”、“列”、“宽”、“高”分别用来设定表格的行数、列数、宽度和高度。“填充”和“间距”分别用来设定表格单元格的边距和间距。“对齐”和“边框”分别用来设定表格的对齐方式和边框大小。“背景颜色”、“边框颜色”和“背

18、景图像”分别用来设定表格的背景颜色、边框颜色和背景图像。分别用来清除列宽和行宽以及将表格宽度和高度在百分比和像素间切换。(3)如第2步的做法,对其余表格的各项属性进行设置。注意:通过上面的操作我们可以看出,表格的属性设置主要是对表格整体的大小、行列数、行宽和列高以及边框数值和背景颜色等进行设定。这里尤其需要注意行宽和列高的设置有两种单位,分别是百分比和像素,百分比是相对的度量方式,与用户分辨率的设定有一定关系,像素是绝对的度量方式,在不同的分辨率下窗口大小都是一样的。8.3.3插入图像占位符图像占位符是在插入真正的图像之前用来起替代作用的,尤其在进行页面布局的时候是非常有用的。(1)定位图像占

19、位符要插入的位置,单击鼠标定位在第1行第1个单元格。(2)单击插入面板组中常用工具栏的插入图像占位符图标,弹出对话框如图8-19所示。图8-19图像占位符对话框(3)输入各项参数如图8-19所示,单击“确定”。8.4插入多媒体内容8.4.1插入文本内容1.插入文本文本可以直接在单元格内输入,也可以从其它文本文件中拷贝。(1)在创建的第3个表格第1行第3列的单元格内单击,确定文本插入的位置。(2)按“Ctrl+C”复制文本,然后按“Ctrl+V”完成粘贴。此时文本就被插入到相应的位置了,并且随着文本的现有属性可能扩展单元格。(3)在属性面板中设置文本的属性,如图8-20所示。图8-20设置文本属

20、性2.插入导航条文本(1)在创建的第2个表格的第1行第1列单元格内单击,输入“导航条文本”字样。(2)在创建的第2个表格的第2行第1列单元格内单击,输入导航文本内容。(3)在属性面板中设置文本的属性。3.为文本创建链接(1)拖动鼠标选择要创建链接的文本。(2)单击链接列表框后面的文件夹图标,选择链接文件的名称,然后单击“确定”,如图8-21所示。图8-21设置文本链接8.4.2插入图像图像是网页制作的重要元素之一,可以美化页面,更重要的是可以携带更加形象直观的信息。插入图片的方法很多,下面我们就用不同的方式为先前创建的页面添上图像。1.通过替换图像占位符插入图像(1)双击位于顶行第1列的图像占

21、位符,弹出选择图像源文件对话框如图8-22所示。(2)选择“digital_02.JPG”文件,单击“确定”。图8-22选择图像源文件2.通过“插入”菜单插入图像(1)在第3个表格第1行第1列的单元格上单击,确定图像插入的具体位置。(2)单击“插入|图像”菜单,弹出“选择图像源文件”对话框,选择“ima_33.gif”文件,单击“确定”,图像即被插入。3.从文件面板中直接拖曳插入图像(1)单击第3个表格第1行第2列的单元格,确定图像拖曳的具体位置。(2)在窗口右侧的浮动面板组中选择文件面板,双击或者单击“imge”文件夹前面的“+”号,展开该文件夹,如图8-23所示。(3)选择“jiawa.j

22、pg”图像文件,按住鼠标左键拖拽到单元格中松开,下面的操作和通过“插入”菜单完成图像的插入一样,这里不再赘述。4.从资源面板中插入图像(1)单击定位图像插入点的位置在第3个表格第2行第2列的单元格。(2)点击窗口右侧文件面板的“资源”选项卡并通过其左侧的图像视图图标切换到图像资源,如图8-24所示。图8-23展开图像文件夹资源视图切换图标图8-24资源选项卡中的图像文件(3)选择要插入的图像文件“p2p.gif”,利用鼠标拖动操作将图像插入,或者使用资源页签下面的“插入”命令按钮完成图像的插入。注意:以上介绍了在单元格中插入图像的四种方式,其中通过图像占位符插入图像的方法在页面布局中很常用,通

23、过资源面板插入的方式有很多的优势,可以用于在不同的位置快速插入多张图片,基于菜单和插入面板的操作是最常用的方法。8.4.3插入音频在网页中插入音频常见的方式可以说有三种:即手写代码添加背景音乐,链接到音频文件,嵌入音频文件。下面我们就来看看这三种插入方式是如何实现的。1.手写代码添加背景音乐(1)打开我们前面编辑的文件“index.html”。(2)切换视图到“代码”视图,找到标记(可以通过Ctrl+F快捷键或者菜单“编辑/查找和替换”快速查找),并将光标定位在其之前。(3)在光标的位置写下代码,如图8-25所示。图8-25手写代码(4)按下F12键试听刚才添加的背景音乐效果。如果需要设置背景

24、音乐的其它参数比如循环、延迟、平衡、音量属性还可以继续编写代码。2.链接到音频文件(1)选择用来链接音频文件的文本、图元或者其他对象。(2)在对应属性面板的“链接”列表中输入音频文件的路径和名称,或者通过“浏览”按钮直接选择即可。3.嵌入音频文件(1)打开我们前面编辑的文件“index.html”。(2)单击第2个表格第2行第2列的单元格将嵌入音频媒体插件的位置定位在这里。(3)单击插入面板组常用工具栏中的“媒体”图标,选择“插件”,如图8-26所示。图8-26插入插件(4)在弹出的选择文件对话框中选择文件“zdan.mp3”,然后单击“确定”。(5)此时用于嵌入音频媒体插件的图标已显示在当前

25、单元格中,在属性面板中定义其宽度和高度分别为278和74像素。(6)按F12预览其效果,在浏览器中可能会弹出“限制此文件显示”的字样,在“单击此处查看选项”处单击选择“允许阻止的内容”如图8-27所示,即可显示嵌入的音频播放器,如图8-28所示。图8-27显示阻止访问信息图8-28音频播放组件当然,我们也可以通过属性面板上的“参数”按钮或者直接在代码视图中对嵌入的音频播放组件进行诸如:自动播放、循环、隐藏等属性参数的设定。注意:以上介绍的三种常见插入音频的方式各有特点,手写代码的插入方式简单易行,但用户对其的可控性比较差;链接到音频文件的方式是将声音添加到 Web 页面的一种简单而有效的方法。

26、这种集成声音文件的方法可以使用户有选择是否收听该文件的权利,同时也可使文件用于最广范围的受众。嵌入音频将声音直接插入页面中,但对访问站点的用户有一定的要求,只有在用户具有所选声音文件的适当插件后,声音才可以播放。一般这种方式用于访问用户具有自主控制音频(如播放、停止、音量、外观等)需求的时侯。8.4.4插入视频在网页中常见的视频有两种:即Flash视频和非Flash视频,下面我们就来看一下插入视频的基本操作。1.在网页中插入Flash视频(1)打开前面制作的“index.html”文件,在第2个表格第2行第2列的单元格单击确定插入点的位置。(2)点击插入面板组常用工具栏的“媒体”按钮,选择“F

27、lash Video”,如图8-29所示。图8-29插入Flash Video(3)在弹出的“插入Flash视频”对话框中做如图8-30所示的设置,然后单击“确定”。在“视频类型”列表框中有“累进式下载视频”和“流视频”两种类型。“累进式下载视频”将 Flash 视频文件下载到站点访问者的硬盘上,然后播放。但是,与传统的“下载并播放”视频传送方法不同,渐进式下载允许在下载完成之前就开始播放视频文件。“流视频”对 Flash 视频内容进行流式处理,并在一段很短时间的缓冲(可确保流畅播放)后在Web页上播放Flash 视频内容。但要在Web页上启用流视频,站点访问用户必须具有访问 Macromed

28、ia Flash Communication Server 的权限。在“URL”列表框右侧单击“浏览”选择插入的Flash视频文件。在“外观”列表框中点击右侧的下拉菜单按钮,选择Flash视频组件的外观,同时在下面可以设定其宽度和高度以及是否自动播放和自动重新播放属性,这些也可以在属性面板中设置。勾选检测用户是否拥有查看 Flash 视频所需的正确 Flash Player 版本,并可以在消息列表框中输入提示和询问信息。图8-30设置Flash视频(4)保存页面,按下F12键进行预览。2.插入非Flash视频我们可以在Web页面中通过不同方式将不同格式的视频文件插入。在页面中插入非Flash视

29、频的主要方法有两种,即链接到视频和嵌入视频。(1)链接到视频选择用来链接到视频文件的文本或者其它对象。在对应的属性面板上单击“链接”列表右侧的文件夹,选择视频文件即可。这种插入视频的方式可以使用户具有较高的可控性和选择性。(2)嵌入视频在文档窗口中单击定位嵌入视频文件的位置。单击插入面板组常用工具栏中的“媒体”图标,选择“插件”。在弹出的选择文件对话框中选择文件“bsztyd.mpg”,然后单击“确定”。此时用于嵌入视频媒体插件的图标已显示在单元格中,在属性面板中定义其宽度和高度分别为160和103像素。保存页面并按F12预览其效果。同嵌入音频文件一样,这种方式将视频文件直接并入页面中,但需访

30、问站点的用户具有适当视频组件插件才可以播放视频。8.4.5插入Flash动画及对象1.插入Flash动画在页面中插入Flash动画的步骤如下:(1)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“Flash”,如图8-31所示。图8-31插入Flash图8-32插入的Flash动画(2)在打开的“选择文件”属性对话框中选择要插入的Flash动画文件“qxpaio_03121.swf”,单击“确定”。此时我们可以在文档窗口中看到以Flash的标志为中心的灰色区域,如图8-32所示。Flash动画的内容不会直接在这里显示,需要在浏览器或者点击属性面板的播放按钮预览。(3)在属性面板中设置Flash

31、动画的属性,如图8-33所示。图8-33设置Flash动画的属性可以在图8-33所示的左上侧的文本框中为该Flash动画命名。“宽”和“高”用来设置Flash动画的宽度和高度,直接输入数值,单位为像素。“文件”文本框用来设置Flash动画的路径和名称。“循环”和“自动播放”复选框用来设置Flash动画是否循环和自动播放。“垂直边距”和“水平边距”用来设置Flash动画和页面其它对象间的距离。“品质”和“比例”分别用来设置Flash动画的播放质量和视图比例,可以点击下拉菜单按钮进行设定。“对齐”和“背景颜色”分别用来设置Flash动画的对齐方式和背景色彩。单击“编辑”按钮可以启动Flash重新编

32、辑Flash动画,单击“重设大小”使Flash动画恢复到原始大小。“播放”按钮用来在文档窗口预览Flash动画,该按钮可以随需求在“播放”与“停止”间转换。“参数”按钮用来设置Flash动画的相关属性,如透明属性等。(4)按下F12键预览插入的Flash动画效果。2.插入Flash按钮对象我们可以在Dreamweaver 8.0文档中创建、插入和修改Flash按钮,无需单独启动Flash应用程序。Flash按钮对象是基于Flash模板的可更新按钮,设计开发人员可以自定义Flash按钮对象,并为其添加文本、背景颜色以及指向其它文件的链接等等。在页面中插入Flash按钮对象的步骤如下:(1)将光标

33、定位在要插入Flash按钮的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“Flash按钮”子菜单。(3)在弹出的插入Flash按钮对话框中输入各项设置,如图8-34所示。图8-34设置Flash按钮“范例”是用来预览当前选择的Flash按钮的最终效果。“样式”是提供Flash按钮的外观。“按钮”文本框用来输入按钮上的文字信息,对应下面的“字体”列表和“大小”可以设定文字的字体和大小。“链接”用来设置Flash按钮的链接,可单击“浏览”按钮查找链接文件。“目标”用来设置显示链接内容的窗口。“背景色”用来设置Flash按钮的背景颜色。“另存为”用于设定Flash按钮保存的路径和名称。

34、(4)在属性面板设定Flash按钮的相关属性,保存页面并按下F12键预览插入的Flash按钮的动画效果。3.插入Flash文本对象Flash 文本对象支持创建和插入只包含文本信息的SWF 文件。在页面中插入Flash文本对象的操作如下:(1)将光标定位在要插入Flash文本的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“Flash文本”子菜单。(3)在弹出的插入Flash文本对话框中输入各项设置,如图8-35所示。图8-35设置Flash文本“字体”、“大小”、“链接”、“目标”、“背景色”和“另存为”属性与Flash按钮对话框中的比较一致,这里不再赘述。在“字体”列表下面可以直

35、接设置Flash文本的加粗、倾斜以及对齐方式。“文本”列表用来输入Flash文本内容。“转滚颜色”用来设置在浏览器中鼠标放在Flash文本上时字体的颜色。(4)在属性面板设定Flash文本的相关属性,保存页面并按下F12键预览插入的Flash文本对象效果。4.插入Flash PaperFlash Paper可以将一些主流的文档格式(如Office文档,PDF文档,文本文件,网页,FLA文件等)轻松地转换成SWF格式,便于在网络上浏览和打印。在页面上插入Flash Paper的步骤如下:(1)将光标定位在要插入Flash Paper的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“F

36、lash Paper”子菜单。(3)在弹出的插入Flash Paper对话框中输入Flash Paper SWF文件的路径和名称,如图8-36所示。图8-36设置Flash Paper“源”用来输入Flash Paper的路径和名称。“宽度”和“高度”用来输入Flash Paper的宽度和高度值。(4)在属性面板设定Flash Paper的相关属性,保存页面并按下F12键预览插入Flash Paper的效果。8.4.6插入Shockwave动画Shockwave 作为Web上交互式多媒体的Macromedia标准,是一种经压缩的格式,使得在Macromedia Director中创建的多媒体文

37、件能够被快速下载,而且可以在大多数常用浏览器中进行播放。插入Shockwave动画的步骤如下:(1)将光标定位在要插入Shockwave动画的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“Shockwave”子菜单。(3)在弹出的选择文件对话框中选择Shockwave动画文件的名称“1.swf”,然后单击“确定”按钮。同样插入后的Shockwave并不会在文档窗口中显示内容,而是以Shockwave占位符来显示。(4)在属性面板设定Shockwave的相关属性,保存页面并按下F12键预览插入Shockwave动画的效果。8.4.7插入Java AppletJava是一种完全开放的

38、编程语言,通过它可以开发可嵌入Web页中的小型应用程序Applet,它的“交互”性很强,只要有支持Java的浏览器就可以运行。在页面中插入Java Applet的步骤如下:(1)将光标定位在要插入Java Applet的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“Applet”子菜单。(3)在弹出的选择文件对话框中选择1个Java Applet小程序,然后单击“确定”按钮,这样就可以在页面中插入1个Java Applet小程序。(4)选中插入到页面中的Java Applet图标,在属性面板上设置其属性如图8-37所示。图8-37设置Java Applet“代码”列表用来设置这个

39、Java Applet小程序的名称。“基址”文本框用来显示这个Java Applet小程序所在的文件夹。“替换”用来设置当该Java Applet小程序无法正常显示时将显示的替换对象。(5)单击属性面板的“参数”按钮,打开“参数”对话框,设置参数如图8-38所示。其中,参数名称为图像,参数值为图像文件的实际名称,然后单击“确定”按钮。图8-38设置参数(6)保存页面并按下F12键预览插入Java Applet小程序的效果。8.4.8插入ActiveX控件ActiveX控件是可以充当浏览器插件的可重复使用的组件,有些像微型的应用程序。Windows系统上的Internet Explorer为Ac

40、tiveX控件提供了良好的运行环境。在页面中插入ActiveX控件的步骤如下:(1)将光标定位在要插入ActiveX控件的位置。(2)单击常用工具栏上的按钮,从弹出的下拉菜单中选择“ActiveX”子菜单。(3)此时在页面中会显示ActiveX控件图标,如图所示。(4)选中插入到页面中的ActiveX控件图标,在属性面板上设置其属性如图8-39所示。图8-39设置ActiveX控件“ClassID”用来为浏览器标识ActiveX控件,可以直接输入一个值或从弹出菜单中选择一个值。在加载页面时,浏览器使用该“类ID”来确定与该页面关联的ActiveX控件所需的ActiveX控件的位置。如果浏览器未

41、找到指定的ActiveX控件,则它将尝试从“基址”指定的位置中下载它。“嵌入”复选框如果勾选就相当于把该ActiveX控件同时设置成了插件。“源文件”定义用于如果勾选了“嵌入”选项,将用它来设置插件的数据文件。“基址”用来指定包含该ActiveX控件的路径。如果用户的系统中尚未安装该 ActiveX控件,则浏览器从该路径下载它。如果没有指定“基址”参数且尚未安装相应的 ActiveX控件,则浏览器将无法显示该ActiveX对象。“替代图像”同样是用来当浏览器无法显示该ActiveX对象时将要显示的图像。注意,只有在取消对“嵌入”选项的选择后才可用此选项。“数据”用来指定要加载的ActiveX控

42、件所需的数据文件。(5)保存页面并按下F12键预览插入ActiveX控件对象效果。8.4.9插入Flash元素Flash元素文件实际上还是一个Flash SWF文件,只是它可以通过Dreamweaver 8.0自动完成创建,由用户插入的Flash元素可在自定义参数中轻松方便的完成参数设置,参数设置不同则应用程序的功能也就不同,这样就极大地提高了它的可控性和互动性。在页面中插入Flash元素的步骤如下:(1)将光标定位在要插入Flash元素的位置。(2)单击插入面板组切换到Flash元素工具栏,单击工具栏右侧的小按钮,此时弹出“保存Flash元素”对话框,如图8-40所示。(在Dreamweav

43、er 8.0中内嵌了一个叫做“图像查看器”的Flash元素,还有更多的需要从其网站中下载。) 图8-40保存Flash元素图8-41设置Flash元素(3)单击文件名列表框并为Flash元素命名,点击“保存”按钮,Flash元素会自动帮用户创建一个SWF文件。(4)选中插入到页面中的Flash元素图标,在文档窗口右侧的Flash元素面板中设置它的相关参数,每一种Flash元素所需的参数都不是完全一样,如图8-41所示。(5)保存页面并按下F12键预览插入Flash元素对象效果。至此,各种多媒体信息表达元素已全部被插入到了Web页面,我们也完成了图8-10所示的页面的编辑。习 题 八1.利用表格制作完成如下图所示的页面布局效果。2.制作一个页面,在其中嵌入音频和视频文件,并且具有自动循环播放功能。3.在Dreamweaver 8.0中分别制作Flash按钮和文本对象,并为它们添加链接。4.利用Dreamweaver 8.0内嵌的Flash元素“图像查看器”制作一个类似于幻灯片放映方式的相册,并为其添加换页效果。

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育专区 > 教案示例

本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

工信部备案号:黑ICP备15003705号© 2020-2023 www.taowenge.com 淘文阁