Criando um Site Passo-a-Passo: Parte 7

CarlosHPS

Olá, pessoal

Em prosseguimento à série “Criando um Site Passo a Passo”, desenvolveremos neste tutorial a barra de navegação, juntamente com seus itens e inseriremos algumas imagens que comporão o layout da CarlosHPS Vídeo-Locadora.

Pré-Requisitos

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

1 – Ajustes Gerais no CSS

Na matéria anterior, criamos um arquivo css para poder facilitar a visualização dos blocos de conteúdo que compõem 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 seção é a responsável pela largura do nosso layout e também, do alinhamento geral do conteúdo. Portanto, inserindo novos atributos ao código, ele deverá ficar da seguinte maneira:

/*Formatação bloco GERAL
****************************/
#GERAL {
background-color:#009900;
width: 950px;
margin: 0px auto;
position: relative;
}

Bloco #TOPO

Nesta seção conterá o logotipo do site e a barra de navegação. Este bloco terá uma altura de 100 px e uma imagem de fundo (clique aqui para salvar a imagem). Vejamos a seguir:

/*Formatação bloco TOPO
****************************/
#TOPO {
background: #333333 url(../imagens/bg_topo.jpg) repeat-x;
height: 100px;
position: relative;
}

O resultado até agora é este:

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

Div #MENU

Chegou a hora de criarmos a barra de navegação e os itens do menu. É bastante simples, obviamente, pra quem conhece um pouco de html. Então, vamos criar uma <div> dentro da tag <ul>, na página index.html e inserirmos uma lista como mostra o código abaixo:

<!--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 -->

Sendo assim, teremos a seguinte exibição no navegador:

Fig. 02: Menu em lista exibido no navegador.

2 – Formatação do Menu

Agora que demos uma “geral” nos códigos, vamos melhorar a barra de navegação. Para isso, basta inserirmos o código abaixo na folha de estilos estilo.css.

/*Formatação do MENU
****************************/
ul#MENU {
margin:-65px 0px 0px;
padding:0px;
position:absolute;
}
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;
}

A grosso modo, podemos identificar e esclarecer o código da seguinte maneira:

ul#MENU – Responsável 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 - Formatação para os links do menu

Sendo assim, teremos nossa barra de navegação com a seguinte formatação:

Fig. 03: Barra de menu formatada

3 – Inserindo logotipo

Pra concluirmos esta parte, vamos inserir o logotipo da vídeo-locadora (clique aqui e faça o download).

Primeiramente, vamos colocar a div responsável pela imagem, adequadamente na página index.html:

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

E em seguida, ajustar o código css:

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

Desta feita, obteremos esta configuração no navegador:

Fig. 04: Resultado final da configuração do topo.

Bom, pessoal, abaixo segue a formatação da página index.html e estilo.css:

index.html

<!--Início do bloco #GERAL -->
<div id="GERAL">
<!--Início do bloco #TOPO -->
<div id="TOPO">
<!--LOGOTIPO -->
<div id="logotipo"></div>
<!--Fim do bloco #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"> Conteúdo do site</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: 27/06/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;
}
/*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: #FF9900;
}
/*Formatação bloco RODAPE
****************************/
#RODAPE {
background: #CC0000;
}

Na próxima matéria, inseriremos o conteúdo central do site.

Até lá.

CarlosHPS Webdesigner