Este documento apresenta exemplos de como dividir uma página em seções usando HTML e CSS, como adicionar estilos a elementos e como organizar o layout de uma página. Inclui exemplos de como posicionar elementos com float e position e ajustar paddings, margins e cores.

1. Módulo 1
HTML, CSS & XHTML
Aula 4
Professor: Eduardo Mendes

2. Como dividir uma página em seções
h1
h2
p
h2
p
p
p img
div id=“topo”
div id=“gatos”
div id=“caes”
div id=“rodape”

3. Retornando ao phpdrinks
• bebidas.html
<h1>Nossos Drinks</h1>
<h2>Chá Verde Gelado</h2>
<p>
<img src="green.jpg">
Mistura de vitaminas e sais minerais, este drink
combina benefícios do chá verde com a
camomila.
</p>
<h2>Concentrado Gelado</h2>
<p>
<img src="lightblue.jpg">
Combinação de suco de limão com contreau.
</p>
<h2>Azul Bliss</h2>
<p>
<img src="blue.jpg">
Mistura secreta que deixará você relaxado.
</p>
<h2>Drink Rejuvenescedor</h2>
<p>
<img src="red.jpg">
Combinação de acerola e goiaba, drink rico
em vitamina C.
</p>
• bebidas.html
<h2>Nossos Drinks</h2>
<h3>Chá Verde Gelado</h3>
<p>
<img src="green.jpg">
Mistura de vitaminas e sais minerais, este drink
combina benefícios do chá verde com a
camomila.
</p>
<h3>Concentrado Gelado</h3>
<p>
<img src="lightblue.jpg">
Combinação de suco de limão com contreau.
</p>
<h3>Azul Bliss</h3>
<p>
<img src="blue.jpg">
Mistura secreta que deixará você relaxado.
</p>
<h3>Drink Rejuvenescedor</h3>
<p>
<img src="red.jpg">
Combinação de acerola e goiaba, drink rico
em vitamina C.
</p>

4. Retornando ao phpdrinks
<div id=“drinks”>
<h2>Nossos Drinks</h2>
<h3>Chá Verde Gelado</h3>
<p>
<img src="green.jpg">
Mistura de vitaminas e sais minerais, este drink
combina benefícios do chá verde com a camomila.
</p>
.
.
.
<h3>Drink Rejuvenescedor</h3>
<p>
<img src="red.jpg">
Combinação de acerola e goiaba, drink rico
em vitamina C.
</p>
</div>

5. Adicionando ao phpdrinks.css
#drinks {
border-width: thin;
border-style: solid;
border-color: #007e7e;
}

6. Adicionando ao phpdrinks.css
#drinks {
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
}

7. Adicionando ao phpdrinks.css
#drinks {
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: 20px;
text-align: center;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;
}

8. Alterando as cores dos cabeçalhos
#drinks h2 {
color: black;
}
#drinks h3 {
color: #d12c47;
}

9. Padding em uma linha
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px
padding: 0px 20px 30px 10px;

10. Margem em uma linha
margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px
margin: 0px 20px 30px 10px;

11. 1 valor para todos os paddings
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px
padding: 20px;

12. Margem horizontal e vertical
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px
margin: 0px 20px;

13. Borda em uma linha
border-width: thin;
border-style: solid;
border-color: #007e7e;
border: thin solid #007e7e;

14. Fundo em uma linha
background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;
background: white url(images/cocktail.gif) repeat-x;

15. Desafio!!!

16. Preparando o território
• Faça o download do arquivo
– www.fa7.edu.br/tecnicas/modulo1/drinks5.zip

17. Adicione o estilo correto para obter
• Verifique o arquivo css e
adicione o estilo correto para
que a página possua esta
aparência
<div id=“drinks”>
<div>
<h2>Drinks Especiais desta Semana</h2>
<p>
<img src="imagens/yellow.gif" />
</p>
<h3>Lemon Breeze</h3>
<p>
Um drinks mais que saudável, este drink combina
ervas botânicas, minerais, e vitaminas com uma
suave mistura de limão que manterá sua saúde imune
dia e noite.
</p>

18. Adicione o estilo correto para obter
• Adicione novamente estilo à camada garantia
<p id=“drinks”>
<p>
Garantimos a você um ambiente agradável, gente bonita, funções
e procedimentos que farão sua noite ser inesquecível.
Nossos Djs tocarão as melhores músicas da balada durante
a noite toda. Os maiores sucessos da pista regados pelos drinks
mais exóticosno mundo da programação web.
</p>

19. Incrementando...
• Abra o arquivo css
• Qual a definição
a alterar?
float: right;

20. Entendendo o float
<html>
<head>...</head>
<body>
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<h2>...</h2>
<p>...</p>
<p>...</p>
<p>...</p>
</body>
</html>
h1
h2
p
h2
p
p
p

21. E sobre os elementos inline???
<p>
Venha se divertir conosco <em>a qualquer hora</em>
com estes e todos os nossos outros maravilhosos
drinks.<a href="bebidas/bebidas.html">drinks</a>.
</p>
p
texto em texto a
p texto em texto
texto a
p texto
em
texto
texto
a
texto

22. Tudo junto
h1
h2
p
h2
p
p
p
texto
texto
texto
texto
texto em texto
texto
texto
texto
img img img img
h1
h2
p
h2
p
p
p
texto
texto
texto
texto
texto
texto
texto em
texto
texto
texto
texto
texto
img img img
img

23. Cd à Itálico, Artista à Negrito

24. <span>
• Elementos que formatam elementos inline
• Vejamos:
– Vamos separar os cd e os artistas com tags
span
– Adicionemos às tags span classes “cd” e classes
“artista”
– Criar no phpdrinks.css regras para “cd” e
“artista”

25. Separando Cds de Artistas
<ul>
<li>Stickwitu, Pussycat Dolls</li>
<li>Frozen, Madonna</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>

26. Adicionemos span
<ul>
<li>
<span class=“cd”>Stickwitu</span>,
<span class=“artista”>Pussycat Dolls</span>
</li>
<li>Frozen, Madonna</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>

27. Crie os estilos
.cd {
font-style: italic;
}
.artista {
font-weight: bold;
}

28. Links de mútiplas personalidades
• Um link pode ter três estados
– Não-visitado
– Visitado
– Hover
– Teste:
a:link {
color:green;
}
a:hover{
color: yellow;
}

29. Melhorando
a:link {
color: #007e7e;
text-decoration: none;
}
a:visited {
color: #333333;
}

30. Links especiais para os drinks
#drinks a:link {
color: #007e7e;
}
#drinks a:visited {
color: #333333;
}
#drinks a:hover {
background: #f88396;
color: #0d5353;
}

31. Último passo
• Crie um id e forneça a formatação
adequada

32. Resposta
• Css
#rodape {
font-size: 70%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
• Html
<div id="rodape">
<p>
&copy; 2006, PHP DRINKS<br />
Todos os direitos reservados.
</p>
</div>

33. A StarBuzz Coffe
• Topo - header
• Principal – main
• Coluna lateral
– sidebar
• Rodapé
– footer

34. <html>
<head>
</head>
<body>
<div id="header">
</div>
<div id="main">
...
</div>
<div id="sidebar">
...
</div>
<div id="footer">
...
</div>
</body>
</html>

35. starbuzz.css
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}

36. starbuzz ids
#header {
background-color: #675c47;
margin: 10px;
height: 108px;
}
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
}

37. starbuzz.css
h1 {
font-size: 120%;
color: #954b4b;
}
h2 { font-size: 110%; }
.slogan { color: #954b4b; }
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}

38. Alterando

39. Primeiro Passo – Alterar as posições

40. Depois
• Adicionar uma largura e um float

41. Melhorando

42. Verificando a página sem o CSS

43. Organizando
• Coloque a div “sidebar” para baixo da div
“main”

44. Alterando o CSS
#sidebar {
background: #efe5d0 url(images/
background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
float: right;
}

45. Alterando o CSS
#sidebar {
background: #efe5d0 url(images/
background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 470px;
width: 280px;
float: right;
}

46. Alterando o CSS
#sidebar {
background: #efe5d0 url(images/
background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 470px;
}

47. Teste

48. Alterando o CSS
• Alterar a definição do main
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
width: 420px;
float: left;
}
10px

49. Teste

50. Corrigindo o footer
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: left;
}

51. Teste

52. Envolvendo o conteúdo com a tag div
#content {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}

53. Tente

54. Fixando Camadas
#sidebar {
position: absolute;
top: 100px;
right: 200px;
width: 280px;
background: #efe5d0 url(images/background.gif)
bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 470px;
}

55. Teste

56. Adicione uma camada
<div id="qualquercoisa">
<p>
Qualquer coisa
</p>
</div>

57. Adiciona um seletor CSS para a camada
#qualquercoisa {
position: absolute;
top: 150px;
left: 300px;
width: 400px;
background: #F5F5F5;
}

58. Teste

59. Alterando Starbuzz
• Retire a div “content”

60. Alterando Starbuzz
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}
#sidebar {
position: absolute;
top: 128px;
right: 0px;
width: 280px;
background: efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}

61. Teste

62. Alterando o Starbuzz
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px 330px 10px 10px;
font-size: 90%;
}

63. Teste

64. Premiação para o design!!!!!
• Vamos premiar este design

65. Adicionemos uma camada parao prêmio
<div id="award">
<img src="images/award.gif" />
</div>

66. Adicionando um seletor css para o prêmio
#award {
position: absolute;
top: 30px;
left: 365px;
}

67. Mudando o prêmio de lugar
<div id=“main”>
...
</div>
<div id=“award”>
...
</div>
<div id=“sidebar”>
...
</div>

68. Solução à z-index
#award {
position: absolute;
top: 30px;
left: 365px;
z-index: 99;
}

69. Algo mais sobre posições absolutas
<div id="sidebar">
<div id=“tv”>
<img src=“tv.gif” />
</div>
<p class="beanheading">
…
</p>
…
</div>
#tv {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
}
div id=“header”
div id=“main”
div
id=“sidebar”
div id=“footer”
div
id=“tv”
100px
100px

70. Um outro tipo de posicionamento: FIXED
• Promoção para um café “no preço”

71. Um outro tipo de posicionamento: FIXED
<div id=“cupom”>
<a href=“freecoffe.html”>
<img src=“images/ticket.gif” />
</a>
</div>
#cupom {
position: fixed;
top: 300px;
left: 100px;
}

72. Teste

73. Corrigindo o problema com as bordas
#cupom img {
border: none;
}
#cupom a:link {
border: none;
}
#cupom a:visited {
border: none;
}

74. Quase OK!!!

75. Usando um valor negativo para a esquerda
#cupom {
position: fixed;
top: 300px;
left: -90px;
}

76. Uuuuuuuufa!

77. E sobre posicionamento relativo???

78. Relativo à posição que deveria ficar
.beanheading img{
position: relative;
left: 100px;
}

79. Testando o absoluto
.beanheading img{
position: relative;
left: 100px;
}