Laboratório de Informática CSS Layout em CSS

Apresentação em tema: "Laboratório de Informática CSS Layout em CSS"— Transcrição da apresentação:

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

2 Resumo da aula 27/10/09 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 27/10/09 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
27/10/09 Material referente ao assunto da aula Layout CSS Passo a passo: passo-a-passo.php Propriedade position do CSS: position-do-css Flutuando elementos: br.html.net/tutorials/css/lesson13.asp Posicionando elementos: br.html.net/tutorials/css/lesson14.asp 27/10/09 4

5 Material referente ao assunto da aula Layout de forms
27/10/09 Material referente ao assunto da aula Layout de forms Livro:Desenvolvendo CSS na Web - SIMON COLLISON Livro: Web Form Design: Best Practices  Site: Construindo formulários acessíveis: Formulários Geral: Formulários de Contato: 27/10/09 5

6 Material referente ao assunto da aula Layout de forms
27/10/09 Material referente ao assunto da aula Layout de forms Exemplo de Formulário Semântico: Mais um exemplo de formulário semântico: Checklist de usabilidade em forms: Artigo sobre alinhamento de formulários de cadastro: 27/10/09 6

7 Material referente ao assunto da aula Layout de menus
27/10/09 Material referente ao assunto da aula Layout de menus Origem da técnica de rollover: 27/10/09 7

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

9 Tag de estilo: <style>; Tag de link: <link>;
27/10/09 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 Tag de estilo: <style>; Tag de link: <link>;
27/10/09 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)
27/10/09 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)
27/10/09 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:
27/10/09 Exemplos da aula Exemplos desta aula: 2009li/2009/11/03/layout-de- elementos-em-css/ Exemplos da aula passada: 09li/2009/10/27/posicionamento-de- elementos-em-css/ 27/10/09 13

14 Largura fixa variável;
Alguns tipos de layout 27/10/09 Largura fixa; Líquido ou fluido; Elástico; Largura fixa variável;

15 Largura fixa Determinado em pixels;
27/10/09 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
27/10/09

17 Líquido ou fluido Expande ou contrai conforme resolução do usuário;
27/10/09 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
27/10/09

19 Elástico 27/10/09 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
27/10/09 demo/

21 Largura fixa variável 27/10/09 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 Layout líquido de 2 colunas
Exemplo: Layout líquido de 2 colunas 27/10/09 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;}

23 Layout líquido de 3 colunas
Exemplo: Layout líquido de 3 colunas 27/10/09 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: X+Z%} #rodape { clear:both}

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

25 27/10/09 Problema: muitas vezes é obrigatório o uso de hacks para compatibilizar com navegadores antigos. Imagem original em:

26 1) Deixe o problema para seu designer resolver;
Minha Recomendação 27/10/09 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/
27/10/09 sucks.com/css%20layouts/ tes/

28 Framework CSS Sugestões de links
27/10/09 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;

29 Geradores de layout Sugestões de links http://builder.yaml.de/
27/10/09 ilder/ cles/pie-maker/pagemaker_form.php

30 Layout de elementos específicos – Layout de forms
27/10/09 Técnicas de layout de formulários: Tabelas – evitar; Parágrafos – o mais compatível; Listas de definição; Divs. 05-LayoutBaseadoEmTabelas.html - Layout baseado em tabelas, o que vimos até agora, não é a solução ideal; 06-LayoutBaseadoEmParagrafos.html - Layout baseado em parágrafos (<p>) e quebras de linha (<br>); Baseados em float: Layout baseado em listas de definição (<dl>, <dd>, <dt>) Layout baseado em camadas (<div>) Código HTML bastante limpo e acessível; Funciona bem mesmo sem CSS; Fácil leitura pelo usuário; Prevê dispositivos com baixa resolução de largura; CSS Aplicado muda pouco em relação à versão anterior! Não é uma boa abordagem bom para formatações complexas; Sugere-se a colocação de separador entre os itens: fieldset p { margin:3px 0 2px 0; border:1px solid #aaa; padding:5px; background:#ccc; }

31 Desafio do layout de forms!
27/10/09 Desafio!: Renderização padrão em navegadores diferentes é sempre diferente. Botões NUNCA vão ficar exatamente iguais. Fonte: Página 173 do Beggining CSS

32 Formulário exemplo 27/10/09

33 Layout de elementos específicos – Layout de menus
27/10/09 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 27/10/09