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

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


  • 42 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 tica css layout em css

Laboratório de InformáticaCSSLayout em CSS

Bruno C. de Paula

2º Semestre 2009 > PUCPR > BSI


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

Resumo da aula

  • Começaremos a entender que usar tabelas para layout é errado;

  • Leitura obrigatória:

    • Porque utilizar tabelas para layout é estupidez;


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

Material referente ao assunto da aula

  • CSS – Guia de Bolso;

    • Editora AltaBooks;

    • 2008;

    • Download de um capítulo.

27/10/09

8


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

Alguns tipos de layout

  • Largura fixa;

  • Líquido ou fluido;

  • Elástico;

  • Largura fixa variável;


Laborat rio de inform tica css layout em css

Largura fixa

  • Determinado em pixels;

  • Redimensiona a janela, layout permanece;

  • Controle exato;

  • Não prevê resolução do usuário.


Laborat rio de inform tica css layout em css

Exemplo de site com Largura fixa

  • http://www.pucpr.br


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

Exemplo de site com layout líquido

  • http://www.tabcorp.com.au


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

Exemplo de site com layout elástico

  • http://www.htmldog.com/articles/elasticdesign/demo/


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

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%


Laborat rio de inform tica css layout em css

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%


Laborat rio de inform tica css layout em css

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

  • width;

  • float;

  • clear;

  • margin;

  • min-height.


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

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/


Laborat rio de inform tica css layout em css

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


Laborat rio de inform tica css layout em css

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/


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

Desafio do layout de forms!


Laborat rio de inform tica css layout em css

Formulário exemplo


Laborat rio de inform tica css layout em css

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.


Laborat rio de inform tica css layout em css

Rollover


  • Login