HTML - Layouts

  »   HTML  »   HTML Tutorial - Layouts / criando páginas da web com layouts

HTML - Layout Padrão

Um lazout padrão é composto por um banner na parte superior da página, um menu na parte esquerda e a zona de conteúdo ao meio ou à direita. Esse é o lazout mais clássico para uma página de web e, na minha opinião, um modelo representativo.

Não há muitas opções de lazout. Por outro lado, uma tabela é bem útil. Na tabela é possível adicionar quase qualquer elemento, incluindo outra tabela.

html<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>Aqui pode colocar um banner, uma logo, etc</td>
				</tr> 
			</table>
		
		</td>
	</tr>
	<tr height="200">
		<td bgcolor="white"> 
		
			<table id="navigation" title="Navigation" border="0">
				<tr>
					<td>Link!</td>
				</tr>
				<tr>
					<td>Link!</td>
				</tr>
				<tr>
					<td>Link!</td>
				</tr>
			</table> 
			
		</td>
		<td bgcolor="white">
			
			<table title="Content" id="content" border="0">
				<tr>
					<td>Conteúdo será disponiblizado aqui.</td>
				</tr> 
			</table> 
			
		</td>
	</tr>
</table>

Essa é uma aproximação básica. E se você usar esses lazouts na sua página de web, verá que eles se tornam bastante complexos a medida que conteúdos são adicionados. Entretanto é muito importante que você especifique o tamanho e peso. O mais específico que puder ao estabelecer esse (e outros) atributos, menos bugs/problemas você terá.

Estude esse código um pouco, organize-o de forma que possa entendê-lo. Copie-o em um novo documento para que possa visualizá-lo.