计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音
description
Transcript of 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音
![Page 2: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/2.jpg)
目标 插入动画内容 使用“资源”面板 理解插件 为网页添加视频和声音
2
![Page 3: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/3.jpg)
3
准备工作 将多媒体文件 ( 视频、音频、动画 ) 放到站点文件夹的子文件夹“ assets” 内。
![Page 4: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/4.jpg)
4
1. 插入 Flash 动画 (swf) 定位光标,在面板“资源”内选中要添加的 swf 文件,再单击“插入”按钮。 手工调整动画的宽和高。
![Page 5: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/5.jpg)
5
修改动画的属性
![Page 6: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/6.jpg)
6
保存页面时“确认”
![Page 7: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/7.jpg)
7
2. 添加 Flash 视频 (flv) 用 Flash 视频代替页面内的手机图片。为了重用图片的文字环绕样式,记住 ID 为
recommend 。
![Page 8: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/8.jpg)
8
插入 Flash 视频 删 除 图 片 , 定 位 光 标 , 菜 单 插 入 >> 媒 体
>>FLV 。
![Page 9: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/9.jpg)
9
修改 flash 视频属性
![Page 10: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/10.jpg)
10
3. 插入影片视频 (mpg) 用影片视频代替页面内的手机图片。为了重用图片的文字环绕样式,记住 ID 为 recommend 。
![Page 11: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/11.jpg)
11
插入影片视频 删除图片,定位光标,在面板“资源”内选中要添加的 mpg 文件,再单击“插入”按钮。
![Page 12: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/12.jpg)
12
修改影片视频属性 视频原始大小为352 ×288 ,额外添加 20 像素的高度用于显示播放控制面板。
![Page 13: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/13.jpg)
13
4. 插入声音 定位光标,菜单 插入 >> 媒体 >> 插件,选定音频文件后在页面出现一个插件图标。 手工调整插件图标的高度和宽度,使之足够容纳音频播放控制面板。
如有必要,可在“属性”面板设置插件的“ ID” 、“对齐”、“类”等属性
![Page 14: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/14.jpg)
14
浏览器预览
![Page 15: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/15.jpg)
15
修改音频的自动播放属性 单击插件图标,面板 属性 >> 参数…。
手工添加参数 autoplay 。若值设为“ true” ,则页面打开时自动播放此音频。
![Page 16: 计算机网络 与网页制作 Chapter 14 : 添加动画、视频和声音](https://reader034.fdocuments.net/reader034/viewer/2022050703/56815b3c550346895dc91877/html5/thumbnails/16.jpg)
16
小结 添加 Flash 动画 添加 Flash 视频 添加影片视频 添加声音