Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 3图像和多媒体

职业教育“十三五”数字媒体应用人才培养系列教材Dreamweaver网页设计与应用60个专业案例362个案例素材及源文件92个微课视频DreamweaverCC2019微课版教师专项服务项目3图像和多媒体项目引入：图像和多媒体是网页中的重要元

素，在网页中的应用非常广泛。本项

目主要讲解图像和多媒体在网页中的

应用方法和技巧，通过对这些内容的

学习，学生可以设计、制作出更加美观、生动、丰富且具有动感和吸引力

的网页

。

掌握在网页中插入和编辑图像的方法◆

掌握多媒体在网页中的应用方法和技巧项目目标

掌握“环球旅游网页”的关键制作步骤

掌握“物流运输网页”的关键制作步骤技能目标◆

培养解决实际问题的能力培养团队协作意识和技能，提升与他人合作的能力素养目标◆

网页中的图像格式◆在网页中插入图像◆

设置图像属性◆

给图像添加文字说明

跟踪图像◆

任务实践—环球旅游网页任务3.1

图像的基本操作网页中常用的图像格式有JPEG、GIF、PNG

这3种，但大多数浏览器只支持JPEG和GIF两种图像格式。为了保证网页的加载速度，网站

设计者常使用JPEG和GIF这两种压缩格式的图像。3.1.1

网页中的图像格式要在DreamweaverCC2019文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。所以在建立站点

时，网站设计者通常会创建一个名为“images”的文件夹，并将需要的图

像复制到其中。3.1.2

在网页中插入图像网络相对于：文档文件名(N):imgjpg站点根目录“选择图像源文件”对话框图像文件(-gif*jpg:*jpeg:".p∨确定

取消imgjpg属性三正像，135K

ID地图(M)▶口

t

oSrc

image/img.jpg链接(L)目标(R)原始日臼无编辑品

女宽(W)

500高(H)

333pxpx替换(T)标题(E)②插入图像后，“属性”面板中会显示该图像的属性。3.1.3

设置图像属性插入图像后的“属性”面板当图像不能在浏览器中正常显示时，网页中图像的位置就变成空白区域。为了让浏览者在图像不能正常显示时也能了解图像的信息，常为网

页的图像设置“替换”属性，将图像的说明文字输入“替换”文本框中。宽

(

W

)142高

(

H

)95px∨

Px6、替换(T)宠物狗血统介绍3.1.4

给图像添加文字说明“属性”面板

效果图在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应

采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加

到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图

删除。DreamweaverCC2019利用“跟踪图像”功能来实现上述网页设计方

式。picD1jpg②50%(RGB/8)垂直导航条区域

用户登录区域搜索+推荐栏广告条区域广告切换图51

5w

0产品分类介绍2

550%文档：2.25M/2.09M3.1.5

跟踪图像LOGO世界那大带你去看看30.

40

.509因为有梦

·

所以勇敢出发

·使用“Image

”按钮插入图像，使用“CSS设计器”面板控制图像的水平边距。任务实践—环球旅游网页效果图插

入Flash动

画◆

插入FLV文件◆插入Animate作品◆

插

入HTML5

Video◆

插入音频

插入插件◆

任务实践—物流运输网页任务3.2

多媒体在网页中的应用Dreamweaver

CC

2019

提供了在文档中插入Flash动画的功能，虽然Flash中使用的文件类型有Flash源文件(扩展名为“.fla”)、FlashSWF文

件(扩展名为“.swf”

)、Flash模板文件(扩展名为“.swt”

),

但

DreamweaverCC2019只支持FlashSWF文件(扩展名为“.swf”),

因为它是

Flash

源文件(扩展名为“.fla”)

的压缩版本，已进行了优化，便于在网

络上查看。3.2.1

插

入Flash动

画FLV

全称FlashVideo。在网页中可以轻松添加FLV文件，而无须使用Flash创作工具。但在操作之前必须有一个经过编码的FLV文件。使用

Dreamweaver插入一个显示FLV文件的SWF(ShockWave

Flash)

组件，当在

浏览器中查看时，此组件会显示所选的FLV文件以及一组播放控件。3.2.2

插入FLV文件Animate是Adobe公司出品的用于制作HTML5动画的可视化工具。使用该软件可以在网页中轻而易举地插入动画效果，而不需要编写烦琐

复杂的代码。3.2.3插入Animate作品使用DreamweaverCC2019

可以在网页中插入HTML5Video。HTML5

Video元素提供了一种将视频嵌入网页中的标准方式。属性

视频ID[Class

nonewH像素像素源PosterFJ.mp4产我

□Title回退文本Controls□

Loop□AutoPlayPreload□

MutednoneAIt源1

AlIt源2十

□

出Flash回退十

□index.html*X日body

video搜索"Ch03°

pFJ.mp4C.ogg:"mp4:"m4v:"webr确定取消3.2.4

插

入HTML5

Video选择视频个

基础素材

Ch03组

织

新建文件夹★快速访间OneDrive口此电脑Elements

(F)网

络宠物狗网店站点模目录image相对于：文档“属性”面板文件名(N):FJ.mp41.插入背景音乐HTML提供了背景音乐标签<bgsound></

bgsound>

,

使用该标签可以为网页添加背景音乐。2.

插入音乐插入音乐和插入背景音乐的效果不同，插入音乐后可以在页面中看到播放器的外观，如播放、暂停、定位和音量等按钮。3.

嵌入音乐上面介绍了背景音乐及音乐的插入，下面来讲解如何嵌入音乐。嵌入音乐和插入音乐相同，只不过嵌入音乐播放器要比插入音乐播放器多

几个按钮。3.2.5

插入音频利用“插件”按钮，可以在网页中插入AIV、MPG、MOV、MP4

等格式的视频文件，也可以插入音频文件。在网页中插入插件的方与嵌入音乐的方法一样，具体操作步骤如下。(1)在文档窗口的“设计”视图中，将光标置于想要插入插件的位

置。(2)通过以下几种方法启用“插件”命令。①在“插入”面板“HTML”选项卡中单击“插件”按钮。②选择“插入>

HTML>

插件”命令。3.2.6

插入插件使

用“Flash

SWF”按钮在网页中插入Flash动画效果，使用“属性”面板设置动画背景透明。任务实践一物流运输网页效果图使

用“Image”按钮插入图像。0