目錄
Web前端技術(shù)基礎(chǔ)實(shí)驗(yàn)報(bào)告
實(shí)驗(yàn)題目：超鏈接與多媒體文件應(yīng)用
實(shí)驗(yàn)?zāi)康模菏煜こ溄优c多媒體文件的插入的相關(guān)標(biāo)簽
實(shí)驗(yàn)內(nèi)容 ：
實(shí)驗(yàn)過程及結(jié)果
Web前端技術(shù)基礎(chǔ)實(shí)驗(yàn)報(bào)告
實(shí)驗(yàn)題目：超鏈接與多媒體文件應(yīng)用
實(shí)驗(yàn)?zāi)康模菏煜こ溄优c多媒體文件的插入的相關(guān)標(biāo)簽
實(shí)驗(yàn)內(nèi)容 ：
項(xiàng)目1? 設(shè)計(jì)簡(jiǎn)易燈箱畫廊
1.實(shí)驗(yàn)所需素材
在trees文件夾中提供一個(gè)MP3文件和18個(gè)JPG文件，設(shè)計(jì)頁(yè)面時(shí)可以使用。
2.編程實(shí)現(xiàn)簡(jiǎn)易燈箱畫廊，鼠標(biāo)單擊任一個(gè)圖像超鏈接，在底部浮動(dòng)框架中顯示大圖像，效果如圖1-3-1所示的頁(yè)面。
?
圖1-3-1 簡(jiǎn)易燈箱畫廊
項(xiàng)目2? 設(shè)計(jì)支持音頻、視頻播放的網(wǎng)頁(yè)
1.編程設(shè)計(jì)支持音視、視頻播放的網(wǎng)頁(yè)，效果如圖1-3-3所示的頁(yè)面。
?
?????????圖1-3-3 多媒體及滾動(dòng)字幕網(wǎng)頁(yè)設(shè)計(jì)效果
2.歌詞內(nèi)容如下：
明月幾時(shí)有？把酒問青天。
??????? 不知天上宮闕，今夕是何年。
??????? 我欲乘風(fēng)歸去，又恐瓊樓玉宇，高處不勝寒，起舞弄清影，何似在人間。
??????? 轉(zhuǎn)朱閣，抵綺戶，照無(wú)眠。
??????? 不應(yīng)有恨，何事偏向別時(shí)圓。??
??????? 人有悲歡離合，月有陰晴圓缺，此事古難全。
??????? 但愿人長(zhǎng)久，千里共嬋娟。
?? 3.音頻、視頻資源在embed子目錄下。
實(shí)驗(yàn)過程及結(jié)果：
項(xiàng)目一：設(shè)計(jì)簡(jiǎn)易燈箱畫廊
代碼：
<!DOCTYPE html>
<html>
??????? <head>
??????????????? <meta charset="utf-8">
???????????????? <title>簡(jiǎn)易燈箱畫廊設(shè)計(jì)</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>簡(jiǎn)易燈箱畫廊設(shè)計(jì)</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>截圖：
?
項(xiàng)目二：設(shè)計(jì)支持音頻、視頻播放的網(wǎng)頁(yè)
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多媒體及滾動(dòng)字幕應(yīng)用</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>明月幾時(shí)有</h3>
<hr color="#0000FF" size="2">
<p>明月幾時(shí)有？把酒問青天。<br>
不知天上宮闕，今夕是何年。<br>
我欲乘風(fēng)歸去，又恐瓊樓玉宇，<br>
高處不勝寒，起舞弄清影，何似在人間。<br>
轉(zhuǎn)朱閣，抵綺戶，照無(wú)眠。<br>
不應(yīng)有恨，何事偏向別時(shí)圓。<br>
人有悲歡離合，月有陰晴圓缺，此事古難全。<br>
但愿人長(zhǎng)久，千里共嬋娟。
</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/蔡琴明月幾時(shí)有.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>
截圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-415325.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-415325.html
到了這里，關(guān)于Web前端技術(shù)基礎(chǔ)實(shí)驗(yàn)報(bào)告三之超鏈接與多媒體文件應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)3（HTML5、CSS3、JavaScript ）超鏈接，target，scrolling,marginwidth,frameborder,iframe——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/753014-1.png)
