O painel Styles do DWMX 2004 - 1a Parte
Publicado em: 10/08/2004Finalidade
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.
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.
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
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>.
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>.
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®
Ir para a página de entrada nos sites dos livros.
