Banner propaganda da DevMedia - Cursos de desenvolvimento web

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]

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