iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 28/10/2002 - 02:00 - Por Raphael Simas
Seções relacionadas:

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 0 comentários

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.

Todos os artigos de Raphael Simas

25/10/2005 - Criando texturas de sujeira 20/09/2005 - Regulagem de cor - Parte 02 17/08/2005 - Regulagem de cor e Fireworks 8 04/08/2005 - Fatiamento, conceitos e exportação 28/07/2005 - Pen Tool avançada e vetorização de carro 19/07/2005 - Fireworks Aqua 30/09/2003 - Dreamweaver MX 2004 09/09/2003 - Personalizando o Dreamweaver em detalhes - Parte II 25/08/2003 - Personalizando o Dreamweaver em detalhes 17/06/2003 - Planejamento do site 26/05/2003 - Mais 5 dúvidas freqüentes 12/05/2003 - Do Fireworks ao Dreamweaver 24/04/2003 - Janelas pop-ups hereditárias 07/04/2003 - Behavior Change Property 24/03/2003 - Trabalhando com textos HTML e textos em imagem 18/03/2003 - Dreamweaver / Fireworks: Fatiando, exportando e montando um HTM (Parte 25/02/2003 - Fireworks / Dreamweaver: Fatiando, exportando e montando um HTM (Parte 05/02/2003 - Frames 22/01/2003 - Atualizações dinâmicas com Frames, iFrames, SSI e Templates 08/01/2003 - Desmistificando os "erros" com Camadas 15/12/2002 - F.A.Q. - As 10 dúvidas mais frequentes 13/12/2002 - Especial Dreamweaver MX 13/12/2002 - Tutorial completo para a criação de menus pop-ups, tanto na vertical q 13/12/2002 - Criando botões aqua no Fireworks 10/12/2002 - Atalhos de Teclado (padrões e customizados) 03/12/2002 - Standard View - Layout View 11/11/2002 - Casa Virtual 04/11/2002 - CGI em formulários / CSS em formulários 04/11/2002 - CGI em formulários / CSS em formulários 28/10/2002 - CSS em Backgrounds 21/10/2002 - Navegadores de Imagens - Web Photo Album 14/10/2002 - Publicidade Flutuante 07/10/2002 - Change Options - Opções na compra Online de um Carro 30/09/2002 - Camadas vs. Tabelas - Parte 3 23/09/2002 - Camadas vs. Tabelas - Parte 2 16/09/2002 - Camadas vs. Tabelas 09/09/2002 - Re-leitura - Menus Pop-up 02/09/2002 - Timer 26/08/2002 - Menu mágico 19/08/2002 - Inserindo Medias AVI, MOV e MP3 no HTML 12/08/2002 - Mr. Help para formulários 05/08/2002 - Aplicações Timeline 29/07/2002 - iFrames - CSS em links 22/07/2002 - Jogo 15/07/2002 - Navigation Bar 08/07/2002 - Portais 01/07/2002 - Quebra-Cabeça com DragLayers e TimeLine 24/06/2002 - Explorando Formulários 17/06/2002 - Adaptando um site a várias resoluções 10/06/2002 - Usando Results para corrigir erros 03/06/2002 - Camadas Relativas / Camadas em Frames 27/05/2002 - Criando, Gravando e Editando Commands 20/05/2002 - Rolagem Horizontal com Time Line 12/05/2002 - Rolagem Horizontal 06/05/2002 - Guias com Camadas 29/04/2002 - Pequenas coisas que fazem um grande site - II 22/04/2002 - Pequenas coisas que fazem um grande site 15/04/2002 - Utilizando as Server-Side Includes (SSI) 08/04/2002 - Trabalhando com Templates/Modelos 25/03/2002 - DrawLayers (Camadas) - Parte 03 11/03/2002 - Trabalhando com DrawLayers (Camadas) 04/03/2002 - Uma visão geral sobre o Dreamweaver

0 comentários publicados

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Raphael Simas é Diretor de Arte da produtora Café Azul Mídia Digital e utiliza o Macromedia Fireworks como principal ferramenta para a criação para web.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

tecnologia mobile gerência publicidade apple linux design iphone mercado lançamento internet youtube celular photoshop crescimento seguranca microsoft 3g brasil desenvolvimento windows php ti google yahoo web

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!