Banner propaganda da DevMedia - Cursos de desenvolvimento web

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]

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