Criando um Site Passo a Passo: Parte 8

Olá, pessoal.

Em prosseguimento à série “Criando um Site Passo a Passo”, vamos trabalhar, neste tutorial, as áreas central e barra lateral do layout da CarlosHPS Vídeo-Locadora, no que se diz respeito às sua locações e imagens de fundo.

Pré-Requisitos

Criando Site Passo a Passo – Parte 08 – Imagens de Fundo

Download das imagens de fundo para o tutorial Criando Site Passo a Passo – Parte 08

Download das ImagensLogin Required

 1 – Criando as seções .filmes e .barra

A classe .filmes será responsável pela exibição do conteúdo referente aos lançamentos de filmes e aos mais locados pela locadora. Distribuiremos nela, além das imagens de fundo, os seus respectivos conteúdos.

O mesmo acontecerá com a classe .barra, onde inseriremos um mini formulário de newsletter e as categorias dos filmes da locadora.

Primeiramente, abrindo nosso arquivo index.html, vamos inserir uma ID dentro do bloco #conteudo:

1
2
3
4
<div id="conteudo">
     <div class="filmes">Seção Filmes</div>     <!--Fim do bloco .filmes -->
     <div class="barra">Barra Lateral</div>     <!--Fim da Barra .barra -->
</div> <!-- Fim do bloco #CONTEUDO -->

2 – Divisão da área central do site

Seções definidas, agora vamos dar uma incrementada no nosso código css. Por enquanto vamos somente delimitar suas dimensões e cores para que possamos distinguir bem a locação de cada setor, sem esquecer, de mexer um pouco no rodapé pra ficar tudo nos conformes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*Formatação bloco BARRA
****************************/
.barra {
     float: right;
     height: 525px;
     width: 320px;
}
/*Formatação bloco FILMES
****************************/
.filmes {
     background: #FFFFFF;
     float: left;
     height: 525px;
     width: 630px;
}

Feito as alterações acima, teremos a seguinte formatação no navegador:

Fig. 01: Divisão da área central

Fig. 01: Divisão da área central

3 – Criação das classes .lancamento e .topfilme

De acordo com o layout da locadora, na classe FILMES, conterá outras duas classes: LANCAMENTO, que exibirá as informações sobre algum lançamento de filme e TOPFILME, onde será mostrado os filmes mais alugados pela CarlosHPS Vídeo-Locadora.

Classe .lancamento

A classe .lancamento faz parte da DIV filmes, portanto, o código ficará assim:

1
2
3
4
5
6
<div id="conteudo">
     <div class="filmes">
          <div class="lancamento">LANÇAMENTO</div><!--Fim do bloco .lancamento -->
     </div>   <!--Fim do bloco #FILMES -->
     <div class="barra">Barra Lateral</div>     <!--Fim da Barra .barra -->
</div> <!-- Fim do bloco #CONTEUDO -->

Já no CSS, vamos colocar uma altura de 525px nas classes FILME e BARRA, para melhor visualizar a classe LANCAMENTO.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*Formatação bloco BARRA
****************************/
.barra {
     background: #eeeeee;
     float: right;
     height: 525px;
     width: 330px;
}
/*Formatação bloco FILMES
****************************/
.filmes {
     background: #CCFF00;
     float: left;
     height: 525px;
     width: 620px;
}
/*Formatação bloco LANCAMENTO
****************************/
.lancamento {
     background: #0066CC;
     float: left;
     height: 163px;
     margin: 5px;
     width: 604px;
}

Feito isso, teremos a seguinte formatação no navegador:

Fig. 02: Divisão do layout em classes

Fig. 02: Divisão do layout em classes

Classe .topfilme

Logo abaixo da seção de lançamento existem mais duas áreas destinadas aos 2 filmes mais locados. Denominaremos como TOPFILME e seu respectivo código ficará assim:

1
2
3
4
5
6
7
8
<div id="conteudo">
     <div class="filmes">
          <div class="lancamento">LANÇAMENTO</div>   <!--Fim do bloco .lancamento -->
          <div class="topfilme">FILME 01</div<!--Fim do 1º bloco .topfilme -->
          <div class="topfilme">FILME 02</div<!--Fim do 2º bloco .topfilme -->
     </div> <!--Fim do bloco #FILMES -->
     <div class="barra">Barra Lateral</div>     <!--Fim da Barra .barra -->
</div>   <!-- Fim do bloco #conteudo -->

E no CSS:

1
2
3
4
5
6
7
8
9
/*Formatação bloco TOPFILME
****************************/
.topfilme {
     background: #FFCC00;
     float: left;
     height: 163px;
     margin: 5px;
     width: 604px;
}

Vejamos o resultado até aqui:

Fig. 03: Inserção da classe topfilme

Fig. 03: Inserção da classe topfilme

4 – Imagens de fundo

Bem, pessoal, a parte menos fácil, digamos assim, foi concluída.

Agora, vamos inserir as imagens de fundo para vermos como nosso layout ficará.

Vejamos nosso código css como ficou, incluindo os ajustes das cores de fundo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*Formatação bloco FILMES
****************************/
.filmes {
     background: #FFFFFF;
     float: left;
     height: 525px;
     width: 620px;
}
/*Formatação bloco LANCAMENTO
****************************/
.lancamento {
     background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 604px;
}
/*Formatação bloco TOPFILME
****************************/
.topfilme {
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 604px;
}

Observemos o resultado:

Fig. 04: Imagens de fundo

Fig. 04: Imagens de fundo

Utilizando a mesma linha, para inserirmos as imagens de fundo da barra lateral, precisamos incluir os seguintes códigos no nosso arquivo css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*Formatação bloco BARRA
****************************/
.barra {
     background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
     float: right;
     height: 525px;
     width: 304px;
}
/*Formatação bloco FILMES
****************************/
.filmes {
     background: #FFFFFF;
     float: left;
     height: 525px;
     width: 646px;
}
/*Formatação bloco LANCAMENTO
****************************/
.lancamento {
     background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 646px;
}
/*Formatação bloco TOPFILME
****************************/
.topfilme {
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 646px;
}

O resultado obtido será:

Fig. 05: Fundo da barra lateral

Fig. 05: Fundo da barra lateral

Bom, terminamos mais uma etapa do processo de criação de um site.

Abaixo segue os códigos criados até aqui.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>CarlosHPS Vídeo-Locadora</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Início do bloco #GERAL -->
<div id="geral">
  <!--Início do bloco #TOPO -->
  <div id="topo">
    <!--LOGOTIPO -->
    <div id="logotipo"></div>
  </div>
  <!--Fim do bloco #TOPO -->
  <!--Início do #MENU -->
  <ul id="menu">
     <li><a href="#" title="Página Inicial CarlosHPS Locadora">Home</a></li>
     <li><a href="#" title="Sobre a locadora">A Locadora</a></li>
     <li><a href="#" title="Catálogo de filmes">Catálogo</a></li>
     <li><a href="#" title="Participe das promoções">Promoções</a></li>
     <li><a href="#" title="Cadastre-se no site">Cadastro</a></li>
     <li><a href="#" title="Entre em contato conosco">Fale Conosco</a></li>
  </ul>
  <!--Fim do #MENU -->
  <!--Início do bloco #CONTEUDO -->
  <div id="conteudo">
    <!--Início do bloco #FILMES -->
    <div class="filmes">
      <!--Início do bloco #LANCAMENTO -->
      <div class="lancamentos">
          <h2>LANÇAMENTO</h2>
      </div>
      <!--Fim do bloco #LANCAMENTO -->
      <!--Início do 1º bloco #TOPFILME -->
      <div class="topfilme">
        <h2>FILME 01</h2>
      </div>
      <!--Fim do 1º bloco #TOPFILME -->
      <!--Início do 2º bloco #TOPFILME -->
      <div class="topfilme">
        <h2>FILME 02</h2>
      </div>
      <!--Fim do 2º bloco #TOPFILME -->
    </div>
    <!--Fim do bloco #FILMES -->
    <!--Início da Barra Lateral -->
    <div class="barra">
      <h2>Barra Lateral</h2>
    </div>
    <!--Fim da Barra Lateral -->
  </div>
  <!--Fim do bloco #CONTEUDO -->
  <!--Início do bloco #RODAPE -->
  <div id="rodape">
    <h2>Rodapé do site</h2>
  </div>
  <!--Fim do bloco #RODAPE -->
</div>
<!--Fim do bloco #GERAL -->
</body>
</html>

estilo.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/************************************************************************************* 
Nome do Layout: CarlosHPS Vídeo-Locadora
Descrição: Código desenvolvido para o layout do site fctício CarlosHPS Vídeo-Locadora
Versão: 1.7
Criado em: 27/06/2008 | Caldas Novas – Goiás
Atualizado em: 27/09/2012
Autor: CarlosHPS Webdesigner
*************************************************************************************/
/*Formatação básica do layout
 ****************************/
body {
     margin:0px;
     padding:0px;
     background-color:#252525;
     color: #666666;
     font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
/*Formatação bloco GERAL
 ****************************/
#geral {
     background-color:#009900;
     width: 950px;
     margin: 0px auto;
     position: relative;
     height: 100%;
}
/*Formatação bloco TOPO
 ****************************/
#topo {
     background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
     height: 100px;
     position: relative;
}
/*Formatação do MENU
 ****************************/
ul#menu {
     margin:-65px 0px 0px;
     padding:0px;
     position:absolute;
     right:0px;
}
ul#menu li {
     display:inline;
     margin-right: 20px;
}
ul#menu li a {
     text-decoration:none;
     color:#F4F4F4;
     font: 14px Calibri, Verdana, Arial;
}
ul#menu li a.active, ul#menu li a:hover {
     border-top: 2px dotted #666666;
     color: #999999;
}
/*Logotipo
 ****************************/
#logotipo {
     width:253px;
     height:127px;
     background: url(../imagens/logotipo.png) no-repeat top;
     clear: both;
     float: left;
     margin-top: -90px;
     position: absolute;
     left: 2px;
     top: 102px;
}
/*Formatação bloco CONTEUDO
 ****************************/
#conteudo {
     background: #FFFFFF;
/*Formatação bloco BARRA
 ****************************/
.barra{
     color:#FFF;
     float: right;
     width: 304px;
     height: 525px;
     background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
}
/*Formatação bloco FILMES
 ****************************/
.filmes{
     float: left;
     width: 646px;
     background: #FFFFFF;
     height: 525px;
     }
/*Formatação bloco LANCAMENTO
 ****************************/
.lancamento{
     float: left;
     width: 646px;
     background: #FFFFFF url(../imagens/bg_lancamento.jpg) no-repeat;
     height: 163px;
     margin: 5px;
}
/*Formatação bloco TOPFILME
 ****************************/
.topfilme{
     float: left;
     width: 646px;
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     height: 163px;
     margin: 5px;
}
/*Formatação bloco RODAPE
 ****************************/
#rodape {
     color:#FFF;
    clear: both;
     float: left;
     width: 950px;
     background: #A94A4A;
}

Na próxima matéria, Criando um Site Passo a Passo: Parte 09, complementaremos o conteúdo. E, até lá, faça o download dos arquivos gerados até aqui.

Criando Site Passo a Passo – Parte 08 – Site Modelo

Download dos arquivos-fonte do tutorial Criando Site Passo a Passo – Parte 08

Até lá.

CarlosHPS Webdesigner 8)

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s