A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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

Apresentações semelhantes


Apresentação em tema: "Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

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

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 ; Porque utilizar tabelas para layout é estupidez

4 427/10/09 Material referente ao assunto da aula Layout CSS Passo a passo: http://maujor.com/tutorial/layout-css- passo-a-passo.php http://maujor.com/tutorial/layout-css- passo-a-passo.php Propriedade position do CSS: – http://www.tableless.com.br/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

5 527/10/09 Material referente ao assunto da aula Layout de forms Livro:Desenvolvendo CSS na Web - SIMON COLLISONDesenvolvendo CSS na Web - SIMON COLLISON Livro: Web Form Design: Best Practices Web Form Design: Best Practices Site:http://www.lukew.com/ffhttp://www.lukew.com/ff Construindo formulários acessíveis: o http://www.maujor.com/tutorial/formac-a.php http://www.maujor.com/tutorial/formac-a.php Formulários Geral: o http://www.maujor.com/tutorial/cssforms.php http://www.maujor.com/tutorial/cssforms.php Formulários de Contato: o http://www.maujor.com/tutorial/formContato.php http://www.maujor.com/tutorial/formContato.php

6 627/10/09 Material referente ao assunto da aula Layout de forms Exemplo de Formulário Semântico: o http://www.acordapraweb.com/formularios- totalmente-semanticos-com-html-e-css/ http://www.acordapraweb.com/formularios- totalmente-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 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 http://www.alistapart.com/articles/sensibleforms Artigo sobre alinhamento de formulários de cadastro: o http://www.lukew.com/ff/entry.asp?504 http://www.lukew.com/ff/entry.asp?504

7 727/10/09 Material referente ao assunto da aula Layout de menus Origem da técnica de rollover: http://wellstyled.com/css-nopreload-rollovers.html

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

9 9 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

10 1027/10/09 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;

11 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint float: determina o posicionamento de um elemento em relação ao fluxo; float clear: controla o comportamento de um elemento em relação ao estado de float dos anteriores; clear position: tipo de posicionamento de um elemento. position

12 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint width: largura de um elemento, obrigatório nos elementos com float; width left / right: distância em relação ao limite esquerdo ou direito do elemento sendo posicionado; leftright top / bottom: distância em relação ao limite superior ou inferior do elemento sendo posicionado. topbottom

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

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/ 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 o HTML Básico : o o CSS Básico : o #cabecalho {} o #conteudo { float:left; width:X%;} o #lateral { float: right; width: Y%;} o #rodape {clear: both;}

23 Exemplo: Layout líquido de 3 colunas o HTML Básico : o o CSS 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}

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.code- sucks.com/css%20layouts/ http://www.glish.com/css/ http://www.intensivstation.ch/en/templa tes/ http://www.intensivstation.ch/en/templa tes/

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/bu ilder/ http://developer.yahoo.com/yui/grids/bu ilder/ http://www.positioniseverything.net/arti cles/pie-maker/pagemaker_form.php http://www.positioniseverything.net/arti cles/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


Carregar ppt "Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."

Apresentações semelhantes


Anúncios Google