View
231
Download
2
Category
Preview:
DESCRIPTION
HTML, CSS, divs, layout
Citation preview
Módulo 1
HTML, CSS & XHTML Aula 4
Professor: Eduardo Mendes
Como dividir uma página em seções
h1 h2
h2
p
p
p
p img
div id=“gatos”
div id=“caes”
div id=“topo”
div id=“rodape”
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>
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>
Adicionando ao phpdrinks.css
#drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
Adicionando ao phpdrinks.css
#drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
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; }
Alterando as cores dos cabeçalhos
#drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
Padding em uma linha
padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px
padding: 0px 20px 30px 10px;
Margem em uma linha
margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px
margin: 0px 20px 30px 10px;
1 valor para todos os paddings
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px
padding: 20px;
Margem horizontal e vertical
margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px
margin: 0px 20px;
Borda em uma linha
border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
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;
Desafio!!!
Preparando o território
• Faça o download do arquivo – www.fa7.edu.br/tecnicas/modulo1/drinks5.zip
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> <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>
<div id=“drinks”>
Adicione o estilo correto para obter
• Adicione novamente estilo à camada garantia
<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>
<p id=“drinks”>
Incrementando...
• Abra o arquivo css • Qual a definição a alterar?
float: right;
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
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
a texto
p texto em
texto a
texto
texto
Tudo junto h1
h2
p
h2
p
p
p
texto
texto
texto
texto em texto
texto
texto texto texto
img img img img
h1
h2
p
h2
p
p
p
texto
texto
texto em texto
texto
img img img img
texto
texto texto
texto texto texto texto
Cd à Itálico, Artista à Negrito
<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”
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>
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>
Crie os estilos
.cd { font-style: italic; } .artista { font-weight: bold; }
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; }
Melhorando
a:link { color: #007e7e; text-decoration: none; } a:visited { color: #333333; }
Links especiais para os drinks #drinks a:link { color: #007e7e; } #drinks a:visited { color: #333333; } #drinks a:hover { background: #f88396; color: #0d5353; }
Último passo
• Crie um id e forneça a formatação adequada
Resposta
• Css #rodape { font-size: 70%; text-align: center; line-height: normal; margin-top: 30px; }
• Html <div id="rodape"> <p> © 2006, PHP DRINKS<br /> Todos os direitos reservados. </p> </div>
A StarBuzz Coffe
• Topo - header
• Principal – main
• Coluna lateral – sidebar
• Rodapé – footer
<html> <head> </head> <body> <div id="header"> </div> <div id="main"> ... </div> <div id="sidebar"> ... </div>
<div id="footer"> ... </div> </body> </html>
starbuzz.css body { background-color: #b5a789; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; }
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%; }
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; }
Alterando
Primeiro Passo – Alterar as posições
Depois
• Adicionar uma largura e um float
Melhorando
Verificando a página sem o CSS
Organizando
• Coloque a div “sidebar” para baixo da div “main”
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; }
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; }
Alterando o CSS
#sidebar { background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }
Teste
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
Teste
Corrigindo o footer
#footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; }
Teste
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; }
Tente
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; }
Teste
Adicione uma camada
<div id="qualquercoisa"> <p> Qualquer coisa </p> </div>
Adiciona um seletor CSS para a camada
#qualquercoisa { position: absolute; top: 150px; left: 300px; width: 400px; background: #F5F5F5; }
Teste
Alterando Starbuzz
• Retire a div “content”
#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; }
Alterando Starbuzz
Teste
Alterando o Starbuzz #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px 330px 10px 10px; font-size: 90%; }
Teste
Premiação para o design!!!!!
• Vamos premiar este design
Adicionemos uma camada parao prêmio
<div id="award"> <img src="images/award.gif" /> </div>
Adicionando um seletor css para o prêmio
#award { position: absolute; top: 30px; left: 365px; }
<div id=“main”> ... </div> <div id=“award”> ... </div> <div id=“sidebar”> ... </div>
Mudando o prêmio de lugar
Solução à z-index
#award { position: absolute; top: 30px; left: 365px; z-index: 99; }
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=“footer”
div id=“sidebar”
div id=“tv”
100px
100p
x
Um outro tipo de posicionamento: FIXED
• Promoção para um café “no preço”
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; }
Teste
Corrigindo o problema com as bordas
#cupom img { border: none; } #cupom a:link { border: none; } #cupom a:visited { border: none; }
Quase OK!!!
Usando um valor negativo para a esquerda
#cupom { position: fixed; top: 300px; left: -90px; }
Uuuuuuuufa!
E sobre posicionamento relativo???
Relativo à posição que deveria ficar
.beanheading img{ position: relative; left: 100px; }
Testando o absoluto
.beanheading img{ position: relative; left: 100px; }
Recommended