Laboratório de Informática
Sponsored Links
This presentation is the property of its rightful owner.
1 / 34

Laboratório de Informática CSS Layout em CSS PowerPoint PPT Presentation


  • 52 Views
  • Uploaded on
  • Presentation posted in: General

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 ;

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Laboratório de InformáticaCSSLayout 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;

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


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


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


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 AltaBooks;

    • 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 SitePoint)

  • 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/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


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 JavaScript;

  • Pouco usual.


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%


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%


  • DEZENAS de variações são possíveis apenas alterando as propriedades:

  • width;

  • float;

  • clear;

  • margin;

  • min-height.


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.code-sucks.com/css%20layouts/

  • http://www.glish.com/css/

  • http://www.intensivstation.ch/en/templates/


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


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/


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


  • Login