Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo