1. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Concepção de Websites
Posicionamento de elementos na página

2. 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

3. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
“Onde está a bola?”
237
192

4. 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!

5. 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">&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. 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>

7. 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 )
1
2
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>

8. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Posicionamento por definição de estilo
• Outras propriedades:
– bottom
– right
– overflow

9. 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

10. 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

11. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Questões?

12. Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
FIM