Pular para o conteúdo principal

Criando um layout simples com HTML e CSS

Criar um layout, mesmo que simples, pode não ser uma tarefas das mais fáceis para quem não lida com desenvolvimento web. Pensando em você, que tem um blog e que gostaria de modificar seu template, criei este tutorial.

Este tutorial é dedicado a quem ainda não possui muita intimidade com HTML e CSS, mas que deseja criar um layout simples, de duas colunas.


Estrutura do layout

O layout terá a seguinte estrutura:

Estrutura do layout


A marcação - HTML


<div id="global">
    <div id="topo"></div>
        <div id="conteúdo"></div>
        <div id="menu"></div>
    <div id="rodape"></div>
</div> <!--FIM DIV GLOBAL-->

Como você pode conferir, todo layout está dentro do elemento #global. Ele ajuda na organização e no alinhamento, já que iremos posicionar todo o site ao centro.

O estilo - CSS

O layout possui um tamanho de 800 pixels de largura. E como disse acima, será alinhado no centro da navegador.


#global {
 margin: 0 auto; /* Alinhando o layout no centro */
 width: 800px; /* Tamanho do layout */
 }

Defina o tamanho dos elementos #topo e #rodape.

Como ambos terão o mesmo tamanho, podemos agrupa-los em uma mesma declaração.


#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}

Com quase todo layout já organizado, restam apenas o #conteudo e o #menu.

Divida o tamanho total do layout em duas partes, deixando um tamanho maior para o conteúdo, e  o resto para o menu.


#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}
#conteudo {
display:inline; /* Evita o bug da margem duplicada */
float:left; /* Flutuando à esquerda */
width:560px;
}
#menu {
float:right; /* Flutuando à direita */
width:230px;
}

Repare que, na soma da minha divisão (560 + 230), o total é 790 pixels. Os 10 pixels restante serve de margem entre um e outro.

Update 12/10

Veja o código completo do layout.

Neste exemplo, incorporei o CSS afim de melhorar o entendimento.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}
#conteudo {
display:inline; /* Evita o bug da margem duplicada */
float:left; /* Flutuando à esquerda */
width:560px;
}
#menu {
float:right; /* Flutuando à direita */
width:230px;
}
</style>
</head>
<body>
<div id="global">
    <div id="topo"></div>
        <div id="conteúdo"></div>
        <div id="menu"></div>
    <div id="rodape"></div>
</div> <!--FIM DIV GLOBAL-->
</body>
</html>

Salve seu documento com final .html (exemplo: pagina.html) e confira o seu layout.

Qualquer dúvida é só deixar um comentário.

Comentários

  1. Voce só esqueceu de como mostrar como organizar tudo dentro do codigo html para que dê certo.Afinal para quem já sabe programar em html fica facil,mas para quem tá começando como eu,fiquei mais confuso ainda,voce citou varios pedaços do codigo do layout mais não mostrou como eles devem ser organizados dentro do codigo html,nem informou se era para salvar como css ou html!

    ResponderExcluir
    Respostas
    1. Já atualizei e adicionei as devidas solicitações. Obrigado pelo retorno.

      Excluir
  2. Anônimo: Com algumas poucas mudanças é possível fazer isso com este tutorial.

    ResponderExcluir
  3. Muito bom o tutorial,estou trabalhando em um projeto,e o Layout ficou muito bom.Parabéns!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Deixe a barra de tarefas do windows 7 igual a do xp

Elegante menu azul no photoshop