项目三 插入图像和多媒体对象

Dreamweaver网页设计立体化教程（微课版）（DreamweaverCC2020）项目三插入图像和多媒体对象目录Contents制作“佳美馨装饰——成功案例”栏目网页任务二制作“佳美馨装饰——中式田园风格”内容网页实训一制作“中国皮影——皮影鉴赏”网页实训二制作“中国皮影——皮影的表演”网页栏目页是网站中某个栏目的入口页面，通常会分隔为多个区域以显示各个子栏目中的内容。本任务将制作“佳美馨装饰——成功案例”栏目页面，该栏目页主要用于展示案例，会插入大量的图片，另外还会使用图像轮播进行图像的展示以及使用鼠标经过图像制作按钮。一、任务描述（一）任务背景（1）掌握网页图像基础知识。（2）掌握插入图像以及设置图像格式的方法。。（3）掌握创建鼠标经过图像的方法。（4）掌握创建图像轮播的方法。（二）任务目标二、相关知识（一）网页图像基础知识网页中常用的图像格式有GIF、JPEG和PNG。GIF为图像交换格式，它主要采用LZW无损压缩算法，最多只能显示256种颜色。GIF格式主要用在菜单或图标等简单的图像中。GIFPNGJPEGJPEG为联合图像专家组格式。该图像格式采用有损压缩算法，在压缩图像时，可能会引起图像失真。PNG为可移植网络图像格式。该格式的图像压缩后不会失真，并且支持透明效果。二、相关知识（二）插入图像在Dreamweaver中插入图像的方法主要有以下3种。选择图像直接插入通过“文件”面板插入图像通过“资源”面板插入图像二、相关知识（三）设置图像属性选择图像后的“属性”面板如图所示，在其中可以对图像的属性进行设置。1．使用“属性”面板设置图像的“属性”面板二、相关知识（三）设置图像属性在HTML代码中，<img>标签是用于插入图像的，可以直接在“代码”视图中修改<img>标签的内容来修改图像的属性。2．使用<img>标签设置二、相关知识（三）设置图像属性3．使用快速“属性”检查器设置使用快速“属性”检查器设置图像属性为图像添加Class或ID类二、相关知识（四）创建鼠标经过图像在创建鼠标经过图像时，需要准备两张图像，一张主图像用于首次加载页面时显示，另一张图像是鼠标指针经过时显示的图像。需注意，这两张图像的大小最好相同，如果大小不同，第二张图像会自动与第一张图像的大小相匹配，有可能会产生较为严重的变形。选择图像并设置参数二、相关知识（五）创建图像轮播通过图像轮播可以在同一个位置显示多张图像，每隔一定的时间自动切换至下一张图像，用户也可以手动切换至上一张或下一张图像，单击图像下方的横线也可以切换到指定的图像，如图所示。图像轮播三、任务实施下面在“佳美馨装饰——成功案例”栏目网页中插入案例图像，具体操作如下。（一）插入案例图像定位光标插入点插入图像并设置图像大小插入其他案例图像三、任务实施下面在“佳美馨装饰——成功案例”栏目网页中使用鼠标经过图像制作按钮，具体操作如下。（二）使用鼠标经过图像制作按钮选择<div>标签单击“嵌套”按钮三、任务实施（二）使用鼠标经过图像制作按钮“插入鼠标经过图像”对话框设置图像宽度和高度单击“之后”按钮“插入鼠标经过图像”对话框三、任务实施（二）使用鼠标经过图像制作按钮设置图像宽度和高度插入其他鼠标经过图像三、任务实施下面在“佳美馨装饰——成功案例”网页中插入案例轮播图，具体操作如下。（三）插入案例轮播图单击“嵌套”按钮修改代码目录Contents制作“佳美馨装饰——成功案例”栏目网页任务二制作“佳美馨装饰——中式田园风格”内容网页实训一制作“中国皮影——皮影鉴赏”网页实训二制作“中国皮影——皮影的表演”网页本任务将制作“佳美馨装饰——中式田园风格”页面，该页面用于展示中式田园风格的装修效果，在网页中可加入视频、音频和动画等多媒体元素，使网页更具有动感，网页效果也更加出彩。一、任务描述（一）任务背景（1）掌握在网页中插入视频的方法。（2）掌握在网页中插入音频的方法。（3）掌握在网页中插入动画的方法。（二）任务目标二、相关知识（一）插入表格将光标插入点定位到需要插入<video>标签的位置，选择【插入】/【HTML】/【HTML5Video】菜单命令或在“插入”面板中单击“HTML5Video”按钮插入<video>标签，并生成一个标签占位符，然后在“属性”面板中设置视频的路径和其他属性.插入<video>标签<video>标签“属性”面板二、相关知识（二）插入音频将光标插入点定位到需要插入<audio>标签的位置，选择【插入】/【HTML】/【HTML5Audio】菜单命令或在“插入”面板中单击“HTML5Audio”按钮插入<audio>标签，并生成一个标签占位符，然后在属性面板中设置音频的路径和其他属性。插入<audio>标签<audio>标签“属性”面板二、相关知识（三）插入动画在“插入”面板中单击“动画合成”按钮，在打开的“选择动画合成”对话框中选择需要插入的动画合成文件，单击“确定”按钮即可插入动画文件，在网页中插入动画合成后，会在“属性”面板中显示动画合成的属性，在其中可设置动画合成的ID、CSS样式、宽度和高度。插入动画合成“动画合成”属性面板三、任务实施下面为“佳美馨装饰——中式田园风格”内容网页设置背景音乐，具体操作如下。（一）设置背景音乐插入<audio>标签设置<audio>标签属性三、任务实施下面为“佳美馨装饰——中式田园风格”网页插入并设置视频文件，具体操作如下。（二）插入并设置视频文件插入<video>标签设置<video>标签属性三、任务实施下面为“佳美馨装饰——中式田园风格”网页插入并设置动画，具体操作如下。（三）插入并设置动画“选择动画合成”对话框设置动画合成属性目录Contents制作“佳美馨装饰——成功案例”栏目网页任务二制作“佳美馨装饰——中式田园风格”内容网页实训一制作“中国皮影——皮影鉴赏”网页实训二制作“中国皮影——皮影的表演”网页本实训的要求是制作“中国皮影——皮影鉴赏”网页，其主体为3个按钮，当鼠标移动到按钮上时，会产生颜色变化，完成后的效果如图所示。实训要求实训一 制作“中国皮影——皮影鉴赏”网页本网页的主体部分分为3个由鼠标经过图像制作的书签形式的按钮，前两个按钮都由一张颜色较浅的png图像和一张颜色较深的png图像构成；第3个按钮由一张颜色较浅的png图像和一张动态gif图像构成。实训思路“中国皮影——皮影鉴赏”网页效果实训一 制作“中国皮影——皮影鉴赏”网页步骤提示要完成本实训，首先应插入一个1行4列、边框粗细为0、宽度为100%的表格，然后在第1个单元格中插入标题图像，最后在其他3个单元格中插入鼠标经过图像。其步骤如图所示。① 插入表格 ② 插入图标图像③ 插入鼠标经过图像目录Contents制作“佳美馨装饰——成功案例”栏目网页任务二制作“佳美馨装饰——中式田园风格”内容网页实训一制作“中国皮影——皮影鉴赏”网页实训二制作“中国皮影——皮影的表演”网页本实训的要求是制作“中国皮影——皮影的表演”网页，在其中将展示皮影表演的音频和视频，完成后的效果如图所示。实训要求实训二 制作“中国皮影——皮影的表演”网页在本网页的主体部分中须插入一个HTML5音频和一个HTML5视频，