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. Figura 2 - Site sendo visualizado na resolução 1024x768 Espaços em branco ao aumentar a resolução. 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 id= menu > menu <div id="conteudo"> conteúdo <div id="rodape"> rodape </body> </html> Obs: perceba que todas as divs estão dentro da estrutura principal (<div id= principal > )
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.