网页设计与制作项目化教程（微课版）课件 项目6-中国传统戏曲页面_第1页
网页设计与制作项目化教程（微课版）课件 项目6-中国传统戏曲页面_第2页
网页设计与制作项目化教程（微课版）课件 项目6-中国传统戏曲页面_第3页
网页设计与制作项目化教程（微课版）课件 项目6-中国传统戏曲页面_第4页
网页设计与制作项目化教程（微课版）课件 项目6-中国传统戏曲页面_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WEB中国传统戏曲页面项目6HTML5+CSS3项目化教程2个任务·6个学习小节模块1启航项目06项目6中国传统戏曲页面本章任务01制作视频栏目3个小节02制作音频栏目3个小节模块1启航项目|项目6中国传统戏曲页面026.1制作视频栏目根据图6-1-1所示效果，制作中国传统戏曲网首页；根据图6-1-2所示效果…知识点·概念熟悉HTML5支持的视频格式。掌握<video>标签语法格式及其相关属性。掌握HTML5中嵌入视频的常见操作方法。能够规范制作视频栏目，并能够进行CSS样式设计。语法格式<videosrc="视频文件路径"controls="controls"></video><htmllang="en"><videosrc="video/mdt.mp4"controls>浏览器不支持video标签</video>任务效果图图任务6.1任务效果主要环节1HTML5支持的视频格式2在HTML5中嵌入视频3视频文件兼容性问题模块1启航项目|项目6中国传统戏曲页面|任务6.1036.1任务实现过程任务实现过程1/1任务分析此任务的目标是制作中国传统戏曲网首页和“看戏”栏目链接的视频播放子页面对照图6-1-2…实现步骤1任务实现（1）创建中国传统戏曲网首页文件default.html…代码实现/*代码6-1-4*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>中国传统戏曲</title><linkrel="stylesheet"href="style.css"></head><body><divclass="logo"><!--Logo--></div><divclass="banner"><!--Banner--></div>（本步其余16行见教材）提示：完整代码见教材代码6-1-4模块1启航项目|项目6中国传统戏曲页面|任务实现过程046.1.1HTML5支持的视频格式任务6.1制作视频栏目HTML5和浏览器都对视频格式有严格的要求，仅有少数几种视频格式能够同时满足HTML5和浏览器的要求…本节要点HTML5支持的视频格式主要包括Ogg、MP4、WebM等，具体要求如下Ogg：一种开源的视频封装容器，其视频文件扩展名为“.ogg”，可以封装Vorbis音频MP4：目前十分流行的视频格式，视频文件使用H264视频编/解码器和AAC音频编/解码器WebM：由谷歌公司发布的一个开放、免费的媒体文件格式，使用VP8视频编/解码器和Vor模块1启航项目|项目6中国传统戏曲页面056.1.2在HTML5中嵌入视频任务6.1制作视频栏目在HTML5中，使用<video>标签定义视频文件，它支持三种视频格式，分别为Ogg、MP4和WebM。本节要点使用<video>标签嵌入视频的基本语法格式如下在上面的语法格式中，src属性用于设置视频文件的路径，controls属性用于控制是否显运行效果如图6-1-3所示图6-1-3显示的是视频未播放的状态，视频页面底部是浏览器默认添加的视频控件，用于控制视除了src和controls属性，在<video>标签中还可以添加其他属性，进一步优化视语法格式<videosrc="视频文件路径"controls="controls"></video>模块1启航项目|项目6中国传统戏曲页面066.1.3视频文件兼容性问题任务6.1制作视频栏目虽然HTML5支持Ogg、MP4和WebM格式的视频文件，但并不是所有的浏览器都支持这些格式，因此在嵌入视频格式时…本节要点从表6-1-2中可以看出，有些浏览器会有一些不兼容的视频格式在HTML5中，运用<source>标签可以为<video>标签提供多个备用文件在上面的语法格式中，可以指定多个<source>标签为浏览器提供备用的视频文件src：用于指定视频文件的路径type：用于指定媒体文件的类型和格式，视频格式的MIME类型如表6-1-3所示语法格式<sourcesrc="视频文件路径"type="媒体文件类型/格式">模块1启航项目|项目6中国传统戏曲页面076.2制作音频栏目首先根据图6-2-1所示效果，继续制作中国传统戏曲网首页，在首页中添加“听曲”栏目；然后根据图6-2-2所示效果…知识点·概念熟悉HTML5支持的音频格式。掌握<audio>标签语法格式及其相关属性。掌握在HTML5中嵌入音频的常见操作方法。能够规范制作音频栏目，并能够进行CSS样式设计。语法格式<audiosrc="音频文件路径"controls="controls"></audio><audiosrc="audio/nfm.mp3"controls>浏览器不支持audio标签</audio><sourcesrc="音频文件路径"type="音频文件类型/格式">任务效果图图任务6.2任务效果主要环节1HTML5支持的音频格式2在HTML5中嵌入音频3音频文件兼容性问题模块1启航项目|项目6中国传统戏曲页面|任务6.2086.2任务实现过程任务实现过程1/1任务分析此任务的目标是制作中国传统戏曲网首页“听曲”栏目和其链接的音频播放子页面对照图6-2-2不难发现，中国传统戏曲网音频播放子页面采用两列布局的方式…实现步骤1任务实现（1）打开中国传统戏曲网首页文件default.html…代码实现/*代码6-2-3*/<divclass="music"><h2>听曲<spanclass="more"><ahref="#">更多</a></span></h2><dl><dd><ahref="audio.html"><h3>贵妃醉酒</h3><h4>梅兰芳</h4></a></dd><dd><ahref="audio.html"><h3>十八相送</h3><h4>袁雪芬</h4></a></dd>…（本步其余16行见教材）提示：完整代码见教材代码6-2-3模块1启航项目|项目6中国传统戏曲页面|任务实现过程096.2.1HTML5支持的音频格式任务6.2制作音频栏目目前，HTML5支持三种音频格式，即MP3、Wav和Ogg，具体介绍如下。本节要点MP3：一种音频压缩技术，是目前主流的音频格式，其音频文件扩展名为“.mp3”Wav：微软公司开发的一种音频格式，其音频文件扩展名为“.wav”Ogg：当Ogg文件只封装音频编码时，它就会变成一个音频文件模块1启航项目|项目6中国传统戏曲页面106.2.2在HTML5中嵌入音频任务6.2制作音频栏目在HTML5中，使用<audio>标签嵌入音频文件，其基本语法格式如下。本节要点从上面的基本语法格式中可以看出，<audio>标签的语法与<video>标签的类似，在<使用<audio>标签在页面中嵌入MP3音频，如代码6-2-1所示运行效果如图6-2-3所示图6-2-3显示的是音频控件，用于控制音频文件的播放状态，一般包括播放（暂停）、进度条、除了src和controls属性，在<audio>标签中还可以添加其他属性，进一步优化音语法格式<audiosrc="音频文件路径"controls="controls"></audio>模块1启航项目|项目6中国传统戏曲页面116.2.3音频文件兼容性问题任务6.2制作音频栏目虽然HTML5支持MP3、Wav和Ogg等音频格式，但并不是所有的浏览器都支持这些格式，因此在嵌入音频格式时…本节要点从表6-2-2中可以看出，有些浏览器会有一些不兼容的音频格式在HTML5中，运用<source>标签可以为<aud

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论