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

A estilização da lista ordenada <ol>

Na página padrão logo abaixo da imagem existe uma lista não ordenada <ul> aninhada dentro de uma lista ordenada <ol> que iremos estilizar a seguir:

Recordando:

1-) Se o painel Styles não estiver visível no Dreamweaver, 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-) Na caixa que se abre digite
Tag: ol - marque Tag (redefines the look of a especifc tag) e This document only;

4-) Clique OK e veja figura a seguir

Estilize <ol> adotando os seguintes parâmetros:

Clique OK.

---

A estilização da lista não ordenada <ul>

Observe no código que <ul> está dentro de <ol>, isto é:
<ul> é um elemento "filho" de <ol> (Ver FAQ - elemento filho)
E, aqui podemos aplicar a regra CSS no seletor contextual ol ul
(Ver FAQ - seletor contextual)

Clique OK.

Ver a estilização da lista na página padrão

---

A estilização da tag de imagem

Observe no código da página, que a tag de imagem <img> é um elemento filho de uma tag de parágrafo <p>
Vamos criar uma classe para esta tag <p> que contém a imagem.

Adotaremos o nome img-um para a classe. Vamos ao código da página acresentar a classe ao parágrafo.
Agora temos um seletor de classe. (Ver FAQ - Elemento nível de bloco)
Se você está reproduzindo os passos deste tutorial altere no código o seguinte:

O codigo atual:
<p><img src="cssnodw1.gif" alt="css no dw 1" width="208"
height="130" /></p>
A alteração a fazer:
<p class="img-um" ><img src="cssnodw1.gif" alt="css no dw 1" width="208"
height="130" /></p>

E agora vamos estilizar a classe .img-um para o parágrafo que contém a imagem.

Repita os passos 1 e 2 do item anterior e na caixa que se abre marque os parâmetros de estilização conforme mostrado na figura abaixo:

Ver a estilização da tag p da imagem na página padrão

---

Considerações sobre a estilização da tag p com a classe img-um

A tag <p> é um elemento nível de bloco. (Ver FAQ - Elemento nível de bloco)

Elementos nível de bloco funcionam em CSS como se fossem "caixas" e podemos colocar neles uma cor de fundo, bordas, paddings, margins, bem como definir uma altura e uma largura. (Ver "caixas" CSS)

A tag img é um elementoHTML inline (Ver FAQ - Elemento nível de bloco)

Observe que criamos para a imagem uma "caixa" na cor rosa #FFCCCC, com padding em cima e em baixo de 15px para que a imagem dentro dela "desgrudasse" das bordas superior e inferior. Também definimos um padding a esquerda de 100px e uma largura de 330px para a caixa.
Ao definirmos text-indent igual a zero, anulamos o text-indent igual a 20px, que está definido para todos os parágrafos na regra CSS para parágrafos definida anteriormente. (Ver FAQ - herança CSS )

Para melhor entender as estilizações de elementos em bloco faça uma cópia desta etapa das estilizações e vá alterando as regras CSS para a classe .img-um uma de cada vez e visualizando o efeito no brownser.
Comece alterando os valores adotados neste tutorial e depois acresente outras regras.

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