html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载

2017-11-15 by Advancing-Swift

使用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"bodybodybodybody--><body style="background-color:rgb(253,213,242)"></body>

 最后把成品的源文件压缩包给大家共享,地址如下:

链接: https://pan.baidu.com/s/1kVafhGz 密码: dw18

最新更新:

第七城市

栏目导航(关闭)