Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS
Layouts de Páginas com CSS. .................................................................................................... 2
Layout com tamanho Líquido .................................................................................................... 2
Layout com tamanho Fixo ......................................................................................................... 3
Desenvolvendo um layout com tamanho fixo. .......................................................................... 5
Layouts de Páginas com CSS.
Antes de começarmos a criar o layout de um página web, devemos levar em consideração o tipo de
conteúdo a ser exibido de acordo com o público alvo e a disponibilização das informações.
Podemos dizer que existem dois tipos de layouts de páginas web, layout com tamanho fixo e tamanho
líquido.
Layout com tamanho Líquido
É o layout que é construído para se ajustar conforme a resolução do monitor do usuário, ou seja,
independente da resolução usada.
A principal Vantagem de um layout líquido é que irrelevante qual a resolução da máquina do usuário
final; o layout se estica para caber dentro da resolução.
A Desvantagem é que você tem que ser cuidadoso durante o desenvolvimento do desgin, pois os
elementos da página da web se movem dependendo de cada resolução do monitor do usuário final e/ou
do tamanho da janela do browser. Portando, você não pode posicionar elementos com precisão perfeita
em pixels.
Veja os dois exemplos abaixo:
Figura 1 - Site desenvolvido com tamanho líquido sendo exibido na resolução 800x600
Veja que na figura 1 o site está sendo exibido em uma resolução de 800x600, mesma resolução em que
foi desenvolvido, perceba que os elementos estão todos alinhados, mas veja na figura abaixo como os
elementos ficarão desalinhados quando o usuário muda a resolução para 1024x768.
Espaços em
branco ao
aumentar a
resolução.
Figura 2 - Site sendo visualizado na resolução 1024x768
Veja que ao aumentarmos a resolução o site continuou preenchendo toda a tela, mas, os elementos
ficaram desalinhados com relação a resolução anterior, perceba os espaços em branco na página com
relação a resolução anterior.
Perceba que para manter os elementos alinhados, o programador terá que se preocupar em garantir
que o site exiba as informações da mesma forma em várias resoluções.
Layout com tamanho Fixo
No layout com tamanho Fixo o designer cria uma estrutura fixa para o site, e insere os elementos de
acordo com o conteúdo do site, nesse caso, independente da resolução você poderá posicionar os
elementos com precisão.
Vamos ver agora o mesmo site mostrado anteriormente com o layout em tamanho fixo em diferentes
resoluções.
Figura 3 - Site com layout fixo sendo apresentado na resolução 800x600
Veja no exemplo acima o site com layout fixo na resolução 800x600, perceba que os elementos estão
alinhados de acordo com a apresentação do site, veja no exemplo abaixo que mesmo mudando a
resolução os elementos serão apresentados com o mesmo posicionamento.
Figura 4 - Site com layout fixo na resolução 1024x768
Espaços na
janela do
navegador
Veja no exemplo acima que mesmo mudando a resolução os elementos do site mantiveram a posição,
deixando apenas um espaço na janela do navegador.
Dentre as duas maneiras de se criar a estrutura de um website, podemos dizer que não existe apenas
uma correta, o desenvolvedor deverá criar de acordo com a sua necessidade de apresentação de
conteúdo. O layout fixo acaba se tornando mais comum, pois não sabemos ao certo qual será a
resolução ou tamanho de tela do usuário.
Desenvolvendo um layout com tamanho fixo.
Para criar um layout com tamanho fixo vamos utilizar a tag div para delimitar as áreas de nosso site, o
primeiro passo é criar uma divisão div que será onde iremos inserir todos os elementos da página, como
por exemplo, o topo, menu, conteúdo, rodapé etc.
Para criarmos essa estrutura crie um diretório em seu computador com o nome layoutFixo e em
seguida crie e salve nesse diretório uma página HTML com o nome index.html e a página de estilos
estilos.css.
Na página index.html na sessão body vamos criar a seguinte estrutura utilizando as tags div:
Topo
Menu
Conteúdo
Rodapé
Veja abaixo o a estrutura HTML do arquivo index.html:
<html>
<head>
<title> 1infoWeb </title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="principal">
<div id="topo">
topo
</div>
<div id=”menu”>
menu
</div>
<div id="conteudo">
conteúdo
</div>
<div id="rodape">
rodape
</div>
</div>
</body>
</html>
Obs: perceba que todas as divs estão dentro da estrutura principal (<div id=”principal”> </div>)
Códigos CSS do arquivo estilos.css
body{ margin:0 ; /*zera todas as margens externas do documento*/
padding:0;
/*zera todas as margens internas do documento */
}
#principal{ width: 800px; /* largura da div principal */
border: #000 1px solid; /* cor, espessura da borda e estilo da borda */
margin: 0 auto; /* zera as margens superior e inferior e deixa as
margens esquerda e direita com espaçamento automático */
}
#topo{ border: #00C 1px solid; /* cor, espessura da borda e estilo da borda */
height: 60px; /* altura do elemento */
}
#menu{ border: #F00 1px solid; /* cor, espessura da borda e estilo da borda */
height: 60px; /* altura do elemento */
}
#conteudo{ border: #090 1px solid; /*cor, espessura da borda e estilo da borda*/
min-height: 500px; /* mínimo de altura do elemento */
}
#rodape{ border: #F00 1px solid; /*cor, espessura da borda e estilo da borda*/
}
Salve e teste os arquivos.
* os arquivos serão desenvolvidos com acompanhamento do professor.