HTML布局
网页布局对于提高网站外观非常重要。设计具有出色外观的网站布局需要花费大量时间。
如今，所有现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态网站，但是你可以使用简单的HTML表格或除法标记与其他格式标记结合来创建良好的布局。本章将为你提供一些示例，说明如何使用纯HTML及其属性为网页创建简单但有效的布局。
HTML布局-使用表格
创建布局的最简单，最流行的方法是使用HTML
标签。这些表按列和行排列，因此你可以按照自己喜欢的任何方式利用这些行和列。
例如，下面的HTML布局示例是使用具有3行2列的表实现的，但是header和footer列使用colspan属性跨越了两列：
<!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <table width = "100%" border = "0"> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign = "top"> <td bgcolor = "#aaa" width = "50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#eee" width = "100" height = "200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <center> Copyright © 2007 newbiego.com </center> </td> </tr> </table> </body> </html>
这将产生以下结果：
多列布局-使用表格
你可以设计网页以将你的网页内容放置在多个页面中。你可以将内容保留在中间列中，并且可以使用左列使用菜单，而右列可以用于放置广告或其他内容。这种布局与我们的网站newbiego.com上的布局非常相似。
这是创建三列布局的示例：
<!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <table width = "100%" border = "0"> <tr valign = "top"> <td bgcolor = "#aaa" width = "20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#b5dcb3" height = "200" width = "60%"> Technical and Managerial Tutorials </td> <td bgcolor = "#aaa" width = "20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table> </body> </html>
这将产生以下结果：
HTML布局-使用DIV，SPAN
元素是用于对HTML元素进行分组的块级元素。虽然
标签是一个块级元素，但是HTML 元素用于内联级别对元素进行分组。
尽管我们可以使用HTML表格实现漂亮的布局，但是表格并不是真正作为布局工具设计的。表格更适合于呈现表格数据。
注意：本示例使用了层叠样式表(CSS)，因此在理解本示例之前，你需要对CSS的工作方式有更好的了解。
在这里，我们将尝试使用
标签和CSS达到相同的结果，无论你在上一个示例中使用
标签实现了什么。
<!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style = "width:100%"> <div style = "background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#eee; height:200px; width:350px; float:left;" > <p>Technical and Managerial Tutorials</p> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#b5dcb3; clear:both"> <center> Copyright © 2007 newbiego.com </center> </div> </div> </body> </html>
这将产生以下结果：
你可以使用DIV，SPAN和CSS来创建更好的布局。有关CSS的更多信息，请参考CSS教程。