Download - Palestra / Layout Fluido Com Tableless / SDD
![Page 2: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/2.jpg)
Indicação
• Sistemas– http://www.google.com/analytics/
• Webmail– http://gmail.com/
• Buscas– http://www.google.com.br/
![Page 3: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/3.jpg)
Convergência
• A importancia do layout fluido na era de transição 800x600 // 1024x768 e de convergencia
![Page 4: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/4.jpg)
Cuidados
• Texto muito largo– 7 - 11 palavras por linha– http://psychology.wichita.edu/surl/usabilitynew
s/42/text_length.htm
• Layouts onde o design é muito engessado
![Page 5: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/5.jpg)
Tipos de layout fluido
• Pseudo-fluido– http://meetweb.com.br/mw2/
agencia_diferenciais.asp
• Fluido total– http://news.google.com/
• Fluido artificial– http://www.bradesco.com.br/ – http://www.terra.com.br/
• Fluido em blocos– http://www.uxmag.com/features/101/
experiencing-and-designing-experience
![Page 6: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/6.jpg)
Tipos de layout fluido
• Fluido por resolução– http://www.themaninblue.com/experiment/
ResolutionLayout/•
![Page 7: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/7.jpg)
Praticando
![Page 8: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/8.jpg)
Setup
• Demonstração do ECOTRIP• Preparação
– Arquivos– SSI > DW Templates– Preview in browser – FF– Analise do HTML e CSS
![Page 9: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/9.jpg)
Praticando
• Definir conceitualmente elementos fixos e elementos fluidos!
• Descontruindo a largura fixa – Retirar largura dos
boxes principais• Galerias fluidas
– Clear > Float• 2 colunas de conteúdo
complementares em Atividades > Rapel– Float nas 2– Clear:both após
• Blocos da homepage– Formação de imagem
• MAX-WIDTH pra evitar blocos muito largos de texto– Problemas com o IE6– Soluções com JS– Menu deve ter largura
maxima declarada
• FAUX COLUNShttp://www.alistapart.com/articles/fauxcolumns/
• Fluido total na home?
![Page 10: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/10.jpg)
Importante
• Exigências– Regra, apesar do IE6 não obedecer...
float só onde tem WIDHT; – Tem que ter float em todos os blocos para
"descer".Ex.: Rodapé que sobe.. :(
• Evitar position:absolute quando estiver usando float
![Page 11: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/11.jpg)
Conclusões
delicious.com/hugodiasneto/sdd
![Page 12: Palestra / Layout Fluido Com Tableless / SDD](https://reader036.vdocuments.com.br/reader036/viewer/2022082704/5583c5c9d8b42a7a798b54d8/html5/thumbnails/12.jpg)
Layout Fluido com Tableless
Hugo [email protected]
Materiais da palestra em www.hugodias.com.br
Dúvidas?Dúvidas?