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

Para quem está “chegando” agora, recomendo que veja, pelo menos as outras partes desta série:

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:

 <!--Início do bloco #CONTEUDO -->
<div id="CONTEUDO">
    <!--Início do bloco #FILMES -->
<div class="FILMES">Seção Filmes</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 -->

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.

/*Formatação bloco BARRA
 ****************************/
.BARRA{
	float: right;
	width: 320px;
	height: 525px;
	}
/*Formatação bloco FILMES
 ****************************/
.FILMES{
	float: left;
	width: 630px;
	background: #FFFFFF;
	height: 525px;
	}

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

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.

marcador Classe .LANCAMENTO

A classe LANCAMENTO faz parte da DIV FILMES, portanto, o código ficará assim:

    <!--Início do bloco #FILMES -->
<div class="FILMES">
      <!--Início do bloco #LANCAMENTO -->
<div class="LANCAMENTO"> LANÇAMENTO</div>
<!--Fim do bloco #LANCAMENTO --></div>
<!--Fim do bloco #FILMES -->

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

/*Formatação bloco BARRA
 ****************************/
.BARRA{
float: right;
width: 330px;
height: 525px;
background: #eeeeee;
}
/*Formatação bloco FILMES
 ****************************/
.FILMES{
	float: left;
	width: 620px;
	background: #CCFF00;
	height: 525px;
}
/*Formatação bloco LANCAMENTO
 ****************************/
.LANCAMENTO{
	float: left;
	width: 604px;
	background: #0066CC;
	height: 163px;
	margin: 5px;
}

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

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

    <!--Início do bloco #FILMES -->
<div class="FILMES">
      <!--Início do bloco #LANCAMENTO -->
<div class="LANCAMENTO"> LANÇAMENTO</div>
<!--Fim do bloco #LANCAMENTO -->
      <!--Início do 1º bloco #TOPFILME -->
<div class="TOPFILME"> FILME 01</div>
<!--Fim do 1º bloco #TOPFILME -->
      <!--Início do 2º bloco #TOPFILME -->
<div class="TOPFILME"> FILME 02</div>
<!--Fim do 2º bloco #TOPFILME --></div>
<!--Fim do bloco #FILMES -->

E no CSS:

/*Formatação bloco TOPFILME
 ****************************/
.TOPFILME{
	float: left;
	width: 604px;
	background: #FFCC00;
	height: 163px;
	margin: 5px;
}

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á. Abaixo segue arquivo para download das imagens.

Download

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

/*Formatação bloco FILMES
 ****************************/
.FILMES{
	float: left;
	width: 620px;
	background: #FFFFFF;
	height: 525px;
}
/*Formatação bloco LANCAMENTO
 ****************************/
.LANCAMENTO{
	float: left;
	width: 604px;
	background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;
	height: 163px;
	margin: 5px;
}
/*Formatação bloco TOPFILME
 ****************************/
.TOPFILME{
	float: left;
	width: 604px;
	background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
	height: 163px;
	margin: 5px;
}

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:

/*Formatação bloco BARRA
 ****************************/
.BARRA{
	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;
}

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
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--Início do bloco #GERAL -->
<div id="GERAL">
  <!--Início do bloco #TOPO -->
<div id="TOPO">
    <!--LOGOTIPO --></div>
<!--Fim do bloco #TOPO -->
  <!--Início do #MENU -->
<ul id="MENU">
	<li><a>Home</a></li>
	<li><a>A Locadora</a></li>
	<li><a>Catálogo</a></li>
	<li><a>Promoções</a></li>
	<li><a>Cadastro</a></li>
	<li><a>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"> LANÇAMENTO</div>
<!--Fim do bloco #LANCAMENTO -->
      <!--Início do 1º bloco #TOPFILME -->
<div class="TOPFILME"> FILME 01</div>
<!--Fim do 1º bloco #TOPFILME -->
      <!--Início do 2º bloco #TOPFILME -->
<div class="TOPFILME"> FILME 02</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 -->

estilo.css
/*
Nome do Layout: CarlosHPS Vídeo-Locadora
URL do Layout: http://www.carloshps.com.br/blog/
Descrição: Código desenvolvido para o layout do site fctício CarlosHPS Vídeo-Locadora
Versão: 1.0
Atualizado em: 17/07/2008 | Caldas Novas - Goiás
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 RODAPE
 ****************************/
#RODAPE {
    clear: both;
	float: left;
	width: 950px;
	background: #CC0000;
}
/*Formatação bloco BARRA
 ****************************/
.BARRA{
	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;
}

Na próxima matéria, complementaremos o conteúdo.

Mas antes, responda à pergunta:

Voce acha que devo criar um curso baseado nesta série?

  • Sim (98%)
  • Nao (2%)
Loading ... Loading ...

Até lá.

CarlosHPS Webdesigner :cool:

Blog Widget by LinkWithin

Recomendo

Projetando Websites com Usabilidade
Anatomia do Design
Flash CS4: O Manual que Faltava
Web Design para Não-Designers
Sistemas de Comércio Eletrônico

Marcadores: , , , , , , ,