O painel Styles do DWMX 2004 - 1a 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]

Uma página XHTML padrão

Vou usar neste tutorial para exemplificar a aplicação dos estilos em alguns elementos HTML uma página que construi em HTML. Mas, se a sua página está projetada em HTML não há qualquer problema e o tutorial é perfeitamente válido e aplicável.

Ver a página padrão

A estrutura da página padrão

Veja abaixo como está estruturada a página padrão que você acabou de visualizar no link acima.

Screenshot da página padrão com os elementos HTML demarcados

Nota: Veja o código fonte da página padrão no seu browser.

No Internet Explorer: menu View ==> Source

Iniciando a folha de estilos com a tag <h1>

Ao longo do tutorial acompanhe a numeração dos passos na explicação com os números mostrados nas figuras.

1-) Abra a página padrão no Dreamweaver e 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-) Vamos estilizar a tag h1
Digite Tag: h1 - marque Tag (redefines the look of a especifc tag) e This document only;

Clique OK

O painel styles e a tag h1

As regras de estilo para a tag <h1>

Realizado os passos do item anterior abrir-se-á a caixa de diálogo CSS Styles definition for h1 como mostrado na figura abaixo.

Na Category Type, ajuste as propriedades da tag h1 para:

  • Font: Arial, Helvetica, sans-serif;
  • Size: 18;
  • Case: uppercase;
  • Color: #FF0000;

Clique OK.

Nota: Clicando em Apply você verá os esfeitos da regra CSS em h1, na janela de Design do Dreamweaver.
Olhe na janela de código do documento e veja dentro da tag <head></head> que o Dreamweaver colocou as regras de estilo para h1 em <style></style>.

O painel para estlizar fontes do cabeçalho nível 1

As regras de estilo para a tag <h2>

No painel CSS Styles, clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

Vamos estilizar a tag h2
Digite Tag: h2 - marque Tag (redefines the look of a especifc tag) e This document only;

Clique OK

Na Category Type, ajuste as propriedades da tag h2 para:
Font: Verdana, Arial, Helvetica, sans-serif;
Size: 16;
Weight: bold;
Color: #FF6600;

Passe para a Category Block, ajuste a propriedade da tag h2 para:
Text indent: 10px;

Clique OK.

Nota: Clicando em Apply você verá os esfeitos da regra CSS em h2, na janela de Design do Dreamweaver.
Olhe na janela de código do documento e veja dentro da tag <head></head> que o Dreamweaver colocou as regras de estilo para h2 em <style></style>.

O painel para estlizar fontes do cabeçalho nível 2

As regras de estilo para a tag <p>

Repita os passos do item anterior mas agora, crie as regras de estilo para a tag <p>.

Estilize <p> adotando os seguintes parâmetros:
Na Category Type:
Font: Verdana, Arial, Helvetica, sans-serif;
Size: 12px;
Color: #000099;

Passe para a Category Block:
Text indent: 20px;

Clique OK.

Nota: Clicando em Apply você verá os esfeitos da regra CSS em p, na janela de Design do Dreamweaver.
Olhe na janela de código do documento e veja dentro da tag <head></head> que o Dreamweaver colocou as regras de estilo para p em <style></style>.

O resultado no browser

Tecle F12 no seu Dreamweaver para visualizar os efeitos das regras CSS criadas.

Você deverá obter a estilização conforme mostrado no link abaixo:

Ver as estilizações na página padrão

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