Laboratório de Informática CSS Layout em CSS
34
Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula
-
Upload
nolan-avila -
Category
Documents
-
view
95 -
download
6
description
Laboratório de Informática CSS Layout em CSS. Bruno C. de Paula. 2º Semestre 2009 > PUCPR > BSI. Resumo da aula. Anteriormente trabalhamos com posicionamento CSS através do uso das propriedades float , clear, position e width ; - PowerPoint PPT Presentation
Transcript of Laboratório de Informática CSS Layout em CSS
Laboratório de InformáticaCSSLayout em CSS
2º Semestre 2009 > PUCPR > BSI
Bruno C. de Paula
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 aulaComeçaremos a entender que usar tabelas para layout é errado;Leitura obrigatória:
–Porque utilizar tabelas para layout é estupidez;
427/10/09
Material referente ao assunto da aulaLayout CSS Passo a passo:
http://maujor.com/tutorial/layout-css-passo-a-passo.php
Propriedade position do CSS:– http://www.tableless.com.br/propriedade-
position-do-cssFlutuando elementos:
http://www.pt-br.html.net/tutorials/css/lesson13.aspPosicionando elementos:
http://www.pt-br.html.net/tutorials/css/lesson14.asp
527/10/09
Material referente ao assunto da aulaLayout 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
627/10/09
Material referente ao assunto da aulaLayout de forms
• Exemplo de Formulário Semântico:o http://www.acordapraweb.com/formularios-totalme
nte-semanticos-com-html-e-css/• Mais um exemplo de formulário semântico:
o http://woork.blogspot.com/2008/06/clean-and-pure-css-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
727/10/09
Material referente ao assunto da aulaLayout de menus
• Origem da técnica de rollover:• http://wellstyled.com/css-nopreload-rollovers.html
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
827/10/09
927/10/09
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
1027/10/09
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
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.
1327/10/09
Exemplos da aula
Exemplos desta aula:http://www.brunocampagnolo.com/2
009li/2009/11/03/layout-de-elementos-em-css/
Exemplos da aula passada:– http://www.brunocampagnolo.com/2
009li/2009/10/27/posicionamento-de-elementos-em-css/
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.
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.
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 colunaso HTML Básico:
o <div id="cabecalho"></div>o <div id="conteudo"></div>o <div id="lateral"></div> o <div id="rodape"></div>
oCSS Básico:o#cabecalho {}o#conteudo { float:left; width:X%;} o#lateral { float: right; width: Y%;}o#rodape {clear: both;}
oX + Y < 100%
Exemplo:Layout líquido de 3 colunaso 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>
oCSS Básico:o #cabecalho {} o #lateral_a { float: left; width: X%;}o #lateral_b {float:right;width: Y%;}o #conteudo {margin-left:X+Z%; margin-right: Y+Z%;}o #rodape { clear:both;}
X+Y+Z<100%
DEZENAS de variações são possíveis apenas alterando as propriedades:•width;•float;•clear;•margin;•min-height.
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 prontosSugestões de links
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/
Framework CSSSugestõ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 layoutSugestões de links
http://developer.yahoo.com/yui/grids/builder/http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.phphttp://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
