apresentacao aula6-1
TRANSCRIPT
![Page 1: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/1.jpg)
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Concepção de Websites
Posicionamento de elementos na página
![Page 2: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/2.jpg)
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
![Page 3: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/3.jpg)
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
“Onde está a bola?”
237
192
![Page 4: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/4.jpg)
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!
![Page 5: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/5.jpg)
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>
![Page 6: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/6.jpg)
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>
![Page 7: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/7.jpg)
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>
![Page 8: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/8.jpg)
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Posicionamento por definição de estilo
• Outras propriedades:
– bottom
– right
– overflow
![Page 9: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/9.jpg)
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
![Page 10: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/10.jpg)
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
![Page 11: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/11.jpg)
Concepção de Websites - Posicionamento de elementos na página - Hélder Oliveira
Questões?
![Page 12: Apresentacao aula6-1](https://reader034.vdocuments.net/reader034/viewer/2022052304/559e4cf11a28abd5588b4652/html5/thumbnails/12.jpg)
Concepção de Websites - Posicionamento de elementos na página - Hélder OliveiraFIM