简单的网页布局实战（表格与HTML框架）
学了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>记住要多实操，先去模仿别人的布局，从最简单的开始做，这样才会掌握。