多媒体技术及应用第八章

第8章多媒体网页制作主编:马武学习目标:1.了解Dreamweaver8.0标准工作界面各个组成部分的名称和主要功能；2.学会创建和管理本地站点的基本步骤和方法；3.了解页面设置的主要内容和操作方法；4.掌握利用表格进行页面布局的基本技能；5.掌握向页面添加文本、图像、音频、视频的基本技能和不同方法，并能设置各种媒体的相关属性和常用参数；6.掌握向页面插入Flash动画和Flash对象的基本方法，并能设置其相关属性和常用参数；7.掌握向页面插入Shockwave动画、JavaApplet应用小程序、ActiveX控件、插件、Flash元素的基本方法，并能设置它们的相关属性和常用参数。的工作界面和其它应用程序有所不同，Dreamweaver8.0提供了一个将全部元素集成在一个窗口中显示的布局方式。它的工作界面包括：标题栏、菜单栏、插入面板组、文档工具栏、文档窗口、状态栏、属性面板和浮动面板组，如图8-1。图8-1本地站点的创建与管理8.2.1站点的概念Dreamweaver站点提供一种组织所有与Web站点关联文档的方法，它的组成根据开发环境和所开发的Web站点类型的不同而有所不同，主要由以下三个部分组成：（1）本地文件夹放置在本地硬盘上的网站叫做“本地站点”。用于存储站点所需要的各种页面元素文件的文件夹就是本地文件夹。（2）远程文件夹放在Web服务器计算机上的文件夹叫做远程文件夹，把对应的站点叫做“远端站点”。（3）测试服务器文件夹Dreamweaver用来处理动态页的文件夹。用来管理和提供动态内容的生成和显示。本地站点的创建Dreamweaver8.0实际上为用户提供了两种站点的创建办法：一是根据向导创建；二是根据用户的实际需求进行高级设定创建。根据向导创建一个本地站点的步骤：（1）单击“站点”菜单，选择“新建站点”，弹出站点定义对话框如图8-2所示。输入站点名称和地址后，单击“下一步”按钮。图8-2（2）接下来将弹出如图8-3所示的对话框，提示选择当前编辑的站点是否需要各种服务器技术，如ASP、ASP.NET、JSP、PHP等。图8-3（3）选择在开发过程中使用文件的方式（在本地计算机上还是在WEB服务器上进行编辑）以及文件存储的位置，如图8-4所示。图8-4（4）设置网站连接到远程服务器的方式，如图8-5所示。图8-5（5）最后显示新建站点所包含的基本设置对话框，包括本地信息，远程信息和测试服务器的设置，如图8-6所示。单击“完成”，至此就完成了一个新站点的创建。同时在右侧的文件面板上就出现了刚才建立的站点文件夹，如图8-7所示。图8-6图8-7还为用户提供了很好的管理站点服务，在这里可以直接新建站点，也可以对现有的站点进行编辑、复制和删除，还可通过已建立的站点定义文件直接进行导入和导出操作。可以通过“站点”菜单下的“管理站点”子菜单完成该项操作，其对话框如图8-8所示。图8-88.2.3本地站点的管理实际上管理站点通常采用把网站中的各种文件分门别类存储的方法，可以在文件面板当前站点所在的文件夹上单击右键进行文件夹的新建、删除、拷贝、遮盖等各项操作。这里我们建立几个分别用来存放常见网页媒体元素的文件夹，如图8-9所示。图8-9页面设计和布局8.3.1页面设置1.文件头内容的设置文件头内容在浏览器中是不可见的，但却携带着网页的重要信息，如关键字、作者版权等描述性文字信息。还可以实现一些非常重要的功能，如自动刷新功能等。文件头内容的设置包含META、关键字、说明、刷新、基础和链接六项。文件头内容中关键字设置的基本步骤：（1）启动Dreamweaver8.0并新建一个文档，将其保存为“index.html”。（2）单击插入面板组的下拉菜单按钮，选择“HTML”，再单击按钮，指向“关键字”子菜单，如图8-11所示。图8-11（3）接下来会弹出如图8-12所示的关键字对话框，在其中输入相应的关键字即可。图8-12设置页面属性页面属性的设置可以确定当前页面的外观、链接、标题、标题/编码和跟踪图像等的基本信息和格式，比如：默认字体的类型、大小、颜色、背景图像及颜色、页面边框的宽度、标题名称、链接颜色和字体等。页面属性的设置和更改可以用两种方法实现：一是单击属性面板上的“页面属性”按钮（如图8-13所示），在弹出的页面属性对话框（如图8-14所示）中来设置；另一种是通过菜单“修改|页面属性”启动页面属性对话框来设置。图8-13图8-14表格的插入表格是网页设计与制作中非常重要的元素，主要用来将各种媒体表达元素如文本、图片、表单、Flash等整齐划一的显示在页面上，对页面排版具有重要的意义。使用表格布局页面操作灵活，而且具有较好的兼容性。表格的插入及属性设置（1）在“index.html”文档窗口单击鼠标，确定表格插入点。（2）单击插入面板组的常用工具栏，如图8-16所示，单击插入表格图标。图8-16（3）在弹出的表格属性对话框中设置如图8-17所示的参数。（4）单击“确定”。图8-17设置表格属性（1）通过单击插入面板组中的布局按钮，切换布局模式到扩展模式，这样可以使被设置为0的表格边框及单元格等可视化程度增加，方便操作，但实际浏览时不会有边框。（2）通过鼠标或者标签选择器的“table”标签选择相应的表格，在对应的属性面板设置或者更改表格的属性，如图8-18所示。图8-18①“表格Id”用来为当前选定的表格命名。②“行”、“列”、“宽”、“高”分别用来设定表格的行数、列数、宽度和高度。③“填充”和“间距”分别用来设定表格单元格的边距和间距。④“对齐”和“边框”分别用来设定表格的对齐方式和边框大小。⑤“背景颜色”、“边框颜色”和“背景图像”分别用来设定表格的背景颜色、边框颜色和背景图像。⑥分别用来清除列宽和行宽以及将表格宽度和高度在百分比和像素间切换。插入图像占位符图像占位符是在插入真正的图像之前用来起替代作用的，尤其在进行页面布局的时候是非常有用的。（1）定位图像占位符要插入的位置。（2）单击插入面板组中常用工具栏的插入图像占位符图标，弹出对话框如图8-19所示。（3）输入各项参数如图8-19所示，单击“确定”。图8-19插入多媒体内容8.4.1插入文本内容1.插入文本文本可以直接在单元格内输入，也可以从其它文本文件中拷贝。（1）在单元格内单击，确定文本插入的位置。（2）按“Ctrl+C”复制文本，然后按“Ctrl+V”完成粘贴。文本就被插入到相应的位置了，并且随着文本的现有属性可能扩展单元格。（3）在属性面板中设置文本的属性。插入导航条文本（1）在创建的单元格内单击，输入“导航条文本”字样。（2）在创建表格的单元格内单击，输入导航文本内容。（3）在属性面板中设置文本的属性。为文本创建链接（1）拖动鼠标选择要创建链接的文本。（2）单击链接列表框后面的文件夹图标，选择链接文件的名称，然后单击“确定”，如图8-21所示。图8-21插入图像图像是网页制作的重要元素之一，可以美化页面，更重要的是可以携带更加形象直观的信息。1.通过替换图像占位符插入图像（1）双击图像占位符，弹出选择图像源文件对话框如图8-22所示。（2）选择“digital_02.JPG”文件，单击“确定”。图8-22通过“插入”菜单插入图像（1）在单元格上单击，确定图像插入的具体位置。（2）单击“插入|图像”菜单，弹出“选择图像源文件”对话框，选择“ima_33.gif”文件，单击“确定”，图像即被插入。从文件面板中直接拖曳插入图像（1）单击单元格，确定图像拖曳的具体位置。（2）在窗口右侧的浮动面板组中选择文件面板，双击或者单击“imge”文件夹前面的“+”号，展开该文件夹，如图8-23所示。（3）选择“jiawa.jpg”图像文件，按住鼠标左键拖拽到单元格中松开。图8-23从资源面板中插入图像（1）单击定位图像插入点的位置。（2）点击窗口右侧文件面板的“资源”选项卡并通过其左侧的图像视图图标切换到图像资源，如图8-24所示。（3）选择要插入的图像文件“p2p.gif”，利用鼠标拖动操作将图像插入，或者使用资源页签下面的“插入”命令按钮完成图像的插入。图8-24插入音频在网页中插入音频常见的方式可以说有三种：◆手写代码添加背景音乐;◆链接到音频文件;◆嵌入音频文件。手写代码添加背景音乐（1）打开我们前面编辑的文件“index.html”。（2）切换视图到“代码”视图，找到/body标记（可以通过Ctrl+F快捷键或者菜单“编辑/查找和替换”快速查找），并将光标定位在其之前。（3）在光标的位置写下代码bgsoundsrc=“midi/zdan.mp3”，如图8-25所示。（4）按下F12键试听刚才添加的背景音乐效果。如果需要设置背景音乐的其它参数比如循环、延迟、平衡、音量属性还可以继续编写代码。图8-25链接到音频文件（1）选择用来链接音频文件的文本、图元或者其他对象。（2）在对应属性面板的“链接”列表中输入音频文件的路径和名称，或者通过“浏览”按钮直接选择即可。嵌入音频文件（1）打开我们前面编辑的文件“index.html”。（2）单击单元格将嵌入音频媒体插件的位置定位。（3）单击插入面板组常用工具栏中的“媒体”图标，选择“插件”，如图8-26所示。图8-26（4）在弹出的选择文件对话框中选择文件“zdan.mp3”，然后单击“确定”。（5）此时用于嵌入音频媒体插件的图标已显示在当前单元格中，在属性面板中定义其宽度和高度。（6）按F12预览其效果，在浏览器中可能会弹出“限制此文件显示”的字样，在“单击此处查看选项…”处单击选择“允许阻止的内容”如图8-27所示，即可显示嵌入的音频播放器，如图8-28所示。图8-27图8-28插入视频在网页中常见的视频有两种：即Flash视频和非Flash视频。1.在网