Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais


Dica No :
418
Assunto : DreamWeaver
Titulo: Aplicando efeitos nos objetos Layers no Dreamweaver:

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :

Translate this page now :






Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon


As Layers ou camadas no Dreamweaver tem como principal função, organizar a disposição dos nossos objetos na página.

Para utilizá-las basta clicarmos sobre a opção layers e desenhá-la no local desejado.

Normalmente apenas esse procedimento nos basta, mas se quisermos colocar uma borda nessa camada ou aplicarmos um estilo, como por exemplo, um efeito de iluminação?

Para isso, é preciso editarmos o código em HTML gerado ao utilizarmos as camadas do Dreamweaver.

Dessa maneira, após desenhar a camada, selecione-a e clique no botão Quick Tag Editor que se encontra no canto à direita da Barra Properties, irá aparecer um código semelhante a esse abaixo:

<div id="Layer1" style="position:absolute; left:29px; top:42px; width:109px; height:274px; z-index:1">

Entendendo o mesmo:

Div Id=”layer1” – refere-se ao nome da layer utilizada, se não for dado outro nome o próprio programa numera de acordo com a criação de cada uma;

Style=”position:absolute; - refere-se a posição da layers, que irá ser expressa nos parâmetros: Left:29 px – top:42px (indicando a posição a esquerda e superior da camada);

Width: 109 px e Height: 274 – referem-se, respectivamente, à largura e altura da layer;

E, por último – Z-index:1 – que se refere a ordem de posicionamento da mesma.

Entendido o código, podemos agora acrescentar os parâmetros que irão ser responsáveis pela colocação de bordas e efeitos na layers.

Digite logo após z-index:1
;border:2px double #000000;filter:glow(color=#663300,,strength=3,enabled=3)”>

Ficando o resultado final com a seguinte disposição:

<div id="Layer1" style="position:absolute; left:29px; top:42px; width:109px; height:274px; z-index:1; border:2px double #000000;filter:glow(color=#663300,strength=3,enabled=3)">

Onde:
Border:2px double #000000 – refere-se a espessura e cor de borda desejada
E Filter:glow(color=#663300,strength=3,enable=3) – referem-se, respectivamente, ao tipo de efeito – Glow (simula iluminação neon) , podendo ser trocado por Shadow (aplica uma sombra); Força – Strength (o quão forte vai ficar em torno da layer) e o enevoamento - Enable (quanto maior o número, mais enevoada ficará a borda da layer).

É importante frisar que:
1) Esse efeito será aplicado na camada e no que nela estiver contido;
2) Não é possível a visualização dentro do Dreamweaver, sendo necessário ver o resultado final no navegador.

Patricia Daltro


Agora na Búfalo, Treinamento de Webdesign!
Informações pelos telefones 2262-1368 e 2220-2586.

Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 11/28/2017 7:36:00 AM
nome: EyxZAflKehIeHoheXB
email: jimosanil0c@hotmail.com
comentário:
wBRtHG http://www.LnAJ7K8QSpfMO2wQ8gO.com

data: 2/1/2017 12:49:00 AM
nome: hVvzqohxWxoT
email: derby451@hotmail.com
comentário:
aHn7MM http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/31/2017 6:49:00 PM
nome: rfYFfJYKAGbTxgLbu
email: derby451@hotmail.com
comentário:
SZILXs http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 11:52:00 PM
nome: AfyugqXEkKolSG
email: derby451@hotmail.com
comentário:
PpdIyJ http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 10:44:00 PM
nome: ULuRabyYUoHa
email: jogcbfn@hotmail.com
comentário:
BjNVMC http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br