Voltar para o site

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

Editando e exportando estilos

Nesta última parte do tutorial mostrarei como modificar um estilo criado no Dreamweaver bem como exportar uma folha de estilos que foi criada incorporada e depois lincá-la a um documento existente.

Na nossa página padrão que foi criada ao longo das quatro partes anteriores deste tutorial chegamos a um painel de estilos conforme mostado na figura a seguir:

Screenshot do painel styles com todas as classes e elementos que foram estilizados

Observe no painel Layers a relação de todas as regras de estilo que estabelecemos para a página.

Editando a estilização para a tag <h2>

Se o painel CSS Styles não estiver visível, tecle Shift + F11;

1-) Clique sobre a tag h2 no painel CSS Style para selecioná-la ;

2-) Clique no ícone com um lápis para abrir a caixa de diálogo CSS Style definition for h2;

Screenshot do painel styles mostrando como abrir os estilos aplicados em h2

Na caixa altere os valores em Category - Type para:

  • Font: Arial, Helvetica, sans-serif;
  • Color: digite #663300 (cor marron);
  • Style: italic.

Editando a estilização para a tag <p><img>

A tag <p> que contém a imagem foi estilizada com a classe .img-um;

Vamos editar e modificar as regras de estilo para aquela classe, mas usaremos um caminho diferente daquele que mostrei acima.
Modificaremos o background e acresentaremos uma borda.

  1. No painel CSS Styles dê um duplo clique em cima da classe .img-um ou simplesmente tecle F9;
    Com esta ação você vai abrir um novo painel como mostrado no número 1 (um) da figura abaixo.
  2. Clique no sinalzinho de + ao lado de Background para expandir as regras CSS;
  3. Clique sobre a cor atual e altere para #CCCCCC;
  4. Clique no sinalzinho de - ao lado de Background para fechar as regras CSS;
  5. Clique no sinalzinho de + ao lado de Border para expandir as regras CSS;
  6. Clique no campo ao lado direito da palavra border e digite solid #FF0000 2px;(uma borda contínua, vermelha de 2px)
  7. 5 - Clique no sinalzinho de - ao lado de Border para fechar as regras CSS;

Clique no triangulozinho preto a esquerda de >Rule ".img-um" (ver no canto superior esquerdo da figura abaixo) para fechar o painel.

Screenshot do painel styles mostrando como alterar os estilos da classe .img-um

Ver a nova estilização de <h1> e de .img-um

Criando uma folha de estilos externa

Ao longo deste tutorial criamos uma folha de estilos incorporada ao documento e isto foi por nós definido quando no painel de estilos marcamos a opção "This document only";
Para fazer mudanças ou mesmo manutenção no seu documento, você deverá editar a folha de estilos no próprio documento.

Agora imagine que você pretende utilizar folha de estilos que você acaba de criar em vários documentos. Neste caso é mais conveniente adotar folhas de estilos lincadas.

Ver um tutorial sobre maneiras de vincular folhas de estilos a documentos

O Dreamweaver permite criar um arquivo externo de uma folha de estilos incorporada e depois importar este arquivo para o documento.

Vejamos como fazer isto:

Com o documento que contém a folha de estilos incorporada tecle Shift + F11 para abrir o painel CSS Styles;
Clique no ícone do canto superior direito do painel para abrir um menu de contexto;

Screenshot mostrando como abrir o menu do painel style

No menu que se abre escolha Export
Escolha um diretório dê um nome para o arquivo e salve. Eu escolhi o nome estilo

Agora você acaba de criar um arquivo de folha de estilos externa chamado estilo.css (ou o nome que você escolheu.css)
Abra com o Dreamweaver o arquivo que você acabou de criar e observe-o com cuidado.

Anexando uma folha de estilos externa

Agora que criamos uma folha de estilos externa vamos anexá-la a um documento:

Estando no documento cuja folha de estilos incorporada você exportou, clique no ícone do canto superior direito do painel para abrir um menu de contexto;

Screenshot mostrando como abrir o menu do painel style

No menu que se abre escolha Delete ;
Você acaba de apagar a folha de estilos incorporada e o seu documento "perdeu" toda a estilização.
Confira teclando F12 para visualizá-lo no brownser.

Vamos agora lincar a folha e recuperar a estilização:

Clique no ícone do canto superior direito do painel CSS Styles para abrir um menu de contexto;
No menu que se abre escolha Attach Style Sheet;
Abre-se uma caixa de diálogo conforme mostrada na figura abaixo;
Clique em Browse e procure a folha que salvou conforme acima explicado;
Marque a opção Link e clique OK.

Screenshot mostrando como lincar um estilo criado

Agora a estilização voltou ao documento.
Olhe no código fonte da página dentro da tag <head></head>para ver a folha de estilo lincada no documento assim:
<link href="estilo.css" rel="stylesheet" type="text/css" />

O editor de estilos do Dreamweaver

Conforme você acompanhou ao longo deste detalhado tutorial o Dreamweaver MX2004® vem com um
Editor de Folhas de Estilos bastante completo e poderoso.

Neste tutorial mostrei os comandos básicos para utilização do editor.
Com um pouco mais de estudo e praticando você descobrirá outras facilidades e possibilidades do paine CSS Style.
Pratique, pratique e pratique porque se você acompanhou e entendeu este tutorial já está bem adiantado em direção ao domínio de uma das inúmeras fantásticas ferramentas do seu DW.

[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.

topo