Você está na página 1de 57

Ol, pessoal.

Continuando a srie Criando um Site Passo-a-Passo, aps termos visto


alguns conceitos importantes, vamos colocar a mo na massa a partir de
agora.
Simularemos aqui, a criao de um site para uma locadora de vdeo, ok? Ento
vamos l.

1 BRIEFING
Nome da Empresa

CarlosHPS Vdeo-Locadora

Ramo de Atividade

Vdeo Locadora

Pontos Fortes:

Atendimento

Promoes constantes

Entrega em domiclio

Catlogo virtual

Objetivo:

Disponibilizar o acervo de DVDs da CarlosHPS Vdeo-Locadora aos seus


clientes e usurios em geral da Internet.

Este seria um breve resumo do briefing da empresa. De posse dessas


informaes, faz-se uma pesquisa de no mnimo 10 sites concorrentes ou no,
do mesmo ramo de atividade para se ter uma noo do que j se aplica na
web. Sem esquecer de tambm solicitarmos ao cliente, peas publicitrias,
manual de identidade visual e tudo o que for possvel para a complementao
do nosso conhecimento da empresa.

2 MAPA DE SITE (Sitemap)


Como tambm foi visto na 3 parte desta srie (Criando um Site Passo-aPasso: Parte 3), aps esta pesquisa, criamos um esquema que ser
manuseada e compreendida pelo cliente e pela equipe envolvida na
implementao do projeto.

Um mapa de site a representao grfica da estrutura de um website, do


ponto de vista da distribuio do contedo atravs de pginas e do caminho
mais simples (links) a ser percorrido pelo usurio para chegar pgina
desejada.
Vejamos como ficou o mapa da CarlosHPS Vdeo-Locadora:

Fig. 01: Mapa do site da CarlosHPS Vdeo-Locadora

3 WIREFRAME
Digamos que seja o primo pobre do layoutrsrs
O wireframe um esqueleto; uma estrutura simples que nos auxilia na
produo do site, tornando o processo mais gil, padronizada e eficiente. Seu
maior objetivo determinar onde cada contedo se encaixar no site, levando
em considerao o grau de importncia com relao aos demais objetos que
comporo o layout como um todo.
Complicado?
N nada!
Veja o exemplo do wireframe bsico do nosso projeto:

Fig. 02: Wireframe bsico da CarlosHPS Vdeo-Locadora


Lembrando que uma estrutura bsica. Caso haja necessidade, podemos
detalhar mais. Fica a critrio da situao.
isso a, pessoal.
O site a ser montado ter este layout:

Fig. 03: Layout do site da CarlosHPS Vdeo-Locadora


Quem desejar criar seu prprio mapa de site e wireframe e quiser me enviar
pra eu dar uma olhadinha, fiquem vontade.
Prximo artigo (Criando um Site Passo a Passo: Parte 6), veremos sobre o
fatiamento do layout da CarlosHPS Vdeo-Locadora e como montar sua
estrutura bsica em HTML e CSS.
At l.
Na matria anterior (Criando um Site Passo a Passo: Parte 5), vimos como
montamos o mapa do site e a estrutura (wireframe) bsica do layout da
CarlosHPS Vdeo-Locadora. Agora, veremos como iniciar o desenvolvimento da
1 pgina do site utilizando o Dreamweaver e alguns conceitos de Tableless
(XHTML e CSS).

1 Organizao
Estou utilizando a verso CS3 do Dreamweaver para desenvolver o site,
portanto essencial para a organizao do projeto, que definamos a criao
do site no aplicativo. Contudo, voc poder usar qualquer outro editor HTML
ou at mesmo um editor de textos como o Bloco de Notas. O importante
mesmo criar um diretrio especfico para os arquivos do projeto,
juntamente com as pastas imagens e scripts.

Fig. 01: Criao do site no Dreamweaver

2 Estudando a Estrutura do Layout


Ao observarmos o layout, podemos dividi-lo em blocos horizontais de modo a
facilitar a distribuio e organizao do nosso cdigo. Vejamos a descrio
breve de cada setor:

Fig. 02: Partes do Layout Blocos DIV


#geral - Bloco onde todo o contedo ser criado.
#topo - Bloco onde inseriremos o menu, logotipo e a chamada principal do
site.
#conteudo - Bloco onde colocaremos o contedo do site juntamente com a
barra lateral direita.
#rodape - Bloco da base do site.

3 Criando o Cdigo Bsico


No Dreamweaver (ou outro editor html/editor de texto), vamos criar a
estrutura bsica de qualquer pgina HTML:
?
1
2
3

<html>
<head>
<title></title>
</head>

4
5
6
7
8
9
10
11
12
13
14
15

<body>
CONTEDO
</body>
</html>

Dando o ttulo ao site e inserindo as principais tags <DIV> que representam os


blocos de contedo, nosso cdigo ficar assim:
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="contenttype">
<title></title>
</meta>
</head>
<body>
<div id="geral">
<div id="topo">
<h2>Topo do Site</h2>
</div> <!-- Fim do bloco #TOPO -->
<div id"conteudo">
<h2>Contedo do Site</h2>
</div> <!-- Fim do bloco #CONTEUDO -->
<div id="rodape">
<h2>Rodap do site</h2>
</div> <!-- Fim do bloco #RODAPE -->
</div> <!-- Fim do bloco #GERAL -->
</body>
</html>

1
2
2

4 Inserindo o CSS
Como estamos iniciando ainda, para ir vendo os resultados assim que
construmos o site, vamos criar a nossa folha de estilos paralelamente. O
bsico est a embaixo. Apenas criei o essencial para facilitar a visualizao
dos blocos.
?
1/
2 *********************************************************************
****************
3 Nome do Layout: CarlosHPS Vdeo-Locadora
4 URL do Layout: http://www.carloshps.com.br/blog/
5 Descrio: Cdigo desenvolvido para o layout do site fctcio
6 CarlosHPS Vdeo-Locadora
Verso: 1.7
7 Criado em: 27/06/2008 | Caldas Novas Gois
8 Atualizado em: 05/08/2012
9 Autor: CarlosHPS Webdesigner
1 *********************************************************************
****************/
0 /*Formatao bsica do layout
1 ****************************/
1 body {
1 background-color:#252525;
#fff;
2 color:
font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
1 margin:0px;
3 padding:0px;
1}
4 /*Formatao bloco GERAL
****************************/
1 #geral {
5 background-color: #81A49A;
1}
6 /*Formatao bloco TOPO
****************************/
1 #topo {
7 background-color: #7CA9B6;
1}
8 /*Formatao bloco CONTEUDO
****************************/
1 #conteudo {
9 background: #FF9900;
2}
0 /*Formatao bloco RODAPE
2 ****************************/
#rodape {
1 background: #A94A4A;
2}
2
2

3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
Agora, vamos vincular este arquivo (salvo como estilo.css) pgina criada
anteriormente (salva como index.html).
?
1<title>CarlosHPS Vdeo-Locadora</title>
2<link href="scripts/estilo.css" rel="stylesheet" type="text/css">
Vejamos o resultado no navegador:

Fig.03: Exibio nos navegadores F.Fox 3.0 e IE 7.0


Uma observao conceitual: ID um identificador nico de elemento HTML,
isto , ele no pode ser utilizado por nenhum outro elemento. As classes
seguem o mesmo propsito das IDs, no podem conter caracteres especiais,
espaos e cedilhas.

Criando Site Passo a Passo - Parte 06 - Site Modelo


Download dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 06
Download do Arquivo-FonteLogin Required

Bom, pessoal, disponibilizei o arquivo gerado neste artigo e no prximo


tutorial, Criando um Site Passo a Passo: Parte 7, vamos inserir e formatar o
menu alm de iniciarmos a insero das imagens.
At l.
Ol, pessoal.

Em prosseguimento srie Criando um Site Passo a Passo, desenvolveremos


neste tutorial a barra de navegao, juntamente com seus itens e inseriremos
algumas imagens que comporo o layout da CarlosHPS Vdeo-Locadora.

Pr-Requisitos
Para quem est chegando agora, recomendo que veja, pelo menos as outras
partes desta srie:

Criando um Site Passo a Passo: Parte 6

Criando um Site Passo a Passo: Parte 5

1 Ajustes Gerais no CSS


Na matria anterior, criamos um arquivo css para poder facilitar a visualizao
dos blocos de contedo que compem o nosso layout. Portanto, vamos agora,
fazer uns pequenos ajustes quanto s larguras e alturas das respectivas reas,
e outras coisinhas mais
Bloco #geral
Esta seo a responsvel pela largura do nosso layout e tambm, do
alinhamento geral do contedo. Portanto, inserindo novos atributos ao
cdigo, ele dever ficar da seguinte maneira:
?
1
2
3
4
5
6
7
8

/*Formatao bloco GERAL


****************************/
#geral {
background-color:#009900;
width: 950px;
margin: 0px auto;
position: relative;
}

Bloco #topo
Nesta seo conter o logotipo do site e a barra de navegao. Este bloco ter
uma altura de 100 px e uma imagem de fundo abaixo.

Vejamos a seguir:

?
1
/*Formatao bloco TOPO
2 ****************************/
3 #topo{
4 background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
5 height: 100px;
position: relative;
6}
7
O resultado at agora este:

Fig. 01: Topo alinhado e com imagem de fundo.


Div #menu
Chegou a hora de criarmos a barra de navegao e os itens do menu.
bastante simples, obviamente, pra quem conhece um pouco de html. Ento,
vamos criar uma <div> dentro da tag <ul>, na pgina index.html e inserirmos
uma lista como mostra o cdigo abaixo:
?
1
2
3
4
5
6
7
8
9
1
0

</div> <!-- Fim do bloco #TOPO -->


<ul id="menu">
<li><a href="#" title="Pgina Inicial CarlosHPS
Locadora">Home</a></li>
<li><a href="#" title="Sobre a locadora">A Locadora</a></li>
<li><a href="#" title="Catlogo de filmes">Catlogo</a></li>
<li><a href="#" title="Participe das promoes">Promoes</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 -->
<div id"conteudo">

Sendo assim, teremos a seguinte exibio no navegador:

Fig. 02: Menu em lista exibido no navegador.

2 Formatao do Menu
Agora que demos uma geral nos cdigos, vamos melhorar a barra de
navegao. Para isso, basta inserirmos o cdigo abaixo na folha de estilos
estilo.css.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*Formatao do MENU
****************************/
ul#menu {
margin:-65px 0px 0px;
padding:0px;
position:absolute;
}
ul#menu li {
display:inline;
margin-right: 20px;
}
ul#menu li a {
color:#F4F4F4;
font: 14px Calibri, Verdana, Arial;
text-decoration:none;
}
ul#menu li a.active, ul#menu li a:hover {
border-top: 2px dotted #666666;
color: #999999;
}

A grosso modo, podemos identificar e esclarecer o cdigo da seguinte


maneira: ul#menu Responsvel pelo posicionamento do itens do menu
ul#menu li - Coloca os itens do menu que se encontram no formato de lista,

na horizontal ul#menu li a - Formatao para os links do menu Sendo assim,


teremos nossa barra de navegao com a seguinte formatao:

Fig. 03: Barra de menu formatada

3 Inserindo logotipo
Pra concluirmos esta parte, vamos inserir o logotipo da vdeo-locadora:

Primeiramente, vamos colocar a div responsvel pela imagem,


adequadamente na pgina index.html:
?
1
2
3
4

<div id="topo">
<div id="logotipo">
</div> <!--Fim do bloco #LOGOTIPO -->
</div> <!--Fim do bloco #TOPO -->

E em seguida, ajustar o cdigo css:


?
1 /*Logotipo
2 ****************************/
#logotipo {
3 background: url(../imagens/logotipo.png) no-repeat top;
4 clear: both;
5 float: left;
6 height:127px;
left: 2px;
7 margin-top: -90px;
8 position: absolute;
9 top: 102px;
10 width:253px;
}
11

12
13
Desta feita, obteremos esta configurao no navegador:

Fig. 04: Resultado final da configurao do topo.


Bom, pessoal, abaixo segue a formatao da pgina index.html e estilo.css:

index.html
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="contenttype">
<title>CarlosHPS Vdeo-Locadora</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css">
</meta>
</head>
<body>
<div id="geral">
<div id="topo">
<div id="logotipo">
</div> <!--Fim do bloco #LOGOTIPO -->
</div> <!Fim do bloco #TOPO >
<ul id="menu">
<li><a>Home</a></li>
<li><a>A Locadora</a></li>
<li><a>Catlogo</a></li>
<li><a>Promoes</a></li>
<li><a>Cadastro</a></li>
<li><a>Fale Conosco</a></li>
</ul> <!--Fim do #MENU -->
<div id"conteudo">
Contedo do Site
</div> <!Fim do bloco #CONTEUDO >
<div id="rodape">
Rodap do site
</div> <!Fim do bloco #RODAPE >
</div> <!Fim do bloco #GERAL >
</body>
</html>

9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2

estilo.css
?
1/
2 *********************************************************************
****************
3 Nome do Layout: CarlosHPS Vdeo-Locadora
4 URL do Layout: http://www.carloshps.com.br/blog/
5 Descrio: Cdigo desenvolvido para o layout do site fctcio
6 CarlosHPS Vdeo-Locadora
Verso: 1.7
7 Criado em: 27/06/2008 | Caldas Novas Gois
8 Atualizado em: 05/08/2012
9 Autor: CarlosHPS Webdesigner
1 *********************************************************************
****************/
0 /*Formatao bsica do layout
1 ****************************/
1 body {
1 margin:0px;
2 padding:0px;
background-color:#252525;
1 color: #666666;
3 font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
1}

4 /*Formatao bloco GERAL


1 ****************************/
#geral {
5 background-color:#009900;
1 width: 950px;
6 margin: 0px auto;
1 position: relative;
}
7 /*Formatao bloco TOPO
1 ****************************/
8 #topo {
1 background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
height: 100px;
9 position: relative;
2}
0 /*Formatao do MENU
2 ****************************/
{
1 ul#menu
margin:-65px 0px 0px;
2 padding:0px;
2 position:absolute;
2 right:0px;
3}
ul#menu li {
2 display:inline;
4 margin-right: 20px;
2}
5 ul#menu li a {
text-decoration:none;
2 color:#F4F4F4;
6 cursor:pointer;
2 font: 14px Calibri, Verdana, Arial;
7}
ul#menu li a.active, ul#menu li a:hover {
2 border-top: 2px dotted #666666;
8 color: #999999;
2}
9 /*Logotipo
3 ****************************/
#logotipo {
0 width:253px;
3 height:127px;
1 background: url(../imagens/logotipo.png) no-repeat top;
3 clear: both;
float: left;
2 margin-top: -90px;
3 position: absolute;
3 left: 2px;
3 top: 102px;
}
4 /*Formatao bloco CONTEUDO
3 ****************************/
5 #conteudo {
3 background: #FF9900;
6 }/*Formatao bloco RODAPE
3 ****************************/
7 #rodape {
3 background: #CC0000;
8}
3

9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6

4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7
6
7
7
7
8
7
9
Na prxima matria, Criando um Site Passo a Passo: Parte 8, inseriremos o
contedo central do site.
At l, faam o download gerados at aqui.

Criando Site Passo a Passo - Parte 07 - Site Modelo


Download dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 07
Download do Arquivo-FonteLogin Required

CarlosHPS Webdesigner 8)
Ol, pessoal.

Em prosseguimento srie Criando um Site Passo a Passo, vamos trabalhar,


neste tutorial, as reas central e barra lateral do layout da CarlosHPS VdeoLocadora, no que se diz respeito s sua locaes 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 sees .filmes e .barra


A classe .filmes ser responsvel pela exibio do contedo referente aos
lanamentos de filmes e aos mais locados pela locadora. Distribuiremos nela,
alm das imagens de fundo, os seus respectivos contedos.
O mesmo acontecer com a classe .barra, onde inseriremos um mini
formulrio de newsletter e as categorias dos filmes da locadora.
Primeiramente, abrindo nosso arquivo index.html, vamos inserir uma ID
dentro do bloco #conteudo:
?
1<div id="conteudo">
2<div class="filmes">Seo Filmes</div> <!--Fim do bloco .filmes -->
3<div class="barra">Barra Lateral</div> <!--Fim da Barra .barra -->
4</div> <!-- Fim do bloco #CONTEUDO -->

2 Diviso da rea central do site


Sees definidas, agora vamos dar uma incrementada no nosso cdigo css.
Por enquanto vamos somente delimitar suas dimenses e cores para que
possamos distinguir bem a locao de cada setor, sem esquecer, de mexer um
pouco no rodap pra ficar tudo nos conformes.
?
1
2
3
4
5
6
7
8

/*Formatao bloco BARRA


****************************/
.barra {
float: right;
height: 525px;
width: 320px;
}
/*Formatao bloco FILMES
****************************/
.filmes {

9
10
11
12
13
14
15

background: #FFFFFF;
float: left;
height: 525px;
width: 630px;
}

Feito as alteraes acima, teremos a seguinte formatao no navegador:

Fig. 01: Diviso da rea central

3 Criao das classes .lancamento e .topfilme


De acordo com o layout da locadora, na classe FILMES, conter outras duas
classes: LANCAMENTO, que exibir as informaes sobre algum lanamento
de filme e TOPFILME, onde ser mostrado os filmes mais alugados pela
CarlosHPS Vdeo-Locadora.
Classe .lancamento
A classe .lancamento faz parte da DIV filmes, portanto, o cdigo ficar assim:
?
1<div id="conteudo">
2<div class="filmes">
class="lancamento">LANAMENTO</div><!--Fim do bloco .lancamento
3<div
-->
4</div> <!--Fim do bloco #FILMES -->
5<div class="barra">Barra Lateral</div> <!--Fim da Barra .barra -->
6</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

/*Formatao bloco BARRA


****************************/
.barra {
background: #eeeeee;
float: right;

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

height: 525px;
width: 330px;
}
/*Formatao bloco FILMES
****************************/
.filmes {
background: #CCFF00;
float: left;
height: 525px;
width: 620px;
}
/*Formatao bloco LANCAMENTO
****************************/
.lancamento {
background: #0066CC;
float: left;
height: 163px;
margin: 5px;
width: 604px;
}

Feito isso, teremos a seguinte formatao no navegador:

Fig. 02: Diviso do layout em classes

Classe .topfilme
Logo abaixo da seo de lanamento existem mais duas reas destinadas aos
2 filmes mais locados. Denominaremos como TOPFILME e seu respectivo
cdigo ficar assim:
?
1<div id="conteudo">
2<div class="filmes">
3<div class="lancamento">LANAMENTO</div> <!--Fim do bloco .lancamento
4-->
<div class="topfilme">FILME 01</div> <!--Fim do 1 bloco .topfilme -->
5<div class="topfilme">FILME 02</div> <!--Fim do 2 bloco .topfilme -->
6</div> <!--Fim do bloco #FILMES -->
7<div class="barra">Barra Lateral</div> <!--Fim da Barra .barra -->
8</div> <!-- Fim do bloco #conteudo -->
E no CSS:
?
1
2
3
4
5
6
7
8
9

/*Formatao bloco TOPFILME


****************************/
.topfilme {
background: #FFCC00;
float: left;
height: 163px;
margin: 5px;
width: 604px;
}

Vejamos o resultado at aqui:

Fig. 03: Insero da classe topfilme

4 Imagens de fundo
Bem, pessoal, a parte menos fcil, digamos assim, foi concluda.
Agora, vamos inserir as imagens de fundo para vermos como nosso layout
ficar.
Vejamos nosso cdigo css como ficou, incluindo os ajustes das cores de fundo:
?
1
2
3
4
5
6
7
8
9
1
0
1

/*Formatao bloco FILMES


****************************/
.filmes {
background: #FFFFFF;
float: left;
height: 525px;
width: 620px;
}
/*Formatao bloco LANCAMENTO
****************************/
.lancamento {
background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;
float: left;
height: 163px;
margin: 5px;

1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6

width: 604px;
}
/*Formatao 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


Utilizando a mesma linha, para inserirmos as imagens de fundo da barra
lateral, precisamos incluir os seguintes cdigos no nosso arquivo css:
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1

/*Formatao bloco BARRA


****************************/
.barra {
background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
float: right;
height: 525px;
width: 304px;
}
/*Formatao bloco FILMES
****************************/
.filmes {
background: #FFFFFF;
float: left;
height: 525px;
width: 646px;
}
/*Formatao bloco LANCAMENTO
****************************/
.lancamento {
background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;
float: left;
height: 163px;

4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4

margin: 5px;
width: 646px;
}
/*Formatao 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


Bom, terminamos mais uma etapa do processo de criao de um site.
Abaixo segue os cdigos criados at aqui.

index.html
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2

<!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="contenttype">
<title>CarlosHPS Vdeo-Locadora</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Incio do bloco #GERAL -->
<div id="geral">
<!--Incio do bloco #TOPO -->
<div id="topo">
<!--LOGOTIPO -->
<div id="logotipo"></div>
</div>
<!--Fim do bloco #TOPO -->

1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7

<!--Incio do #MENU -->


<ul id="menu">
<li><a href="#" title="Pgina Inicial CarlosHPS
Locadora">Home</a></li>
<li><a href="#" title="Sobre a locadora">A Locadora</a></li>
<li><a href="#" title="Catlogo de filmes">Catlogo</a></li>
<li><a href="#" title="Participe das promoes">Promoes</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 -->
<!--Incio do bloco #CONTEUDO -->
<div id="conteudo">
<!--Incio do bloco #FILMES -->
<div class="filmes">
<!--Incio do bloco #LANCAMENTO -->
<div class="lancamentos">
<h2>LANAMENTO</h2>
</div>
<!--Fim do bloco #LANCAMENTO -->
<!--Incio do 1 bloco #TOPFILME -->
<div class="topfilme">
<h2>FILME 01</h2>
</div>
<!--Fim do 1 bloco #TOPFILME -->
<!--Incio do 2 bloco #TOPFILME -->
<div class="topfilme">
<h2>FILME 02</h2>
</div>
<!--Fim do 2 bloco #TOPFILME -->
</div>
<!--Fim do bloco #FILMES -->
<!--Incio da Barra Lateral -->
<div class="barra">
<h2>Barra Lateral</h2>
</div>
<!--Fim da Barra Lateral -->
</div>
<!--Fim do bloco #CONTEUDO -->
<!--Incio do bloco #RODAPE -->
<div id="rodape">
<h2>Rodap do site</h2>
</div>
<!--Fim do bloco #RODAPE -->
</div>
<!--Fim do bloco #GERAL -->
</body>
</html>

3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2

6
3

estilo.css
?
1 /
2 ********************************************************************
*****************
3 Nome do Layout: CarlosHPS Vdeo-Locadora
4 URL do Layout: http://www.carloshps.com.br/blog/
5 Descrio: Cdigo desenvolvido para o layout do site fctcio
6 CarlosHPS Vdeo-Locadora
Verso: 1.7
7 Criado em: 27/06/2008 | Caldas Novas Gois
8 Atualizado em: 27/09/2012
9 Autor: CarlosHPS Webdesigner
10 ********************************************************************
*****************/
11 /*Formatao bsica do layout
12 ****************************/
13 body {
14 margin:0px;
15 padding:0px;
background-color:#252525;
16 color: #666666;
17 font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
18 }
19 /*Formatao bloco GERAL
****************************/
20 #geral {
21 background-color:#009900;
22 width: 950px;
23 margin: 0px auto;
position: relative;
24 height: 100%;
25 }
26 /*Formatao bloco TOPO
27 ****************************/
#topo {
28 background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
29 height: 100px;
30 position: relative;
31 }
do MENU
32 /*Formatao
****************************/
33 ul#menu {
34 margin:-65px 0px 0px;
35 padding:0px;
36 position:absolute;
right:0px;
37 }
38 ul#menu li {
39 display:inline;
40 margin-right: 20px;
}
41 ul#menu li a {
42 text-decoration:none;
43 color:#F4F4F4;

44 font: 14px Calibri, Verdana, Arial;


45 }ul#menu li a.active, ul#menu li a:hover {
46 border-top: 2px dotted #666666;
47 color: #999999;
48 }
49 /*Logotipo
****************************/
50 #logotipo {
51 width:253px;
52 height:127px;
53 background: url(../imagens/logotipo.png) no-repeat top;
clear: both;
54 float: left;
55 margin-top: -90px;
56 position: absolute;
57 left: 2px;
102px;
58 top:
}
59 /*Formatao bloco CONTEUDO
60 ****************************/
61 #conteudo {
62 background: #FFFFFF;
}
63 /*Formatao bloco BARRA
64 ****************************/
65 .barra{
66 color:#FFF;
float: right;
67 width: 304px;
68 height: 525px;
69 background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
70 }
/*Formatao bloco FILMES
71 ****************************/
72 .filmes{
73 float: left;
74 width: 646px;
#FFFFFF;
75 background:
height: 525px;
76 }
77 /*Formatao bloco LANCAMENTO
78 ****************************/
79 .lancamento{
float: left;
80 width: 646px;
81 background: #FFFFFF url(../imagens/bg_lancamento.jpg) no-repeat;
82 height: 163px;
83 margin: 5px;
}
84 /*Formatao bloco TOPFILME
85 ****************************/
86 .topfilme{
87 float: left;
646px;
88 width:
background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
89 height: 163px;
90 margin: 5px;
91 }
92 /*Formatao bloco RODAPE
****************************/
93

94
95
96
97
98
99
10
0
10
1
10
2
10
3
10
4
10
5
10
6 #rodape {
10 color:#FFF;
both;
7 clear:
float: left;
10 width: 950px;
8 background: #A94A4A;
10 }
9
11
0
11
1
11
2
11
3
11
4
11
5
11
6
11
7
11
8
Na prxima matria, Criando um Site Passo a Passo: Parte 09,
complementaremos o contedo. E, at l, faa 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
Download do Arquivo-FonteLogin Required

At l.
CarlosHPS Webdesigner 8)
Ol, pessoal.
Este nosso penltimo artigo da srie Criando um Site Passo-a-Passo e,
finalmente, veremos como ficar o nosso projeto, no verdade?!
Para continuar, iremos completar o contedo central do website da CarlosHPS
Vdeo-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 Contedos da Seo .lancamento


Primeiro, devemos criar uma classe especfica para as imagens que
representaro cada filme desta seo. Para isso, vamos incluir o seguinte
cdigo na nossa folha de estilos:
Classe .lancamento-imagem
?
1
/*Formatao da imagem da seo LANCAMENTO
2 *******************************************/
3 .lancamento-imagem {
4 background: url(../imagens/filme1.png) no-repeat bottom;
5 height: 154px;
10px;
6 margin-top:
width: 126px;
7}
8
E inserir esta nova classe na pgina html:

?
1<div class="lancamento"></div> <!--Fim do bloco .LANCAMENTO -->
O mesmo procedimento dever ser feito para as imagens da seo topfilme,
como mostrado a seguir:
?
1
2
3 /*Formatao da imagem da seo LANCAMENTO
4 *******************************************/
.lancamento-imagem {
5 background: url(../imagens/filme1.png) no-repeat bottom;
6 height: 154px;
7 margin-top: 10px;
8 width: 126px;
}
9 /*Formatao da imagem da seo TOPFILME
10 *******************************************/
11 .topfilme-imagem-1, .topfilme-imagem-2 {
12 height: 154px;
margin-top: 10px;
13 width: 126px;
14 }
15 .topfilme-imagem-1 {
16 background: url(../imagens/filme2.png) no-repeat bottom;
17 }.topfilme-imagem-2 {
18 background: url(../imagens/filme3.png) no-repeat bottom;
19 }
20
21
E no html, ficar:
?
1<div class="lancamento">
2<div class="topfilme"></div> <!--Fim do 1 bloco .topofilme -->
3<div class="topfilme"></div> <!--Fim do 2 bloco .topofilme -->
4</div> <!--Fim do bloco .lancamento -->
O resultado at aqui dever ser este:

Fig. 01: Imagens dos filmes

1.1 Ttulos das sees


Vamos trabalhar agora os ttulos dos filmes e, para isso, complementar o
cdigo css com o seguinte script:
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4

/*Formatao 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;
}

1
5
1
6
1
7
J na pgina html, teremos:
?
1<div class="lancamento">
2<div class="lancamento-imagem">
3<span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
4</div> <!--Fim do bloco .lancamento -->
class="topfilme"></div> <!--Fim do 1 bloco .topfilme -->
5<div
<div class="topfilme"></div> <!--Fim do 2 bloco .topfilme -->
6
Como nas imagens, seguindo o mesmo procedimento acima, teremos o
seguinte resultado:

Fig.02: Ttulos da seo #lancamento

1.2 Contedos dos filmes

Bom, pessoal, agora vamos inserir os cdigos abaixo (css e html) para
podermos configurar os devidos contedos das sees.
Cdigo css:
?
1
2 .lancamento-conteudo {
color: #404040;
3 clear: both;
4 float: left;
5 font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
6 height: 115px;
120px;
7 margin-left:
margin-top: 5px;
8 width: 420px;
9 }
10
Cdigo html:
?
1
2
3
4
5
6
7
8
9
1
0
1
1

<div class="lancamento">
<div class="lancamento-imagem">
<span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
<span class="lancamento-conteudo">
Aps o sensacional "Batman Begins", o Homem-Morcego retorna nessa
sequncia
intitulada "The Dark Knight". Vale lembrar que nos quadrinhos, "O
Cavaleiro das
Trevas" (traduo do ttulo original do novo longa) o nome da
minissrie 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: Contedo do filme


Com os cdigos abaixo, completaremos esta seo:

index.html
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2

<!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="contenttype">
<title>CarlosHPS Vdeo-Locadora</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Incio do bloco #GERAL -->
<div id="geral">
<!--Incio do bloco #TOPO -->
<div id="topo">
<!--LOGOTIPO -->
<div id="logotipo"></div>
</div>
<!--Fim do bloco #TOPO -->
<!--Incio do #MENU -->
<ul id="menu">
<li><a href="#" title="Pgina Inicial CarlosHPS
Locadora">Home</a></li>
<li><a href="#" title="Sobre a locadora">A Locadora</a></li>
<li><a href="#" title="Catlogo de filmes">Catlogo</a></li>
<li><a href="#" title="Participe das promoes">Promoes</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 -->
<!--Incio do bloco #CONTEUDO -->
<div id="conteudo">
<!--Incio do bloco #FILMES -->
<div class="filmes">
<!--Incio do bloco #LANCAMENTO -->
<div class="lancamento">
<div class="lancamento-imagem">
<span class="lancamento-titulo">Batman - Cavaleiro das Trevas</span>
<span class="lancamento-conteudo">
Aps o sensacional "Batman Begins", o Homem-Morcego retorna nessa
seqncia intitulada "The Dark Knight".
Vale lembrar que nos quadrinhos, O Cavaleiro das Trevas (traduo
do ttulo original do novo longa) o
nome da minissrie mais cultuada do personagem e um dos melhores
gibis de todos os tempos.
</span>
</div>
</div>
<!--Fim do bloco #LANCAMENTO -->
<!--Incio do 1 bloco #TOPFILME -->
<div class="topfilme">
<div class="topfilme-imagem-1">

6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5

<span class="topfilme-titulo">O Incrvel Hulk</span>


<span class="topfilme-conteudo">
O cientista Bruce Banner busca desesperadamente uma cura para a
radiao gama que envenenou suas clulas e
que liberta uma desenfreada fora dentro dele: o Incrvel Hulk. Ele
est longe da mulher que ama, dra.
Elizabeth Betty Ross e vive como um fugitivo para evitar a
perseguio obsessiva de seu inimigo, General
Thaddeus Thunderbolt Ross.
</span>
</div>
</div>
<!--Fim do 1 bloco #TOPFILME -->
<!--Incio 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 sinnimo
de melhor! Sex and the City - O Filme
promete responder a todas as dvidas que ficaram no ar: ser que
Carrie e Big vo finalmente se casar?
Samantha vai conseguir se satisfazer com um homem apenas? Charlotte
vai engravidar? E quanto a Miranda e
Steve, vivero felizes para sempre?
</span>
</div>
</div>
<!--Fim do 2 bloco #TOPFILME -->
</div>
<!--Fim do bloco #FILMES -->
<!--Incio da Barra Lateral -->
<div class="barra"> Barra Lateral </div>
<!--Fim da Barra Lateral -->
</div>
<!--Fim do bloco #CONTEUDO -->
<!--Incio do bloco #RODAPE -->
<div id="rodape"> Rodap do site </div>
<!--Fim do bloco #RODAPE -->
</div>
<!--Fim do bloco #GERAL -->
</body>
</html>

1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7

6
7
7
7
8
7
9
8
0
8
1
8
2

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

/*
Nome do Layout: CarlosHPS Vdeo-Locadora
URL do Layout: http://www.carloshps.com.br/blog/
Descrio: Cdigo desenvolvido para o layout do site fictcio
CarlosHPS Vdeo-Locadora
Verso: 1.5
Criado em: 27/06/2008 | Caldas Novas Gois
Atualizado em: 26/12/2010
Autor: CarlosHPS Webdesigner
*/
/*Formatao bsica do layout
****************************/
body {
background-color:#252525;
color: #666666;
font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
margin:0px;
padding:0px;
}
/*Formatao bloco GERAL
****************************/
#geral {
background-color:#009900;
height: 100%;
margin: 0px auto;
position: relative;
width: 950px;
}
/*Formatao bloco TOPO
****************************/
#topo {
background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
height: 100px;
position: relative;
}
/*Formatao do MENU
****************************/
ul#menu {
margin:-65px 0px 0px;

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

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;
}
/*Formatao bloco CONTEUDO
****************************/
#conteudo {
background: #FFFFFF;
}
/*Formataao bloco BARRA
****************************/
.barra {
background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;
float: right;
height: 525px;
width: 304px;
}
/*Formataao bloco FILMES
****************************/
.filmes {
background: #FFFFFF;
float: left;
height: 525px;
width: 646px;
}
/*Formatao bloco LANCAMENTO
************************************/
.lancamento {
background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;
float: left;
height: 163px;
margin: 5px;
width: 646px;
}
.lancamento-titulo {

83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
10
0
10
1
10
2
10
3
10
4
10
5
10
6
10
7
10
8
10
9
11
0
11
1
11
2
11
3
11
4
11
5
11

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;
}
/*Formatao da imagem da seo LANCAMENTO
*******************************************/
.lancamento-imagem {
background: url(../imagens/filme1.png) no-repeat bottom;
height: 154px;
margin-top: 10px;
width: 126px;
}
/*Formatao da imagem da seo 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;

6
11
7
11
8
11
9
12
0
12
1
12
2
12
3
12
4
12
5
12
6
12
7
12
8
12
9
13
0
13
1
13
2
13
3
13
4
13
5
13
6
13
7
13
8
13
9
14
0
14

width: 126px;
}
.topfilme-imagem-2 {
background: url(../imagens/filme3.png) no-repeat bottom;
}
/*Formatao bloco RODAPE
****************************/
#rodape {
background: #CC0000;
clear: both;
float: left;
width: 950px;
}

1
14
2
14
3
14
4
14
5
14
6
14
7
14
8
14
9
15
0
15
1
15
2
15
3
15
4
15
5
15
6
15
7
15
8
15
9
16
0
16
1
16
2
16
3
16
4
16
5
16

6
16
7
16
8
16
9
17
0
17
1
17
2
17
3
17
4

Download do Arquivo Final


Na prxima matria, concluiremos o nosso projeto, Criando um Site Passo a
Passo: Parte FINAL. E, at l, faa 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
Download do Arquivo-FonteLogin Required

CarlosHPS Webdesigner 8)
Ol, pessoal.
Ento, vamos concluso, afinal.

Pr-requisitos
Criando Site Passo a Passo - Parte FINAL - cones
Download das imagens dos cones utilizados para o tutorial Criando Site Passo
a Passo - Parte FINAL
Download das ImagensLogin Required

1 Organizao das Divs

Bom, pessoal, na nossa pgina index.html criada at aqui, vamos inserir novas
divises que sero responsveis pelas imagens e ttulos da barra lateral do
site. Portanto, abramos o arquivo e insiramos o seguinte cdigo:
?
1</div> <!--Fim do bloco #FILMES -->
2<div id="barra">
3<div id="barra-newsletter"></div> <!--Fim do bloco #NEWSLETTER -->
4<div id="barra-categorias"></div> <!--Fim do bloco #CATEGORIAS -->
</div> <!--Fim da Barra Lateral -->
5

2 Inserindo Imagens
Agora, trabalharemos o cdigo CSS para inserirmos as imagens que
representaro os blocos criados na index.html.
?
1
2
3 #barra-newsletter {
4 background: url(../imagens/icone1.png) no-repeat top;
5 clear: both;
#FFFFFF;
6 color:
float: left;
7 font: 40px "Trebuchet MS", Calibri, Verdana, Arial;
8 height: 104px;
9 margin-left: -9px;
10 position: absolute;
vertical-align: bottom;
11 width: 313px;
12 }
13 #barra-categorias {
14 background: url(../imagens/icone2.png) no-repeat top;
clear: both;
15 color: #FFFFFF;
16 float: left;
17 font: 40px "Trebuchet MS", Calibri, Verdana, Arial;
18 height: 204px;
margin-left: -9px;
19 margin-top: 230px;
20 position: absolute;
21 vertical-align: bottom;
22 width: 313px;
23 }
24
25
O resultado, aps estas duas aes, deve ser este:

Fig. 01: Imagens na Barra Lateral do site


Na barra lateral, a qual trabalharemos agora, existem dois cones que
representam reas distintas: Newsletter e Catlogo.

3 Inserindo o Campo de Formulrio


Para completarmos o bloco da Newsletter, preciso inerir um pequeno texto,
avisando o usurio que ali ele poder se cadastrar e um pequeno formulrio
com dois campos e um boto.
Na pgina index.html, vamos inserir os seguintes cdigos:
?
1<div id="barra-newsletter">
2<form class="form" action="#"> Mantenha-se informado(a) e concorra a
3prmios. Assine agora nosso boletim semanal.<br />
4<label for="nome">Nome:</label><br />
<input id="name" type="text" /><br />
5<label for="email">E-mail:</label><br />
6<input id="email" type="text" /><br />
7<input type="submit" value="OK" />
8</form>
</div> <!--Fim do bloco #NEWSLETTER -->
9
E no CSS, inseramos as formataes abaixo:

?
1
2 /*Formatao do FORMULRIO
3 *******************************************/
4 form {
clear: both;
5 color: #FFFFFF;
6 float: left;
7 font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
8 height: 110px;
margin-left: 20px;
9 margin-top: 95px;
10 position: absolute;
11 width: 313px;
12 }
13
Veremos o seguinte resultado:

Fig. 02: Formulrio de cadastro


Para darmos uma melhoradinha nos campos do formulrio e no boto, vamos
complementar o cdigo css:
?
1
2
3

label {
display: block;
float: left;

4
5
6
7
8
9
10
11
12
13
14
15
16
17

text-align: left;
width: 4em;
}
input {
background: #FCFCFE;
border: 1px solid #CCCCCC;
color: #666666;
}
.submit input {
background: #FFFFFF;
border: 2px dashed #999999;
color: #000;
padding: 5px;
}

4 Inserindo Categorias
Para completarmos a barra lateral, faltam os itens do bloco Categorias. Com
isso, vamos inserir o cdigo abaixo na pgina 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

<div id="barra-categorias">
<div id="categoria-1">
<ul>
<li>Ao</li>
<li>Aventura</li>
<li>Comdia</li>
<li>Desenho</li>
<li>Documentrio</li>
<li>Drama</li>
</ul>
</div> <!--Fim da categoria 1-->
<div id="categoria-2">
<ul>
<li>pico</li>
<li>Evenglico</li>
<li>Fico</li>
<li>Guerra</li>
<li>Infantil</li>
<li>Romntico</li>
</ul>
</div> <!--Fim da categoria 2-->
<div id="categoria-3">
<ul>
<li>Suspense</li>
<li>Temporada</li>
<li>Terror</li>
<li>Vale Tudo</li>
<li>Video Club</li>
<li>Western</li>
</ul>
</div> <!--Fim da categoria 3-->
</div> <!--Fim do bloco #CATEGORIAS -->

29
30
31
32
Em seguida, vamos formatar a DIV:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#barra-categorias ul {
color: #FFFFFF;
font: 17px Calibri, Arial, Verdana;
list-style: none;
text-align: left;
}
#categoria-1 {
clear: both;
float: left;
left: 10px;
margin-left: 10px;
position: absolute;
top: 100px;
}

Feito isso, veremos o resultado assim:

Fig. 03: Catlogo


E no CSS, formataremos e melhoraremos o cdigo dos blocos assim:
?
1
2
3
4

#barra-categorias ul {
color: #FFFFFF;
font: 17px Calibri, Arial, Verdana;
list-style: none;
text-align: left;
}

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#categoria-1, #categoria-2, #categoria-3{


clear: both;
float: left;
margin-left: 5px;
position: absolute;
top: 100px;
}
#categoria-1 {
left: -25px;
}
#categoria-2 {
left: 85px;
}
#categoria-3 {
left: 180px;
}

Resultado at aqui:

Fig. 04: Catlogo completo

5 Rodap
E enfim, chegamos ltima seo do site da Locadora CarlosHPS Vdeos.

Primeiro, salve a imagem abaixo na pasta imagens:

rss feed
Em seguida, inseramos a Div na pgina html:
?
1 <div id="rodape">
2 <div class="rodape-rss"></div>
3 </div> <!--Fim do bloco #RODAPE -->
E depois, ajustemos o CSS:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*Formatao bloco RODAPE


****************************/
#rodape {
background: #CC0000;
clear: both;
float: left;
height: 80px;
width: 950px;
}
.rodape-rss {
background: url(../imagens/rss.jpg) no-repeat;
height: 80px;
width: 305px;
}

Pronto!
Agora s falta o texto dos direitos autorais:

Copyright 2008-2011
Todos os direitos reservados a CarlosHPS Webdesigner
Projeto fictcio de um site para vdeo-locadora
No html, ficar assim:
?
1 <div id="rodape">
class="rodape-rss">
2 <div
<span class="COPYRIGHT"> Copyright 2008-2011<br>
3 Todos os direitos reservados a CarlosHPS Webdesigner<br>

4
5 Projeto fictcio de um site para vdeo-locadora
</span>
6 </div>
7 </div> <!--Fim do bloco #RODAPE -->
8
e o CSS, desta maneira:
?
1
2 .copyright {
3 clear: both;
color: #666666;
4 float: left;
5 font: 12px "Trebuchet MS", Calibri, Verdana, Arial;
6 height: 80px;
7 margin-left: 525px;
margin-top: 5px;
8 text-align: right;
9 width: 420px;
10 }
11

6 Compatibilidade com Navegadores


Bom, pessoal, o que fizemos aqui pode ser exibido sem problemas no IE 8,
Firefox 3.6, Safari 5 e Opera 11.

Exibio do Site no Navegador Opera 11

Exibio do Site no Navegador Safari 5

Exibio do Site no Navegador Firefox 3.6

Exibio do Site no Navegador Internet Explorer 8

7 Concluso
Pessoal, o que foi visto aqui nesta srie, foi um breve resumo de como se cria
um projeto de um site. Os cdigos HTML e CSS, podem e devem ser
otimizados, por isso, recomendo que estudem um pouco mais essas duas
linguagens que so fundamentais para quem deseja criar sites
profissionalmente.
E, por fim, abaixo segue o download do projeto completo.
Espero que tenham gostado e at a prxima.

Criando Site Passo a Passo - Parte FINAL - Site Modelo COMPLETO


Download do site modelo completo com todas as imagens e arquivos do
tutorial Criando Site Passo a Passo - Parte FINAL
Download do Site CompletoLogin Required

CarlosHPS Webdesigner 8)