实训3超链接与多媒体文件应用




实训目标
（1） 掌握超链接标记的语法、属性的设置方法，学会为网页添加各种超链接。
（2） 掌握书签链接的定义与语法，学会使用书签链接设计Web页面。
（3） 掌握img和marquee标记的语法与属性的设置方法。
（4） 掌握embed标记的语法与属性的设置方法，为页面添加多媒体文件。

实训内容
（1） 使用超链接制作网站导航条。
（2） 使用无序列表制作网站导航条。
（3） 使用书签设计专业课程简介。
(4) 使用embed标记制作带有音乐、视频、动画的网页。

实训项目
(1) 旅游景点欣赏。
(2) Web前端技术新书推荐。
(3) 万维网简介。
(4) “专业课程简介”页面。
项目10旅游景点欣赏
1． 实训要求
(1) 使用div、a、ul、li、embed、img等标记设计“旅游景点欣赏”页面。
(2) 给“旅游景点欣赏”页面增加背景音乐效果。
2． 实训内容
(1) 超链接的应用。
(2) 无序列表的使用。
(3) 图像标记的应用。
(4) 背景音乐的应用。
(5) 样式表的定义与使用。
(6) 嵌入内容embed标记的定义与使用。
3． 实训所需知识点
(1) 超链接a标记(与embed标记配合使用)。


<ahref="" title="" target="embed" >链接内容</a>


(2) 无序列表ul标记。


<ul type= "">

<li type= "">列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>



(3) 图像img标记。


<img src="url" width="" height="" alt="" border="" align="">


(4) 使用embed标记(播放背景音乐、嵌入图像文件)。


<embed src="pro31/Sleep-Away.mp3" width="0" height="0">

<embed src="pro31/image-3-1-wlcc.jpg" name="embed" type="text/html" width="440px" height="350px"/>


(5) 标题、段落及水平分隔线等标记。


<h3>旅游景点欣赏</h3>

<hr color="red" size="3">

<p></p>


4． 实训所需素材
在pro31文件夹中提供了一个MP3文件和10个JPG文件，在设计页面时可以使用。
5． 实训过程与指导
编程实现“旅游景点欣赏”页面，用鼠标单击任一图像超链接，在底部嵌入内容embed标记中显示大图像； 在任一图像上盘旋时，图像旋转360°且过渡0．3s。页面效果如图31所示。其具体步骤如下： 


图31“旅游景点欣赏”页面


(1) 启动程序，创建HTML文档。启动编辑器软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_1．html。格式如下： 


<!-- prj_3_1.html -->


(2) 在HTML文档的head标记中插入样式style。
(3) 在body标记中执行如下操作： 
① 插入embed标记实现背景音乐。


<embed src="pro31/Sleep-Away.mp3" width="0" height="0">



② 插入类名为“div1”的div。


<div class="div1" ></div>


③ 在div中分别插入h3、hr、p、ul等标记。
 插入h3标记，内容为“中国十大名胜古迹欣赏”。
 插入hr标记，颜色为红色、大小为3。
 插入p标记。内容如下： 


万里长城、桂林山水、北京故宫、杭州西湖、苏州园林、安徽黄山、长江三峡、台湾日月潭、承德避暑山庄、西安兵马俑等旅游景点区分布于祖国的东西南北各个区域，包括自然景观、历史建筑、人文景观和文物古迹等。


 插入ul标记，并在ul标记中插入10个li标记,依次在每个li标记中插入超链接，并将文字和图像作为超链接的标题，图像放在pro31子文件夹中。格式如下： 


<li><a href="pro31/image-3-1-wlcc.jpg" target="embed">万里长城<br><img src="pro31/image-3-1-wlcc.jpg" /></a></li> 


 在div中插入embed标记，并设置name、src、width、height、type等属性。嵌入内容embed标记中默认显示的图像为pro31/image31wlcc．jpg。如下所示： 


<embed src="pro31/image-3-1-wlcc.jpg" name="embed" type="text/html" width="440px" height="350px" />


(4) 在head标记中插入style标记，并定义*、div、ul、li、h3、a等标记的样式。


<style type="text/css">

* {padding: 0;margin: 0;}

.div1 {




width: 1000px;height: 780px;margin: 0px auto;text-align: center;

padding: 50px;box-shadow: 0 0 10px #F1F2F3;/* 盒子阴影 */

}

h3 {font-size: 36px;color: red;padding-bottom: 10px;}

p {margin: 5px auto;text-indent: 2em;font-size: 18px;text-align: left;}

ul {margin: 5px auto;width: 900px;list-style-type: none;height: 320px;}

li {float: left;width: 150px;height: 130px;margin: 15px;}

img {border: 0;width: 150px;height: 100px;}

a:link,a:visited,a:active {text-decoration: none;}

a:hover {border-bottom: 4px solid #FF0000;}

/* 使用CSS3让img旋转360°、过渡0.3s,此时不能将a设置为行内块显示方式 ；

若想让整个超链接均有动画效果，则需要将a设置为行内块显示方式

a{display:inline-block;} 

a:hover{transform: rotate(360deg);transition: all 0.3s;}

*/

a {color: black;text-decoration: none;}

a:hover img {transform: rotate(360deg);transition: all 0.3s;}

 </style>


(5) 完成代码设计后打开浏览器，查看页面效果，如图31所示。单击任一张图后，能够在底部的embed标记中浏览该图对应的大图。
项目11Web前端技术新书推荐
1． 实训要求
(1) 使用a与iframe标记配合设置图像导航并浏览内嵌网页文件。
(2) 使用marquee标记实现网页滚动字幕的效果。
(3) 使用div与ul标记设置图像列表。 
(4) 学会使用字体font标记。
2． 实训内容
(1) 浮动框架标记及属性的应用。
(2) 滚动文字标记及属性的应用。
(3) 标题字与水平分隔线标记的应用。
(4) 图层、无序列表和超链接标记的应用。
(5) 字体font标记的使用。
(6) 样式表的定义与使用。
3． 实训所需知识点
(1) 定义列表ul标记。


<ul type= "">

<li type= "">列表项</li>

<li>列表项</li>

</ul>


(2) 样式style标记。


<style type="text/css">

ul{list-style-type:none;}/*删除列表项前面的符号*/ 

li{margin: 20px; display: inline-block;}/*设置边界为20px、行内块显示方式*/

</style>


(3) 图层div标记。


<div>…</div>


(4) 滚动文字marquee标记与字体font标记。


<marquee behavior="alternate" direction="left" height="36px" bgcolor="#F1F2F3"> <font face="隶书" size="5" >欢迎大家选用教材，欢迎交流讨论!</font></marquee>


(5) 标题字与水平分隔线标记。


<h1 align="center"> Web前端技术新书推荐</h1>

<hr color="red">


4． 实训过程与指导
编程设计“Web前端技术新书推荐”页面，效果如图32所示。其具体步骤如下： 


图32“Web前端技术新书推荐”页面


(1) 启动程序，创建HTML文档。启动编辑器软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_2．html。格式如下： 


<!-- prj_3_2.html -->


(2) 在HTML文档的head标记中插入样式style。
(3) 在body标记中插入div标记，并在div标记中分别插入以下标记： 
① 插入h1标记，内容为“Web前端技术新书推荐”，效果居中对齐。
② 插入hr标记，效果为红色。
③ 插入ul标记，在其中插入4个图像超链接。图像文件存储在pro32子文件夹中，文件分别为bookl．jpg、book2．jpg、book3．jpg、book4．jpg。超链接的target属性值均为detail，超链接的href属性值分别为pro32/book1．html、pro32/book2．html、pro32/book3．html、pro32/book4．html。
④ 插入hr标记，颜色为红色。
⑤ 插入iframe标记，定义name为detail、width为1000px、height为400px、框架边框为0、src为pro32/book1．html。
⑥ 插入滚动文字marquee标记。效果为向左交替滚动、高度为36px、背景颜色为#F1F2F3。内容为font标记修饰的“欢迎大家选用教材，欢迎交流讨论！”，字体大小为5、字体为隶书。
(4) 在style标记中分别定义body、ul、li、div和marquee标记样式。


<style type="text/css">

* {padding: 0;margin: 0;}

h1 {color: red;}

div {margin: 0 auto;width: 1000px;text-align: center;}

li {margin: 20px;display: inline-block;}

ul {list-style-type: none;}

img {width: 200px;}

a:hover img{border-radius: 55px 25px;box-shadow: 5px 5px 10px #DA85D9;}

a:hover {border-bottom: 10px solid red;}

marquee {margin: 0 auto;padding: 4px auto;}

</style> 


(5) 完成代码设计后打开浏览器，查看页面效果，如图32所示。
项目12万维网简介
1． 实训要求
(1) 编程实现万维网简介页面，如图33所示，要求使用内容嵌入embed标记和a标记设计页面，当在“1989年仲夏之夜，蒂姆成功开发出世界上第一个Web服务器和第一个Web客户机”超链接上盘旋时，显示被隐藏的信息，如图34所示。


图33万维网简介初始页面




图34在超链接上盘旋时的页面


(2) 分别使用embed标记显示PNG图和MP4视频文件。
(3) 使用CSS的display属性实现div的隐藏与显示。
2． 实训内容
(1) 超链接的定义与应用。
(2) embed标记的定义与使用。
(3) 段落、标题字与图层标记的使用。 
(4) 样式表的定义与使用。
3． 实训所需知识点
(1) 超链接a标记。


<a href="" target="" title="">…</a>


(2) 内容嵌入embed标记。


<embed src="pro33/What-Is-The-World-Wide-Web.mp4" type="" width="600px" height="359px">

<embed src="pro33/tim.png" type="text/html" width="640px" height="359px"> 


(3) 段落p、图层div、标题字h2标记。


<p align="center ">…</p>

<div id="main"></div>

<h2>万维网的发明者、英国计算机科学家:蒂姆·伯纳斯·李(Tim Berners-Lee)</h2>


(4) 样式style标记。


<style type="text/css">

#container {width: 1260px;margin: 0 auto;text-align: center;}

a:visited,a:link,a:active {text-decoration: none;}

</style>


4． 实训过程与指导
使用div、embed、a等标记组合实现页面，效果如图33所示。其具体步骤如下： 
(1) 启动程序，创建HTML文档。启动编辑器软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_3．html。格式如下： 


<!-- prj_3_3.html -->


(2) 在HTML文档的head标记中插入样式style。
(3) 在body标记中插入div标记。在div标记中分别进行下列操作： 
① 插入h2标记，内容为“万维网的发明者、英国计算机科学家： 蒂姆·伯纳斯·李(Tim BernersLee)”。
② 插入embed标记，并设置src、type、width、height等属性。格式如下： 


<embed src="pro33/tim.png" type="text/html" width="640px" height="359px">

<embed src="pro33/What-Is-The-World-Wide-Web.mp4" type="" width="600px" height="359px"> 


③ 插入div标记，id为main，并在其中插入一个a标记和一个子div标记。其内容分别如下： 
超链接a的href属性值为“http：//info．cern．ch/hypertext/WWW/TheProject．html”，超链接的标题为“1989年仲夏之夜，蒂姆成功开发出世界上第一个Web服务器和第一个Web客户机”，文字效果为加粗。
子div的id为“content”，包含两个p标记。其内容如下： 


1989年12月，蒂姆为他的发明正式定名为World Wide Web，即我们熟悉的WWW；1991年5月WWW在Internet上首次露面，立即引起轰动，获得了极大的成功，被广泛推广应用。

Web通过一种超文本方式把网络上不同计算机内的信息有机地结合在一起，并且可以通过超文本传输协议(HTTP)从一台Web服务器转到另一台Web服务器上检索信息。Web服务器能发布图文并茂的信息，甚至在软件支持的情况下还可以发布音频和视频信息。此外，Internet的许多其他功能，如E-mail、Telnet、 FTP、WAIS等都可通过Web实现。


④ 插入p标记。其内容为超链接。格式如下： 


<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">World Wide Web</a>


(4) 保存并查看网页，页面效果如图35所示(未应用样式)。


图35未定义样式时的初始页面效果图


(5) 在style标记中分别定义相关样式。 


<style type="text/css">

#container {width: 1260px;margin: 0 auto;text-align: center;}

embed{display: inline-block;}

#content {display: none;}

#content {margin: 0 auto;width: 1260px;font-size: 18px;}


#content p {text-indent: 2em;font-size: 18px;text-align:left;}

#main:hover #content {display: block;}

a{font-size: 18px;padding-top: 10px;width: 100%;

height: 40px;display: inline-block;

}

a:visited,a:link,a:active {text-decoration: none;}

a:hover {background-color: #F1F2FC;}

.copyright{width: 100%;height: 50px;background-color: #F1FCFA;}

 </style>


(6) 完成代码设计后打开浏览器，查看页面效果，如图33所示。
项目13“专业课程简介”页面
1. 实训要求
使用无序列表与书签链接制作“专业课程简介”页面。
2. 实训内容
(1) 超链接的定义与使用。
(2) 书签的定义与使用。
(3) 无序列表的定义与使用。
(4) HTML注释标记的使用。
3. 实训所需知识点
(1) 超链接a标记。



<a name="书签名称"  href=""  target="">链接内容</a>


(2) 段落p以及标题字h2、h3标记。



<h2 align="center">专业课程导航</h2>

<h3><a name="dir3"></a>大学物理</h3>

<p>随着科学技术的迅猛发展…</p>


(3) 无序列表ul标记。



<ul>

<li>英语</li>

<li>高等数学</li>

<li>大学物理</li>

</ul> 


(4) 样式style标记。



<style type="text/css">

p{text-indent: 2em;/*首行缩进两个字符*/}

</style>


4. 书签的定义与使用
通过超链接a标记的name和href属性设置书签名称和书签链接，分为以下两个步骤：  
(1) 定义书签名称。



<a name="书签名称" >书签标题</a>


(2) 制作书签链接。
① 同页面内使用书签链接，格式如下： 



<a href="#书签名称" target="窗口名称"></a>


② 异页面内使用书签链接，格式如下： 



<a href="url#书签名称" target="窗口名称"></a>


③ 注释标记： 



<!--  注释语句  -->



5. 实训过程与指导
编程实现“专业课程简介”页面，效果如图36所示。其具体步骤如下： 


图36“专业课程简介”页面


(1) 启动程序，创建HTML文档。启动编辑器软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_3_4.html。格式如下： 



<!-- prj_3_4.html -->




(2) 在body标记中进行下列操作： 
① 插入h2标记，内容为“专业课程导航”，设置align属性为居中。
② 用超链接定义根书签名称。代码如下： 



<a name="dir0">专业课程导航</a>


③ 在body中插入一个无序列表，定义课程书签链接导航目录。在无序列表中插入列表项，在列表项里用超链接建立书签链接，书签名称分别为dir1、dir2、dir3。代码如下： 



<ul>

<li><a href="#dir1">英语</a></li>

<li><a href="#dir2">高等数学</a></li>

<li><a href="#dir3">大学物理</a></li>

</ul>


④ 分别用标题字h3标记和段落标记来定义各个书签的具体内容，并设置返回“根书签”的链接。第一个书签和书签对应的内容定义代码如下： 



<h3><a name="dir1">英语</a> </h3>    <!-- 英语 -->

<p>基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<strong><a href="#dir0">返回</a></strong> 

</p>


其他两个书签的代码格式与上类似，书签对应的内容如下： 




高等数学

随着科学技术的迅猛发展，数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础，是理科各专业和经济管理专业类学生的必修课，也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学，使学生掌握处理数学问题的思想和方法，培养学生的科学思维能力，同时为后续课程的学习奠定良好的基础。 返回

大学物理

以物理学基础为内容的大学物理课程，是理工科各专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。 返回


(3) 完成代码设计后打开浏览器，查看网页效果，如图36所示。
课外拓展训练3
1． 按要求设计Web页面，如图37所示。要求如下： 
(1) 页面标题为“桂林风景展览”。
(2) 正文标题为红色“桂林风景展览”，图片分别为image31．jpg、image32．jpg、image33．jpg、image34．jpg,图片存储在kwtz31子文件夹中； 采用无序列表布局，每一个列表项的内容为图像链接，单击小图可以浏览大图。
(3) 定义样式。img标记样式为“宽度100px、高度100px、边框0px”； h3标记样式为“红色、居中”； ul样式为“去除列表项前的符号、内容居中显示、边界上下为0、左右自动、宽度520px、高度150px”； li样式为“行内块显示、宽度120px、行高30px”。
(4) 程序名称为project_3_1．html。
注意： 图像圆角边框样式采用的规则如下。 


a:hover img{

border-radius: 25px;/*盘旋时图像改为圆角边框*/

}




图37桂林风景展览


2． 设计“勤奋好学的四大典故”页面，效果如图38所示。要求如下： 


图38“勤奋好学的四大典故”页面


(1) 页面标题为“勤奋好学的四大典故”，页面首行以1号标题字显示，标题为“勤奋好学的四大典故”，颜色为红色。
(2) 在body标记中插入一个div，并在div中插入h1、hr、marquee、iframe等标记。设置div样式为宽度1000px、有边界(上下0、左右自动)。 
(3) 在div中插入h1标记，内容为“勤奋好学的四大典故”。页面中间插入两条水平分隔线，分隔线中间滚动文字标记，滚动方式为来回交替滚动。滚动文字标记内插入4幅勤奋好学的四大典故的图像，它们分别是image32xlcg．jpg(悬梁刺股)、image32zbtg．jpg(凿壁偷光)、image32ynyx．jpg(萤囊映雪)、image32wjqw．jpg(闻鸡起舞)，图像文件存储在子文件夹kwtz32中，当单击相关超链接时，在下面的浮动框架中打开链接目标。相关超链接信息如表31所示。在分隔条下面插入一个浮动框架，设置浮动框架的name为“content”，默认src为“kwtz32/kwtz321．html”，宽度为100%，高度为100px,浮动框架居中显示。 


表31勤奋好学的四大典故中的超链接信息


href
title
kwtz32/kwtz321．html
悬梁刺股
kwtz32/kwtz322．html
凿壁偷光
kwtz32/kwtz323．html
萤囊映雪
kwtz32/kwtz324．html
闻鸡起舞

(4)  鼠标悬停在滚动图像上时会停止滚动(设置onmouseover="this．stop()；")，鼠标从滚动图像上移出时会继续滚动(onmouseout="this．start()；")，单击超链接时访问相关链接网站。
(5) 程序名称为project_3_2．html。