Table of contents
Web front-end technology basic experiment report
Experimental topic: Hyperlinks and multimedia file applications
Experimental process and results
Web front-end technology basic experiment report
Experimental topic: Hyperlinks and multimedia file applications
Experiment purpose: Be familiar with the tags related to the insertion of hyperlinks and multimedia files
Experiment content:
Project 1 Design a simple lightbox gallery
1. Materials required for the experiment
An MP3 file and 18 JPG files are provided in the trees folder, which can be used when designing pages.
2. Program to implement a simple lightbox gallery. Click any image hyperlink with the mouse to display a large image in a floating frame at the bottom. The effect is as shown in Figure 1-3-1.
Figure 1-3-1 Simple lightbox gallery
Project 2 Design a web page that supports audio and video playback
1. Program and design a web page that supports audio, video and video playback. The effect is as shown in Figure 1-3-3.
Figure 1-3-3 Multimedia and rolling subtitle web design effects
2.The lyrics are as follows:
When will the bright moon appear? Ask the sky for wine.
I don’t know what year it is today in the palace in the sky.
I want to ride the wind back home, but I'm afraid that the beautiful buildings and jade buildings will be too cold at high places. I dance to clear my shadow, so it doesn't feel like I'm in the human world.
Turning to Zhu Pavilion and arriving at Qihu, the light shines without sleep.
There shouldn't be any hatred, why would you prefer to do things differently?
People have joys and sorrows, separations and reunions, and the moon waxes and wanes. This is a difficult thing in ancient times.
Nung, moon and new moon.
3. Audio and video resources are in the embed subdirectory.
Experimental process and results:
Project 1: Design a simple lightbox gallery
Code:
<!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>screenshot:
Project 2: Design a web page that supports audio and video playback
Code:
<!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>
screenshot:
