Criando um Site Passo a Passo: Parte 9

Olá, pessoal.

Este é nosso penúltimo artigo da série Criando um Site Passo-a-Passo e, finalmente, veremos como ficará o nosso projeto, não é verdade?!

Para continuar, iremos completar o conteúdo central do website da CarlosHPS Vídeo-Locadora.

Pré-Requisitos

Criando Site Passo a Passo – Parte 09 – Arquivos

Download dos arquivos com o texto do site e das imagens dos filmes do tutorial Criando Site Passo a Passo – Parte 09

Download das ImagensLogin Required

1 – Inserindo Imagens e Conteúdos da Seção “.lancamento”

Primeiro, devemos criar uma classe específica para as imagens que representarão cada filme desta seção. Para isso, vamos incluir o seguinte código na nossa folha de estilos:
Classe .lancamento-imagem

1
2
3
4
5
6
7
8
/*Formatação da imagem da seção LANCAMENTO
*******************************************/
.lancamento-imagem {
     background: url(../imagens/filme1.png) no-repeat bottom;
     height: 154px;
     margin-top: 10px;
     width: 126px;
}

E inserir esta nova classe na página html:

1
<div class="lancamento"></div> <!--Fim do bloco .LANCAMENTO -->

O mesmo procedimento deverá ser feito para as imagens da seção topfilme, como mostrado a seguir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*Formatação da imagem da seção LANCAMENTO
*******************************************/
.lancamento-imagem {
     background: url(../imagens/filme1.png) no-repeat bottom;
     height: 154px;
     margin-top: 10px;
     width: 126px;
}
/*Formatação da imagem da seção TOPFILME
*******************************************/
.topfilme-imagem-1, .topfilme-imagem-2 {
     height: 154px;
     margin-top: 10px;
     width: 126px;
}
.topfilme-imagem-1 {
     background: url(../imagens/filme2.png) no-repeat bottom;
}
.topfilme-imagem-2 {
     background: url(../imagens/filme3.png) no-repeat bottom;
}

E no html, ficará:

1
2
3
4
<div class="lancamento">
     <div class="topfilme"></div>     <!--Fim do 1º bloco .topofilme -->
     <div class="topfilme"></div>     <!--Fim do 2º bloco .topofilme -->
</div> <!--Fim do bloco .lancamento -->

O resultado até aqui deverá ser este:

Fig. 01: Imagens dos filmes

Fig. 01: Imagens dos filmes

1.1 – Títulos das seções

Vamos trabalhar agora os títulos dos filmes e, para isso, complementar o código css com o seguinte script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*Formatação bloco LANCAMENTO
************************************/
.lancamento {
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 646px;
}
.lancamento-titulo {
     color: #333333;
     clear: both;
     float: left;
     font: 20px "Trebuchet MS", Calibri, Verdana, Arial;
     margin-left: 120px;
     width: 300px;
}

Já na página html, teremos:

1
2
3
4
5
6
<div class="lancamento">
     <div class="lancamento-imagem">
          <span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
     </div>   <!--Fim do bloco .lancamento -->
     <div class="topfilme"></div>     <!--Fim do 1º bloco .topfilme -->
     <div class="topfilme"></div>     <!--Fim do 2º bloco .topfilme -->

Como nas imagens, seguindo o mesmo procedimento acima, teremos o seguinte resultado:

Fig.02: Títulos da seção #lancamento

Fig.02: Títulos da seção #lancamento

 

1.2 – Conteúdos dos filmes

Bom, pessoal, agora vamos inserir os códigos abaixo (css e html) para podermos configurar os devidos conteúdos das seções.

Código css:

1
2
3
4
5
6
7
8
9
10
.lancamento-conteudo {
     color: #404040;
     clear: both;
     float: left;
     font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
     height: 115px;
     margin-left: 120px;
     margin-top: 5px;
     width: 420px;
}

Código html:

1
2
3
4
5
6
7
8
9
10
11
<div class="lancamento">
          <div class="lancamento-imagem">
               <span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
               <span class="lancamento-conteudo">
                    Após o sensacional "Batman Begins", o Homem-Morcego retorna nessa sequência
                    intitulada "The Dark Knight". Vale lembrar que nos quadrinhos, "O Cavaleiro das
                    Trevas" (tradução do título original do novo longa) é o nome da minissérie mais
                    cultuada do personagem e um dos melhores gibis de todos os tempos.
               </span>
           </div>
      </div> <!--Fim do bloco #lancamento -->

Este é o resultado:

Fig. 03: Conteúdo do filme

Fig. 03: Conteúdo do filme

Com os códigos abaixo, completaremos esta seção:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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="lancamento">
      <div class="lancamento-imagem">
      <span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
      <span class="lancamento-conteudo">
      Após o sensacional "Batman Begins", o Homem-Morcego retorna nessa seqüência intitulada "The Dark Knight".
       Vale lembrar que nos quadrinhos, “O Cavaleiro das Trevas” (tradução do título original do novo longa) é o
       nome da minissérie mais cultuada do personagem e um dos melhores gibis de todos os tempos.
      </span>
      </div>
      </div>
      <!--Fim do bloco #LANCAMENTO -->
      <!--Início do 1º bloco #TOPFILME -->
      <div class="topfilme">
      <div class="topfilme-imagem-1">
      <span class="topfilme-titulo">O Incrível Hulk</span>
      <span class="topfilme-conteudo">
      O cientista Bruce Banner busca desesperadamente uma cura para a radiação gama que envenenou suas células e
       que liberta uma desenfreada força dentro dele: o Incrível Hulk. Ele está longe da mulher que ama, dra.
       Elizabeth “Betty” Ross  e vive como um fugitivo para evitar a perseguição obsessiva de seu inimigo, General
       Thaddeus “Thunderbolt” Ross.
      </span>
      </div>
      </div>
      <!--Fim do 1º bloco #TOPFILME -->
      <!--Início do 2º bloco #TOPFILME -->
      <div class="topfilme">
      <div class="topfilme-imagem-2">
      <span class="topfilme-titulo">Sex and the City - O Filme</span>
      <span class="topfilme-conteudo">
      Quando se trata da tela do cinema, maior definitivamente é sinônimo    de melhor! “Sex and the City - O Filme”
       promete responder a todas as dúvidas que ficaram no ar: será que Carrie e Big vão finalmente se casar?
       Samantha vai conseguir se satisfazer com um homem apenas? Charlotte vai engravidar? E quanto a Miranda e
       Steve, viverão felizes para sempre?
      </span>
      </div>
      </div>
      <!--Fim do 2º bloco #TOPFILME -->
    </div>
    <!--Fim do bloco #FILMES -->
    <!--Início da Barra Lateral -->
    <div class="barra"> Barra Lateral </div>
    <!--Fim da Barra Lateral -->
  </div>
  <!--Fim do bloco #CONTEUDO -->
  <!--Início do bloco #RODAPE -->
  <div id="rodape"> Rodapé do site </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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/*
Nome do Layout: CarlosHPS Vídeo-Locadora
Descriçăo: Código desenvolvido para o layout do site fictício CarlosHPS Vídeo-Locadora
Versăo: 1.5
Criado em: 27/06/2008 | Caldas Novas – Goiás
Atualizado em: 26/12/2010
Autor: CarlosHPS Webdesigner
*/
/*Formataçăo básica do layout
 ****************************/
body {
     background-color:#252525;
     color: #666666;
     font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
     margin:0px;
     padding:0px;
}
/*Formataçăo bloco GERAL
 ****************************/
#geral {
     background-color:#009900;
     height: 100%;
     margin: 0px auto;
     position: relative;
     width: 950px;
}
/*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 {
     background: url(../imagens/logotipo.png) no-repeat top;
     clear: both;
     float: left;
     height:127px;
     left: 2px;
     margin-top: -90px;
     position: absolute;
     top: 85px;
     width:253px;
}
/*Formataçăo bloco CONTEUDO
 ****************************/
#conteudo {
     background: #FFFFFF;
}
/*Formataçao bloco BARRA
****************************/
.barra {
     background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
     float: right;
     height: 525px;
     width: 304px;
}
/*Formataçao bloco FILMES
****************************/
.filmes {
     background: #FFFFFF;
     float: left;
     height: 525px;
     width: 646px;
}
/*Formatação bloco LANCAMENTO
************************************/
.lancamento {
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 646px;
}
.lancamento-titulo {
     color: #333333;
     clear: both;
     float: left;
     font: 20px "Trebuchet MS", Calibri, Verdana, Arial;
     margin-left: 120px;
     width: 300px;
}
.lancamento-conteudo {
     color: #404040;
     clear: both;
     float: left;
     font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
     height: 115px;
     margin-left: 120px;
     margin-top: 5px;
     width: 420px;
}
/*Formatação da imagem da seção LANCAMENTO
*******************************************/
.lancamento-imagem {
     background: url(../imagens/filme1.png) no-repeat bottom;
     height: 154px;
     margin-top: 10px;
     width: 126px;
}
/*Formatação da imagem da seção TOPFILME
*******************************************/
.topfilme {
     background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
     float: left;
     height: 163px;
     margin: 5px;
     width: 646px;
}
.topfilme-titulo {
     clear: both;
     color: #333333;
     font: 20px "Trebuchet MS", Calibri, Verdana, Arial;
     float: left;
     margin-left: 120px;
     width: 300px;
}
.topfilme-conteudo {
     clear: both;
     color: #404040;
     font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
     float: left;
     height: 115px;
     margin-left: 120px;
     margin-top: 5px;
     width: 420px;
}
.topfilme-imagem-1, .topfilme-imagem-2 {
     height: 154px;
     margin-top: 10px;
     width: 126px;
}
.topfilme-imagem-1 {
     background: url(../imagens/filme2.png) no-repeat bottom;
     height: 154px;
     margin-top: 10px;
     width: 126px;
}
.topfilme-imagem-2 {
     background: url(../imagens/filme3.png) no-repeat bottom;
}
/*Formataçăo bloco RODAPE
 ****************************/
#rodape {
     background: #CC0000;
     clear: both;
     float: left;
     width: 950px;
}

Download do Arquivo Final

Na próxima matéria, concluiremos o nosso projeto, Criando um Site Passo a Passo: Parte FINAL. E, até lá, faça o download dos arquivos gerados até aqui.

Criando Site Passo a Passo – Parte 09 – Site Modelo

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

CarlosHPS Webdesigner 8)

Anúncios

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