Html - Aula 4

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

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”

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
<p>
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>
<p>
<img src="red.jpg">
em vitamina C.
</p>

Retornando ao phpdrinks
<div id=“drinks”>
<p>
combina benefícios do chá verde com a camomila.
</p>
.
.
.
<p>
<img src="red.jpg">
em vitamina C.
</p>
</div>

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

#drinks {
border-width: thin;
width: 200px;
}

#drinks {
border-width: thin;
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-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-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: 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;

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

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>

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
texto a
p texto
em
texto
texto
a
texto

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

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

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;
}
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
}
#footer {
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;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
border-bottom: thin dotted #675c47;
}

Primeiro Passo – Alterar as posições

Depois
• Adicionar uma largura e um float

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;
width: 280px;
float: right;
}

Alterando o CSS
#sidebar {
font-size: 105%;
padding: 15px;
width: 280px;
float: right;
}

Alterando o CSS
#sidebar {
font-size: 105%;
padding: 15px;
}

Alterando o CSS
• Alterar a definição do main
#main {
font-size: 105%;
padding: 15px;
width: 420px;
float: left;
}
10px

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

Envolvendo o conteúdo com a tag div
#content {
width: 800px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
}

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

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;
}

Alterando Starbuzz
• Retire a div “content”

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

Alterando o Starbuzz
#footer {
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 90%;
}

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;
}

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

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=“sidebar”
div id=“footer”
div
id=“tv”
100px
100px

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;
}

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

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

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;
}

Html - Aula 4

Mais conteúdo relacionado

Mais procurados (7)

Destaque (20)

Semelhante a Html - Aula 4 (20)

Mais de Eduardo Mendes (20)

Último (20)

Html - Aula 4