Laboratório de Informática 1 e 2 (2009)

A aula de hoje é uma continuação da aula anterior. Na aula anterior trabalhamos com o embasamento necessário para construir layouts em CSS: as propriedades float, clear, position e width.

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/