Criando um Site Passo a Passo: Parte 7

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:

1
2
3
4
5
6
7
8
/*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 abaixo.

Imagem de fundo para o topo.

Vejamos a seguir:

1
2
3
4
5
6
7
/*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.

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:

1
2
3
4
5
6
7
8
9
10
</div>   <!-- Fim do bloco #TOPO -->
<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 -->
<div id"conteudo">

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

Fig. 02: Menu em lista exibido 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*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 {
     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 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

Fig. 03: Barra de menu formatada

3 – Inserindo logotipo

Pra concluirmos esta parte, vamos inserir o logotipo da vídeo-locadora:

CarlosHPS Video Locadora Logotipo

 

Primeiramente, vamos colocar a div responsável pela imagem, adequadamente na página 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 código css:

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

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

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

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

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
</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>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 -->
     <div id"conteudo">
          Conteúdo 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>

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
/*************************************************************************************
Nome do Layout: CarlosHPS Vídeo-Locadora
Descrição: Código desenvolvido para o layout do site fctício CarlosHPS Vídeo-Locadora
Versão: 1.7
Criado em: 27/06/2008 | Caldas Novas – Goiás
Atualizado em: 05/08/2012
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;
     cursor:pointer;
     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, Criando um Site Passo a Passo: Parte 8,  inseriremos o conteúdo central do site.

Até lá, façam 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

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