Criando um Site Passo a Passo: Parte FINAL

Série: “Criando um Site Passo-a-Passo.”

Olá, pessoal.

Então, vamos à conclusão, 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

1 – Organização das Div’s

Bom, pessoal, na nossa página index.html criada até aqui, vamos inserir novas divisões que serão responsáveis pelas imagens e títulos da barra lateral do site. Portanto, abramos o arquivo e insiramos o seguinte código:

</div>	<!--Fim do bloco #FILMES -->
<div id="barra">
	<div id="barra-newsletter"></div>	<!--Fim do bloco #NEWSLETTER -->
	<div id="barra-categorias"></div>	<!--Fim do bloco #CATEGORIAS -->
</div>	<!--Fim da Barra Lateral -->

2 – Inserindo Imagens

Agora, trabalharemos o código CSS para inserirmos as imagens que representarão os blocos criados na index.html.

#barra-newsletter {
	background: url(../imagens/icone1.png) no-repeat top;
	clear: both;
	color: #FFFFFF;
	float: left;
	font: 40px "Trebuchet MS", Calibri, Verdana, Arial;
	height: 104px;
	margin-left: -9px;
	position: absolute;
	vertical-align: bottom;
	width: 313px;
}
#barra-categorias {
	background: url(../imagens/icone2.png) no-repeat top;
	clear: both;
	color: #FFFFFF;
	float: left;
	font: 40px "Trebuchet MS", Calibri, Verdana, Arial;
	height: 204px;
	margin-left: -9px;
	margin-top: 230px;
	position: absolute;
	vertical-align: bottom;
	width: 313px;
}

O resultado, após estas duas ações, 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 Catálogo.

3 – Inserindo o Campo de Formulário

Para completarmos o bloco da Newsletter, é preciso inerir um pequeno texto, avisando o usuário que ali ele poderá se cadastrar e um pequeno formulário com dois campos e um botão.

Na página index.html, vamos inserir os seguintes códigos:

<div id="barra-newsletter">
	<form class="form" action="#"> Mantenha-se informado(a) e concorra a prêmios. Assine agora nosso boletim semanal.<br />
		<label for="nome">Nome:</label><br />
			<input id="name" type="text" /><br />
		<label for="email">E-mail:</label><br />
			<input id="email" type="text" /><br />
			<input type="submit" value="OK" />
	</form>
</div>	<!--Fim do bloco #NEWSLETTER -->

E no CSS, inseramos as formatações abaixo:

/*Formatação do FORMULÁRIO
*******************************************/
form {
	clear: both;
	color: #FFFFFF;
	float: left;
	font: 13px "Trebuchet MS", Calibri, Verdana, Arial;
	height: 110px;
	margin-left: 20px;
	margin-top: 95px;
	position: absolute;
	width: 313px;
}

Veremos o seguinte resultado:

Fig. 02: Formulário de cadastro

Para darmos uma melhoradinha nos campos do formulário e no botão, vamos complementar o código css:

label {
	display: block;
	float: left;
	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 código abaixo na página index.html:

<div id="barra-categorias">
        <div id="categoria-1">
        	<ul>
        		<li>Ação</li>
        		<li>Aventura</li>
        		<li>Comédia</li>
        		<li>Desenho</li>
        		<li>Documentário</li>
        		<li>Drama</li>
			</ul>
		</div>	<!--Fim da categoria 1-->
        <div id="categoria-2">
		<ul>
        		<li>Épico</li>
        		<li>Evengélico</li>
        		<li>Ficção</li>
        		<li>Guerra</li>
        		<li>Infantil</li>
        		<li>Romântico</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 -->

Em seguida, vamos formatar a DIV:

#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: Catálogo

E no CSS, formataremos e melhoraremos o código dos blocos assim:

#barra-categorias ul {
	color: #FFFFFF;
	font: 17px Calibri, Arial, Verdana;
	list-style: none;
	text-align: left;
}
#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: Catálogo completo

5 – Rodapé

E enfim, chegamos à última seção do site da Locadora – CarlosHPS Vídeos.

Primeiro, salve a imagem abaixo na pasta “imagens”:

rss feed

Em seguida, inseramos a Div na página html:

<div id="rodape">
	<div class="rodape-rss"></div>
</div>	<!--Fim do bloco #RODAPE -->

E depois, ajustemos o CSS:

/*Formataçăo 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 fictício de um site para vídeo-locadora

No html, ficará assim:

	<div id="rodape">
		<div class="rodape-rss">
			<span class="COPYRIGHT"> Copyright © 2008-2011<br>
			  Todos os direitos reservados a CarlosHPS Webdesigner<br>
			  Projeto fictício de um site para vídeo-locadora
			</span>
		</div>
	</div>	<!--Fim do bloco #RODAPE -->

e o CSS, desta maneira:

.copyright {
	clear: both;
	color: #666666;
	float: left;
	font: 12px "Trebuchet MS", Calibri, Verdana, Arial;
	height: 80px;
	margin-left: 525px;
	margin-top: 5px;
	text-align: right;
	width: 420px;
}

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.

Exibição do Site no Navegador Opera 11

Exibição do Site no Navegador Safari 5

Exibição do Site no Navegador Firefox 3.6

Exibição do Site no Navegador Internet Explorer 8

7 – Conclusão

Pessoal, o que foi visto aqui nesta série, foi um breve resumo de como se cria um projeto de um site. Os códigos HTML e CSS, podem e devem ser otimizados, por isso, recomendo que estudem um pouco mais essas duas linguagens que são fundamentais para quem deseja criar sites profissionalmente.

E, por fim, abaixo segue o download do projeto completo.

Espero que tenham gostado e até a próxima.