网页设计之插入多媒体元素.ppt

上海理工大学计算机基础教研室 网页设计 第5讲 学习目标 插入多媒体元素模板 库和资源管理 插入多媒体元素 重点 如何使用Flash动画 Flash按钮 Flash元素和Applet小程序丰富网页 插入多媒体元素 1 1网页的动感效果设计1 2插入Flash对象1 3插入其它多媒体元素1 4插入第三方插件1 5实战演练 1 1网页的动感效果设计 1 1 1案例综述 本章案例主要是通过在网页中插入Flash动画和Applet插件等多媒体元素来美化网页 使网页看上去更加生动 1 1网页的动感效果设计 1 1 2案例分析 本页面的制作分五个步骤进行 页面基本制作Banner条的制作导航条的制作正文区的制作 扩展功能 1 1网页的动感效果设计 1 1 3实现步骤 页面基本制作创建站点 创建主页文件 设置标题Banner条的制作 透明背景的Flash 设置图片背景 插入Flash 设置背景透明参数导航条的制作插入Flash按钮 1 1网页的动感效果设计 1 1 3实现步骤 正文区的制作用CSS样式格式化页面 插入Flash文本 插入图像查看器 插入JavaApplet小程序 插入背景音乐扩展功能扩展命令 扩展对象 扩展行为 1 2插入Flash对象 Flash动画的优点 文件小 网上传输快 在Dreamweaver8中可以插入多种Flash对象包括 Flash动画 Flash按钮 Flash文本 Flash视频 Flash元素 图像查看器 Flash文档等 1 2插入Flash对象 1 2 1插入Flash动画插入Flash动画的操作步骤 将插入点置于要插入Flash影片的位置 选择 插入 媒体 Flash 命令 或 常用 媒体 插入栏中Flash按钮 在弹出的对话框中选择一个swf文件 插入的Flash动画显示为一个灰色的方框 里面有Flash标志 单击 属性 面板上的 播放 按钮 可预览动画 1 2插入Flash对象 1 2 1插入Flash动画设置Flash影片属性 Flash 影片的名称 宽 和 高 以像素为单位指定影片的宽度和高度 文件 指定指向Flash或Shockwave文件的路径 源文件 指定指向Flash源文档 fla 的路径 编辑 可以启动MacromediaFlashMX2004以更新fla文件 重设大小 将选定影片返回到其初始大小 循环 选中则连续播放 1 2插入Flash对象 1 2 1插入Flash动画设置Flash影片属性 自动播放 选中则在加载页面时自动播放 垂直边距 和 水平边距 指定空白的像素值 品质 控制抗失真度 比例 确定影片如何适合在 宽 和 高 文本框中设置的尺寸 对齐 确定影片在页面上的对齐方式 背景颜色 指定影片区域的背景颜色 参数 打开一个对话框 可在其中输入传递给影片的附加参数 1 2插入Flash对象 1 2 2插入Flash按钮 操作步骤如下 将光标放到要插入Flash按钮对象的位置 选择 插入 媒体 Flash按钮 命令 或单击 插入 面板上 常用 媒体 Flash按钮 打开 插入Flash按钮 对话框 设置完成后单击 确定 按钮 1 2插入Flash对象 1 2 3插入Flash文本 操作步骤如下 将光标放到要插入Flash文本对象的位置 选择 插入 媒体 Flash文本 命令 或单击 插入 栏上 常用 媒体 Flash文本 打开 插入Flash文本 对话框 设置完成后单击 确定 按钮 1 2插入Flash对象 1 2 4插入图像查看器 操作步骤如下 将光标放到要插入Flash元素的位置 选择 插入 媒体 图像查看器 命令 打开 保存Flash元素 对话框 设置完成后单击 确定 按钮 1 2插入Flash对象 1 2 5插入Flash视频 操作步骤如下 选择 插入 媒体 Flash视频 命令 或单击 插入 栏的 常用 类别中的 媒体 下拉框 选择 FlashVideo 设置完成后单击 确定 按钮 1 2插入Flash对象 1 2 6插入FlashPaper文档 操作步骤如下 将插入点放在页面上想要显示FlashPaper文档的位置 然后选择 插入 媒体 FlashPaper 命令 或单击 插入 栏的 常用 类别中的 媒体 下拉框 选择 FlashPager 在 插入FlashPaper 对话框中 浏览到一个FlashPaper文档并将其选定 设置完成后单击 确定 按钮 1 3插入其它多媒体元素 1 3 1插入JavaApplet小程序 操作步骤如下 将光标放到要插入Applet小程序的位置 选择 插入 媒体 Applet 命令 或者单击 插入 面板上 常规 媒体 Applets 按钮 打开 选择文件 对话框 从对话框中选择扩展名为 class的文件 选中插入到页面中的Applet图标 打开属性面板 设置其属性 1 3插入其它多媒体元素 1 3 2插入ActiveX控件 操作步骤如下 将光标放到要插入ActiveX对象的位置 选择 插入 媒体 ActiveX 命令或者单击 插入 面板上 常规 媒体 ActiveX 按钮 即可在文档中插入ActiveX对象 选中ActiveX对象图标 打开它的属性面板 设置其属性 1 3插入其它多媒体元素 1 3 3插入Shockwave影片 操作步骤如下 将插入点置于要插入Shockwave影片的位置 选择 插入 媒体 Shockwave 命令 或 常用 媒体 插入栏中Shockwave图标 插入的Flash动画显示为一个灰色的方框 里面有Shockwave标志 选中此影片标记 在属性面板中设置其相关属性 1 4插入第三方插件 1 4 1安装扩展插件利用插件可以增强Dreamweaver8的功能 在网站可以下载第三方插件 大部分是免费的 插入第三方插件的操作方法 在 文档 窗口中 将插入点置于要插入ActiveX控件的地方 选择 插入 栏 常用 媒体 插件 图标 或 插入 媒体 插件 出现的图标会标记出页面中插件将在页面上出现的位置 1 4插入第三方插件 扩展插件管理器 要保存下载的扩展 单击MacromediaExchangeWeb站点上的扩展链接 开始下载 将扩展保存到扩展管理器应用程序文件夹的DownloadedExtensions文件夹中 执行下列操作之一来安装扩展 在扩展管理器中 选择 文件 安装扩展 浏览到已保存在DownloadedExtensions文件夹中的该文件 然后双击文件图标 安装扩展 用以下方法之一启动扩展管理器 双击Windows资源管理器 Windows 或Finder Macintosh 中的扩展文件 在Windows中 选择 开始 菜单中的 Macromedia Macromedia扩展管理器 在Macintosh中 双击Applications MacromediaExtensionManager文件夹中的扩展管理器图标 在Dreamweaver中 选择 命令 管理扩展 或者在Flash或Fireworks中选择 帮助 管理扩展功能 1 4插入第三方插件 扩展插件管理器 1 4插入第三方插件 扩展插件管理器 在扩展管理器工具栏的 产品 弹出菜单中 选择您要在其中安装该扩展的Macromedia产品 在扩展管理器中 选择 文件 安装扩展 在出现的文件选择对话框中 选择一个扩展名为 mxp的扩展文件 然后选择 安装 Windows 或 选择 Macintosh 仔细阅读Macromedia扩展免责声明和所有可能附带的第三方扩展许可 选择 接受 继续安装 或者选择 拒绝 取消安装 1 4插入第三方插件 扩展插件管理器 如果您已安装了该扩展的另一个版本 或者安装了具有相同名称的另一个扩展 扩展管理器会问您是否禁用已经安装的那个扩展 选择 是 会用新的扩展替换以前安装的扩展 或者选择 否 取消安装 保留现有的扩展 如果系统问您是否替换一个或多个现有文件 选择 是 或者 全是 将接受扩展中包括的一个或多个版本 或者选择 否 则保留当前文件版本 如果您单击 取消 则会取消安装 不安装或替换任何文件 1 4插入第三方插件 扩展插件管理器 1 4 2使用扩展插件Dreamweaver插件一般有三大类 对象 命令 行为对象 将出现在 插入 菜单或 插入 栏中 命令 将出现在 命令 菜单下 行为 在行为面板的动作列表中 1 5实战演练 一 实战效果 旅游网 1 5实战演练 一 实战要求添加Flash动画 添加Applet小程序 添加背景音乐 模板 库的应用 重点 模板 库的创建 编辑 应用 修改 站点的更新 难点 如何合理的设置和定义模板的可编辑区域 模板 库的应用 2 1应用模板制作相似网页2 2模板的基本操作2 3库的应用2 4资源管理2 5实战演练 2 1应用模板制作相似网页 2 1 1案例综述本例通过模板设计出网页的整体风格 布局 当制作各个分页时 通过模板来创建 而当修改模板时 与之相链接的网页都将随之改变 2 1应用模板制作相似网页 2 1 2案例分析在制作中 可利用模板来设计其相同部分 不同之处留为可编辑区域 待在具体制作网页时 再将具体内容填入可编辑区域 可编辑区域 2 1应用模板制作相似网页 2 1 3实现步骤制作模板基本元素的制作创建可编辑区域创建基于模板的网页文档修改模板并更新 2 2模板的基本操作 2 2 1模板的基本特点使用模板的好处在于 1 可以生成大批的风格相近的网页 2 一旦模板修改了 就修改了一批网页 自动更新 2 2模板的基本操作 2 2 2模板的创建与保存1 模板的创建方法方法一 通过菜单创建模板步骤1在文件面板中选择要创建模板的站点 步骤2选择 文件 新建 常规 模板页 选择需创建的模板类型 单击 确定 创建了一个空白模板方法二 在 资源 面板创建模板步骤1在文件面板中选择要创建模板的站点 步骤2选择 窗口 资源 命令 打开 资源 面板 选定面板左侧的 模板 按钮 单击 添加 按钮 方法三 利用现成网页创建模板步骤1打开欲做模板的网页 步骤2选择 文件 另存为模板 命令 2 2模板的基本操作 2 模板的保存新建的模板文件会保存在本地站点的Templates文件夹中 如果该Templates文件夹在站点中尙不存在 Dreamweaver8将在保存新建模板时自动创建该文件夹 模板文件的扩展名为 dwt 2 2模板的基本操作 2 2 3创建可编辑区域可编辑模板区域控制基于模板的页面中的哪些区域可以编辑 设置可编辑区域 需要在制作模板的时候完成 相似网页 完全一样部分 在模板中制作 不同部分 设为可编辑区域 设置可编辑区域的具体步骤如下 步骤1在已创建的模板文件中 编辑网页 其布局 制作方法与普通网页完全一致 步骤2将插入点放在想要插入可编辑区域的地方步骤3在插入栏中选择 模板 然后单击 可编辑区域 按钮 步骤4在 新建可编辑区域 对话框中 输入该区域的名称 单击 确定 按钮 2 2模板的基本操作 要点提示 1 表格布局的模板定义可编辑区域时 可将整个表格或表格的某个单元格定义为可编辑区域 但是不能同时将多个单元格定义为一个单独的可编辑区域 2 层和层中的内容是不同的元素 当层设为可编辑区域时 在应用该模板编辑文档时 可改变层的位置和层中的内容 而将层的内容设为可编辑区域时 则只能改变层中的内容而不能改变层的位置 2 2模板的基本操作 2 2 4创建基于模板的网页方法一 用菜单方式步骤1选择 文件 新建 新建文档 模板 选择新建的页面存放的站点及所用模板名称 步骤2选中 当模板改变时更新页面 的复选框时 当模板被修改后 用此模板创建的网页也会被修改 步骤3单击 创建 按钮 此时在网页编辑窗口建立了一个由模板生成的网页 设计者可在可编辑区域输入相关内容 2 2模板的基本操作 2 2 4创建基于模板的网页方法二 用资源面板步骤1首先新建页面 通过 窗口 菜单打开资源面板 步骤2选择面板中的模板资源 步骤3选中欲使用的模板 单击 应用 按钮 或将选中的模板拖到编辑窗口 应用模板文档在右上角会标明模板名称 步骤4在应用了模板的文档的可编辑区域内编辑相关内容 2 2模板的基本操作 2 2模板的基本操作 2 2 5更新模板及页面修改模板操作步骤 步骤1选择 窗口 资源 命令 打开资源面板 切换到 模板 资源 步骤2选中要修改的模板后右击鼠标 在快捷菜单中选择 编辑 命令 或双击该模板 便可打开要修改的模板 步骤3在快捷菜单中选择 新建可编辑区域 删除模板标记 以添加或删除可编辑区域 步骤4模板修改完成后 选择 文件 保存 命令 保存模板 2 2模板的基本操作 更新页面 保存模板时 Dreamweaver8会询问它是否更新所有附着到该模板的网页 也可以使用 修改 模板 更新页面 命令 或 模板 资源窗口右上角的按钮 选择 更新站点 命令 Dreamweaver在该模板所在的站点中更新基于模板的所有网页文档 2 3库的应用 库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素 如图像 文本和其他对象 的方法 这些元素称为库项目使用库的意义 如果使用了库 就可以通过改动库更新所有采用库的网页 不用一个一个的修改网页元素或者重新制作网页 使用库比使用模板 有更大的灵活性 2 3库的应用 2 3 1创建库项目创建库项目的方式有两种 选定内容创建为库项目 创建一个空白库项目 2 3库的应用 选定内容创建为库项目操作方法 步骤1选择 窗口 资源 命令 出现 资源 面板 选择面板左侧的 库 类别 步骤2在 文档 窗口中 选择文档要另存为库项目的内容 步骤3将选定内容拖到 资源 面板的 库 类别中 或者单击 资源 面板的 库 类别底部的 新建库项目 按钮 一个库项目被创建 此时网页文档下方的属性检查器也变为 库项目 检查器 步骤4为新的库项目输入一个名称 2 3库的应用 创建一个空白库项目操作方法 步骤1选择 窗口 资源 库 步骤2在 资源 面板中 单击 库 类别底部的 新建库项目 按钮 步骤3一个新的库项目被添加到面板上的列表中 步骤4为新的库项目输入一个名称 步骤5双击该库项目 在文档窗口进行编辑 2 3库的应用 2 3 2插入库项目操作方法 步骤1将文本光标定位于 文档 窗口中 步骤2在 资源 面板上选择面板左侧的 库 类别 步骤3将一个库项目从 资源 面板拖动到 文档 窗口中 或者选择一个库项目 然后单击面板底部的 插入 按钮 2 3库的应用 注意 插入库项目后 会在 文档 窗口的下方出现 库项目 属性检查器 如图所示 从源文件分离 可以断开文档中的项目和库之间的链接 从而使文档中的库项目可编辑 库项目 属性检查器 2 3库的应用 2 3 3修改库项目和更新站点当修改库项目时 可以更新使用该项目的所有文档 1 修改库项目步骤1选中页面中的库项目 步骤2在属性面板中点击 打开 按钮 步骤3修改库项目 修改完成之后保存 步骤4在 更新库项目 对话框中点击 更新 按钮 步骤5选择更新的范围 更新完成之后关闭 2 3库的应用 2 3 3修改库项目和更新站点2 更新整个站点或所有使用特定库项目的文档 选择 修改 库 更新页面 3 更改当前文档已使用所有库项目的当前版本选择 修改 库 更新当前页 2 4资源管理 利用 资源 面板的功能可以统一管理整个站点的资源 避免反复查找某些网页元素 能大大提高网页设计的效率 得到事半功倍的效果 在 资源 面板中管理的几种对象分别是 图像 颜色 超链接 Flash Shockwave 视频 脚本 模板 库 2 4资源管理 选择 窗口 资源 命令 或者直接按F10键 可打开 资源 面板 2 4资源管理 2 4 1图像管理 资源 面板能自动管理本地站点内的每一幅图像 资源 面板可对本地站点内的图像完成插入 编辑和管理 其操作步骤如下 1 打开 图像 资源 单击 资源 面板左侧的图像按钮 可进入 图像 窗口 2 插入图像 把光标定位在网页编辑窗口的图像插入处 然后在图像列表中选中要插入的图像 单击 插入 即可插入的图像 3 编辑图像 在图像列表中选中要编辑修改的图像 然后单击该面板底部的编辑按钮 启动Dreamweaver8默认的图像编辑软件来对选中的图像进行编辑与修改 2 4资源管理 2 4 1图像管理 4 图片收藏夹 添加 单击位于 资源 面板底端的 添加到收藏夹 按钮 可将图片收藏到收藏夹中 查看 在 图像 管理窗口的顶端选择 收藏 单选按钮 即可在图像列表栏中查看站点中的图片收藏情况 删除 单击位于 资源 面板底部的 从收藏夹中删除 按钮后即可将图像从收藏夹中删除 2 4资源管理 2 4 2颜色管理打开 资源 面板 选择 窗口 资源 命令 或者按F10键 打开 颜色 资源 单击 资源 面板左侧的 颜色 按钮即可进入 颜色 管理窗口 颜色收藏夹 单击位于 资源 面板顶端的 收藏 单选按钮 切换到颜色收藏