Web前端技术基础实验报告三之超链接与多媒体文件应用

最新推荐文章于 2024-01-14 10:57:25 发布

想这世界简单点

最新推荐文章于 2024-01-14 10:57:25 发布

阅读量8.1k

点赞数 16

分类专栏： WEB前端技术基础实验文章标签：前端 webview android html5 css3

本文链接：https://blog.csdn.net/pzcxl/article/details/124663073

版权

WEB前端技术基础实验专栏收录该内容

4 篇文章 17 订阅

订阅专栏

Web前端技术基础实验报告

实验题目：超链接与多媒体文件应用

实验目的：熟悉超链接与多媒体文件的插入的相关标签

实验内容：

实验过程及结果

Web前端技术基础实验报告

实验题目：超链接与多媒体文件应用

实验目的：熟悉超链接与多媒体文件的插入的相关标签

实验内容：

项目1 设计简易灯箱画廊

1.实验所需素材

在trees文件夹中提供一个MP3文件和18个JPG文件，设计页面时可以使用。

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

图1-3-1 简易灯箱画廊

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

1.编程设计支持音视、视频播放的网页，效果如图1-3-3所示的页面。

图1-3-3 多媒体及滚动字幕网页设计效果

2.歌词内容如下：

明月几时有？把酒问青天。

不知天上宫阙，今夕是何年。

我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。

转朱阁，抵绮户，照无眠。

不应有恨，何事偏向别时圆。

人有悲欢离合，月有阴晴圆缺，此事古难全。

但愿人长久，千里共婵娟。

3.音频、视频资源在embed子目录下。

实验过程及结果：

项目一：设计简易灯箱画廊

代码：

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

截图：

项目二：设计支持音频、视频播放的网页

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多媒体及滚动字幕应用</title>
		<style type="text/css">
			#div1 {
				text-align: center;
			}
			#hr1 {
				color: rgb(74, 74, 255);
			}
			p {
				font-family: 隶书;
				color: rgb(0, 0, 144);
			}
			#div2 {
				background-color: rgb(153, 204, 0);
				height: 250px;
				width: 1264px;
			}
			ul {
				list-style-type: none;
			}
			li {
				float: left;
				margin: 20px;
			}
			#div3 {
				background-color: rgb(51, 153, 255);
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h3>明月几时有</h3>
			<hr color="#0000FF" size="2">
			<p>明月几时有？把酒问青天。<br>
				不知天上宫阙，今夕是何年。<br>
				我欲乘风归去，又恐琼楼玉宇，<br>
				高处不胜寒，起舞弄清影，何似在人间。<br>
				转朱阁，抵绮户，照无眠。<br>
				不应有恨，何事偏向别时圆。<br>
				人有悲欢离合，月有阴晴圆缺，此事古难全。<br>
				但愿人长久，千里共婵娟。
			</p>
			<hr color="red" size="2">
			<div id="div2">
				<ul>
					<li><embed src="embed/62.swf" width="300" height="150" autostart="true" loop="true"></li>
					<li><embed src="embed/蔡琴明月几时有.mp3" width="300" height="150" autostart="false" loop="true"></li>
					<li><embed src="embed/0303.swf" width="300" height="150" autostart="true" loop="true"></li>
				</ul>
			</div>
			<div id="div3">
				<marquee>欢迎来到我的多媒体世界！</marquee>
			</div>
		</div>
	</body>
</html>

截图：