学了html一些最常用的标签后，我们需要自己动手实战，首先，我们主要运用表格相关的标记实现网页布局，先来看一张效果图：
大概思路是整个网页被分成三大块，头部，中部（左部和右部），底部。中部又被分成左部和右部，所以我们需要嵌套使用标签，结合前几篇的标签基础知识就能看懂下面的源代码了。
<html>
<head>
<title>网页布局实战</title>
<meta charset="utf-8">
</head>
<body topmargin="0">
<table border="1" width="880" align="center" cellspacing="0" cellpadding="0">
<tr height="50" bgcolor="red" align="center">
<td><font color="white" size="6" ><b>网页的头部</b></font></td>
</tr>
<tr>
<td>
<table bgcolor="yellow" width="30%" height="500" align="left">
<tr align="center">
<td><font color="white" size="6" ><b>网页的左部</b></font></td>
</tr>
</table>
<table bgcolor="green" width="70%" height="500" align="right">
<tr align="center">
<td><font color="white" size="6" ><b>网页的右部</b></font></td>
</tr>
</table>
</td>
</tr>
<tr height="50" bgcolor="red" align="center">
<td><font color="white" size="6" ><b>网页的底部</b></font></td>
</tr>
</table>
</body>
</html>接下来是用HTML框架实现，先来看下基础知识部分：
首先，还是先要看效果图：
跟上面的网页布局好像差不多的吧，分三块中部再嵌套，不过这次是使用frameset标签为主体实现的，中部的左半部分还运用了超链接。上面效果的实现并不是用一个html文件实现的，这里我用的实现的是新建一个文件夹，建立wangye.html为主体，再新建四个html文件为分区，还放了两张图片。
结合源代码看：
wangye.html
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<frameset rows="90,*,90" frameborder="5" border="5" noresize="noresize">
<frame name="top" src="top.html"/>
<frameset cols="20%,80%">
<frame name="left" src="left.html"/>
<frame name="right " src="right.html"/>
</frameset>
<frame name="bottom" src="bottom.html"/>
</frameset>
</html>top.html
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<body>
<center><h1>走入吉他世界</h1></center>
</body>
</html>bottom.html
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<body>
<center><p><font color="red">回忆的夏天博客出版</font></p></center>
</body>
</html>left.html
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li><br/>
<li><a href="http://news.baidu.com" target="_blank">新闻</a></li><br/>
<li><a href="http://news.ifeng.com" target="_blank">资讯</a></li><br/>
<li><a href="http://image.baidu.com" target="_blank">图片</a></li><br/>
<li><a href="http://www.baidu.com" target="_blank">联系我们</a></li><br/>
</ul>
</body>
</html>right.html
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>
<img src="guitar.jpg" width="120" height="90"/>
</td>
<td>
<p>吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar1.jpg" width="120" height="90"/>
</td>
<td>
<p>怎样克服吉他初学进阶过程中的难题 第一步：大横按的熟练掌握 第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握 第五步：找音的能力培养 找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar.jpg" width="120" height="90"/>
</td>
<td>
<p>吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar1.jpg" width="120" height="90"/>
</td>
<td>
<p>怎样克服吉他初学进阶过程中的难题 第一步：大横按的熟练掌握 第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握 第五步：找音的能力培养 找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar.jpg" width="120" height="90"/>
</td>
<td>
<p>吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar1.jpg" width="120" height="90"/>
</td>
<td>
<p>怎样克服吉他初学进阶过程中的难题 第一步：大横按的熟练掌握 第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握 第五步：找音的能力培养 找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar.jpg" width="120" height="90"/>
</td>
<td>
<p>吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar1.jpg" width="120" height="90"/>
</td>
<td>
<p>怎样克服吉他初学进阶过程中的难题 第一步：大横按的熟练掌握 第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握 第五步：找音的能力培养 找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar.jpg" width="120" height="90"/>
</td>
<td>
<p>吉他（英语：Guitar），又译为结他或六弦琴。属于弹拨乐器，通常有六条弦，形状与提琴相似。
吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，
吉他常以独奏或二重奏的型式演出；当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
作为乐器家族中弦乐器的一员，吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
弹奏时用一只手拨动琴弦，另一只手的手指抵在指板上，后者是覆盖在琴颈上的金属小条。弹奏出来
的声音会通过吉他的共鸣箱得到增强。
</p>
</td>
</tr>
<tr>
<td>
<img src="guitar1.jpg" width="120" height="90"/>
</td>
<td>
<p>怎样克服吉他初学进阶过程中的难题 第一步：大横按的熟练掌握 第二步：扫弦的熟练掌握 第三
步：调的概念的掌握 第四步：揉弦的掌握 第五步：找音的能力培养 找音的能力就是指你听到一段音
乐，你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候，可以随便哼一些曲
子，然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图，以及各种音型的指法。这个
能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候，你也可以这样练
耳，听到一段音乐，然后哼出它的简谱。
</p>
</td>
</tr>
</table>
</body>
</html>记住要多实操，先去模仿别人的布局，从最简单的开始做，这样才会掌握。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
