O painel Styles do DWMX 2004 - 4a Parte
Publicado em: 10/08/2004Finalidade
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="https://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.
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:
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®
Ir para a página de entrada nos sites dos livros.
