Este exercício está baseado na aula sobre layout CSS e nos exemplos fornecidos na aula referente a este assunto.

1) Faça o download do arquivo a seguir:

Exemplos de layout

2) Este arquivo contém um conjunto de pastas. Em cada pasta há uma imagem que representa um layout a partir da imagem Resposta_1.png. Verifique que esta imagem é diferente em cada pasta e cada pasta possui um código diferente.

3) Escolha um código para resolver seu exercício cuja primeira letra seja igual à primeira letra de seu nome. Por exemplo, se seu nome é Jamanta, você pode escolher a pasta jm ou jv.

4) Recrie o mais próximo possível a interface fornecida na imagem Resposta_1.png. Observe que você deve recriar o formulário ao centro conforme a especificação listada. Cada imagem possui um layout diferente, também está especificado. O menu lateral deve obrigatoriamente, usar a imagem fornecida rollover.png em sua pasta.

IMPORTANTE: você deve formatar, dimensionar e posicionar seus elementos usando CSS. Outras alternativas: tabelas para layout, tags de formatação, etc, serão DESCONSIDERADAS.

Entregue, até 16/11/2009 sua resposta no espaço abaixo.

O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Apresentação referente à aula

Exemplos utilizados na aula:

• Layout de 2 colunas líquido
• Layout de 3 colunas líquido
• Formulário com TABELAS (sem CSS) – 1
• Formulário com TABELAS (sem CSS) – 2
• Formulário com TABELAS (sem CSS) – 3
• Formulário com alteração das bordas
• Formulário com alteração de bordas (correto)
• Formatando label, fieldset e legend
• Layout baseado em tabelas
• Layout baseado em parágrafos
• Layout baseado em listas
• Relembrando formatação de links
• Relembrando formatação de listas
• Exemplo de rollover com 2 imagens
• Exemplo de rollover com 1 imagem
• Exemplo de menu vertical

Imagens utilizadas nos exemplos:

Links para Layouts prontos em CSS:

• http://www.csseasy.com/
• http://layouts.ironmyers.com/
• http://www.code-sucks.com/css%20layouts/
• http://www.glish.com/css/
• http://www.intensivstation.ch/en/templates/

Links para frameworks CSS:

• http://www.blueprintcss.org/
• http://960.gs/
• http://developer.yahoo.com/yui/grids/
• http://delicious.com/bcp/css+framework

Links para geradores de layout:

http://developer.yahoo.com/yui/grids/builder/
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
http://builder.yaml.de/

Apresentação referente à aula

Trabalharemos na aula de hoje com as propriedades:

• float: determina o posicionamento de um elemento em relação ao fluxo;
• clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores;
• position: tipo de posicionamento de um elemento;
• width: largura de um elemento, obrigatório nos elementos com float;
• left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado;
• top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado;

Exemplos referentes à aula:

• Posicionamento padrão, sem float
• Exemplo de aplicação de float:left
• Exemplo de float left com problema com o contâiner pai
• Uso do clear left
• Exemplo com float right
• Exemplo com clear right
• Aplicando a propriedade clear both
• Resolvendo o problema do container pai usando spacer
• Usando mais de um float
• Usando mais de um float (sem spacer)
• Usando mais de um float com float right
• Posicionamento estático
• Posicionamento relativo
• Posicionamento absoluto
• Posicionamento absoluto + relativo
• Posicionamento fixo
• Exemplo de layout de 2 colunas
• Exemplo de layout de 3 colunas