目录
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>
截图:
文章来源:https://www.toymoban.com/news/detail-415325.html
文章来源地址https://www.toymoban.com/news/detail-415325.html
到了这里,关于Web前端技术基础实验报告三之超链接与多媒体文件应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!