Dreamweaver – Barra de navegação com CSS

Criando uma barra de navegação com CSS através do Dreamweaver.

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

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.

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.

Definiçã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.

Definiçã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.

Definiçã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.

Definiçã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.

Definiçã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>

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