項目1 設計簡易燈箱畫廊
實訓要求：
（1）利用超鏈接和圖像標記設計簡易燈箱畫廊。
（2）給簡易燈箱畫廊增加背景音樂效果。
實訓內容：
（1）超鏈接的應用
（2）無序列表的應用
（3）圖像標記的應用
（4）背景音樂的應用
（5）樣式表的應用
（6）浮動框架的應用
知識點
（1）超鏈接標記
<a href="" title="" target="">鏈接內容</a>
什麼是超文本？
標記語言的真正威力在於其收集能力，它可以將收集來的文檔組合成一個完整的信息庫，並且可以將文檔庫與世界上的其他文檔集合鏈接起來。
這樣的話，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過超鏈接來控制瀏覽信息的順序。 這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個 Web 網絡連接起來。
超文本的基礎知識
超文本的基本特徵就是可以超鏈接文檔；你可以指向其他位置，該位置可以在當前的文檔中、局域網中的其他文檔，也可以在因特網上的任何位置的文檔中。這些文檔組成了一個雜亂的信息網。目標文檔通常與其來源有某些關聯，並且豐富了來源；來源中的鏈接元素則將這種關係傳遞給瀏覽者。
超鏈接可以用於各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵，從而選擇並自動跳轉到文檔中自己感興趣的那個主題，或跳轉到世界上某處完全不同的集合中的某個文檔。
超鏈接還可以向瀏覽者指出有關文檔中某個主題的更多信息。例如，“如果您想了解更詳細的信息，請參閱某某頁面。”。作者可以使用超鏈接來減少重複信息。例如，我們建議創作者在每個文檔中都簽署上自己的姓名。這樣就可以使用一個將名字和另一個包含地址、電話號碼等信息的單獨文檔鏈接起來的超鏈接，而不必在每個文檔中都包含完整的聯繫信息。
超鏈接（hyper text），或者按照標準叫法稱爲錨（anchor），是使用 < a> 標籤標記的，可以用兩種方式表示。錨的一種類型是在文檔中創建一個熱點，當用戶激活或選中（通常是使用鼠標）這個熱點時，會導致瀏覽器進行鏈接。瀏覽器會自動加載並顯示同一文檔或其他文檔中的某個部分，或觸發某些與因特網服務相關的操作，例如發送電子郵件或下載特殊文件等。錨的另一種類型會在文檔中創建一個標記，該標記可以被超鏈接引用。
還有一些與超鏈接相關聯的鼠標相關事件。這些事件與 JavaScript 結合使用可以產生一些令人激動的效果。
註釋
錨的這兩種類型都使用同樣的標籤；也許這就是它們擁有同樣的名稱的原因。但是我們發現，如果將它們區分開，把提供熱點和超鏈接地址的錨看作“鏈接”，而用於標記文檔的目標部分的錨稱爲“錨”，那麼您將更容易理解這兩種類型的錨。
（2）圖像img標記
<img src="url" width="" height="" alt="" vspace="" hspace="" border="" align="">
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" />
以上代碼的效果：
（3）使用embed標記播放背景音樂
<embed src="tree/Sleep Away,mp3" loop="true" autostart="true" widtd="0" height="0">
</embed>
（4）浮動框架iframe標記
<iframe scr="" name="iframe" width="500px" height="300px"></iframe>
實訓過程：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="Web前端開發，網頁設計">
<title>超鏈接</title>
<style type = "text/css">
body{
text-align: center;
}
.div1{
width: 900px;
height: 500px;
margin: 0px auto;
text-align: center;
background-color: white;
}
ul{
margin: 0px 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;
}
h3{
font-size:24px;
padding: 10px auto;
color:red;
}
/*超鏈接a僞類樣式*/
a{
color: #ffffff;
text-decoration: none;
}
a:link,a:visited,a:active{color:#0033cc;}
a:hover{border-bottom: 4px solid #FF0000} /*鼠標懸停時有紅色的底邊線出現*/
</style>
</head>
<body>
<embed src="picture/music.flac" loop="true" width="0" height="0">
</embed>
<div class="div1" id="">
<ul>
<li><a href="picture/1.jpg" target="_top">T1<br><img src="picture/1.jpg"/></a></li>
<li><a href="picture/2.jpg" target="_top">T2<br><img src="picture/2.jpg"/></a></li>
<li><a href="picture/3.jpg" target="_top">T3<br><img src="picture/3.jpg"/></a></li>
...
</ul>
<iframe name="iframe" scr="picture/10.jpg" width="500px" height="300px" frameborder="0" marginheight="10px"></iframe>
</div>
</body>
</html>
弄了好長時間，這裏的iframe不知道爲什麼一直顯示不了。。。
項目2 設計支持音頻、視頻播放的網頁
實訓要求：
（1）利用embed標記爲網頁添加多媒體文件。
（2）利用marquee標記實現網頁滾動字幕的效果。
（3）利用圖層div標記設置多媒體文件展示區域佈局。
實訓內容：
（1）網頁多媒體文件的應用
（2）網頁滾動文字的應用
（3）段落與排版標記的應用
（4）無序列表的應用
（5）字體font標記的應用
（6）樣式表的定義與應用
知識點：
（1）滾動文字marquee標記
<marquee direction="up" behavior="alternate" onMouseOver="this.stop()"
onMouseOut="this.start()">滾動文字</marquee>
實訓過程：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="Web前端開發，網頁設計">
<title>多媒體</title>
<style type = "text/css">
@font-face {
font-family: 'MyNewFont'; /*字體名稱*/
src: url('font/1.TTF'); /*字體源文件*/
}
body{
text-align: center;
}
.div1{
height: 250px;
text-align: center;
background-color: #99cc00;
}
ul{
list-style-type: none;
}
li{
float: left;
margin: 20px;
}
marquee{
font-size: 16px;
padding: 4px auto;
}
</style>
</head>
<body>
<h2>一路向北</h2>
<hr>
<p style="font-family: MyNewFont; font-size: 30px;"> 後視鏡裏的世界<br>
越來越遠的道別<br>
你轉身向背<br>
側臉還是很美<br>
我用眼光去追<br>
竟聽見你的淚<br>
在車窗外面徘徊<br>
是我錯失的機會<br>
你站的方位<br>
跟我中間隔着淚<br>
街景一直在後退<br>
你的崩潰在窗外零碎<br>
我一路向北<br>
離開有你的季節<br>
你說你好累<br>
已無法再愛上誰<br>
風在山路吹<br>
過往的畫面全都是我不對<br>
細數慚愧<br>
我傷你幾回<br>
</p>
<hr>
<div class="div1" id="">
<ul>
<li><embed src="music/1.flac" loop="true" width="500" height="200"></embed></li>
</ul>
</div>
<marquee direction="left" behavior="alternate" onMouseOver="this.stop()"
onMouseOut="this.start()">歡迎來到我的音樂世界！</marquee>
</body>
</html>
效果如下：
項目3 設計簡易導航網站
實訓要求：
（1）在瀏覽器URL中輸入網址https://www.hao123.com/訪問網站，參照此圖第一行導航的效果編寫代碼實現導航條目。
（2）分別採用段落與超鏈接組合和無序列表與超鏈接組合完成導航條目的設計
實訓過程：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="Web前端開發，網頁設計">
<title>多媒體</title>
<style type = "text/css">
@font-face {
font-family: 'MyNewFont'; /*字體名稱*/
src: url('font/1.TTF'); /*字體源文件*/
}
.div1{
text-align: center;
}
ul{
list-style-type: none; /*去掉列表項前面的符號*/
text-align: center;
}
li{
display: inline; /*列表項行內顯示*/
width: 100px;
}
li a{
padding: 0 20px; /*列表項中的超鏈接寬度，分隔導航條目*/
}
</style>
</head>
<body>
<div class="div1">
<h3 style="text-align: left;">使用段落標記和超鏈接實現網站導航</h3>
<p>
<a href="https://www.baidu.com/?tn=98010089_dg&ch=7">百度</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="https://www.qq.com/">騰訊</a>
<a href="https://www.sohu.com/">搜狐</a>
<a href="https://www.163.com/">網易</a>
<a href="https://www.so.com/">360搜索</a>
</p>
<hr align="center" size="3" color="#0066ff">
<h3 style="text-align: left;">使用無序列表和超鏈接實現水平導航條</h3>
<ul>
<li><a href="https://www.baidu.com/?tn=98010089_dg&ch=7">百度</a></li>
<li><a href="https://www.sina.com.cn/">新浪</a></li>
<li><a href="https://www.qq.com/">騰訊</a></li>
<li><a href="https://www.sohu.com/">搜狐</a></li>
<li><a href="https://www.163.com/">網易</a></li>
<li><a href="https://www.so.com/">360搜索</a></li>
</ul>
</div>
</body>
</html>
效果如下：
項目4 設計專業課程導航
實訓要求：
利用無序列表與書籤鏈接設計專業課程導航。
實訓內容：
（1）超鏈接的應用
（2）無序列表的應用
（3）書籤的應用
知識點：
書籤的定義與使用：
通過超鏈接a標記的name和href屬性設置書籤名稱和書籤鏈接，分以下兩個步驟：
（1）定義書籤名稱
<a name="書籤名稱">書籤標題</a>
（2）製作書籤鏈接
- 同頁面內使用書籤鏈接，格式如下圖所示：
<a href="#書籤名稱" target="窗口名稱"></a>
- 異頁面內使用書籤鏈接，格式如下圖所示：
<a href="url#書籤名稱" target="窗口名稱"></a>
實訓過程：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="Web前端開發，網頁設計">
<title>多媒體</title>
<style type = "text/css">
@font-face {
font-family: 'MyNewFont'; /*字體名稱*/
src: url('font/1.TTF'); /*字體源文件*/
}
.div1{
text-align: center;
}
h2{
text-align: center;
}
p{
text-indent: 2px; /*首行縮進2字符*/
}
</style>
</head>
<body>
<h2>專業課程導航</h2>
<a name="dir0">專業課程導航</a>
<ul>
<li><a href="#dir1">數據結構</a></li>
<li><a href="#dir2">計算機網絡</a></li>
<li><a href="#dir3">機器學習</a></li>
</ul>
<h3><a name="dir1">數據結構</a></h3>
<p>數據結構(data structure)是帶有結構特性的數據元素的集合，它研究的是
</p>
<h3><a name="dir2">計算機網絡</a></h3>
<p>數據結構(data structure)是帶有結構特性的數據元素的集合，它研究的是
</p>
<h3><a name="dir3">機器學習</a></h3>
<p>數據結構(data structure)是帶有結構特性的數據元素的集合，它研究的是
</p>
</body>
</html>
效果如下：
