Neste artigo, mostrarei como criar um layout simples de página da Web, usando tags div e em combinação com propriedades CSS.

Através desta lição você aprenderá como criar um arquivo de estilo separado para anexar a uma página HTML, criar uma pasta de imagem separada para armazenar dados de mídia… esta é a divisão mais básica que você precisa saber.

Nota : Como você não aprendeu tags como cabeçalho, rodapé, artigo em HTML5, usarei a tag div inteira.

Criar estrutura de pastas para layout

Primeiro, crie uma pasta para você, você pode colocá-la em qualquer lugar. Em seguida, crie uma pasta de images , um arquivo index.html e um arquivo style.css .

Agora use qualquer editor para abrir os arquivos index.html e style.css . Atualmente estou usando o Netbeans.

Sobre a estrutura do arquivo, explico um pouco da seguinte forma :

• As images de pasta são usadas para conter todas as imagens da interface.
• O arquivo index.html é o principal arquivo em execução para o site.
• O arquivo styles.css é usado para armazenar o código CSS

Layout HTML simples será criado neste post

Primeiro você precisa entender os posicionamentos básicos em um site. Dê uma olhada na imagem abaixo.

Temos 7 posições básicas que todo site possui, que são:

1. Logo => Contém o logo principal
2. Header => Contém o conteúdo da seção superior.
3. Menu => Seção do menu principal navegando no site
4. Barra lateral esquerda => A parte que contém os dados no lado esquerdo do site
5. Conteúdo => A parte que contém o conteúdo principal do site
6. Barra lateral direita => A parte que contém os dados no lado direito do site
7. Rodapé => A parte inferior da página web.

Dê uma olhada na estrutura do próprio site freetuts.net, a interface sempre tem essas posições.

Construir layout HTML para layout

Primeiro, precisamos criar uma tag div que envolva todas as 7 posições. Para cada posição, criamos uma tag div extra para cercá-la.

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> </div> <div id="footer"> Footer </div> </div>

Agora vou escrever CSS para definir o plano de fundo para as posições, será mais fácil de ver ao executar esta aplicação.

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; }

As posições do cabeçalho, menu e rodapé estão corretas. Quanto ao conteúdo, não finalizamos o processamento, porque left_sidebar , right_sidebar e content precisam ser claramente separados.

Usaremos a propriedade float:left para mover a left_sidebar para a esquerda, float:right para right_sidebar para a direita e definir seu comprimento para cerca de 300px . Particularmente para a parte do content , daremos margin-left e margin-right como 300px , porque o comprimento dessas duas barras laterais é de 300px .

 #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

A barra lateral esquerda e a barra lateral direita substituíram o rodapé . A razão é que nós definimos float:left e float:right para essas duas posições, fazendo com que elas sejam exibidas suspensas, então o quanto o rodapé é empurrado para baixo é decidido pelo Main Content . Para esta parte, configurei a altura para 300px , 400px abaixo dos lados da barra lateral. Portanto, ele substitui o rodapé.

Para resolver isso, colocaremos uma próxima div abaixo do conteúdo e definiremos CSS para clear:both .

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div>

Colocando imagens no layout

Observe que o arquivo index.html estará um nível fora do arquivo de imagem logo.png .

Agora inclua-o usando a tag img. Por favor, altere o cabeçalho para o seguinte:

 <div id="header"> <img src="./images/logo.png"/> </div>

Coloque CSS em um arquivo separado

Devemos colocar o CSS em um arquivo separado para facilitar o gerenciamento posterior. Abra o arquivo style.css e copie todo o código CSS para lá.

Em seguida, importe este arquivo style.css para o arquivo index.html colocando o seguinte código na seção head .

 <link href="./style.css" rel="stylesheet"/>

Agora teremos todo o código da seguinte forma :

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; } #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

 <!DOCTYPE html> <html> <head> <title>Layout HTML Basic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./style.css" rel="stylesheet"/> </head> <body> <div id="main_wrapper"> <div id="header"> <img src="./images/logo.png"/> </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div> </body> </html>

Então você já sabe como dividir o layout de um site. Embora esta seja uma parte bastante básica, é muito útil para quem é novo em HTML. Vou parar este artigo por aqui, vejo vocês no próximo post.