1 / 34

Laboratório de Informática CSS Layout em CSS

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 ;

nolan-avila
Download Presentation

Laboratório de Informática CSS Layout em CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Laboratório de InformáticaCSSLayout em CSS Bruno C. de Paula 2º Semestre 2009 > PUCPR > BSI

  2. 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.

  3. Resumo da aula • Começaremos a entender que usar tabelas para layout é errado; • Leitura obrigatória: • Porque utilizar tabelas para layout é estupidez;

  4. Material referente ao assunto da aula • Layout 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-css • Flutuando elementos: http://www.pt-br.html.net/tutorials/css/lesson13.asp • Posicionando elementos: http://www.pt-br.html.net/tutorials/css/lesson14.asp 27/10/09 4

  5. 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: • http://www.maujor.com/tutorial/formac-a.php • Formulários Geral: • http://www.maujor.com/tutorial/cssforms.php • Formulários de Contato: • http://www.maujor.com/tutorial/formContato.php 27/10/09 5

  6. Material referente ao assunto da aula Layout de forms • Exemplo de Formulário Semântico: • http://www.acordapraweb.com/formularios-totalmente-semanticos-com-html-e-css/ • Mais um exemplo de formulário semântico: • http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html • Checklist de usabilidade em forms: • http://www.alistapart.com/articles/sensibleforms • Artigo sobre alinhamento de formulários de cadastro: • http://www.lukew.com/ff/entry.asp?504 27/10/09 6

  7. 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

  8. Material referente ao assunto da aula • CSS – Guia de Bolso; • Editora AltaBooks; • 2008; • Download de um capítulo. 27/10/09 8

  9. 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

  10. 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

  11. 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.

  12. 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.

  13. Exemplos da aula • Exemplos desta aula: • http://www.brunocampagnolo.com/2009li/2009/11/03/layout-de-elementos-em-css/ • Exemplos da aula passada: • http://www.brunocampagnolo.com/2009li/2009/10/27/posicionamento-de-elementos-em-css/ 27/10/09 13

  14. Alguns tipos de layout • Largura fixa; • Líquido ou fluido; • Elástico; • Largura fixa variável;

  15. Largura fixa • Determinado em pixels; • Redimensiona a janela, layout permanece; • Controle exato; • Não prevê resolução do usuário.

  16. Exemplo de site com Largura fixa • http://www.pucpr.br

  17. 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.

  18. Exemplo de site com layout líquido • http://www.tabcorp.com.au

  19. 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.

  20. Exemplo de site com layout elástico • http://www.htmldog.com/articles/elasticdesign/demo/

  21. 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.

  22. Exemplo: Layout líquido de 2 colunas • HTML Básico: • <div id="cabecalho"></div> • <div id="conteudo"></div> • <div id="lateral"></div> • <div id="rodape"></div> • CSS Básico: • #cabecalho {} • #conteudo { float:left; width:X%;} • #lateral { float: right; width: Y%;} • #rodape {clear: both;} • X + Y < 100%

  23. Exemplo: Layout líquido de 3 colunas • HTML Básico: • <div id="cabecalho"></div> • <div id="lateral_a"></div> • <div id="lateral_b"></div> • <div id="conteudo"></div> • <div id="rodape"></div> • CSS Básico: • #cabecalho {}  • #lateral_a { float: left; width: X%;} • #lateral_b {float:right;width: Y%;} • #conteudo {margin-left:X+Z%; margin-right: Y+Z%;} • #rodape { clear:both;} X+Y+Z<100%

  24. DEZENAS de variações são possíveis apenas alterando as propriedades: • width; • float; • clear; • margin; • min-height.

  25. Problema: muitas vezes é obrigatório o uso de hacks para compatibilizar com navegadores antigos.

  26. 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.

  27. Layouts prontos Sugestõ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/

  28. 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

  29. Geradores de layout Sugestões de links • http://developer.yahoo.com/yui/grids/builder/ • http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php • http://builder.yaml.de/

  30. 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.

  31. Desafio do layout de forms!

  32. Formulário exemplo

  33. 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.

  34. Rollover

More Related