Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fundo Gradiente
Olá. Nesse Artigo iremos criar um fundo gradiente , igualmente ao do Site da Macromedia , e iremos usar as CSS (Folhas de Estilo em Cascata). Vamos lá?
Primeiramente vamos precisar ir ao Fireworks, e criar uma área de trabalho (canvas) com 1px de largura (width) e 1000px de altura (height). Após feito isso, faça um retângulo com as mesmas dimensões, borda transparente e no preenchimento usaremos o "Gradient Toll", colocando a cor #666666 para a mais escura e a cor #CECFCE para a mais clara . Mas você pode colocar qualquer cor. Só lembre-se de escolher uma cor segura , pois essa cor será a de fundo de nossa página.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.tutoriaismania.com.br/img/dreamweaver/coluna_06/imagem1.jpg&key=a052dccda32c4b1ff89b0bea0c2cf7425066e837162748fd04ac81f0da00ad4d" alt="Imagem Postada" />
Agora exporte a imagem no formato jpeg (gradient.jpeg) para a raiz de seu Site.
Agora vamos ao Dreamweaver. Crie o arquivo que você quer que tenha o fundo gradiente. Abra o Painel CSS Style e clique em nova.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.tutoriaismania.com.br/img/dreamweaver/coluna_06/imagem2.gif&key=ac3c7fdfb1cf0ac5964303be5a675281269965d3a23cb114afdd3bfb597ff5ae" alt="Imagem Postada" />
Escolha o "Selector Type" = Tag (redefines the look of a specific tag) iremos colocar um comportamento na tag <body> (corpo do documento). Marque a Tag = <body> e escolha se quer que esse comportamento atue somente nesse arquivo ("This document only") ou se quer criar uma CSS externa "New Style Sheet File". Eu criei uma CSS para esse arquivo. Agora clique em "OK".
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.tutoriaismania.com.br/img/dreamweaver/coluna_06/imagem3.gif&key=1917464d52736ba3bd81a6c51e45d47f033228b8b332576f8aab5806aa423444" alt="Imagem Postada" />
Na Category "Background", defina em: Background Color a cor mais clara de seu gradiente, no caso #CECFCE. Em Background Image, escolha o arquivo gradient.jpg criado e em repeat marque repeat-x (a imagem então se repetirá até preencher toda a página).
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.tutoriaismania.com.br/img/dreamweaver/coluna_06/imagem4.gif&key=8af90f87945b020933c85d5a6c15185795ec9e5fa62031a503c93cab2320e4db" alt="Imagem Postada" />
O Código CSS gerado em sua página será o seguinte:
<style type="text/css">
<!--
body {
background-color: #CECFCE;
background-image: url(gradient.jpg);
background-repeat: repeat-x;
}-->
</style>
Crie em seu arquivo html uma tabela com 1200px de altura e veja o resultado.
Note que no Painel "Relevant CSS" em "Tag Inspector", selecionando a tog <body>, no arquivo html , você tem acesso a CSS criada, podendo por ali, editá-la se for o caso. Essa é uma ótima novidade do DWMX 2004.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.tutoriaismania.com.br/img/dreamweaver/coluna_06/imagem5.jpg&key=d85a6e7756ecc4b7ecace33d6c9b808dd5e40354fa7b2b5649e773c1c45f27c5" alt="Imagem Postada" />
[]' Eloah Cristina
Equipe Tutoriais Mania - O Maior Site de Tutoriais da WEB.
www.tutoriaismania.com.br
Carregando comentários...