Voltar para o site

Barra de navegação com CSS

Publicado em: 02/02/2004

Introdução

Este tutorial é uma adaptação do original que escrevi, para publicação no site da DWOnline (uma comunidade Dreamweaver).

Trata-se um tutorial sobre utilização do painel estilos do Dreamweaver para construir uma barra de navegação e foi desenvolvido em DW-MX.

O código da barra de navegação

Crie um arquivo no qual você pretende adicionar a barra de navegação. Vamos chamá-lo "barNav.html".

Construiremos uma barra de navegação com três links dispostos em linha, um após o outro. Óbvio isso né? Afinal trata-se de uma barra de navegaçao!

Mas, é muito frequente, na prática, encontrarmos nossas soluções em coisas óbvias e aqui é um bom exemplo.

A constatação óbvia acima, nos leva de imediato a concluir um código bem simples para "enclausurar" e depois estilizar a barra de navegação.

uma linha ----> um parágrafo HTML;

três links  ----> três tags a HTML;

...e, nasce o primeiro embrião da nossa barra de navegação o código HTML:

<p>
<a href="../index.html" >HOME</a>
<a href="../forum/index.php">DWFORUM</a>
<a href="../maujor.html>MAUJOR</a>
</p>

Próximo passo: Estilizar as tag's p e a.

Não vamos querer que TODOS os parágrafos da página tenham o mesmo aspecto da barra de navegação e assim usaremos uma classe para aplicar no parágrafo que contém a barra de navegação.

Chamemos a classe de .barNav e vamos ao no Shift+F11

1a. ETAPA: Definindo os estilos para uma classe que chamaremos --->.barNav

Abra o painel Estilos CSS (tecla de atalho Shift + F11) e clique em Novo estilo CSS

O painel estilos do Dreamweaver

Painel - Estilos CSS

Na caixa Novo estilo CSS, marque Tipo: Utilizar o seletor CSS - Definir em: Apenas este documento - Seletor: Digite .barNav a Clique OK.

NOTA: Antes de digitar, certifique-se de que a marcação do Tipo esteja em: Utilizar o seletor CSS, pois caso contrário o DW retornará uma mensagem "chiando" com a sintaxe digitada.

Aqui estamos definindo um seletor para estilizar a tag a contida no elemento HTML (no nosso caso o parágrafo) com classe barNav.

A caixa de dialogo para definir uma classe

Caixa - Novo estilo CSS

Na caixa Definição de estilos CSS de .barNav a, na Categoria Tipo marque, Fonte:Arial, Helvetica, Verdana, sans-serif - Tamanho: 14 - Peso: negrito - Cor: #000000 - Decoração: Nenhuma.

A caixa de dialogo para definir propriedades da fonte

Difinição de estilos CSS de .barNav a - Tipo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Fundo marque, Cor do fundo:#00FF00.

A caixa de dialogo para definir o fundo

Difinição de estilos CSS de .barNav a - Fundo

Na caixa Definição de estilos CSS de .barNav a, na Categoria Bloco marque, Alinhamento do texo:centro.

A caixa de dialogo para definir propriedades de bloco

Difinição de estilos CSS de .barNav a - Bloco

Passe para a Categoria Caixa e marque Largura, Preenchimento e Margem, conforme mostrado na figura abaixo. ATENÇÂO: No Preenchimento, desmarque "Idêntico para todas" e na Margem deixe marcada "Idêntico para todas", pois estamos definindo preenchimentos deferentes nos lados da caixa e borda de zero pixel, nos quatro lados da caixa.

A caixa de dialogo para definir propriedades de caixas

Difinição de estilos CSS de .barNav a - Caixa

Passe para a Categoria Borda e defina Estilo, Largura e Cor, conforme mostrado na figura abaixo. ATENÇÂO: Deixe marcada as caixas "Idêntico para todas", pois estamos definindo bordas iguais, nos quatro lados da caixa.

A caixa de dialogo para definir bordas

Difinição de estilos CSS de .barNav a - Borda

E aqui, acabamos de criar o estilo para a nossa tag a dentro da classe .barNav.

Os links já estão com letras na cor preta (#000000), dentro de um retângulo verde (#00FF00) com bordas pretas (#000000).

Uma "Barra de Navegação" pode ter até 4 estados diferentes, refletindo cada um, uma ação do usuário:

1). Imagem Ativa (UP) > ponteiro do usuário esta fora da imagem ;

2). Imagem Sobreposta (OVER) > ponteiro do usuário esta sobre a imagem ;

3). Imagem Inativa (DOWN) > o usuário clicou na imagem ;

4). Imagem Sobreposta enquanto tiver Inativa (OVER WHILE DOWN) > o ponteiro do usuário esta sobre a imagem, depois que ela foi clicada.

Com CSS:

1) o estado "UP" já está estilizado;

2) o estado "OVER" é estilizado com a:hover que mostrarei a seguir;

3) o estado "DOWN" é estilizado com a:active que mostrarei a seguir;

4) o estado "OVER WHILE DOWN" não tem equivalente em CSS;

5) mas, temos o estado "VISITED" para links já visitados com a:visited, que não usaremos neste tutorial.

2a. ETAPA:Definindo os estilos para a:active

Painel Estilo CSS --> Novo estilo CSS --> Utilizar o seletor de CSS --> Definir em apenas este documento --> Seletor:digite .barNav a:active --> OK;

Caixa Tipo--> Cor: #CCCCCC; Caixa Fundo--> Cor do fundo: #000000;Caixa Borda--> Estilo--> solid - Largura--> 2px - Cor: #CCCCCC;

E aqui, acabamos de criar o estilo para a:active.

3a. ETAPA: Definindo os estilos para a:hover

Painel Estilo CSS --> Novo estilo CSS --> Utilizar o seletor de CSS --> Definir em apenas este documento --> Seletor:digite .barNav a:hover --> OK;

Caixa Tipo--> Cor: #00FF00; Caixa Fundo--> Cor do fundo: #000000;Caixa Borda--> Estilo--> solid - Largura--> 2px - Cor: #00FF00;

E aqui, acabamos de criar o estilo para a:hover.

PRONTO! Terminamos de criar a CSS para nossa barra de navegação.

O Código CSS gerado em sua página será o seguinte:

<style type="text/css">
<!--
.barNav a {
font:bold 14px  Arial, Helvetica, Verdana,sans-serif;
color:#000000;
text-decoration:none;
background:#00FF00;
text-align:center;	
margin:0px;	
padding:5px 10px 5px 10px;		
border:2px solid #000000;
}

.barNav a:active {	
color:#CCCCCC;	
background:#000000;	
border:2px solid #CCCCCC;
}
.barNav a:hover {	
color:#00FF00;
	background:#000000;	
border:2px solid #0FF000;
}
</style>

E finalmente o teste pra confirmar se esta tudo certinho:

No arquivo que você criou "barNav.html" e onde gerou o código CSS, digite o HTML da barra de navegação na janela de código do .

Insira as tag's <a> dentro da tag <p> tudo como mostrado no início deste tutorial.

Observe o código HTML abaixo:

<html>
.........................
</head>
<body>
<p>
<a href="../index.php/">HOME</a>
<a href="../index.php">DWFORUM</a>
<a href="../maujor.php">MAUJOR</a>
</p> 
........................
</body>
</html>

E você deverá obter uma barra de navegação com o aspecto mostrado nesta página

É isso pessoal! E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas :-)

Crie outros arquivos e experimente com:

...mude a cor do fundo;acrescente a declaração a:visited;

...altere espessuras, cor e tipos das bordas;...coloque a declaração a:hover antes de a:active e constate se houve alguma mudança no comportamento dos links;

...e milhares de outras combinações!

...DESCUBRA A VERSATILIDADE DAS FOLHAS DE ESTILO EM CASCATA.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo