Olá pessoal!

Em resposta a inúmeros emalis, escrevo uma coluna sobre adaptações de uma mesma figura à várias situações de fundo para tabelas. Então, lá vai!

Painel CSS no Dreamweaver MX:
Antes de falar sobre o CSS, vamos nos localizar dentro do Dreamweaver. Veja na figura abaixo o painel CSS:

---------------------------------------------------------------
A Guia "CSS Styles" fica no painel "Design". Por esta tela, criaremos nossos CSS e os aplicaremos ao HTM.
---------------------------------------------------------------

- Criando um CSS:
Para criar um CSS, é muito fácil e rápido, dentro das opções disponibilizadas pelo Dreamweaver.
Clique no ícone "New CSS Style" (ícone da folhinha com um +). Uma nova tela aparecerá. Veja abaixo:



No Campo "Name", você indicará o nome do seu CSS, lembrando que não se deve apagar o ponto (.) na frente do nome.
Nas opções "Type" você definirá como quer criar o estilo (usando nomes prontos etc...).

Em "Define In", você decidirá se o CSS será configurado dentro do próprio HTM ou se será salvo e carregado de um arquivo separado, fora do HTM.

Indicando todos as informações, vamos para a nova tela após clicar em "OK".

Veja abaixo a nova tela:



Veja que você tem duas partes na tela: Em "Category", você indica que tipo de css quer fazer como tipos de fonte, fundo, borda etc... a segunda parte, aparece quando você seleciona alguma categoria e então, será mostrada na direita. Vale lembrar que você pode modificar várias categorias no mesmo CSS.

Após então, clique em "OK". Automaticamente, o nome do CSS estará disponível no painel. Para aplicá-lo, basta selecionar o texto ou objeto e clicar em cima do nome do CSS.

Vamos agora, para as configurações de posicionamento para um Background.
Veremos:

- Fundos que não se repetem
- Fundos que se repetem apenas na horizontal
- Fundos que se repetem apenas na vertical
- Fundos alinhados à esquerda
- Fundos alinhados ao centro horizontal
- Fundos alinhados à direita
- Fundos alinhados ao topo
- Fundos alinhados ao centro vertical
- Fundos alinhados à base

- Fundos que não se repetem:
Para fazer um fundo que não ser repete, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - O Código será:



04 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos que se repetem apenas na horizontal:
Para fazer este tipo de fundo, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo se repetirá no eixo "X", ou seja, na horizontal.
03 - O Código será:



04 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos que se repetem apenas na vertical:
Para que o fundo se repita apenas na vertical, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo se repetirá no eixo "Y", ou seja, na vertical.
03 - O Código será:



04 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados à esquerda:
Para alinhar o fundo à esquerda, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento Horizontal, que será para a esquerda.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados ao centro horizontal:
Para alinhar o fundo ao centro horizontal, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento central na horizontal.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados à direita:
Para alinhar o fundo à direita, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento à direita.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados ao topo:
Para alinhar o fundo ao topo, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento vertical para o Topo.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados ao centro vertical:
Para alinhar o fundo ao centro vertical, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento vertical para o centro.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

- Fundos alinhados à base:
Para alinhar o fundo à base, o CSS será este:



---------------------------------------------------------------
01 - A Demarcação Verde indica o lugar da imagem do fundo.
02 - A Demarcação Laranja indica que o fundo não se repetirá.
03 - A Demarcação Azul indica o posicionamento vertical para a base.
04- O Código será:



05 - Veja AQUI o exemplo
---------------------------------------------------------------

---------------------------------------------------------------
EXEMPLOS
01 - Baixe AQUI todos os exemplos usados na coluna.

ALINHAMENTO NUMÉRICO
01 - Além destas opções para os alinhamentos Horizontal e vertical, você poderá definir valores numéricos em Px, %, inches, cm etc...
---------------------------------------------------------------

É isso pessoal. Continuem mandando seus emails com dúvidas, sugestões, críticas etc... Até a próxima semana com mais um tema!

Dica de Áudio:
Álbum: The Corrs Unplugged
Artista: The Corrs
Comentários: Ótimo acústico da banda, feito pela MTV americana... muito bom. Tem até uma releitura de um clássico de Hendrix, Little Wing.