Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

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