第8章 多媒体网页制作学习目标1.了解Dreamweaver 8.0标准工作界面各个.ppt

第8章多媒体网页制作 主编 马武 学习目标 1 了解Dreamweaver8 0标准工作界面各个组成部分的名称和主要功能 2 学会创建和管理本地站点的基本步骤和方法 3 了解页面设置的主要内容和操作方法 4 掌握利用表格进行页面布局的基本技能 5 掌握向页面添加文本 图像 音频 视频的基本技能和不同方法 并能设置各种媒体的相关属性和常用参数 6 掌握向页面插入Flash动画和Flash对象的基本方法 并能设置其相关属性和常用参数 7 掌握向页面插入Shockwave动画 JavaApplet应用小程序 ActiveX控件 插件 Flash元素的基本方法 并能设置它们的相关属性和常用参数 8 1Dreamweaver8 0的工作界面和其它应用程序有所不同 Dreamweaver8 0提供了一个将全部元素集成在一个窗口中显示的布局方式 它的工作界面包括 标题栏 菜单栏 插入面板组 文档工具栏 文档窗口 状态栏 属性面板和浮动面板组 如图8 1 图8 1 8 2本地站点的创建与管理8 2 1站点的概念Dreamweaver站点提供一种组织所有与Web站点关联文档的方法 它的组成根据开发环境和所开发的Web站点类型的不同而有所不同 主要由以下三个部分组成 1 本地文件夹放置在本地硬盘上的网站叫做 本地站点 用于存储站点所需要的各种页面元素文件的文件夹就是本地文件夹 2 远程文件夹放在Web服务器计算机上的文件夹叫做远程文件夹 把对应的站点叫做 远端站点 3 测试服务器文件夹Dreamweaver用来处理动态页的文件夹 用来管理和提供动态内容的生成和显示 8 2 2本地站点的创建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 Dreamweaver8 0还为用户提供了很好的管理站点服务 在这里可以直接新建站点 也可以对现有的站点进行编辑 复制和删除 还可通过已建立的站点定义文件直接进行导入和导出操作 可以通过 站点 菜单下的 管理站点 子菜单完成该项操作 其对话框如图8 8所示 图8 8 8 2 3本地站点的管理 实际上管理站点通常采用把网站中的各种文件分门别类存储的方法 可以在文件面板当前站点所在的文件夹上单击右键进行文件夹的新建 删除 拷贝 遮盖等各项操作 这里我们建立几个分别用来存放常见网页媒体元素的文件夹 如图8 9所示 图8 9 8 3页面设计和布局8 3 1页面设置1 文件头内容的设置文件头内容在浏览器中是不可见的 但却携带着网页的重要信息 如关键字 作者版权等描述性文字信息 还可以实现一些非常重要的功能 如自动刷新功能等 文件头内容的设置包含META 关键字 说明 刷新 基础和链接六项 文件头内容中关键字设置的基本步骤 1 启动Dreamweaver8 0并新建一个文档 将其保存为 index html 2 单击插入面板组的下拉菜单按钮 选择 HTML 再单击按钮 指向 关键字 子菜单 如图8 11所示 图8 11 3 接下来会弹出如图8 12所示的关键字对话框 在其中输入相应的关键字即可 图8 12 2 设置页面属性页面属性的设置可以确定当前页面的外观 链接 标题 标题 编码和跟踪图像等的基本信息和格式 比如 默认字体的类型 大小 颜色 背景图像及颜色 页面边框的宽度 标题名称 链接颜色和字体等 页面属性的设置和更改可以用两种方法实现 一是单击属性面板上的 页面属性 按钮 如图8 13所示 在弹出的页面属性对话框 如图8 14所示 中来设置 另一种是通过菜单 修改 页面属性 启动页面属性对话框来设置 图8 13 图8 14 8 3 2表格的插入表格是网页设计与制作中非常重要的元素 主要用来将各种媒体表达元素如文本 图片 表单 Flash等整齐划一的显示在页面上 对页面排版具有重要的意义 使用表格布局页面操作灵活 而且具有较好的兼容性 1 表格的插入及属性设置 1 在 index html 文档窗口单击鼠标 确定表格插入点 2 单击插入面板组的常用工具栏 如图8 16所示 单击插入表格图标 图8 16 3 在弹出的表格属性对话框中设置如图8 17所示的参数 4 单击 确定 图8 17 2 设置表格属性 1 通过单击插入面板组中的布局按钮 切换布局模式到扩展模式 这样可以使被设置为0的表格边框及单元格等可视化程度增加 方便操作 但实际浏览时不会有边框 2 通过鼠标或者标签选择器的 table 标签选择相应的表格 在对应的属性面板设置或者更改表格的属性 如图8 18所示 图8 18 表格Id 用来为当前选定的表格命名 行 列 宽 高 分别用来设定表格的行数 列数 宽度和高度 填充 和 间距 分别用来设定表格单元格的边距和间距 对齐 和 边框 分别用来设定表格的对齐方式和边框大小 背景颜色 边框颜色 和 背景图像 分别用来设定表格的背景颜色 边框颜色和背景图像 分别用来清除列宽和行宽以及将表格宽度和高度在百分比和像素间切换 8 3 3插入图像占位符图像占位符是在插入真正的图像之前用来起替代作用的 尤其在进行页面布局的时候是非常有用的 1 定位图像占位符要插入的位置 2 单击插入面板组中常用工具栏的插入图像占位符图标 弹出对话框如图8 19所示 3 输入各项参数如图8 19所示 单击 确定 图8 19 8 4插入多媒体内容8 4 1插入文本内容1 插入文本文本可以直接在单元格内输入 也可以从其它文本文件中拷贝 1 在单元格内单击 确定文本插入的位置 2 按 Ctrl C 复制文本 然后按 Ctrl V 完成粘贴 文本就被插入到相应的位置了 并且随着文本的现有属性可能扩展单元格 3 在属性面板中设置文本的属性 2 插入导航条文本 1 在创建的单元格内单击 输入 导航条文本 字样 2 在创建表格的单元格内单击 输入导航文本内容 3 在属性面板中设置文本的属性 3 为文本创建链接 1 拖动鼠标选择要创建链接的文本 2 单击链接列表框后面的文件夹图标 选择链接文件的名称 然后单击 确定 如图8 21所示 图8 21 8 4 2插入图像图像是网页制作的重要元素之一 可以美化页面 更重要的是可以携带更加形象直观的信息 1 通过替换图像占位符插入图像 1 双击图像占位符 弹出选择图像源文件对话框如图8 22所示 2 选择 digital 02 JPG 文件 单击 确定 图8 22 2 通过 插入 菜单插入图像 1 在单元格上单击 确定图像插入的具体位置 2 单击 插入 图像 菜单 弹出 选择图像源文件 对话框 选择 ima 33 gif 文件 单击 确定 图像即被插入 3 从文件面板中直接拖曳插入图像 1 单击单元格 确定图像拖曳的具体位置 2 在窗口右侧的浮动面板组中选择文件面板 双击或者单击 imge 文件夹前面的 号 展开该文件夹 如图8 23所示 3 选择 jiawa jpg 图像文件 按住鼠标左键拖拽到单元格中松开 图8 23 4 从资源面板中插入图像 1 单击定位图像插入点的位置 2 点击窗口右侧文件面板的 资源 选项卡并通过其左侧的图像视图图标切换到图像资源 如图8 24所示 3 选择要插入的图像文件 p2p gif 利用鼠标拖动操作将图像插入 或者使用资源页签下面的 插入 命令按钮完成图像的插入 图8 24 8 4 3插入音频在网页中插入音频常见的方式可以说有三种 手写代码添加背景音乐 链接到音频文件 嵌入音频文件 1 手写代码添加背景音乐 1 打开我们前面编辑的文件 index html 2 切换视图到 代码 视图 找到标记 可以通过Ctrl F快捷键或者菜单 编辑 查找和替换 快速查找 并将光标定位在其之前 3 在光标的位置写下代码 如图8 25所示 4 按下F12键试听刚才添加的背景音乐效果 如果需要设置背景音乐的其它参数比如循环 延迟 平衡 音量属性还可以继续编写代码 图8 25 2 链接到音频文件 1 选择用来链接音频文件的文本 图元或者其他对象 2 在对应属性面板的 链接 列表中输入音频文件的路径和名称 或者通过 浏览 按钮直接选择即可 3 嵌入音频文件 1 打开我们前面编辑的文件 index html 2 单击单元格将嵌入音频媒体插件的位置定位 3 单击插入面板组常用工具栏中的 媒体 图标 选择 插件 如图8 26所示 图8 26 4 在弹出的选择文件对话框中选择文件 zdan mp3 然后单击 确定 5 此时用于嵌入音频媒体插件的图标已显示在当前单元格中 在属性面板中定义其宽度和高度 6 按F12预览其效果 在浏览器中可能会弹出 限制此文件显示 的字样 在 单击此处查看选项 处单击选择 允许阻止的内容 如图8 27所示 即可显示嵌入的音频播放器 如图8 28所示 图8 27 图8 28 8 4 4插入视频在网页中常见的视频有两种 即Flash视频和非Flash视频 1 在网页中插入Flash视频 1 打开前面制作的 index html 文件 在单元格单击确定插入点的位置 2 点击插入面板组常用工具栏的 媒体 按钮 选择 FlashVideo 如图8 29所示 图8 29 3 在弹出的 插入Flash视频 对话框中做如图8 30所示的设置 然后单击 确定 图8 30 在 视频类型 列表框中有 累进式下载视频 和 流视频 两种类型 累进式下载视频 将Flash视频文件下载到站点访问者的硬盘上 然后播放 但是 与传统的 下载并播放 视频传送方法不同 渐进式下载允许在下载完成之前就开始播放视频文件 流视频 对Flash视频内容进行流式处理 并在一段很短时间的缓冲 可确保流畅播放 后在Web页上播放Flash视频内容 但要在Web页上启用流视频 站点访问用户必须具有访问MacromediaFlashCommunicationServer的权限 在 URL 列表框右侧单击 浏览 选择插入的Flash视频文件 在 外观 列表框中点击右侧的下拉菜单按钮 选择Flash视频组件的外观 同时在下面可以设定其宽度和高度以及是否自动播放和自动重新播放属性 这些也可以在属性面板中设置 勾选检测用户是否拥有查看Flash视频所需的正确FlashPlayer版本 并可以在消息列表框中输入提示和询问信息 2 插入非Flash视频在页面中插入非Flash视频的主要方法有两种 即链接到视频和嵌入视频 1 链接到视频 选择用来链接到视频文件的文本或者其它对象 在对应的属性面板上单击 链接 列表右侧的文件夹 选择视频文件即可 这种插入视频的方式可以使用户具有较高的可控性和选择性 2 嵌入视频 在文档窗口中单击定位嵌入视频文件的位置 单击插入面板组常用工具栏中的 媒体 图标 选择 插件 在弹出的选择文件对话框中选择文件 bsztyd mpg 然后单击 确定 此时用于嵌入视频媒体插件的图标已显示在单元格中 在属性面板中定义其宽度和高度 保存页面并按F12预览其效果 同嵌入音频文件一样 这种方式将视频文件直接并入页面中 但需访问站点的用户具有适当视频组件插件才可以播放视频 8 4 5插入Flash动画及对象1 插入Flash动画 1 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 Flash 如图8 31所示 图8 31 2 在打开的 选择文件 属性对话框中选择要插入的Flash动画文件 qxpaio 0312 1 swf 单击 确定 3 在属性面板中设置Flash动画的属性 如图8 33所示 图8 33 可以在图8 33所示的左上侧的文本框中为该Flash动画命名 宽 和 高 用来设置Flash动画的宽度和高度 直接输入数值 单位为像素 文件 文本框用来设置Flash动画的路径和名称 循环 和 自动播放 复选框用来设置Flash动画是否循环和自动播放 垂直边距 和 水平边距 用来设置Flash动画和页面其它对象间的距离 品质 和 比例 分别用来设置Flash动画的播放质量和视图比例 可以点击下拉菜单按钮进行设定 对齐 和 背景颜色 分别用来设置Flash动画的对齐方式和背景色彩 单击 编辑 按钮可以启动Flash重新编辑Flash动画 单击 重设大小 使Flash动画恢复到原始大小 播放 按钮用来在文档窗口预览Flash动画 该按钮可以随需求在 播放 与 停止 间转换 参数 按钮用来设置Flash动画的相关属性 如透明属性等 2 插入Flash按钮对象可以在Dreamweaver8 0文档中创建 插入和修改Flash按钮 无需单独启动Flash应用程序 Flash按钮对象是基于Flash模板的可更新按钮 设计开发人员可以自定义Flash按钮对象 并为其添加文本 背景颜色以及指向其它文件的链接等等 在页面中插入Flash按钮对象的步骤如下 1 将光标定位在要插入Flash按钮的位置 2 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 Flash按钮 子菜单 3 在弹出的插入Flash按钮对话框中输入各项设置 如图8 34所示 图8 34 范例 是用来预览当前选择的Flash按钮的最终效果 样式 是提供Flash按钮的外观 按钮 文本框用来输入按钮上的文字信息 对应下面的 字体 列表和 大小 可以设定文字的字体和大小 链接 用来设置Flash按钮的链接 可单击 浏览 按钮查找链接文件 目标 用来设置显示链接内容的窗口 背景色 用来设置Flash按钮的背景颜色 另存为 用于设定Flash按钮保存的路径和名称 4 在属性面板设定Flash按钮的相关属性 保存页面并按下F12键预览插入的Flash按钮的动画效果 3 插入Flash文本对象Flash文本对象支持创建和插入只包含文本信息的SWF文件 在页面中插入Flash文本对象的操作如下 1 将光标定位在要插入Flash文本的位置 2 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 Flash文本 子菜单 3 在弹出的插入Flash文本对话框中输入各项设置 如图8 35所示 图8 35 字体 大小 链接 目标 背景色 和 另存为 属性与Flash按钮对话框中的比较一致 这里不再赘述 在 字体 列表下面可以直接设置Flash文本的加粗 倾斜以及对齐方式 文本 列表用来输入Flash文本内容 转滚颜色 用来设置在浏览器中鼠标放在Flash文本上时字体的颜色 4 在属性面板设定Flash文本的相关属性 保存页面并按下F12键预览插入的Flash文本对象效果 4 插入FlashPaperFlashPaper可以将一些主流的文档格式 如Office文档 PDF文档 文本文件 网页 FLA文件等 轻松地转换成SWF格式 便于在网络上浏览和打印 8 4 6插入Shockwave动画Shockwave作为Web上交互式多媒体的Macromedia标准 是一种经压缩的格式 使得在MacromediaDirector中创建的多媒体文件能够被快速下载 而且可以在大多数常用浏览器中进行播放 插入Shockwave动画的步骤如下 1 将光标定位在要插入Shockwave动画的位置 2 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 Shockwave 子菜单 3 在弹出的选择文件对话框中选择Shockwave动画文件的名称 1 swf 然后单击 确定 按钮 同样插入后的Shockwave并不会在文档窗口中显示内容 而是以Shockwave占位符来显示 4 在属性面板设定Shockwave的相关属性 保存页面并按下F12键预览插入Shockwave动画的效果 8 4 7插入JavaAppletJava是一种完全开放的编程语言 通过它可以开发可嵌入Web页中的小型应用程序Applet 它的 交互 性很强 只要有支持Java的浏览器就可以运行 在页面中插入JavaApplet的步骤如下 1 将光标定位在要插入JavaApplet的位置 2 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 Applet 子菜单 3 在弹出的选择文件对话框中选择1个JavaApplet小程序 然后单击 确定 按钮 这样就可以在页面中插入1个JavaApplet小程序 4 选中插入到页面中的JavaApplet图标 在属性面板上设置其属性如图8 37所示 图8 37 代码 列表用来设置这个JavaApplet小程序的名称 基址 文本框用来显示这个JavaApplet小程序所在的文件夹 替换 用来设置当该JavaApplet小程序无法正常显示时将显示的替换对象 5 单击属性面板的 参数 按钮 打开 参数 对话框 设置参数如图8 38所示 其中 参数名称为图像 参数值为图像文件的实际名称 然后单击 确定 按钮 图8 38 8 4 8插入ActiveX控件ActiveX控件是可以充当浏览器插件的可重复使用的组件 有些像微型的应用程序 Windows系统上的InternetExplorer为ActiveX控件提供了良好的运行环境 在页面中插入ActiveX控件的步骤如下 1 将光标定位在要插入ActiveX控件的位置 2 单击常用工具栏上的按钮 从弹出的下拉菜单中选择 ActiveX 子菜单 3 此时在页面中会显示ActiveX控件图标 4 选中插入到页面中的ActiveX控件图标 在属性面板上设置其属性如图8 39所示 图8 39 ClassID 用来为浏览器标识ActiveX控件 可以直接输入一个值或从弹出菜单中选择一个值 在加载页面时 浏览器使用该 类ID 来确定与该页面关联的ActiveX控件所需的ActiveX控件的位置 如果浏览器未找到指定的ActiveX控件 则它将尝试从 基址 指定的位置中下载它 嵌入 复选框如果勾选就相当于把该ActiveX控件同时设置成了插件 源文件 定义用于如果勾选了 嵌入