WEB前端人机导论实验-实训3超链接与多媒体文件应用

发布时间:2024年01月14日

1.项目1 ?设计简易灯箱画廊

A.题目要求:

编程实现简易灯箱画廊,鼠标单击任一个图像超链接,在底部浮动框架中显示大图像,效果如下的页面。

B.思路:

(1)CSS样式:

a.在样式中对body元素进行居中对齐,设置标题的字体大小和颜色,以及列表、列表项、图片和链接的样式。

b..创建一个名为"div1"的<div>元素,作为整个内容的容器。这个<div>元素具有指定的宽度、高度和背景颜色。

(2)主体内容:

a.在"div1"中,设置一个标题<h3>标签,并使用水平线<hr>来分隔标题和图像列表。

b.创建一个无序列表<ul>,用于显示图像缩略图。这个列表具有指定的宽度、高度,去除了原点符号,并在水平方向上居中对齐。

c.在列表中创建六个列表项<li>,每个列表项包含一个链接<a>和一个图像<img>,这些图像用于显示缩略图。链接指向不同的大图,通过href属性定义,同时使用target属性将大图显示在名为"iframe"的<iframe>元素中。

d.为链接定义鼠标悬停效果,当鼠标悬停在链接上时,添加下划线和红色底边。

e.最后,创建一个<iframe>元素,用于显示大图。它的src属性初始值为"img/trees/t1.jpg",名称为"iframe",并且具有指定的宽度、高度和无边框。

C.总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易灯箱画廊设计</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			h3{
				font-size: 24px;
				color: white;
			}
			ul{
				width: 800px;
				height: 120px;
				list-style-type: none;/*去掉原点*/
				margin: 0 auto;/*减少默认空格*/
			}
			li{
				width: 110px;
				height: 90px;
				float: left;
				margin: 5px;
			}
			img{
				width: 100px;
				height: 80px;
				border: 0;
			}
			a{
				color: #FFFFFF
				text-decoration:
			}
			a:link,
			a:visited,
			a:active{
				color: #0033cc;
			}
			a:hover{/*鼠标悬停点击某张图片的效果*/
				border-bottom: 4px solid #ff0000;
			}
			.div1{
				text-align: center;
				width: 900px;
				height: 500px;
				background-color: rgb(51,204,153);
			}
		</style>
	</head>
	<body>
		<div id="" class="div1">
			<h3>简易灯箱画廊设计</h3>
			<hr color="red" size="3">
			<ul>
				<li><a href="img/trees/t1.jpg" target="iframe">T1<img src="img/trees/t1.jpg"></a></li>
				<li><a href="img/trees/t2.jpg" target="iframe">T2<img src="img/trees/t2.jpg"></a></li>
				<li><a href="img/trees/t3.jpg" target="iframe">T3<img src="img/trees/t3.jpg"></a></li>
				<li><a href="img/trees/t4.jpg" target="iframe">T4<img src="img/trees/t4.jpg"></a></li>
				<li><a href="img/trees/t5.jpg" target="iframe">T5<img src="img/trees/t5.jpg"></a></li>
				<li><a href="img/trees/t6.jpg" target="iframe">T6<img src="img/trees/t6.jpg"></a></li>
			</ul>
			<iframe src="img/trees/t1.jpg" name="iframe" width="500px" height="300px" frameborder="0">
			</iframe>
		</div>
	</body>
</html>

2.项目2 ?设计支持音频、视频播放的网

A.题目要求:

编程设计支持音视、视频播放的网页,效果下图所示的页面

B.思路:

(1)CSS样式:

a.在样式中,将body元素的文本居中对齐,设置标题<h3>的字体大小和颜色,定义段落<p>的字体、字号和颜色。

b.创建一个无序列表<ul>,并去除列表项符号。

c.创建两个<div>元素,分别具有id属性为"div1"和"div2",用于组织页面的不同部分。

d."div1"的背景颜色为"yellowgreen",宽度为1500px,高度为250px。

e."div2"的背景颜色为"dodgerblue",宽度为1500px,高度为20px。

(2)主体内容

a.在<body>部分,设置一个标题<h3>,之后是紫色的水平线。

b.在段落<p>中,插入一首诗歌,以及作者的名字。

c.使用<hr>标签创建红色的水平线。

d.在列表中创建三个列表项<li>,每个包含一个<embed>元素,用于嵌入不同的多媒体内容(Flash动画和视频)。<embed>元素包含src属性,指定要嵌入的多媒体文件的路径,以及宽度、高度、自动播放和循环等属性。

e.在div1中创建一个横向的列表,用于显示嵌入的多媒体内容。

f.在div2中显示滚动的文字,通过<marquee>元素实现。

C.总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设计支持音视、视频播放的网页</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			h3{
				font-size: 25px;
				color: black;
			}
			p{
				font-family: 隶书;
				font-size: 15px;
				color: #666099;
			}
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				margin: 20px;
			}
			#div1{
				background-color: yellowgreen;
				width: 1500px;
				height: 250px;
			}
			#div2{
				background-color: dodgerblue;
				width: 1500px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<h3>明月几时有</h3>
		<hr color="purple" size="2">
		<p>明月几时有?把酒问青天。<br>
		    不知天上宫阙,今夕是何年。<br>
		    我欲乘风归去,又恐琼楼玉宇,<br>
		    高处不胜寒,起舞弄清影,何似在人间。<br>
		    转朱阁,抵绮户,照无眠。<br>
		    不应有恨,何事偏向别时圆。<br>
		    人有悲欢离合,月有阴晴圆缺,此事古难全。<br>
		    但愿人长久,千里共婵娟。
		</p>
		<hr color="red" size="2">
		<div id="div1">
			<ul>
				<li><embed src="img/embed/62.swf" width="300" 
				height="150" autostart="true" loop="true"</li>
				<li><embed src="img/embed/htmlexample.mpeg" width="300" 
				height="150" autostart="false" loop="true"</li>
				<li><embed src="img/embed/0303.swf" width="300" 
				height="150" autostart="true" loop="true"</li>
			</ul>
		</div>
		<div id="div2">
			<marquee>欢迎来到我的多媒体世界!</marquee>
		</div>
	</body>
</html>

3.项目3 ?设计简易网站导航

A.题目要求:

采用段落或无序列表与超链接组合实现网站导航,效果图如下图

B.思路:

(1)CSS样式:

a.所有<div>元素文本内容居中对齐。

b.所有无序列表<ul>的文本内容居中对齐,同时去除了列表项符号。

c.所有列表项<li>元素以浮动方式(float: center)排列,并以display: inline方式进行布局。

d.所有链接<a>的文字内边距为0上下,20左右。

e.使用<co>标签包围的文字颜色为紫色。

(2)主体内容:

a.在<body>部分,内容被包含在一个<div>元素中,没有指定id属性。

b.显示一个<h5>标题,标题文本左对齐,标题内容为"使用段落标记和超链接实现网站导航"。

c.创建一个段落<p>,包含多个超链接<a>,这些链接指向不同的网站,包括百度、新浪、腾讯、搜狐、网易和360搜索。部分链接使用<co>标签包围以改变颜色。

e.使用<hr>标签创建一条宽度为3的蓝色水平分隔线。

f.显示另一个<h5>标题,标题文本左对齐,标题内容为"利用无序列表实现水平导航条"。

g.创建一个无序列表<ul>,包含多个列表项<li>,每个列表项包含一个超链接<a>,链接指向不同的网站,包括百度、新浪、腾讯、搜狐、网易和360搜索。部分链接使用<co>标签包围以改变颜色。

C.总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易网站导航</title>
		<style type="text/css">
			div{
				text-align: center;
			}
			ul{
				text-align: center;
				list-style-type: none;
			}
			li{
				float: center;
				width: 110px;
				display: inline;
			}
			li a{
				padding:0 20px;
			}
			co{
				color: purple;
			}
		</style>
	</head>
	<body>
		<div id="">
			<h5 align="left">使用段落标记和超链接实现网站导航</h5>
			<p>
				<a href="http://www.baidu.com/"><co>百度</co></a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.qq.com/">腾讯</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.sohu.com/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.163.com/">网易</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.google.com.hk/"><co>360搜索</co></a>
			</p>
			<hr color="#0066ff" size="3">
			<h5 align="left">利用无序列表实现水平导航条</h5>
			<ul>
				<li><a href="http://www.baidu.com/"><co>百度</co></a></li>
				<li><a href="http://www.sina.com.cn/">新浪</a></li>
				<li><a href="http://www.qq.com/">腾讯</a></li>
				<li><a href="http://www.sohu.com/">搜狐</a></li>
				<li><a href="http://www.163.com/">网易</a></li>
				<li><a href="http://www.google.com.hk/"><co>360搜索</co></a></li>
			</ul>
		</div>
	</body>
</html>

4.项目4 ?设计新生课程简介

A.题目要求:

编程实现新生课程简介页面,效果如下图所示:

B.思路

在<body>部分,页面内容包括:

a.一个居中对齐的<h2>标题,标题内容为"专业课程导航"。

b..一个<a>标记(带有name属性),用于创建页面内的导航锚点,使用户能够快速跳转到不同的课程。

c.创建一个无序列表<ul>,其中包含多个列表项<li>,每个列表项都包含一个<a>链接,这些链接用于跳转到不同的课程。

d.每门课程都以<h3>标题开始,标题使用<a>标记(带有name属性),用于创建页面内的导航锚点,以便用户能够跳转到指定课程的位置。

e.对于每门课程,使用<p>段落来提供相关课程的详细信息,包括课程名称和描述。在每门课程的描述下,使用<strong>元素包围一个<a>链接,该链接允许用户返回到课程导航页面的顶部。

C.总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>专业课程导航</title>
	</head>
	<body>
		<h2 align="center">专业课程导航</h2>
		<a name="dir0">专业课程导航</a>
		<ul>
			<li><a href="#dir1">英语</a></li>
			<li><a href="#dir2">高数</a></li>
            <li><a href="#dir3">大学物理</a></li>
		</ul>
		<h3><a name="dir1">英语</a></h3>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。
		<strong><a href="#dir0">返回</a></strong></p>
		<h3><a name="dir2">高数</a></h3>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《高等数学》课程介绍随着科学技术的迅猛发展,数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础,是理科各专业和经济管理专业类学生的必修课,也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学,使学生掌握处理数学问题的思想和方法,培养学生科学思维能力,同时为后续课程的学习奠定良好的基础。
		<strong><a href="#dir0">返回</a></strong></p>
		<h3><a name="dir3">大学物理</a></h3>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以物理学基础为内容的大学物理课程,是理工科各专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础,又在培养学生科学的世界观,增强学生分析问题和解决问题的能力,培养学生的探索精神、创新意识等方面,具有其他课程不能替代的重要作用。
		<strong><a href="#dir0">返回</a></strong></p>
	</body>
</html>

5. 课外拓展训练3-设计“桂林风景展览”页面

A.题目要求:所需设计的页面效果图如下

B.思路:

(1)CSS样式:

a.所有图片<img>的宽度为100像素,高度为100像素,去掉边框,设置了7像素的外边距。

b.<h2>标题文本居中对齐,文本颜色为红色。

c.所有无序列表<ul>的文本内容居中对齐,同时去除了列表项符号。

d.所有列表项<li>元素以内联(display: inline)方式进行布局,每个列表项的宽度为120像素,高度为30像素。

(2)主体内容:

a.一个居中对齐的<h2>标题,标题内容为"桂林风景展览",用于描述页面主题。

b.一个无序列表<ul>,其中包含多个列表项<li>,每个列表项包含一个超链接<a>,链接指向不同的图片文件(image31.jpg,image32.jpg,image33.jpg,和image34.jpg),并且包含相应的图片。

c.另一个无序列表<ul>,其中包含四个超链接<a>,这些链接指向相同的图片文件,用于提供图片的描述。在每个链接之间使用<li>元素创建空白,以实现排列格式,同时让链接和图片描述配对显示。

C.总体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>桂林风景展览</title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				border: 0px;
				margin: 7px;
			}
			h2{
				text-align: center;
				color: red;
			}
			ul{
				text-align: center;
				list-style-type: none;
			}
            li{
				display: inline;
				width: 120px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<h2>桂林风景展览</h2>
		<ul>
			<li><a href="img/Guilin/image31.jpg"><img src="img/Guilin/image31.jpg"></a></li>
			<li><a href="img/Guilin/image32.jpg"><img src="img/Guilin/image32.jpg"></a></li>
			<li><a href="img/Guilin/image33.jpg"><img src="img/Guilin/image33.jpg"></a></li>
			<li><a href="img/Guilin/image34.jpg"><img src="img/Guilin/image34.jpg"></a></li>
		</ul>
		<ul>
			<a href="img/Guilin/image31.jpg">桂林风景1</a>
			<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li><a href="img/Guilin/image32.jpg">桂林风景2</a>
			<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="img/Guilin/image33.jpg">桂林风景3</a></li>
			<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li><a href="img/Guilin/image34.jpg">桂林风景4</a></li>
		</ul>
	</body>
</html>

文章来源:https://blog.csdn.net/gyeolhada/article/details/135585368
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。