laboratório de informática css layout em css 2º semestre 2009 > pucpr > bsi bruno c. de...
TRANSCRIPT
![Page 1: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/1.jpg)
Laboratório de InformáticaCSSLayout em CSS
2º Semestre 2009 > PUCPR > BSI
Bruno C. de Paula
![Page 2: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/2.jpg)
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.
![Page 3: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/3.jpg)
Resumo da aulaComeçaremos a entender que usar tabelas para layout é errado;Leitura obrigatória:
–Porque utilizar tabelas para layout é estupidez;
![Page 4: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/4.jpg)
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
![Page 5: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/5.jpg)
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
![Page 6: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/6.jpg)
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
![Page 7: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/7.jpg)
727/10/09
Material referente ao assunto da aulaLayout de menus
• Origem da técnica de rollover:• http://wellstyled.com/css-nopreload-rollovers.html
![Page 8: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/8.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
827/10/09
![Page 9: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/9.jpg)
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>.
![Page 10: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/10.jpg)
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>;
![Page 11: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/11.jpg)
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.
![Page 12: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/12.jpg)
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.
![Page 13: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/13.jpg)
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/
![Page 14: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/14.jpg)
Alguns tipos de layout
Largura fixa;Líquido ou fluido;Elástico;Largura fixa variável;
![Page 15: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/15.jpg)
Largura fixa
Determinado em pixels;Redimensiona a janela, layout permanece;Controle exato;Não prevê resolução do usuário.
![Page 17: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/17.jpg)
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.
![Page 19: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/19.jpg)
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.
![Page 20: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/20.jpg)
Exemplo de site com layout elástico
http://www.htmldog.com/articles/elasticdesign/demo/
![Page 21: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/21.jpg)
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.
![Page 22: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/22.jpg)
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;}
![Page 23: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/23.jpg)
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: X+Z
%}o #rodape { clear:both}
![Page 24: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/24.jpg)
DEZENAS de variações são possíveis apenas alterando as propriedades:•width;•float;•clear;•margin;•min-height.
![Page 25: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/25.jpg)
Problema: muitas vezes é obrigatório o uso de hacks para compatibilizar com navegadores antigos.
![Page 26: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/26.jpg)
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.
![Page 27: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/27.jpg)
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/
![Page 28: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/28.jpg)
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
![Page 29: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/29.jpg)
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/
![Page 30: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/30.jpg)
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.
![Page 31: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/31.jpg)
Desafio do layout de forms!
![Page 32: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/32.jpg)
Formulário exemplo
![Page 33: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/33.jpg)
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.
![Page 34: Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.site/reader036/viewer/2022081502/552fc0fe497959413d8bba9b/html5/thumbnails/34.jpg)
Rollover