Apresentacao aula6-1

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

Concepção de Websites

Posicionamento de elementos na página


Como se posicionam os conteúdos na Web?

• De forma Estática

• Usando Tabelas (e alinhamentos)

• Definindo o estilo de cada elemento


“Onde está a bola?”

237

192


Como posicionar a bola?

• Tentativa 1 – Posicionamento estático

<img src="cr.png“/><img src="ball.png”/>

NÃO SATISFAZ!



• 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>



• 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>


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>


Posicionamento por definição de estilo

• Outras propriedades:

– bottom

– right

– overflow


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


Aplicações

• Publicidade

• Menus

• Caixas de Diálogo

• Animação ou deslocamento de elementos


Questões?

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

Documents

Apresentacao aula6-1