O painel Styles do DWMX 2004 - 4a Parte

Publicado em: 10/08/2004

Finalidade

Neste tutorial mostrarei a utilização do painel Styles do Dreamweaver funcionando como um editor de folhas de estilo em cascata.
Este tutorial compõe-se de uma sequência de 06 (seis) documentos HTML (Introdução mais 1a.Parte até 5a. Parte) cujos links encontram-se no início e no fim do tutorial.

Para otimizar o aprendizado deste tutorial é necessário que você já tenha lido e entendido as partes anteriores de vez que uma parte é sequência da anterior.

[Introdução] [1a.Parte] [2a.Parte] [3a.Parte] [4a.Parte] [5a.Parte]

A estilização de links na página

Para recordar as técnicas de estilização e estados de links em uma página web, leia este tutorial.

Vamos criar um link na nossa página padrão e estilizá-lo.

No rodapé da página padrão criaremos um link para o site da Macromedia:

Se você está reproduzindo os passos deste tutorial altere no código o seguinte:

O código atual:

<p class="roda-um">Dreamweaver® é marca registrada 
da Macromedia</p>

A alteração a fazer:

<p class="roda-um">Dreamweaver® é marca registrada da
<a href="http://www.macromedia.com/br/" target="_blank"
title="Macromedia do Brasil> Macromedia</a></p>

E agora vamos estilizar a tag <a> que está dentro do parágrafo da classe .roda-um.

Estilizando a:link

1-) Tecle Shift + F11 para trazer o painel do CSS Styles;

2-) Clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

3-) Na caixa que se abre digite

Selector Type: Advanced (ID's, contextual selectors, etc) - This document only;
No campo Selector, clique na setinha a direita para abrir o menu e escolha a:link

4-) Clique OK e veja figura a seguir para os parâmetros de estilização.

Screenshot do painel styles com parâmetros de estilização

Clique OK.

Estilizando a:visited

1-) Clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

2-) Na caixa que se abre digite
Selector Type: Advanced (ID's, contextual selectors, etc) - This document only;
No campo Selector, clique na setinha a direita para abrir o menu e escolha a:visited

3-) Clique OK

4-) Na caixa de diálogo que se abre digite para a Category - Type:
Color: digite #009999 (corverde musgo).

Estilizando a:hover

1-) Clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

2-) Na caixa que se abre digite
Selector Type: Advanced (ID's, contextual selectors, etc) - This document only;
No campo Selector, clique na setinha a direita para abrir o menu e escolha a:hover

3-) Clique OK

4-) Na caixa de diálogo que se abre digite para a Category - Type:
Decoration: marque as caixinhas underline e overline (as duas);
Color: digite #000000 (cor preta).

5-) Nesta mesma caixa de diálogo passe para Category - Background:
background color: digite #FFCCCC;

Clique OK.

O estado a:active não será estilizado neste tutorial e fica como exercício para seus estudos. :-)

Ver a estilização do link na página padrão

A ordem de estilização

IMPORTANTE: A ordem em que os estados dos links aparecem na folha de estilo influi no funcionamento da estilização do link.
Você deve ter sua folha de estilo nesta ordem: a:link - a:visited - a:hover - a:active
Se você inverter a ordem, por exemplo, colocando a:visited depois de a:hover, a:hover não funcionará após a primeira visita no link pois pelo efeito cascata prevalecerá a:visited. (Ver FAQ - efeito cascata)

Mudando a cor do fundo da página

Para mudar a cor do fundo de uma página web devemos estilizar a tag <body> conforme mostro a seguir.

1-) Clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

2-) Na caixa que se abre digite
Tag: body - marque Tag (redefines the look of a especifc tag) e This document only;

3-) Clique OK e veja figura a seguir:

Screenshot do painel styles com cor de estilização do fundo da página

Ver a estilização do fundo na página padrão

[Introdução] [1a.Parte] [2a.Parte] [3a.Parte] [4a.Parte] [5a.Parte]