Rogério Lino

Web development and tips

Layout #1

Agora que já sabemos como escrever um XHTML e temos uma referência de CSS, vamos fazer o nosso primeiro layout.

Primeiro temos que analisar o que queremos, ou que teremos de, exibir na página. Se vai ter um menu horizontal ou vertical, se vai ter rodapé, quantas colunas, etc.

Depois de feito isso é hora de estruturar o “esqueleto” da página no XHTML. Nesse primeiro exemplo vamos ver uma página com duas coluna, topo e rodapé. No qual a coluna do lado esquerdo vai conter o menu e do lado direito o conteúdo da página.

XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
    <head>
        <title> Título </title>
        <meta name="Generator" content="" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <meta name="language" content="pt-br" />
        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- Style -->
        <link rel="stylesheet" href="style.css" type="text/css"/>_
    </head>
    <body>
        <div id="geral">
            <div id="topo">
                <h2>Título da Página</h2>
            </div>
            <div id="meio">
                <div id="esquerda">
                    <ul>
                        <li><a href="#" alt="Página Inicial">Home</a></li>
                        <li><a href="#" alt="Quem Sou">Sobre</a></li>
                        <li><a href="#" alt="Contato">Contato</a></li>
                    </ul>
                </div>
                <div id="direita">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nulla. Mauris sollicitudin ante sed orci. Vivamus vitae sapien id felis lobortis aliquam. Suspendisse potenti. Integer pellentesque. Nulla vehicula, nisl a lacinia egestas, justo dolor semper justo, sed faucibus nibh orci eu magna. Curabitur vel nisi vulputate est vehicula rhoncus. Curabitur est ligula, vehicula ornare, suscipit vitae, ornare varius, justo. Suspendisse lacus. Sed pulvinar vehicula lectus. Curabitur quis augue. Nullam gravida tortor at felis. Aliquam neque massa, scelerisque at, auctor lobortis, placerat ut, erat. Fusce adipiscing. Phasellus imperdiet blandit quam. Maecenas posuere.</p>
                </div>
            </div>
            <div id="rodape">
                <h3>Minha Página - 2006</h3>
            </div>
        </div>
    </body>
</html>

Foram colocadas seis camadas, DIVs, uma chamada geral que engloba todo o site para ter um maior controle, a topo - aonde vem a imagem de topo e título da página -, a meio que dentro tem duas, esquerda - menu - e direita - conteúdo - e rodapé - aonde tem os créditos -.

No topo foi colocado o título da página dentro da tag hn, realmente utilizada para isso.

Para fazer o menu foi usada uma lista indefinida (ul - undefined list) com apenas três links.

Na parte de conteúdo foi colocado o famoso “Lorem Lipsum” para não ter que colocar aqueles “bla bla bla” ou “non non non”.

E por fim um crédito no rodapé dentro de ourta tag hn.

CSS:

Agora é a vez do estilo. Como no XHTML o link do CSS está apontando para um arquivo chamado style.css, salve-o com esse nome. Caso deseje colocar outro, mude na página o destino.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#geral {
  width: 726px;
}

#topo {
  width: 720px;
  height: 100px;
  border: 3px solid #999999;
  background: #FFFFFF;
}

#meio {
  width: 720px;
  border: 3px solid #999999;
  background: #FFFFFF;
}

#esquerda, #direita {
  padding: 15px;
}

#esquerda {
  width: 150px;
  float: left;
}

#direita {
  width: 490px;
  float: right;
}

#rodape {
  width: 720px;
  height: 50px;
  border: 3px solid #999999;
  background: #FFFFFF;
  clear: both;
}

Neste caso a página vai ter 720 pixeis de largura e as camadas uma borda de 3 pixeis, totalizando 726px (720+3+3) de largura para a camada geral. Então as camadas topo, meio e rodape terão 720px de largura.

O topo com altura de 100px e o rodapé com 50px. Para as camadas esquerda e direita terem um espaçamento entre o topo e o rodapé, tem um padding de 15px.

Para colocar as duas camadas, esquerda e direita, uma do lado da outro, atribui-se a propriedade float, com valor left para esquerda e right para direita. Fazendo com que ambas flutuem para o lado desejado. No rodapé foi colocado o clear como both para ele ficar abaixo do meio, devido que as camadas esquerda e direita estão flutuando.

Alguns exemplos aqui.

mais sobre:

Maujor.com - Layout CSS sem tabelas

Maujor.com - Layout CSS 3 colunas

Little Boxes - Examples

Comments