Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraConcepção de WebsitesPosicionamento de elem...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo se posicionam os conteúdos na Web?• De...
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira“Onde está a bola?”237192
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 1 – Posi...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 2 – Tabe...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 3 – Defi...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraPosicionamento por definição de estilo• Pro...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraPosicionamento por definição de estilo• Out...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraA importância da tag DIV• Permite agrupar t...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraAplicações• Publicidade• Menus• Caixas de D...
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraQuestões?
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraFIM
Próximos SlideShares
Carregando em…5
×

Apresentacao aula6-1

171 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
171
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentacao aula6-1

  1. 1. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraConcepção de WebsitesPosicionamento de elementos na página
  2. 2. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo se posicionam os conteúdos na Web?• De forma Estática• Usando Tabelas (ealinhamentos)• Definindo o estilo decada elemento
  3. 3. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira“Onde está a bola?”237192
  4. 4. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 1 – Posicionamento estático<img src="cr.png“/><img src="ball.png”/>NÃO SATISFAZ!
  5. 5. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 2 – Tabela237192<table background="cr.png" width="468" border="0"cellspacing="0" cellpadding="0"><tr><td width="237" height="192">&nbsp;</td><td>&nbsp;</td></tr><tr><td width="237" height="192">&nbsp;</td><td height="454" valign="top"><img src="ball.png"width="102" height="101" /></td></tr></table>
  6. 6. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraComo posicionar a bola?• Tentativa 3 – Definição de estilo (CSS)237192<div style="width:468px; height:646px;background-image:url(cr.png)"><img style="position:absolute; top:192px;left: 237px" src="ball.png"/></div>
  7. 7. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraPosicionamento por definição de estilo• Propriedades essenciais:– top– left– z-index– position Posicionamento AbsolutoPosicionamento RelativoTop (150px)Left (200px )123<div style=“top:150px; left: 200px;”></div><div style=“top:50px; left: 240px; z-index: 1;”></div><div style=“top:50px; left: 240px; z-index: 2;”></div><div style=“top:50px; left: 240px; z-index: 3;”></div><div style=“top:40px; left: 40px; position:absolute ”></div><div style=“top:40px; left: 40px; position:relative”></div>
  8. 8. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraPosicionamento por definição de estilo• Outras propriedades:– bottom– right– overflow
  9. 9. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraA importância da tag DIV• Permite agrupar todo otipo de elementosHTML• Define zonas paraposicionamento• Substitui o papel dastabelas em Webdesign
  10. 10. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraAplicações• Publicidade• Menus• Caixas de Diálogo• Animação ou deslocamentode elementos
  11. 11. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraQuestões?
  12. 12. Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraFIM

×