Post on 09-Jul-2015
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Concepção de Websites
Posicionamento de elementos na página
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Como se posicionam os conteúdos na Web?
• De forma Estática
• Usando Tabelas (e alinhamentos)
• Definindo o estilo de cada elemento
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
“Onde está a bola?”
237
192
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Como posicionar a bola?
• Tentativa 1 – Posicionamento estático
<img src="cr.png“/><img src="ball.png”/>
NÃO SATISFAZ!
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Como posicionar a bola?
• Tentativa 2 – Tabela
237
192
<table background="cr.png" width="468" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="237" height="192"> </td><td> </td>
</tr><tr>
<td width="237" height="192"> </td><td height="454" valign="top"><img src="ball.png"
width="102" height="101" /></td></tr>
</table>
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Como posicionar a bola?
• Tentativa 3 – Definição de estilo (CSS)
237
192
<div style="width:468px; height:646px; background-image:url(cr.png)">
<img style="position:absolute; top:192px;left: 237px" src="ball.png"/>
</div>
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Posicionamento por definição de estilo
• Propriedades essenciais:
– top
– left
– z-index
– position Posicionamento AbsolutoPosicionamento Relativo
Top (150px)
Left (200px )
12
3
<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>
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Posicionamento por definição de estilo
• Outras propriedades:
– bottom
– right
– overflow
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
A importância da tag DIV
• Permite agrupar todo o tipo de elementos HTML
• Define zonas para posicionamento
• Substitui o papel das tabelas em Webdesign
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Aplicações
• Publicidade
• Menus
• Caixas de Diálogo
• Animação ou deslocamento de elementos
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Questões?
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraFIM