Aula 7 Fundamentos de Construção de Sites

•

ESTÁCIO

0

N A

27/03/2019

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Construção de Web Sites

51 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Fundamentos de 
Construção de Sites
Aula 7
1
Box Model (ver aula 5)
• Todos elementos HTML podem sex considerados como caixas 
• No contexto de CSS, Box Model ou Modelo de Caixa é usado para 
layout
• O CSS Box Model é essencialmente um box que envolve 
elementos HTML
– Margin. Área ao redor da borda. É completamente transparente.
– Border. Uma borda vai ao redor do padding (enchimento) e do 
conteúdo.
– Padding (Enchimento). É uma área ao redor do conteúdo. É 
completamente transparente 
– Content. É o conteúdo onde o texto e imagens são mostrados.
• O uso do Box Model permite colocar bordas ao redor de elementos 
e também determinar espaços entre elementos
2
Box Model
3
Margin
Padding
Border
Content
Box Model
4
body {
color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
text-align: justify;
margin: 25px;
border: 4px solid #0000ff;
padding: 50px;
width:1200px;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 30px;
}
Definindo Lay-out
• Primeiro passo: Dividir o documento 
em seções lógicas
• Como? 
tag <div> 
5
tag <div> 
• Cada seção é identificada de forma 
única
<div id=“secao1”>
<div id=“secao2”>
• Criando estilos para cada seção
#secao1 { }
#secao2 { }
6
Exemplo de estrutura
<body> 
<div id="container"> 
 <div id="caixa1"></div>
 <div id="caixa2"></div> 
 <div id="caixa3"></div> 
</div> 
</body> 
7
Exemplo de estrutura
Exercício - Criar documento HTML com as 3 caixas
Em todo documento: 
 - cor de fundo cinza (#cccccc)
- cor da letra amarela
- tamanho da fonte 16 sem serifa
- justificar texto texto
Definir cada caixa com largura de 300 pixels e altura de 500 
pixels, margem 20 pixels, enchimento 30 pixels, borda sólida, 
preta e com 4 pixels.
- Cor de fundo da Caixa 1 é azul
- Cor de fundo da Caixa 2 é amarela
- Cor de fundo da Caixa 3 é vermelha
8
Posicionamento (Estático)
• É o que usamos até aqui!!!
• Cada elemento de bloco (h1, p, etc.) é colocado 
na ordem em que aparece na marcação da 
página
• Os elementos em linha são colocados lado a 
lado (ou passam para a próxima linha, caso falte 
espaço – o espaço depende da área de 
conteúdo!!!)
– Imagens são elementos em linha!!!
9
Flutuando...
• Propriedade CSS: float
– “Flutua” um elemento para esquerda ou para 
direita
• Observações:
– Elementos que estão antes não são afetados
– Os elementos que estão após são afetados
10
Exemplo de estrutura
<body> 
<div id="container"> 
 <div id="header"></div>
 <div id="menu"></div> 
 <div id="contents"></div> 
 <div id="footer"></div> 
</div> 
</body> 
11
Exemplo de estrutura
12
Menu
Container
Footer
Header
13
<!DOCTYPE html >
<html lang="pt"> 
<head>
 <meta charset="utf-8" /> 
 <title>Restaurante HZL</title>
 <link rel="stylesheet" href=“css/geral.css">
</head>
<body>
<div id="container">
<div id="header">
<p>Texto do Cabeçalho</p>
</div>
<div id="menu">
<p>Aqui fica o menu</p>
</div>
<div id="contents">
<p>Aqui está o conteúdo</p>
</div>
<div id="footer">
<p>Este é o rodapé</p>
</div>
</div>
</body>
</html>
14
body { color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif;
}
#container {
margin: 0px;
padding: 0px;
border: 4px solid #0000ff;
width:900px;
font-size: 30px;
}
#header {
margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px;
}
#menu {
margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:100px;
}
#footer {
margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px;
}
#contents {
margin: 10px;
border: 4px solid #ff0000;
padding: 10px;
width:650px;
}
15
body { color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif; }
#container { margin: 0px;
padding: 0px;
border: 4px solid #0000ff;
width:900px;
font-size: 30px;}
#header { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px; }
#menu { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:100px;
float:left; }
#footer { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px; }
#contents { margin: 10px;
border: 4px solid #ff0000;
padding: 10px;
width:650px;
float: left; }
Flutuando...
• Problemas com o rodapé…
16
17
body { color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif; }
#container { margin: 0px;
padding: 0px;
border: 4px solid #0000ff;
width:900px;
font-size: 30px; }
#header { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px; }
#menu { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:100px;
float:left; }
#footer { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px;
clear: both;}
#contents{ margin: 10px;
border: 4px solid #ff0000;
padding: 10px;
width:650px;
float: left;}
Posicionamento de elementos
• Alguns “truques” podem ser usados
– Exemplo: Aumentar a margem de um elemento 
deixando que um elemento flutue sobre ele
18
19
body { color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif; }
#container { margin: 0px;
padding: 0px;
border: 4px solid #0000ff;
width:900px;
font-size: 30px; }
#header { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px; }
#menu { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:100px;
float:left; }
#footer { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px;
clear: both;}
#contents{ margin: 10px 10px 10px 146px;
border: 4px solid #ff0000;
padding: 10px;
width:650px;
float: left;}
20
body { color: #000000;
background-color: #ffffff;
font-family: Verdana, Geneva, Arial, sans-serif; }
#container { margin: 0px;
padding: 0px;
border: 4px solid #0000ff;
width:900px;
font-size: 30px; }
#header { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px; }
#menu { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:100px;
float:left; }
#footer { margin: 10px;
border: 4px solid #0000ff;
padding: 10px;
width:800px;
clear: both;}
#contents{ margin: 10px 10px 10px 146px;
border: 4px solid #ff0000;
padding: 10px;
width:650px; }
	Slide 1
	Box Model (ver aula 5)
	Box Model
	Box Model
	Definindo Lay-out
	tag <div>
	Exemplo de estrutura
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Exemplo de estrutura
	Slide 13
	Slide 14
	Slide 15
	Flutuando...
	Slide 17
	Posicionamento de elementos
	Slide 19
	Slide 20