O painel Styles do DWMX 2004 - 2a 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]
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]
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.