工信版（中职）Web前端设计基础 项目四电子课件.pptx

《工信版（中职）Web前端设计基础 项目四电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目四电子课件.pptx（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目四电子课件网页中的多媒体项目四授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点创建锚点链接和热点地图；插入音视频文件；制作视频播放器。制作音乐播放器；创建超链接；二 知识准备建立超链接；添加音频文件；添加视频文件。建立超链接在HTML文件中最重要的应用之一就是超链接，它能够让浏览者在各个独立的页面之间方便地跳转。超链接有外部链接、内部链接、电子邮件链接、锚点链接、空连接、脚本链接等。建立超链接1.URL概念URL为Uniform Resource Locato

2、r的缩写，翻译为“统一资源定位器”，它是从互联网上得到资源位置和访问方法的一种表示，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。建立超链接2.超链接标签在HTML 5中建立超链接使用的标签为。超链接的基本结构如下：超链接文字href属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等，指向不同目标类型的超链接有三类，如表所示。href目标目标举例说明举例说明链接到各种类型的链接到各种类型的文件文件链接到index.html文件链接到图片链接到Word文档链接到RAR压缩文件链接到其他网站或链接到其他网站或FTP

3、服务器服务器链接到百度首页链接到FTP服务器链接到电子邮件链接到电子邮件链接到电子邮件地址建立超链接2.超链接标签target属性来控制浏览器窗口的打开方式，target属性值有四个，如表所示。target属性值属性值说明说明_self默认方式，即在当前窗口打开链接_blank在一个全新的空白窗口中打开链接_top在顶层框架中打开链接_parent在当前框架的上一层里打开链接建立超链接2.超链接标签【例4-1】target属性值_blank实例，代码如下所示（示例文件4-1.html）。target属性_blank实例新窗口打开百度在chrome浏览器中预览单击超链接建立超链接3.创建锚点链接

4、对于内容比较多导致页面过长的网页，访问者需要不停地拖动浏览器上的滚动条来查看网页中的内容，为了方便查看，在网页中需要建立锚点链接。所谓锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。建立超链接3.创建锚点链接【例4-2】锚点链接实例，代码如下所示（示例文件4-2.html）。WEB前端设计教程目录项目一项目二项目三项目四项目五项目六项目七项目八项目一本项目讲解的内容是.项目二本项目讲解的内容是.项目三本项目讲解的内容是.项目四本项目讲解的内容是.项目五本项目讲解的内容是.项目六本项目讲解的内容是.项目七本项目讲解的内容是.项目八本项目讲解的内容是.在chrome浏览器中预览建立超

5、链接4.创建热点区域在浏览网页时，当单击某图片的不同区域就会链接到不同的目标页面，这就是图片的热点区域。在HTML 5中可以为图片创建三种类型的热点区域：矩形、圆形和多边形。创建热点区域使用和标签，其结构如下：建立超链接4.创建热点区域建立图片热点区域时，必须插入图片且为图片增加usemap属性，属性值必须以“#”开头，加上名称。标签只有一个name属性，作用是为区域命名，设置值必须与标签的usemap属性值相同。定义热点区域的形状及链接目标地址，它有三个必需的属性，shape和coords属性取值如表所示，herf属性为热点区域设置超链接的目标，设置值为“#”时，表示空链接。shape属性属

6、性coords属性值属性值说明说明rect（矩形）（矩形）coords=x1,y1,x2,y2左上角坐标为（x1,y1），右下角坐标为（x2，y2）circle（圆形）（圆形）coords=x,y,r圆心坐标为（x，y），半径为rpoly（多边形）（多边形）coords=x1,y1,x2,y2,x3,y3（x1,y1）、（x2，y2）、（x3，y3）为多边形的各个点的坐标建立超链接4.创建热点区域【例4-3】创建热点区域实例，代码如下所示（示例文件4-3.html）。热点区域实例在chrome浏览器中预览添加音频文件1.概述audio标签主要是定义播放声音文件和音频流的标准。它支持Ogg、MP

7、3和WAV三种音频格式。在HTML 5中播放音频，结构如下：其中src属性定义要播放的音频地址，controls属性是提供添加播放、暂停和音量控件的属性，在之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。标签的常见和含义属性如表所示。属性属性值值描述描述autoplayautoplay（自动播放）出现该属性，音频在就绪后马上播放。controlscontrols（控制）出现该属性，向用户显示控件，比如播放按钮。looploop（循环）出现该属性，每当音频结束时重新开始播放。preloadpreload（加载）出现该属性，音频在页面加载时进行加载，并预备播放。如果使用autopl

8、ay，则忽略该属性。srcurl（地址）要播放的音频的URL。添加音频文件2.在网页中添加音频文件在网页中添加音频文件时，根据自己的需求可以添加不同类型的音频文件，如添加自动播放的音频文件、添加带有控件的音频文件、添加循环播放的音频文件和添加预播放的音频文件。添加音频文件2.在网页中添加音频文件【例4-4】在网页中添加音频文件实例，代码如下所示（示例文件4-4.html）。网页中添加音频文件自动播放的音频文件带有控件的音频文件循环播放的音频文件自动播放的音频文件带有控件的音频文件循环播放的音频文件可简写为添加音频文件2.在网页中添加音频文件【例4-4】在网页中添加音频文件实例，代码如下所示（示

9、例文件4-4.html）。网页中添加音频文件自动播放的音频文件带有控件的音频文件循环播放的音频文件在chrome浏览器中预览添加音频文件2.在网页中添加音频文件在网页中添加预播放的音频文件时，preload属性定义在页面加载后是否载入音频，如果设置了autoplay属性，则忽略该属性。preload属性值有三种，分别如下。auto：当页面加载后载入整个音频。meta：当页面加载后只载入元数据。none：当页面加载后不载入音频。添加音频文件2.在网页中添加音频文件【例4-5】在网页中添加预播放的音频文件实例，代码如下所示（示例文件4-5.html）。添加预播放的音频文件添加预播放的音频文件在ch

10、rome浏览器中预览添加视频文件1.标签概述标签定义了播放视频文件或视频流的标准，它支持三种视频格式，分别为Ogg、MPEG4和WebM。Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件；MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件；WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。在HTML 5网页中播放视频，结构如下：其中src属性定义要播放的视频地址，controls属性是提供添加播放、暂停和音量控件的属性，在之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。添加视频文件1.标签概述标签的常见和含义属性如表所示。属性属

11、性值值描述描述autoplayautoplay（自动播放）出现该属性，视频在就绪后马上播放。controlscontrols（控制）出现该属性，向用户显示控件，比如播放按钮。height高度值设置视频播放器的高度。width宽度值设置视频播放器的宽度。looploop（循环）出现该属性，媒介文件完成播放后再次开始播放。preloadpreload（加载）出现该属性，视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl（地址）要播放的视频的URL。mutedmuted（静音）设置视频的音频输出应该被静音。posterurl（图片文件地址）设置视频下载时显示

12、的图像，或者在用户点击播放按钮前显示的图像。添加视频文件2.在网页中添加视频文件在网页中添加视频文件时，根据自己的需求可以添加不同类型的视频文件，如添加自动播放的视频文件、添加带有控件的视频文件、添加循环播放的视频文件和添加预播放的视频文件，另外还可以设置视频文件的高度和宽度。添加视频文件2.在网页中添加视频文件【例4-6】在网页中添加视频文件实例，代码如下所示（示例文件4-6.html）。网页中添加视频文件自动播放的视频文件带有控件的视频文件循环播放的视频文件在chrome浏览器中预览添加视频文件2.在网页中添加视频文件在网页中添加预播放的视频文件时，preload属性定义在页面加载后是否载

13、入视频，如果设置了autoplay属性，则忽略该属性。preload属性值有三种，分别如下。auto：当页面加载后载入整个视频。meta：当页面加载后只载入元数据。none：当页面加载后不载入视频。添加视频文件2.在网页中添加视频文件【例4-7】在网页中添加预播放的视频文件实例，代码如下所示（示例文件4-7.html）。添加预播放的视频文件添加预播放的视频文件在chrome浏览器中预览添加视频文件3.设置视频文件的高度和宽度【例4-8】设置视频文件的高度和宽度实例，代码如下所示（示例文件4-8.html）。设置视频文件的高度和宽度设置视频文件的高度和宽度在chrome浏览器中预览三 项目实施通

14、过此项目的学习，学习到HTML 5网页中超链接、音频、视频等标签元素，下面通过制作HTML 5音乐播放器来应用这些网页元素，效果如图所示。制作HTML 5音乐播放器三 项目实施启动Sublime程序，新建并保存文件名称为4-9.html。第一步第二步Head标签内的代码输入如下：HTML5音乐播放器 a:hovertext-decoration:none;font-size:14px;color:red;三 项目实施第三步body标签内的代码输入如下：歌曲欣赏祖国万岁我爱你中国感恩祖国共和国的日子var audio=document.getElementById(audio);function

15、 one()audio.src=media/01.mp3;audio.play();function two()audio.src=media/02.mp3;audio.play();function three()audio.src=media/03.mp3;audio.play();function four()audio.src=media/04.mp3;audio.play();使用audio标签插入音频播放器，设置src为空、id为audio（设置id的作用是下面的代码通过使用getElementById()来访问元素）。JavaScript代码，功能是给audio标签的src赋值，

16、当单击上面的超链接时播放相对应的歌曲。分别通过设置audio对象的src的值来实现不同音频源文件的准备，接下来使用audio对象的play()方法来播放音频文件。三 项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展此项目拓展创建视频播放器，效果如图所示。四 项目拓展用Sublime编辑器新建并保存文件4-10.html。第一步第二步Head标签内的代码输入如下：HTML5视频播放器 pwidth:680px;四 项目拓展第三步 HTML5视频播放器 亲，您的浏览器不支持html5的video标签！播放 暂停 快进10秒 快退1

17、0秒 无声 加速播放 减速播放 正常播放 调高嗓门 调低嗓门 body标签内的代码输入如下：使用video标签插入视频播放器，设置src为空、id为video（设置id的作用是为了下面的JavaScript代码获得video元素）。设置controls的值，在HTML 5中规定用controls属性来控制视频文件的播放、暂停、停止和调节音量等操作。controls是一个布尔属性，一旦添加了此属性，等于高速浏览器需要显示播放控制并允许用户进行操作。为button按钮添加了onclick属性，onclick属性是由元素上的鼠标点击触发。四 项目拓展第三步 var video=document.ge

18、tElementById(video);/播放 function bofang()video.play();/暂停 function zanting()video.pause();/快进10秒 function kuaijin()video.currentTime +=10;/快退10秒 function kuaitui()video.currentTime-=10;/有声和无声 即静音和不静音 function shutup(obj)if(video.muted)obj.innerHTML=无声;video.muted=false;else obj.innerHTML=有声;video.mu

19、ted=true;function speedup()video.playbackRate=3;function speeddown()video.playbackRate=1/3;function normal()video.playbackRate=1;function upper()video.volume+=0.1;/声音值得范围是0-1 function lower()video.volume-=0.1;JavaScript代码，功能是单击button按钮来改变视频播放器video对象的属性和方法，从而产生不同的效果。使用了video对象的play()方法来控制视频的播放。使用了vi

20、deo对象的pause()方法来控制视频的暂停。分别通过设置video对象属性的值，来改变快进、快退、有声、无声、加速播放、减速播放、正常播放、增加音量和降低音量操作。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了HTML 5音频和视频播放器两个案例，学习了在网页中添加超链接、音频、视频和控制音视频对象的属性和方法，掌握了、等标签的使用方法。五 项目小结本项目主要知识点总结如表所示。多媒体标签格式总结标签或属性标签或属性格式或用法格式或用法说明说明标签标签超链接文字超链接标签href属性

21、属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等标签属性target属性属性控制浏览器窗口的打开方式，target属性值有四个：_self、_blank、_top、_parent标标 签签 和和标签标签创建热点区域标签name属性属性为区域命名，设置值必须与标签的usemap属性值相同创建热点区域属性usemap属性属性建立图片热点区域时，必须插入图片且为图片增加usemap属性，属性值必须以“#”开头，加上名称shape属性属性rect（矩形）circle（圆形）poly（多边形）coords属性属性coords=x1,y1,x2,y2coords=x

22、,y,rcoords=x1,y1,x2,y2,x3,y3标签标签添加音频标签五 项目小结本项目主要知识点总结如表所示。多媒体标签格式总结标签或属性标签或属性格式或用法格式或用法说明说明src属性属性定义要播放的音频地址标签的常见属性controls属性属性提供添加播放、暂停和音量控件的属性autoplay属性属性出现该属性，音频在就绪后马上播放loop属性属性出现该属性，每当音频结束时重新开始播放preload属性属性出现该属性，音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload属性值有三种：auto、meta、none标签标签添加视频标签src属性属

23、性定义要播放的视频地址标签的常见属性controls属性属性提供添加播放、暂停和音量控件的属性autoplay属性属性出现该属性，视频在就绪后马上播放height属性属性设置视频播放器的高度width属性属性设置视频播放器的宽度loop属性属性出现该属性，媒介文件完成播放后再次开始播放preload属性属性出现该属性，视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload属性值有三种：auto、meta、nonemuted属性属性设置视频的音频输出应该被静音poster属性属性设置视频下载时显示的图像，或在用户点击播放按钮前显示的图像六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise4.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。End