使用HTML語言來設計制作
Hyper Text Markup Language 超文本標記語言
這門語言的特點就是標記，就是把所有的命令單詞用<>標記起來，就可以發揮作用
還有一個特點，就是這個語言的標記是成對出現的，結束用</>
<html>
</html>
<title></title>制作網頁的標題使用title標簽
然后制作，2刀分成3塊的框架
如何才能分框架？
<frameset >
</frameset>
分好的框架用什么來表示?
<frame>
</frame>
<frame src="top.html">
</frame>
<frame src="down.html">
</frame>
html制作框架網頁實例——我的個人音樂頻道
首先制作首頁，是一個主框架，效果如下：
<!doctype html> <html> <head> <!-- 測試要注意——charset設置的是瀏覽器打開時使用的編碼格式，所以你在保存網頁的時候也要使用相應的編碼格式。 --> <meta charset="utf-8"> <title>我的音樂聽吧</title> </head> <!-- 制作框架要注意——與普通網頁不同，框架網頁不需要body體，只分框架結構。 --> <frameset rows="167,*" frameborder=1 framespacing="5"> <frame src="top.html" name="top" noresize="noresize"/> <!-- 這里的framespacing設置的是附加空間，不同瀏覽器顯示效果會不同 --> <frameset cols="20%,70%" frameborder=1 framespacing="5"> <frame src="left.html" name="left" noresize="noresize"/> <frame src="right2.html" name="right" noresize="noresize"/> </frameset> </frameset> </html>
然后制作其中的上、左、右三個頁面。
上邊的網頁top.html放一個圖片logo，再放兩個banner圖片，放在表格中。
代碼如下：
<body bgcolor="pink"> <center><table> <tr> <td><img src="images/logo.jpg"></td><td><img src="images/banner.jpg"></td><td><img src="images/banner2.jpg"></td> </table></center> <body>
左邊的網頁是喜歡的歌曲列表，制作列表超級鏈接。
代碼如下：
<body style="background-color:rgb(196,10,102)"> <dl> <dt style="color:white;font-size:18"><strong>我的音樂廳吧</strong></dt> <dd style="color:white">---->MY—TOP10</dd> </dl> <ol type="1"> <li style="color:white"><a href="right1.html" target="right" style="color:white">當你老了-趙照</a></li> <li style="color:white"><a href="right2.html" target="right" style="color:white">剛好遇見你-李玉剛</a></li> <li style="color:white"><a href="right3.html" target="right" style="color:white">江湖—羅文</a></li> <li style="color:white"><a href="right4.html" target="right" style="color:white">半壺紗-劉珂矣</a></li> <li style="color:white"><a href="right5.html" target="right" style="color:white">心湖雨又風</a></li> </ol> </body>
右邊有多少首歌曲就做多少個網頁，通通在點擊左側鏈接的時候，顯示在叫做"right"的<frame>右側那個框架內，
第一首歌的right1.html代碼如下：
<body style="background-color:rgb(253,213,242)"> <center><table border=1 bgcolor=000000 width=800 height=500 style="color:#fff"> <tr><td> <p><center><strong>歌詞</strong></center></p> <p>當你老了 頭發白了 睡意昏沉 當你老了走不動了 爐火旁打盹 回憶青春 多少人曾愛你 青春歡暢的時辰 愛慕你的美麗 假意或真心 只有一個人還愛你 虔誠的靈魂 愛你蒼老的臉上的皺紋 當你老了 眼眉低垂 燈火昏黃不定 風吹過來 你的消息 這就是我心里的歌 多少人曾愛你 青春歡暢的時辰 愛慕你的美麗 假意或真心 只有一個人還愛你 虔誠的靈魂 愛你蒼老的臉上的皺紋 當你老了眼眉低垂 燈火昏黃不定 風吹過來 你的消息 這就是我心里的歌 當我老了 我真希望 這首歌是唱給你的</p> </td></tr> <tr><td><center><img src="images/zhaozhao.jpg"></center></td></tr> <tr><td><center> <audio src="music/當你老了-趙照.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標簽</audio></center> </td></tr> </table></center> </body>
第二首歌的right2.html代碼如下：
<body style="background-color:rgb(253,213,242)"> <center><table border=1 bgcolor=000000 width=800 height=500 style="color:#fff"> <tr><td> <p><center><strong>歌詞</strong></center></p> <p>我們哭了 我們笑着 我們抬頭望天空 星星還亮着幾顆 我們唱着 時間的歌 才懂得相互擁抱 到底是為了什么 因為我剛好遇見你 留下足跡才美麗 風吹花落淚如雨 因為不想分離 因為剛好遇見你 留下十年的期許 如果再相遇 我想我會記得你 我們哭了 我們笑着 我們抬頭望天空 星星還亮着幾顆 我們唱着 時間的歌 才懂得相互擁抱 到底是為了什么 因為我剛好遇見你 留下足跡才美麗 風吹花落淚如雨 因為不想分離 因為剛好遇見你 留下十年的期許 如果再相遇 我想我會記得你 因為剛好遇見你 留下足跡才美麗 風吹花落淚如雨 因為不想分離 因為剛好遇見你 留下十年的期許 如果再相遇 我想我會記得你 因為我剛好遇見你 留下足跡才美麗 風吹花落淚如雨 因為不想分離 因為剛好遇見你 留下十年的期許 如果再相遇 我想我會記得你</p> </td></tr> <tr><td><center><img src="images/liyugang.jpg"></center></td></tr> <tr><td><center> <audio src="music/剛好遇見你-李玉剛.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標簽</audio></center> </td></tr> </table></center> </body>
第三首歌的right3.html代碼如下：
<body style="background-color:rgb(253,213,242)"> <center><table border=1 bgcolor=000000 width=800 height=500 style="color:#fff"> <tr><td> <p><center><strong>歌詞</strong></center></p> <p>無怨無悔我走我路 走不盡天涯路 在風雲之中你追我逐 恩怨由誰來結束 什么時候 天地變成江湖 每一步風起雲涌 什么時候 流淚不如流血 每個人也自稱英雄 什么是黑白分明 是是非非誰人會懂 怕什么刀光劍影 把風花雪月留在心中 無怨無悔我走我路 走不盡天涯路 人在江湖卻瀟灑自如 因為我不在乎 無怨無悔我走我路 走不盡天涯路 在風雲之中你追我逐 恩怨由誰來結束 什么時候 天地變成江湖 每一步風起雲涌 什么時候 流淚不如流血 每個人也自稱英雄 什么是黑白分明 是是非非誰人會懂 怕什么刀光劍影 把風花雪月留在心中 無怨無悔我走我路 走不盡天涯路 人在江湖卻瀟灑自如 因為我不在乎 無怨無悔我走我路 走不盡天涯路 在風雲之中你追我逐 恩怨由誰來結束</p> </td></tr> <tr><td><center><img src="images/luowen.jpg"></center></td></tr> <tr><td><center><img src="images/lianhuazhengba.jpg"></center></td></tr> <tr><td><center> <audio src="music/江湖—羅文.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標簽</audio></center> </td></tr> </table></center> </body>
第四首歌的right4.html代碼如下：
<body style="background-color:rgb(253,213,242)"> <center><table border=1 bgcolor=000000 width=800 height=500 style="color:#fff"> <tr><td> <p><center><strong>歌詞</strong></center></p> <p>墨已入水渡一池青花 攬五分紅霞采竹回家 悠悠風來 埋一地桑麻 一身袈裟 把相思放下 十里桃花待嫁的年華 鳳冠的珍珠 挽進頭發 檀香拂過玉鐲弄輕紗 空留一盞 芽色的清茶 倘若我心中的山水 你眼中都看到 我便一步一蓮花祈禱 怎知那浮生一片草 歲月催人老 風月花鳥 一笑塵緣了 十里桃花待嫁的年華 鳳冠的珍珠 挽進頭發 檀香拂過玉鐲弄輕紗 空留一盞 芽色的清茶 倘若我心中的山水 你眼中都看到 我便一步一蓮花祈禱 怎知那浮生一片草 歲月催人老 風月花鳥 一笑塵緣了 倘若我心中的山水 你眼中都看到 我便一步一蓮花祈禱 怎知那浮生一片草 歲月催人老 風月花鳥 一笑塵緣了 怎知那浮生一片草 歲月催人老 風月花鳥 一笑塵緣了</p> </td></tr> <tr><td><center><img src="images/liukeyi.jpg"></center></td></tr> <tr><td><center> <audio src="music/半壺紗-劉珂矣.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標簽</audio></center> </td></tr> </table></center> </body>
第五首歌的right5.html代碼如下：
<body style="background-color:rgb(253,213,242)"> <center><table border=1 bgcolor=000000 width=800 height=500 style="color:#fff"> <tr><td> <p><center><strong>歌詞</strong></center></p> <p>啊 啊 心湖雨又風 啊 啊 心事一重重 只為等待這一天 只為等你展容顏 上天不給這份緣 仍苦苦相戀 日日盼呀盼呀半浮萍 深意那勝過這份情 夜夜夢呀夢呀只為你 弱水只取一瓢飲 朝朝望呀望呀愁容添 相戀怎能不相怨 暮暮念呀念呀年華遠 怪只怪那姻緣淺 歲歲願願呀緣未盡 期待春風綠湖心 年年痴痴呀濕衣襟 心已靜卻淚難停</p> </td></tr> <tr><td><center><img src="images/gaoshengmei.jpg"></center></td></tr> <tr><td><center> <audio src="music/心湖雨又風.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標簽</audio></center> </td></tr> </table></center> </body>
下邊是修改顏色的style
<!-- 英文單詞顏色值：background-color：Blue； 十六進制顏色值：background-color：#FFFFFF； RGB顏色值三元數字：background-color：rgb(255,255,255) RGB顏色值三元百分比：background-color：rgb（100%，100%，100%） body bgcolor="red" body style="background-color:blue" body style="background-color:#ffffff" body style="background-color:rgb(255,0,0)" body style="background-color:rgb(100%,0,100%)" --> <body style="background-color:rgb(253,213,242)"> </body>
最后把成品的源文件壓縮包給大家共享，地址如下：
鏈接: https://pan.baidu.com/s/1kVafhGz 密碼: dw18