Bruno C de Paula Laboratrio de Informtica CSS
Bruno C. de Paula Laboratório de Informática CSS Layout em CSS 2º Semestre 2009 > PUCPR > BSI
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 aula Começaremos a entender que usar tabelas para layout é errado; Leitura obrigatória: –Porque utilizar tabelas para layout é estupidez;
Material referente ao assunto da aula Layout CSS Passo a passo: http: //maujor. com/tutorial/layout-csspasso-a-passo. php Propriedade position do CSS: – http: //www. tableless. com. br/propriedadeposition-do-css Flutuando elementos: http: //www. ptbr. html. net/tutorials/css/lesson 13. asp Posicionando elementos: http: //www. ptbr. html. net/tutorials/css/lesson 14. asp 27/10/09 4
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: 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/form. Contato. php 27/10/09 5
Material referente ao assunto da aula Layout de forms • Exemplo de Formulário Semântico: o http: //www. acordapraweb. com/formulariostotalmente-semanticos-com-html-e-css/ • Mais um exemplo de formulário semântico: o http: //woork. blogspot. com/2008/06/clean-and-purecss-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 27/10/09 6
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
Material referente ao assunto da aula CSS – Guia de Bolso; – Editora Alta. Books; – 2008; – Download de um capítulo. 27/10/09 8
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
Tags HTML referenciadas na aula (em Inglês – site Site. Point) Tag de estilo: <style>; Tag de link: <link>; Tag de script: <script>; 27/10/09 10
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.
Exemplos da aula Exemplos desta aula: http: //www. brunocampagnolo. com/ 2009 li/2009/11/03/layout-deelementos-em-css/ Exemplos da aula passada: – http: //www. brunocampagnolo. com/20 09 li/2009/10/27/posicionamento-deelementos-em-css/ 27/10/09 13
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.
Exemplo de site com Largura fixa http: //www. pucpr. br
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.
Exemplo de site com layout líquido http: //www. tabcorp. com. au
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 Java. Script; Pouco usual.
Exemplo: Layout líquido de 2 colunas o HTML Básico: o <div id="cabecalho"></div> o <div id="conteudo"></div> o <div id="lateral"></div> o <div id="rodape"></div> o CSS Básico: o #cabecalho {} o #conteudo { float: left; width: X%; } o #lateral { float: right; width: Y%; } o #rodape {clear: both; }
Exemplo: Layout líquido de 3 colunas o 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> o 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%} o #rodape { clear: both} o o
de variações são possíveis apenas alterando as propriedades: • width; • float; • clear; • margin; • min-height. DEZENAS
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 prontos Sugestões de links http: //www. csseasy. com/ http: //layouts. ironmyers. com/ http: //www. codesucks. com/css%20 layouts/ http: //www. glish. com/css/ http: //www. intensivstation. ch/en/templa tes/
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: //delicious. com/bcp/css+framework http: //developer. yahoo. com/yui/grids/ http: //delicious. com/bcp/css+framework
Geradores de layout Sugestões de links http: //developer. yahoo. com/yui/grids/b uilder/ http: //www. positioniseverything. net/arti cles/pie-maker/pagemaker_form. php http: //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
- Slides: 34