DreamweaverCS3中文版实例教程 03 图像和多媒体.ppt

第3章图像和多媒体 本章简介 图像在网页中的作用是非常重要的 图像 按钮 标记可以使网页更加美观 形象生动 从而使网页中的内容更加丰富多彩 所谓 媒体 是指信息的载体 包括文字 图形 动画 音频和视频等 在DreamweaverCS3中 用户可以方便快捷地向Web站点添加声音和影片媒体 并可以导入和编辑多个媒体文件和对象 课堂学习目标 图像的插入调整图文的混排效果创建网站相册多媒体在网页中的应用 3 1图像的插入 课堂案例 儿童相册网页中的图像格式插入图像设置图像属性给图片添加文字说明插入图像占位符跟踪图像 3 1 1课堂案例 儿童相册 使用 图像 按钮插入图像 使用 属性 面板改变图片的大小 调整图像的亮度和对比度并为图片添加文字说明 使用 图像占位符 命令代替网页中缺少的一张图片 效果图 3 1 2网页中的图像格式 Web页中通常使用的图像文件有JPEG GIF PNG3种格式 但大多数浏览器只支持JPEG GIF两种图像格式 因为要保证浏览者下载网页的速度 所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像 GIF文件JPEG文件PNG文件 3 1 3插入图像 要在DreamweaverCS3文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内 否则图像不能正确显示 所以在建立站点时 网站设计者常先创建一个名叫 image 的文件夹 并将需要的图像拷贝到其中 3 1 4设置图像属性 插入图像后 在 属性 面板中显示该图像的属性 属性面板 3 1 5给图片添加文字说明 当图片不能在浏览器中正常显示时 网页中图片的位置就变成空白区域 为了让浏览者在不能正常图片显示时也能了解图片的信息 常为网页的图像设置 替换 属性 3 1 6插入图像占位符 在网页布局时 网站设计者需要先设计图像在网页中的位置 等设计方案通过后 再将这个位置变成具体图像 DreamweaverCS3提供的 图像占位符 功能 可满足上述需求 在网页中插入图像占位符的具体操作步骤如下 1 在文档窗口中 将插入点放置在要插入占位符图形的位置 2 通过以下几种方法启用 图像占位符 命令 弹出 图像占位符 对话框 选择 插入 面板 常用 选项卡 单击 图像 展开式工具按钮 选择 图像占位符 选项 选择 插入记录 图像对象 图像占位符 命令 3 1 7跟踪图像 在工程设计过程中 一般先在图像处理软件中勾画出工程蓝图 然后在此基础上反复修改 最终得到一幅完美的设计图 制作网页时也应采用工程设计的方法 先在图像处理软件中绘制网页的蓝图 将其添加到网页的背景中 按设计方案对号入座 等网页制作完毕后 再将蓝图删除 DreamweaverCS3利用 跟踪图像 功能来实现上述网页设计的方式 3 1 8跟踪图像 在工程设计过程中 一般先在图像处理软件中勾画出工程蓝图 然后在此基础上反复修改 最终得到一幅完美的设计图 制作网页时也应采用工程设计的方法 先在图像处理软件中绘制网页的蓝图 将其添加到网页的背景中 按设计方案对号入座 等网页制作完毕后 再将蓝图删除 DreamweaverCS3利用 跟踪图像 功能来实现上述网页设计的方式 3 2调整图文的混排效果 课堂案例 数码相机网页调整图像与文本的相对位置 3 2 1课堂案例 数码相机网页 使用 图像 按钮插入图像 使用 属性 面板改变图像的对齐 水平边距 效果图 3 2 2调整图像与文本的相对位置 网页中既有文字 又有图像 如何调整同一行文字和图像的摆放位置达到表现良好的视觉效果 这就涉及图像与文字的相对位置问题 调整同一行图像与文字相对位置的具体操作步骤如下 1 在设计视图中选择图像 2 在图像 属性 面板中展开 对齐 选项的下拉列表 选择一种调整图像与文字相对位置的方式 对齐 选项中提供了9种图像与文字的对齐方式 3 3创建网站相册 课堂案例 家庭生活照片创建网站相册 3 3 1课堂案例 家庭生活照片 用 创建网站相册 命令制作相册效果 使用 查找 和 替换 命令将图像设为居中显示效果 效果图 3 3 2创建网站相册 在开始创建网站相册之前 将相册的所有图像放置在一个文件夹中 并确保图像文件名的扩展名为 Gif Jpg Jpeg Png Psd Tif 或 Tiff 首先 使用FireworksCS3来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像 然后 应用DreamweaverCS3创建一个Web页 它包含所有缩略图以及指向大图像所在网页的链接 3 4多媒体在网页中的应用 课堂案例 营养美食网页插入Flash动画插入Flash文本插入Flash按钮插入Shockwave影片影片插入Applet程序插入ActiveX控件 3 4 1课堂案例 营养美食网页 使用 Flash 按钮制作网页导航条效果 使用 属性 面板改变按钮的大小 使用 Flash文本 按钮为网页文档插入Flash文本效果 使用 居中对齐 按钮设置Flash文本居中对齐效果 使用 Flash 按钮为网页文档插入Flash动画效果 使用 播放 按钮在文档窗口中预览效果 效果图 3 4 2插入Flash动画 DreamweaverCS3提供了使用Flash对象的功能 虽然Flash中使用的文件类型有Flash源文件 fla FlashSWF文件 swf Flash模板文件 swt 但DreamweaverCS3只支持FlashSWF swf 文件 因为它是Flash fla 文件的压缩版本 已进行了优化 便于在Web上查看 3 4 3插入Flash文本 Flash文本是指只包含文本的Flash影片 Flash文本使用户利用自己选择的设计字体创建较小的矢量图形影片 3 4 4插入Flash按钮 如果用户想在网页中插入一个具有交互效果的按钮 可通过 插入Flash按钮 功能轻松实现 用户可以在文档中插入Flash按钮 但在插入Flash按钮前 必须先保存文档 3 4 5插入Shockwave影片 Shockwave是Web上用于交互式多媒体的Macromedia标准 是一种经压缩的格式 使得在MacromediaDirector中创建的多媒体文件能够被快速下载 而且可以在大多数常用浏览器中进行播放 3 4 6影片插入Applet程序 Applet是用Java编程语言开发的 可嵌入Web页中的小型应用程序 DreamweaverCS3提供了将JavaApplet插入HTML文档中的功能 3 4 7插入ActiveX控件 ActiveX控件 也称OLE控件 它是可以充当浏览器插件的可重复使用的组件 有些像微型的应用程序 ActiveX控件只在Windows系统上的InternetExplorer中运行 DreamweaverCS3中的ActiveX对象可为浏览者的浏览器中的ActiveX控件提供属性和参数 3 5课堂练习 数码世界网页 使用 图像 按钮插入图像 使用 对齐 选项将插入的图像右对齐 效果图 3 6课堂练习 旅游资讯网 使用 Flash 按钮制作网页导航条效果 使用 Fla