HTML - 页面布局和模板
HTML布局是非常基本的方式。单独body标签的存在没有很多选择。表格,在另一方面也可以说是HTML布局的面包和奶油。任何元件可以被放置在一个表格内,包括表格自己!
<table id="shell" bgcolor="black" border="1" height="200" width="300">
<tr>
<td>
<table id="inner" bgcolor="white" height="100" width="100">
<tr>
<td>Tables inside tables!</td>
</tr>
</table>
</td>
</tr>
</table>
|
白色的表格(标识为内部)存在于(外壳)表格的内部,黑色。 一个灯泡会出现在头部,当你探究这个系统并创建无限布局时。
HTML - 标准布局
一个相当标准的布局由顶部附近banner,导航和你的内容或展示盒组成。 这些都是任何好网站的骨干。
<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50">
<td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="200">
<td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content goes here</td></tr>
</table>
</td>
</tr>
</table>
|
|||||
|
|
这种方法是较基本的,但也是有组织的。 这些代码变得复杂且快,所以你将需要确保正确地配置高度和宽度至你的表格。 更具体的是你的高度和宽度,少些空间就会少些错误和调试。
HTML代码:
<table id="shell" title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50">
<td bgcolor="white">
<table title="banner" id="banner">
<tr><td> Banner放在这</td></tr>
</table>
</td>
</tr>
<tr height="25">
<td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>链接!</td>
<td>链接!</td>
<td>链接!</td></tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="white">
<table title="Content" id="content">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td>
</tr>
</table>
|
|||
|
|||
|
这些代码看起来是相当多的,所以拆开其和以自己的方式组织它,以使事情更容易。