目次
実験的なトピック: ハイパーリンクとマルチメディア ファイル アプリケーション
実験の目的: ハイパーリンクとマルチメディア ファイルの挿入に関連するタグについて理解する
Webフロントエンド技術基礎実験報告書
実験的なトピック: ハイパーリンクとマルチメディア ファイル アプリケーション
実験の目的: ハイパーリンクとマルチメディア ファイルの挿入に関連するタグについて理解する
実験内容：
プロジェクト1 シンプルなライトボックス ギャラリーをデザインする
1.実験に必要な材料
TreesフォルダにはMP3ファイルと18枚のJPGファイルが用意されており、ページデザイン時に利用できます。
2.シンプルなライトボックス ギャラリーを実装するプログラム. 任意の画像ハイパーリンクをマウスでクリックすると、下部のフローティング フレームに大きな画像が表示されます. 効果は図 1-3-1 に示すようになります。
図 1-3-1 シンプルなライトボックス ギャラリー
プロジェクト 2 オーディオとビデオの再生をサポートする Web ページをデザインする
1.オーディオ、ビデオ、およびビデオ再生をサポートする Web ページをプログラムおよびデザインすると、図 1-3-3 に示すような効果が得られます。
図 1-3-3 マルチメディアとローリング字幕の Web デザイン効果
2.歌詞は以下の通りです。
明るい月はいつ現れるでしょうか？空にワインを求めてください。
今日は何年なのかわからない天空の宮殿。
風に乗って帰りたいけど、美しい建物や翡翠の建物は高いところは寒すぎるだろう自分の影を晴らすために踊るので人間の世界にいる気がしない。
朱閣に向きを変え、七湖に到着すると、眠らずに光が輝いています。
憎しみがあるはずがないのに、なぜ物事が違う結果を招くのでしょうか？
人には喜びもあれば悲しみもあり、別れもあれば再会もあり、月は満ちたり欠けたりしますが、これは古代には難しいことでした。
ヌン、月、そして新月。
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: オーディオとビデオの再生をサポートする Web ページをデザインする
コード：
<!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>
スクリーンショット:
