Dreamweaver-CC之图像与多媒体.pptxVIP

第4章 图像与多媒体;1. 图像的插入 2. 调整图像 3. 网页中的多媒体;图像是网页设计中一个非常重要的元素，它使页面更美观，更具有吸引力。在网页中插入图像也是Dreamweaver网页设计中必须掌握的技术。;4.1.1 课堂案例—茶叶网站 4.1.2 插入图像 4.1.3 图像源文件 4.1.4 图像的宽度和高度 4.1.5 替换文本 4.1.6 图像编辑 ;案例学习目标：学习使用多种方法在网页中插入图像。 案例知识要点：使用【插入】面板、【插入】|【图像】菜单和直接拖曳图像等方法将图像插入到网页指定位置。 素材所在位置：光盘/案例素材/ch04/课堂案例-茶叶网站。 案例效果如图4-1所示。;网站中的图像必须放在站点文件夹内才能在网页中正确显示，所以在建立网站时要在站点文件夹内建立一个专门存放该站点图像的文件夹，通常命名为“images”，然后将网站所需的图像都放置其中。;在Dreamweaver中，可以通过以下三种方法在网页中插入图像。 （1）选择菜单【插入】|【图像】，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成图像插入。 （2）选择【插入】面板中【常用】选项卡，单击【图像】按钮 上的黑色三角形，在下拉菜单中选择“图像”选项，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成图像插入。 （3）打开【文件】面板，展开显示图像文件夹中的所有文件，在需要插入的图像名称上按住鼠标左键拖曳到【文档】窗口的相应位置，松开鼠标，完成图像插入。;图像源文件是指插入的图像文件所在的位置，可以是本地的图像也可以是网络上的图像，如果插入的图像位于站点文件夹内，【属性】面板中【源文件】文本框中会显示相对路径。 如果要插入的图像不在站点文件夹内，那么会出现提示对话框，询问是否将图像复制到站点文件夹内，选择单击【确定】按钮即可。 也可以直接在【属性】面板【源文件】文本框中修改网页中显示的图像的路径和文件名。;在网页中插入图像文件后，可以调整图像的大小。调整方法有两种： （1）通过可视方式调整 ? 在【文档】窗口中选择该图像。 ? 执行下列操作之一，调整图像的大小： ? 若要调整图像的宽度，请拖动右侧的选择柄。 ? 若要调整图像的高度，请拖动底部的选择柄。 ? 若要同时调整图像的宽度和高度，请拖动顶角的选择柄。 ? 若要在调整图像尺寸时保持元素的比例（其宽高比），请在按住 Shift 的同时拖动顶角的选择柄。 ? 如需将图像的宽度和高度调整为特定大小（例如 1 x 1 像素），请使用【属性】面板。在【宽】和【高】字段中输入数值。以可视方式最小可以将图像大小调整到 8 x 8 像素。;（2）通过【属性】面板调整 ? 在【文档】窗口中选择该图像。 ? 选择【窗口】菜单|【属性】或按下快捷键ctrl+F3，打开【属性】面板，在【宽】和【高】中输入数值，如图4-11所示。单击【切换尺寸约束】图标 可以解除或约束调整图像时的宽高比例。 ? 单击【重置为原始大小】图标 让图像恢复到原始大小，而单击【提交图像大小】图标 则图像大小被永久修改。 ;如果网页中有的图像不能正常显示（如图像源文件路径错误或浏览器图像显示被关闭等）就会导致浏览者看不到图像。使用图像【属性】面板中的【替换】文本框，可以给看不到的图像设置说明性文字。;Dreamweaver具有一定的图像编辑功能，不用借助其他图像编辑软件就能实现对图像的优化、裁剪、调整亮度和对比度、锐化等操作，达到图像在网页中显示的最佳效果。;网页不仅由图像和文字组成，而且音频、视频等多媒体也越来越广泛地应用在网页设计中，目前网页中可以插入的多媒体包括动画、视频、Java Applet对象和ActiveX控件等。 虽然应用多媒体能丰富网页内容，但可能影响浏览速度，所以一般情况下网页中不会大量使用多媒体元素。;4.2.1课堂案例—度假村 4.2.2插入Flash动画 4.2.3插入Flash视频 4.2.4课堂案例—瑜伽会所;案例学习目标：学习在网页中插入动画、FLV视频等元素。 案例知识要点：使用【插入】面板的【媒体】|【SWF】和【FLV】按钮插入多媒体元素。 素材所在位置：光盘/案例素材/ch04/课堂案例-度假村。 案例效果如图4-20、图4-21所示。;在【文档】窗口中单击要插入Flash动画的位置。 ? 单击菜单【插入】|【HTML】|【Flash SWF】，打开【选择SWF】对话框中，查找并选择需要插入的Flash动画文件，再单击【确定】按钮。 ? 插入的Flash动画显示在设计窗口中显示为占位符形式，在【属性】面板的【宽】和【高】可以调整动画的尺寸大小，如图4-29所示。;在Dreamweaver中插入Flash视频的操作步骤如下。 ? 在【文档】窗口中单击要插