Bruno C. de Paula
Laboratório de Informática
CSS
Layout em CSS
2º Semestre 2009 > PUCPR > BSI
Resumo da aula
Anteriormente trabalhamos com
posicionamento CSS através do uso das
propriedades float, clear, position e width;
O objetivo de hoje é realizar alguns
estudos de caso relacionados a tipos de
layout que podem ser implementados
através destas propriedades.
Resumo da aula
Começaremos a entender que usar
tabelas para layout é errado;
Leitura obrigatória:
–Porque utilizar tabelas para layout é estupidez;
Material referente ao assunto da aula
 Layout CSS Passo a passo:
 http://maujor.com/tutorial/layout-csspasso-a-passo.php
 Propriedade position do CSS:
– http://www.tableless.com.br/propriedadeposition-do-css
 Flutuando elementos:
http://www.ptbr.html.net/tutorials/css/lesson13.asp
 Posicionando elementos:
http://www.ptbr.html.net/tutorials/css/lesson14.asp
27/10/09
4
Material referente ao assunto da aula
Layout de forms
• Livro:Desenvolvendo CSS na Web - SIMON
COLLISON
• Livro: Web Form Design: Best Practices
• Site:http://www.lukew.com/ff
• Construindo formulários acessíveis:
o http://www.maujor.com/tutorial/formac-a.php
• Formulários Geral:
o http://www.maujor.com/tutorial/cssforms.php
• Formulários de Contato:
o http://www.maujor.com/tutorial/formContato.php
27/10/09
5
Material referente ao assunto da aula
Layout de forms
• Exemplo de Formulário Semântico:
o http://www.acordapraweb.com/formulariostotalmente-semanticos-com-html-e-css/
• Mais um exemplo de formulário semântico:
o http://woork.blogspot.com/2008/06/clean-and-purecss-form-design.html
• Checklist de usabilidade em forms:
o http://www.alistapart.com/articles/sensibleforms
• Artigo sobre alinhamento de formulários de cadastro:
o http://www.lukew.com/ff/entry.asp?504
27/10/09
6
Material referente ao assunto da aula
Layout de menus
• Origem da técnica de rollover:
• http://wellstyled.com/css-nopreload-rollovers.html
27/10/09
7
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
27/10/09
8
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
27/10/09
9
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
27/10/09
10
Propriedades CSS referenciadas na
aula (em Inglês – Sitepoint)
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.
Propriedades CSS referenciadas na
aula (em Inglês – Sitepoint)
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 da aula
Exemplos desta aula:
http://www.brunocampagnolo.com/
2009li/2009/11/03/layout-deelementos-em-css/
Exemplos da aula passada:
– http://www.brunocampagnolo.com/20
09li/2009/10/27/posicionamento-deelementos-em-css/
27/10/09
13
Alguns tipos de layout
Largura fixa;
Líquido ou fluido;
Elástico;
Largura fixa variável;
Largura fixa
Determinado em pixels;
Redimensiona a janela, layout
permanece;
Controle exato;
Não prevê resolução do usuário.
Exemplo de site com
Largura fixa
http://www.pucpr.br
Líquido ou fluido
Expande ou contrai conforme resolução
do usuário;
Cuidado com tamanho das imagens;
Deve ter largura máxima, pois o texto
não é redimensionado.
Exemplo de site com layout
líquido
http://www.tabcorp.com.au
Elástico
Expande ou contrai conforme resolução
ou preferências do usuário;
O texto é redimensionado também;
Pode ter largura máxima e mínima.
Exemplo de site com layout
elástico
http://www.htmldog.com/articles/elasticdesign/
demo/
Largura fixa variável
O layout muda automaticamente para se
adaptar à largura do navegador do
usuário;
Mudança no número de colunas,
inclusive;
Geralmente construído via JavaScript;
Pouco usual.
Exemplo:
Layout líquido de 2 colunas
o
HTML Básico:
o <div id="cabecalho"></div>
o <div id="conteudo"></div>
o <div id="lateral"></div>
o <div id="rodape"></div>
o CSS Básico:
o #cabecalho {}
o #conteudo { float:left; width:X%;}
o #lateral { float: right; width: Y%;}
o #rodape {clear: both;}
Exemplo:
Layout líquido de 3 colunas
o
HTML Básico:
o <div id="cabecalho"></div>
o <div id="lateral_a"></div>
o <div id="lateral_b"></div>
o <div id="conteudo"></div>
o <div id="rodape"></div>
o CSS
o
o
o
o
o
Básico:
#cabecalho {}
#lateral_a { float: left; width: X%}
#lateral_b {float:right;width: Y%}
#conteudo {margin-left:X+Z%; margin-right:
X+Z%}
#rodape { clear:both}
de variações são
possíveis apenas alterando
as propriedades:
•width;
•float;
•clear;
•margin;
•min-height.
DEZENAS
Problema:
muitas vezes
é obrigatório o
uso de hacks
para
compatibilizar
com
navegadores
antigos.
Minha
Recomendação
1) Deixe o problema para seu designer
resolver;
2) Aproveite ou modifique algum layout
pronto;
3) Use um framework CSS;
4) Crie seu layout em um gerador de
layout.
Layouts prontos
Sugestões de links
http://www.csseasy.com/
http://layouts.ironmyers.com/
http://www.codesucks.com/css%20layouts/
http://www.glish.com/css/
http://www.intensivstation.ch/en/templa
tes/
Framework CSS
Sugestões de links
Cuidado! Frameworks CSS aumentam a
distância do desenvolvedor em relação ao
código CSS;
Não são muito flexíveis e podem sujar o
código;
Bons para evitar hacks;
http://www.blueprintcss.org/
http://960.gs/
http://developer.yahoo.com/yui/grids/
http://delicious.com/bcp/css+framework
Geradores de layout
Sugestões de links
http://developer.yahoo.com/yui/grids/bu
ilder/
http://www.positioniseverything.net/arti
cles/pie-maker/pagemaker_form.php
http://builder.yaml.de/
Layout de elementos
específicos – Layout de forms
Técnicas de layout de formulários:
Tabelas – evitar;
Parágrafos – o mais compatível;
Listas de definição;
Divs.
Desafio do layout de forms!
Formulário exemplo
Layout de elementos
específicos – Layout de menus
Técnicas de layout de menus:
Dezenas!
Ver exemplos.
Geralmente se usa imagens de
rollover;
Quando o mouse passa sobre um
elemento, a imagem é realinhada.
Rollover