TUTORIAIS DE DREAMWEAVER
 
Mover Background  
 

Mover o background (fundo) de uma página, dá um pouco de trabalho mas não é complicado.

 
Demo: Ver exemplo
 

Antes de começar com o Dreamweaver tens de pensar em alguns parâmetros:

  1. Tipo de imagem que vais escolher, isto é importante para o efeito que queres aplicar e apontar a sua largura e comprimento.
  2. O sentido do movimento do fundo (cima para baixo, esquerda para direita,...).
  3. A largura e altura da página html que irá ter o fundo a mover.
Imagem de fundo   1. Este exemplo tem esta imagem como padrão, tem 83px de largura e 79px de altura.
2. O sentido é de cima para baixo.
3. E a página terá 300px de largura e 200 de altura
 
Agora que já temos os parâmetros, pode-se abrir o Dreamweaver.

Comeces por criar uma layer (a sorte) na página.

Depois inseres uma tabela dentro da layer, esta tabela será constituída por uma única célula sem borders.

Como o movimento é de cima para baixo, a tabela deve ter uma largura igual a largura da página, neste caso 300px; a altura será igual a altura da página + altura da imagem, neste caso 200px+79px = 279px.

A imagem é inserida como imagem de fundo da tabela .

 
propriedades da tabela
 
Agora vais utilizar a layer onde está inserida a tabela, para posicionar o fundo e dar-lhe movimento.

Nas propriedades da layer alteres o "left" e o "top" para zero, isto é, L=0 e T=0, isto será a posição final da layer.

Com a layer seleccionada abres a janela da timeline (window > timline) e crias um objecto.

Seleccionas a 1ª keyframe (bolinha branca no objecto) que corresponde a posição inicial da layer, e nas propriedades alteras a posição da layer para T = - (altura da imagem) neste caso T= -79, para L permanece o valor 0; não te esqueças de activar o autoplay e o loop.

Para o efeito ser mais fluido, aumenta o tamanho do objecto até 60 frames, e a velocidade para 100 Fps.
 
Timeline do Fundo
 
Propriedades da layer no início (1ª keyframe):
 
Propriedades da layer no início (1ª keyframe)
 
Propriedades da layer no fim (2ª keyframe):
 
Propriedades da layer no fim (2ª keyframe)
 
Por: Sérgio Brandão
 

ANÚNCIOS

 



 
 
 
  Tutoriais | Fóruns de Discussão | Notícias | Jogos | Dicas | Flash | Downloads | Livros
Gifs Animados | Lojas Online | Publicitar no Truques e Dicas | Contactos