목차
실험 주제: 하이퍼링크 및 멀티미디어 파일 응용 프로그램
실험 목적: 하이퍼링크 및 멀티미디어 파일 삽입과 관련된 태그를 숙지한다.
웹 프론트엔드 기술 기초 실험 보고서
실험 주제: 하이퍼링크 및 멀티미디어 파일 응용 프로그램
실험 목적: 하이퍼링크 및 멀티미디어 파일 삽입과 관련된 태그를 숙지한다.
실험 내용:
프로젝트 1 간단한 라이트박스 갤러리 디자인
1. 실험에 필요한 재료
tree 폴더에는 MP3 파일과 JPG 파일 18개가 제공되며, 페이지 디자인 시 활용할 수 있습니다.
2. 간단한 라이트박스 갤러리를 구현하는 프로그램 임의의 이미지 하이퍼링크를 마우스로 클릭하면 하단의 플로팅 프레임에 큰 이미지가 표시되며 그 효과는 그림 1-3-1과 같습니다.
그림 1-3-1 단순 라이트박스 갤러리
프로젝트 2 오디오 및 비디오 재생을 지원하는 웹 페이지 디자인
1. 오디오, 비디오, 비디오 재생을 지원하는 웹 페이지를 프로그래밍하고 디자인하면 그림 1-3-3과 같은 효과가 나타납니다.
그림 1-3-3 멀티미디어 및 롤링 자막 웹 디자인 효과
2.가사는 다음과 같습니다.
밝은 달은 언제 뜨나요? 하늘에 포도주를 달라고 하세요.
하늘에 있는 궁전은 오늘이 몇 년인지 모르겠습니다.
바람을 타고 집으로 돌아가고 싶은데, 높은 곳에서는 아름다운 건물과 옥건물이 너무 추울까봐 춤을 추며 그림자를 걷어내니 인간세상에 있는 것 같지가 않다. .
Zhu Pavilion으로 향하여 Qihu에 도착하면 빛이 잠도 자지 않고 빛납니다.
증오가 있어서는 안 되는데, 왜 일을 다르게 하는 것을 선호합니까?
사람에게는 희로애락이 있고, 이별과 만남이 있고, 달이 차고 지는 것은 옛날에는 어려운 일이었습니다.
눙, 달, 초승달.
3. 오디오 및 비디오 리소스는 embed 하위 디렉터리에 있습니다.
실험 과정 및 결과:
프로젝트 1: 간단한 라이트박스 갤러리 디자인
암호:
<!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>스크린샷:
프로젝트 2: 오디오 및 비디오 재생을 지원하는 웹 페이지 디자인
암호:
<!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>
스크린샷:
