使用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="data:images/logo.jpg"></td><td><img src="data:images/banner.jpg"></td><td><img src="data: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="data: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="data: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="data:images/luowen.jpg"></center></td></tr>

<tr><td><center><img src="data: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="data: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="data: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

html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 （播放功能限mp3文件）的更多相关文章

  1. html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 （可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码）

    新增视频播放功能如下图: 左侧网页left.html代码如下: <meta charset="utf-8"> <body style="backgrou ...

  2. html简单框架网页制作

    先把框架分结构 top顶端 <img src="title.jpg"/> left左侧 <body bgcolor="pink"> &l ...

  3. HTML简单框架网页制作 吴昊

  4. 计算机作业（HTML简单框架网页制作） 物联网 王罗红

  5. JQuery制作简单的网页导航特效

    使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触 ...

  6. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. Highcharts使用教程（1）：制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  8. 简单web网页与SSM后台交互

    简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...

  9. 借助Html制作渐变的网页背景颜色

    借助Html制作渐变的网页背景颜色 <html> <head> <title>制作渐变背景</title> <meta http-equiv=&q ...

随机推荐

  1. 地理位置(navigation.geolocation)与本地存储(seessionStorage、localStorage)

    一.地理位置( geolocation ): navigator.geolocation对象: 1.单次请求: //navigator.geolocation.getCurrentPosition( ...

  2. 3DMAX 6 游戏特效制作

    3d主要是粒子系统为主,一个特效可能包含多个粒子系统,需要注意粒子系统尽量减少多余参数,材质shader在手机上要经过优化 另外可以使用面片加脚本实现滚动效果,比如瀑布等等 具体方法以后补充,占位

  3. uoj#266. 【清华集训2016】Alice和Bob又在玩游戏（博弈论）

    传送门 完了我连sg函数是个啥都快忘了 设\(sg[u]\)为以\(u\)为根节点的子树的\(sg\)函数值,\(rem[u]\)表示\(u\)到根节点的路径删掉之后剩下的游戏的异或值 根节点\(u\ ...

  4. CF438E The Child and Binary Tree（生成函数+多项式开根+多项式求逆）

    传送门 可以……这很多项式开根模板……而且也完全不知道大佬们怎么把这题的式子推出来的…… 首先,这题需要多项式开根和多项式求逆.多项式求逆看这里->这里,这里讲一讲多项式开根 多项式开方:已知多 ...

  5. MySQL 派生表（Derived Table） Merge Optimization

    本文将通过演示告诉你:MySQL中派生表(Derived Table)是什么?以及MySQL对它的优化. Background 有如下一张表: mysql> desc city; +------ ...

  6. bzoj4300 绝世好题 【dp】By cellur925

    题目描述: 给定一个长度为\(n\)的数列\(a\),求\(a\)的子序列\(b\)的最长长度,满足bi&bi-1!=0(\(2<=i<=len\)). 90分做法: 并没有部分分 ...

  7. Mass Change Queries Codeforces - 911G

    https://codeforces.com/contest/911/problem/G 没想到线段树合并还能这么搞.. 对每个权值建一个线段树(动态开点),如果权值为k的线段树上第i位为1,那么表示 ...

  8. Influxdb 时序数据库 windows 安装

    Influxdb 是一款比较火爆的时序数据库,本文介绍如何在 windows 平台下安装. 1.场景: windows 平台的 influxdb 似乎只支持单机非windows 服务的安装方式 适用于 ...

  9. python 全局变量 局部变量

    ##全局变量,局部变量#在函数内部可以调用全局变量,不能随意改变全局变量#若要在函数内部改变全局变量,需用关键字global #代码中全局变量都大写,局部变量都小写(非必须,一种规范) P = &qu ...

  10. 097 Interleaving String 交错字符串

    给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的.例如,给定:s1 = "aabcc",s2 = "dbbca",当 s ...