网页设计与制作项目教程（第四版） 模块04在网页中展示多媒体

网页设计与制作项目教程（第四版）模块04在网页中展示多媒体教学课件教学目标Target•学习目标：理解多媒体概念；掌握音频/视频插入方法；熟悉HTML5媒体标签。•能力目标：能快速搭建多媒体页面；掌握视频嵌入与链接差异；实现响应式多媒体网站。•素养目标：培养审美与创新意识；提升复杂交互问题的解决能力；建立持续学习与团队协作精神。模块核心多媒体是现代网页的灵魂。本模块重点在于从传统的插件调用转向HTML5原生媒体标准的应用。任务引领一：点歌台功能实现任务说明：网页打开后显示点歌界面，点击歌曲名称后的播放图标，网页即可即时播放该歌曲音频。展示：歌曲列表、播放/下载图标、整体绿色基调排版实现重点1.页面精细化布局（多重嵌套表格）

2.HTML5Audio控件的插入

3.ID标识与JavaScript事件绑定步骤1：构建页面骨架与属性•1.新建index.html。•2.页面属性：字体设为12px，文字颜色为#59BB42。•3.主表：插入4行1列总表，设置居中对齐。•4.头部嵌套：第一行插入2行2列嵌套表（宽100%），合并左侧两行存放Logo。布局说明外表控制大区域，内表负责局部元素的精确对齐（如Logo、登录/注册区域的分离）。步骤2：填充导航与内容图标•1.Logo区：插入dgt.jpg。•2.功能区：插入QQ图标，输入“注册”、“登录”文字。•3.导航行：第二行插入menu.jpg图片导航。•4.分类区：第三行插入1行10列嵌套表，细化各频道图标。素材提示复杂的图片排版建议使用1行多列的窄表格，可以有效防止图标在不同分辨率下错位。步骤3：HTML5音频控件配置•1.光标定位于歌曲名之后。•2.菜单路径：“插入”->“HTML”->“HTML5Audio”。•3.参数设定：ID的唯一性ID是音频控件的“身份证”。为了能用点击图标的方式精确触发播放，必须给每个音频标签起一个唯一的名称。○源文件：media/aws.mp3○ID值：设为music_qqqg(千千阙歌缩写)步骤4：代码微调实现隐形播放需求：我们只想通过点击图标控制，不想显示HTML5默认的播放器条。•操作：点击音频图标->属性面板点击“编辑”图标。•代码插入：在标签内添加属性hidden=true。逻辑解析设置hidden属性后，控件在前端不可见，但其功能依然驻留在内存中，等待指令激活。步骤5：播放图标的交互实现•1.选中页面中的播放图标图片（bf.jpg）。•2.切换到“拆分”视图代码窗口。•3.添加属性：在图片标签内加入onclick="music_qqqg.play()"。事件触发onclick：当用户点击图片时触发指令。

.play()：调用对应ID音频对象的播放方法。专家提示：多媒体资源规范严禁将媒体文件与HTML混在根目录！•由于视频和音频文件通常体积巨大，必须建立专门的media文件夹进行管理。•文件名建议：使用全英文和下划线，禁止使用中文或特殊空格，否则在某些浏览器环境下会导致编码错误而无法播放。•引用路径：保持为media/xxx.mp4这种相对路径。相关知识：多媒体文件全览类别常见扩展名网页常用标准视频(Video)MP4,MOV,WMV,AVIMP4音频(Audio)MP3,WAV,MID,OGGMP3,OGG图片(Image)JPG,GIF,PNG,BMP,TIFJPG,PNG,GIF注：MP4、MP3因其高压缩率和极佳的跨平台兼容性，是网页多媒体的通用标准格式。相关知识：DW插入音频的步骤•菜单路径：“插入”->“HTML”->“Html5Audio”。•多重源设置：除了主“源”外，可在Alt源1/2处添加备选格式（如同时提供mp3和ogg）。兼容性逻辑不同浏览器对音频解码器的支持不同。设置多个源后，浏览器会自动按顺序识别第一个可播放的格式，确保100%可用。深度理论：音频(Audio)属性参数预览结果：按F12可见浏览器默认音频播放控件。核心开关•Loop：开启循环播放。•AutoPlay：页面载入立即播放（部分浏览器需静音才允许）。•Controls：显示默认播放器条。深度理论：标签属性表属性值描述srcURL音频文件的路径autoplayautoplay就绪后自动播放controlscontrols显示播放/暂停/音量按钮looploop结束后重新开始mutedmuted静音输出preloadauto/metadata预加载策略相关知识：健壮的音频代码结构为了保证在旧版本浏览器也能正常显示提示：回退机制当浏览器无法识别标签时，会自动跳过标签并显示内部的文本内容。这是网页开发中常见的“渐进增强”策略。操作：嵌入式视频(HTML5Video)•路径：菜单“插入”->“HTML”->“HTML5Video”。•尺寸设定：属性面板设置宽640，高360。视频比例注意：必须按照视频原始比例填写宽高。若比例失调，视频会出现左右或上下的黑边补齐，影响美观。操作：链接式视频(Hyperlink)对于特大视频文件，不适合在页面直接渲染，可采用链接式：•1.输入文字：“单击此处打开视频”。•2.链接设置：属性面板点击链接后面的文件夹图标。•3.文件：选择media/008.mp4。调用逻辑用户点击链接后，浏览器会根据系统设置直接下载或调起外部的独立媒体播放器（如WindowsMediaPlayer）播放。相关知识：非标准媒体文件的处理对于Flash动画（SWF）或特殊的QuickTime格式，若HTML5无法直接支持：•操作路径：菜单“插入”->“HTML”->“插件(Plugin)”。•原理：这会产生一个标签，强制要求浏览器寻找第三方插件来解析内容。专家警告随着Flash时代的终结，尽量不推荐使用插件方式，应尽可能将素材转换为标准的MP4/MP3格式。项目渐近：热门图文升级为热点视频实战挑战：将原有3张小图片替换为点击可播放的视频窗口。改造要点•1.创建media文件夹。•2.删除旧的标签。•3.插入HTML5Video控件。•4.匹配原始图片的像素尺寸。步骤：在hot.html中替换视频•1.打开hot.html，删除“蝴蝶效应”图片。•2.插入Video：菜单路径相同。•3.关键尺寸设定：•4.源文件：media/Butterfly_Effect.mp4提效技巧配置好第一个视频后，可以直接复制粘贴第一个视频控件到后两个空白格，然后仅在属性面板修改“源”文件名，大幅提速。○宽度“W”：279像素。○高度“H”：126像素。拓展训练：节日祝福多媒体网页任务要求：使用3行1列主表，中间行嵌套1行2列，左侧区域嵌入视频。要求整体风格温馨、加载顺畅。创意引导除了视频外，可以尝试开启的autoplay属性作为背景背景音乐，增加节日氛围。回味思考：客观练习(1)•1.Flash影片文件编译后的最终格式是？

答案：D.swf•2.HTML5标准下，插入嵌入式视频生成的专用标签是？

答案：D.•3.标记中表示循环播放的属性是？

答案：C.loop回味思考：客观练习(2)•4.DW原生支持的音频格式有？【多选题】

答案：A.wav、C.mp3(ogg亦支持)•5.在网页中插入视频有几种核心方式？

答案：B.两种（嵌入式与链接式）•6.Flash的原始工程源码文件（非播放版）扩展名是？

答案：A.fla思考题：多媒体性能优化Q：为了减轻访问者的负担（流量/加载），哪种音频格式最合适？Q：如何设置网页背景音乐自动循环？逻辑解析：

MP3格式最为合适。它采用了有损压缩技术，可以在人耳难以感知的范围内剔除多余数据，文件体积远小于WAV，且无需插件即可播放。逻辑解析：需要在标签属性中同时添加autoplay和loop。如果希望隐形播放，还需加上hidden="true"。