O painel Styles do DWMX 2004 - Introdução

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.
Esta é a introdução e portanto o primeiro documento a ser estudado.

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

Trabalhando com o inspetor Properties para aplicar estilos

O foco principal deste tutorial é o uso do painel Design na aba CSS Style.
No entanto vou mostrar inicialmente a aplicação de estilos pelo Inspetor de Propriedades.

O Dreamweaver oferece as opções de aplicar estilos em um documento, por folhas incorporadas ou externas.
(Ver tutorial sobre vincular folhas de estilo à documentos)

As folhas de estilo incorporadas podem ser aplicadas pelo inspetor Properties como mostrarei a seguir.
O inspetor Properties localiza-se abaixo da janela de documento e para visualizá-lo e ocultá-lo tecle Ctrl + F3;

Este é o inspetor Properties:

O inspetor proprerties

Vamos criar um documento novo e através de exemplos entender a aplicar estilos.

No seu DW crie um novo documentoHTML e salve-o com o nome testecss.htm;
Crie os seguintes textos no documento:

Cabeçalho 1
Cabeçalho 2
Cabeçalho 3
Parágrafo 1
Parágrafo 2
Parágrafo 3

Atribua aos textos as tag's h1 - h2 - h3 - p - p - p
Salve o documento.

E estamos com um documento com três níveis de cabeçalho e três parágrafos.

Assim:

.........
<body>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
</body>
............

Configurando o DW para gerar folha de estilo incorporada

O DW oferece a possibilidade de você determinar se deseja que ele crie uma folha de estilos incorporada ao documento ou se os estilos serão aplicados por tagsHTML de formatação tipo <font> <strong> <em> etc... sem uso de folhas de estilo.

Abra o menu Edit e clique em Preferences... ou simplesmente tecle Ctrl + U para abrir a janela de diálogo Preferences.
Na Category General, no conjunto dos checkboxes para Editing options, marque Use CSS instead ofHTML tags.

Com esta caixa marcada seu DW criará folha de estilos incorporada sempre que você formatar pelo inspetor Properties.
Se você desmarcar esta caixa não haverá criação de uma folha de estilos e a estilização será aplicada por tagsHTML.

No documento que você criou selecione todo o texto Cabeçalho 1 na janela de documento e no inspetor Properties ajuste os seguintes parâmetros:

  • Font: Arial, Helvetica, sans-serif;
  • Size: 36px;
  • Cor do texto: #FF0000 (vermelha)
  • Clique em B (bold) e I (italic).

Salve o documento e olhe na janela de código na tag <head> uma folha de estilo criada pelo DW e depois na tag <h1> uma classe aplicada (class="style1").
O DW vai criando as classes com o nome style e uma numeração sequencial.
TecleF12 para visualizar no browser.
.................................................................................
Agora tecle Ctrl + U e desmarque a caixa Use CSS intead ofHTML tags.

Selecione todo o texto Cabeçalho 2 na janela de documento e no inspetor Properties ajuste os seguintes parâmetros:

  • Font: Courier New, Courier, mono;
  • Size: 5;
  • Cor do texto: #0000FF (azul)
  • Clique em B (bold) e I (italic).

Salve o documento e olhe na janela de código na tag <head>, e constate que não houve acréscimo nas regras CSS.
Agora olhe na tag <h2> e compare com a tag <h1>
O DW aplicou estilos em <h2> com tags b strong ou b, i ou em, font, atributos.
Tecle F12 para visualizar no browser.

RESUMO: A ação que determina a criação ou não de uma folha de estilos incorporada pelo DW quando usamos o inspetor Properties e a marcação ou não do checkbox Use CSS instead of HTML tags no menu Edit =>Preferences ou tecla de atalho Ctrl + U.

Aplicando um estilo criado

Para aplicar um estilo já criado pelo DW proceda assim:

No documento que criamos, clique em qualquer lugar sobre o texto
Parágrafo 1 na janela de documento;
No inspetor Properties abra o menu Style e escolha Style 1. Salve o documento e tecle F12. O estilo que criamos para <h1> foi aplicado no Parágrafo 1.

Tecle Ctrl + U e marque a caixa Use CSS instead ofHTML tags.

Salve o documento

Nota: Sempre que criamos um estilo novo, o DW vai colocando seu nome Style 1, Style 2, Style 3. etc... no menu de lista de Style no inspetor Properties.

Removendo um estilo aplicado

Vamos ver agora como remover um estilo que tenha sido aplicado no documento.

1o. Caso - removendo estilo aplicado diretamente nas tags HTML:
Você deverá usar o inspetor Properties para esta ação.
No nosso documento de estudo é o caso do Cabeçalho 2.

Selecione todo o Cabeçalho 2 na janela de documento. (Clique no lado direito do texto e arraste para a esquerda)

No inpetor Properties altere:

  • Font: Default Font;
  • Size: None;
  • Color: Apague;
  • Bold: desmarque;
  • Italic: desmarque;

Salve o documento.

2o. Caso - removendo estilo aplicado por folha de estilo incorporada:

Você deverá usar o menu de lista Style no Properties para esta ação. No nosso documento de estudo é o caso do Cabeçalho 1.

Selecione todo o Cabeçalho 1 na janela de documento. (Clique no lado direito do texto e arraste para a esquerda)

No inspetor Properties abra o menu de lista Stylee altere:

Style: none;

Repita todo este procedimento para o Parágrafo 1 e remova o estilo aplicado.

O documento agora está com os 3 cabeçalhos e oa 3 parágrafos sem estilos, mas a folha de estilo incorporada continua dentro da tag <head></head>. Olhe na janela de código.
Para remover uma folha de estilo incorporada faça o seguinte:

Tecle Shift + F11 para abrir o painel Design no lado direito do DW;
No painel, clique na palavra Style para selecioná-la;
No lado direito e embaixo do painel clique no ícone latinha de lixo.
Isto remove a folha incorporada. Olhe na janela de código.

Salve o documento.

Trabalhando com o painel Design na aba CSS Styles

Vou mostrar, alguns caminhos, atalhos, menus e procedimentos gerais na interface do Dreamweaver para trabalhar com o painel Design na aba CSS Styles.

Este será o painel que usaremos ao longo dos cinco documentos a seguir que compõem este tutorial.
Para simplificar chamarei este painel de painel CSS Style em todo o tutorial

Para abrir o painel CSS Style proceda de acordo com uma das maneiras listadas a seguir:

  • Menu Window => CSS Style
  • Tecle Shift + F11;
  • Clique sobre um triangulozinho preto a esquerda do título Design no conjunto dos painéis.

Para mover o painel CSS Style clique sobre as duas pequenas linhas verticais pontilhadas no lado esquerdo do triangulozinho que existe antes da palavra Design, arraste e solte em qualquer lugar na tela.
Para colocar o painel de volta no lugar, basta arrastar para o lado direito da tela.

Para abrir o menu de lista do painel clique no ícone "lista" existente no canto superior direito do painel.

Screenshot ostra abrir e fechar o painel e seu menu

Estude e aplique o que você aprendeu

O documento que criamos no início deste tutorial e que denominamos testcss.htm agora está sem qualquer formatação e sem folhas de estilo.
Faça seus estudos aplicando estilos e repetindo os passos deste tutorial no documento.

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