Curso Fundacao Rede Amazonia Macro Media Fireworks MX

CENT RO DE I NF O RM ÁT I CA
Sumário
1. INTRODUÇÃO AO FIREWORKS MX............................................................................ 5

2. Conhecendo os tipos de Imagens Digitais.............................................................................. 5
3. Interface do Fireworks MX .................................................................................................... 5
4. Modos de Trabalho................................................................................................................. 6
5. Réguas .................................................................................................................................... 6
6. Grade ...................................................................................................................................... 6
7. Guias....................................................................................................................................... 7
8. Conhecendo nossas ferramentas............................................................................................. 7
9. Criando um novo documento ................................................................................................. 8
10. Painéis .................................................................................................................................. 8
10.1 Painel Histórico .............................................................................................................. 8
10.2 Painel camadas ............................................................................................................... 8
11. Vamos trabalhar um pouco com camadas............................................................................ 9
12. Exercícios ............................................................................................................................. 9
13. Trabalhando efeitos de preenchimento ................................................................................ 9
15. Aplicando efeitos avançados.............................................................................................. 12
16. Exercícios ........................................................................................................................... 13
17. Trabalhando com textos ..................................................................................................... 14
17.1 Aprendendo outros efeitos com texto........................................................................... 15
18. Combinando formas simples.............................................................................................. 16
19. Desenhando uma estrela..................................................................................................... 17
20. Trabalhando com imagens Bitmaps ................................................................................... 17
20.1 Importando uma imagem ............................................................................................. 17
20.2 Modificando o tamanho da imagem e da tela .............................................................. 18
20.3 Usando a ferramenta Varinha mágica .......................................................................... 19
20.4 Alterando cor de uma imagem bitmap ......................................................................... 20
21. Exercícios ........................................................................................................................... 20
22. Trabalhando com máscaras ................................................................................................ 20
23. Trabalhando com Pontos ativos e Fatias ............................................................................ 22
23.1 Criando pontos ativos................................................................................................... 22
23.2 Camada da Web ........................................................................................................... 23
23.3 Ligando paginas ao ponto ativo ................................................................................... 23
23.4 Usando o painel URL................................................................................................... 24
23.5 Ferramenta Fatia........................................................................................................... 25
23.6 Criando fatias ............................................................................................................... 25
24. Fireworks MX e Java Script............................................................................................... 26
24.1 Comportamentos .......................................................................................................... 26
24.2 Painel comportamento.................................................................................................. 26
25.Trabalhando com Molduras (frames).................................................................................. 27
26. Exercícios ........................................................................................................................... 30
27. Criando botões.................................................................................................................... 30
28. Estados de um botão........................................................................................................... 31
28.1 Estado Acima ............................................................................................................... 31
28.2 Estado Sobre................................................................................................................. 31
28.3 Estado Abaixo .............................................................................................................. 31
28.4 Estado Sobre durante o estado Abaixo......................................................................... 31
1
28.5 Área ativa ..................................................................................................................... 31

29. Editor de botões do Fireworks MX .................................................................................... 31
30. Criando menus Pop-up ....................................................................................................... 32
30.1 Adicionar menu ............................................................................................................ 33
30.2 Excluir menu ................................................................................................................ 33
30.3 Recuar o menu para fora .............................................................................................. 33
30.4 Recuar Menu ................................................................................................................ 33
31. Dicas do Fireworks MX ..................................................................................................... 34
31.1 Menu Comandos .......................................................................................................... 34
31.2 Menu Modificar........................................................................................................... 35
31.3 Criando Animações ...................................................................................................... 35
32. Exercícios ........................................................................................................................... 35
33. Exportando uma imagem ................................................................................................... 35
34. Painel Otimizar................................................................................................................... 36
35. Visualizar Exportação ........................................................................................................ 37
36. VISÃO GERAL DO FLASH MX ................................................................................... 42
37. Conhecendo a Área de Trabalho do Flash ......................................................................... 42
37.1 Barra de Ferramentas ................................................................................................... 42
37.2 Ferramentas Auxiliares da Seta.................................................................................... 43
37.3 Ferramentas Auxiliares do Laço .................................................................................. 44
37.4 Ferramenta Auxiliares do Texto................................................................................... 44
37.5 Ferramentas Auxiliares da Oval................................................................................... 44
37.6 Ferramentas Auxiliares do Retângulo .......................................................................... 44
37.7 Ferramentas Auxiliares de Lápis.................................................................................. 45
37.8 Ferramentas Auxiliares do Pincel ................................................................................ 45
37.9 Ferramentas Auxiliares de Balde de Tinta ................................................................... 45
37.10 Ferramenta Auxiliares da Borracha............................................................................ 45
37.11 Cenas e Símbolos ....................................................................................................... 46
37.12 Quadros – Frames....................................................................................................... 46
38. Criando Animações ............................................................................................................ 46
38.1 Movimentando Objetos ................................................................................................ 46
38.2 Efeito Alpha ................................................................................................................. 47
38.3 Adicionar Camada Guia ............................................................................................... 47
38.4 Efeito Morphing ........................................................................................................... 48
38.5 Efeito Morphing Com Palavras e Objetos.................................................................... 49
38.6 Efeito Morphing Específico ......................................................................................... 49
38.7 Efeito Rotação .............................................................................................................. 50
38.8 Clip De Filme ............................................................................................................... 51
39. Máscaras............................................................................................................................. 51
40. Ações do Flash – A Parte Programável do Aplicativo....................................................... 53
41. Usando a Ajuda do Flash ................................................................................................... 54
41.1 Guia para Mídia Instrutiva ........................................................................................... 54
41.2 As aulas e o Tutorial do Flash...................................................................................... 54
41.3 Usando o Flash e Guia de Referência do Actionscript................................................. 54
41.4 Ajuda do Flash ............................................................................................................. 55
42. INTRODUÇÃO AO DREAMWEAVER MX ............................................................... 57
43. Conhecendo a Área de Trabalho ........................................................................................ 57
43.1 Barra de Título ............................................................................................................. 58
43.2 Guias............................................................................................................................. 58
43.3 Guia Common .............................................................................................................. 58
2
43.4 Barra de "Edição do Documento" ................................................................................ 58

43.5 Painéis .......................................................................................................................... 59
43.6 Área de Desenvolvimento ............................................................................................ 59
43.7 Barra "Inspetor de Propriedades" ................................................................................. 59
44. Tipos de páginas................................................................................................................. 59
44.1 Configuração de Páginas.............................................................................................. 60
45. Formatação de Texto.......................................................................................................... 60
46. Tabelas ............................................................................................................................... 60
47. Imagens .............................................................................................................................. 61
47.1 Imagens Interativas ...................................................................................................... 61
48. Links................................................................................................................................... 62
49. Mídias................................................................................................................................. 63
49.1 Botões Flash ................................................................................................................. 63
49..2 Texto Flash.................................................................................................................. 64
50. Layers ................................................................................................................................. 65
51. Janela Popup....................................................................................................................... 65
52. Formulários ........................................................................................................................ 66
53. Templates ........................................................................................................................... 72
53.1 Criando Páginas à Partir do Template.......................................................................... 73
53.2 Modificando um Template ........................................................................................... 74
54. Frames ................................................................................................................................ 75
55. Criando Âncoras................................................................................................................. 75
56. Trabalhando com Java Script no Dreamweaver................................................................. 77
57. Mapeando Imagens ............................................................................................................ 83
58. Configurando FTP no Dreamweaver ................................................................................. 85
58.1 O que é FTP?................................................................................................................ 85
3
4
1. INTRODUÇÃO AO FIREWORKS MX
Fireworks MX é uma aplicação versátil para Web designers, que possui uma
grande variedade de ferramentas, que permitem facilmente a criação de gráficos
VETORIAIS e/ou BITMAPS (mapas de bits), efeitos visuais para web como rollovers
(rolar sobre), barra de navegação, mensagens em barra de status, menus de
controle. Permite que você crie áreas ativas dentro de uma imagem usando ou não o
conceito de Slices (divisão da imagem), e ainda que você salve suas criações nos
formatos de imagens mais usados na Internet, JPG, GIF e PNG.
Com o Fireworks MX você pode ainda criar layouts completos para home
pages, imagens animadas entre outros.
Ao contrário de outros softwares para criação de imagens, como por exemplo o
Adobe PhotoShop e Corel PhotoPaint, o Fireworks MX é utilizado apenas para
criação de gráficos para web, e não para mídia impressa, por isso, trata-se de uma
ferramenta de fácil utilização, além de possuir total compatibilidade com outras
ferramentas como Dreamweaver MX e o Flash MX.
2. Conhecendo os tipos de Imagens Digitais
Com o Fireworks MX você pode criar dois tipos de imagens: vetoriais e

bitmaps. Pode também editar imagens feitas por outros aplicativos, apenas
importando-as.
Imagens vetoriais são formas geométricas desenhadas pelo computador,
através de cálculos matemáticos, e que por isso, possibilitam uma grande facilidade
de controle, criação. Permite que você crie vários formatos de formas, como círculos,
quadrados, estrelas etc.
Imagens bitmaps ou mapas de bits são formadas por um conjunto de pontos (pixels)
que assumem suas propriedades de cor, que se agrupam dando origem a uma
imagem, esse tipo de imagem não permite que você tenha um controle total sobre
suas formas, mas com o Fireworks MX, você conseguirá alterar algumas de suas
propriedades. Os tipos de imagens mais utilizados na web são: JPEG e PNG que
permitem uma ótima qualidade na imagem em troca de um arquivo pequeno, GIF
que apesar de tem menos qualidade, permite que você crie animações e imagens
com efeitos de transparência.
3. Interface do Fireworks MX
A área de trabalho do Fireworks MX inclui:
5
4. Modos de Trabalho
O Fireworks MX possui 2 modos básicos de trabalho, o modo Objeto, onde

são criados todos os objetos vetoriais, e o modo Bitmap, para trabalho com imagens
prontas vindas de outras aplicações ou convertidas através do próprio Fireworks MX.
Você poderá identificar o modo de trabalho em que está atualmente
trabalhando simplesmente observando o botão Sair do modo Bitmap.
Caso ele esta ativado, quer dizer que você está trabalhando no modo de
edição ou criação de imagens bitmap. Para voltar a trabalhar em modo vetorial,
basta dar um clique com o mouse sobre este botão. Lembrando que, em modo
bitmap, você não poderá criar objetos vetoriais e vice-versa.
5. Réguas
Caso você necessite de ajuda, poderá contar com a ajuda de réguas, que
facilitarão a criação de imagens com precisão em suas dimensões. Para exibir ou
ocultar as réguas, selecione o menu Exibir -> Régua. Observe que,
independentemente da unidade de medida do documento, as réguas sempre exibem
pixels.
6. Grade
A grade é um plano de fundo de linhas horizontais e verticais que você pode
utilizar para posicionar seu trabalho, facilitando o trabalho de diagramação.
1. Escolha o menu Exibir -> Grade - > Mostrar Grade para ativar.
6
2. Escolha novamente a mesma opção para desativar.

3. Caso você selecione Encaixar na Grade no menu Exibir -> Grade, ao
arrastar um objeto para perto de uma linha de grade o objeto será atraído
para a grade.
7. Guias
Utilize guias que, como a grade, são linhas não exportáveis, para alinhar e
posicionar objetos com precisão.
1. Escolha o menu Exibir -> Guias -> Mostrar Guias para exibir ou ocultar as
guias.
2. Para adicionar uma guia, as réguas devem estar visíveis. Arraste as guias
a partir da régua vertical ou horizontal, pressionando o mouse sobre a
régua, e arrastando-o ainda pressionado para cima da imagem.
3. Clicando sobre o menu Exibir -> Guias -> Encaixar nas Guias fará com que os
objetos sejam atraídos para a guia.
8. Conhecendo nossas ferramentas
Ponteiro Subseleção
Dimensionar Cortar
Moldura da caixa de seleção

Laço
Varinha mágica
Pincel
Lápis
Borracha
Embaçar Carimbo
Conta-gotas Lata de tinta
Linha
Caneta
Retângulo Texto
Forma livre Faca
Ponto ativo retangular Fatia

Ocultar fatias e pontos ativos Mostrar fatias e pontos ativos
Cor de contorno
Cor de preenchimento
Definir cores padrão traço/preenchimento
Trocar cores traço/preenchimento
Nenhum traço ou preenchimento
Modo tela cheia
Modo de tela padrão
Modo tela cheia com menus
Mão
Zoom
7
9. Criando um novo documento
Para criar um novo documento de imagem vetorial, selecione a opção Novo

através do menu Arquivo. O Fireworks MX apresentará a seguinte tela:
Nesta tela, você poderá definir opções como largura, altura, cor do fundo.
Lembrando sempre de trabalhar com pixels como unidades de medida.
10. Painéis
O Fireworks MX possui vários painéis à direita da tela que permitem que
você altere as propriedades dos objetos e imagens. Você pode acessar esses
painéis selecionando no menu Janela ou através das janelas ancoradas no Grupo de
Painéis.
10.1 Painel Histórico

Você poderá usar o painel Histórico (menu Janela -> Histórico) para desfazer
ou refazer a ultimas ações realizadas na criação do seu trabalho. Embora possa ser
alterado, o Fireworks MX traz como padrão, 20, o número de ações que serão
registradas nesse painel.
10.2 Painel camadas

No Fireworks MX, todos os objetos ficam organizados em camadas, como se cada
figura e/ou objeto fossem feitos em folhas separadas e sobrepostas para visualizar o
resultado. Estas camadas são visualizadas através do painel Camadas, que pode
ser acessado pelo menu Janela -> Camadas. Com o painel aberto, você poderá
gerenciar todos os objetos contidos na sua área de documento, e trabalhá-los,
organizando ou selecionando para alguma alteração.
Nome da camada
Mostrar / Ocultar Camada
Editar / Bloquear Camada Nova Imagem Bitmap
Camada Nova / Duplicada

Apagar seleção
Adicionar Máscara
8
11. Vamos trabalhar um pouco com camadas
1. Crie um novo documento medindo 300x300.

2. Habilite o painel Camadas.
3. Clicando duas vezes em cima do nome camada1
você poderá alterar o nome dessa camada.
Altere para “texto”.
4. Pegue a ferramenta Texto no painel de
ferramentas, e digite “Trabalhando com
camadas!!”.
5. No painel Camadas, clique uma vez sobre o
botão Camada Nova / Duplicada para criar uma
nova camada.
6. Altere o nome dessa camada para “retângulo”. E teremos agora, duas
camadas no nosso trabalho.
7. Agora selecione a camada “retângulo” e desenhe um retângulo cobrindo
totalmente a frase escrita.
8. Veja que a camada “retângulo” está acima da camada “texto”, fazendo com
que o texto fique atrás do retângulo.
9. Agora pressione o botão esquerdo do mouse sobre a camada “texto”, e
arraste-a para cima da camada “retângulo”, você verá que o texto ficará agora
sobre o retângulo.
12. Exercícios
1. Quais os tipos de imagens que o Fireworks MX trabalha, e quais as suas

diferenças?
2. Quais fatores afetam o desempenho de uma imagem na web?
13. Trabalhando efeitos de preenchimento
No Fireworks MX você pode personalizar todos os seus objetivos vetoriais

aplicando a eles, vários tipos de efeitos de preenchimento, que vamos conhecer a
partir de agora.
Para começar, selecione a ferramenta retângulo no painel de ferramentas, dê um
clique com o mouse sobre o botão Cor de Preenchimento, ainda no painel de
ferramentas. Ao clicar, abrirá a seguinte tela:
Paleta de cores
Com o mouse correndo sobre as cores, você poderá ver a cor selecionada
no quadro acima, e ao lado do mesmo, o código hexadecimal da respectiva cor. Para
9
selecionar a cor desejada, basta dar um clique com botão esquerdo do mouse sobre
a mesma. E criar o seu retângulo na área do documento.
Dessa forma, estaremos colocando no retângulo, um preenchimento
chamado sólido. Selecionando o retângulo, podemos ver na barra de Propriedades
(logo abaixo na tela), as seguintes opções:
Opções de Preenchimento
Tipo do objeto
Dimensões
Posição
Quando clicamos na caixa de rolagem nas opções de

preenchimento, veremos um menu como o visto ao lado,
listando os vários tipos de efeitos pré-definidos de
preenchimentos:
Veja que o menu está dividido em 2 partes, onde na
primeira encontramos a opção sólido, que já sabemos como
é.
Abaixo da linha pontilhada, encontramos as opções
de preenchimento Degradê, o vai nos interessar nesse
momento.
Veremos passo a passo como configurar um efeito degradê,
do tipo linear, ficando com você a responsabilidade de
conhecer como os outros tipos se comportarão dentro de um
objeto.
Então, para começar, vamos selecionar a opção linear, e ver o que acontece
de imediato. Pronto!! Já começamos a mudar nosso retângulo.
Se tudo estiver correto, deve ter acontecido o seguinte efeito:
Podemos perceber que o preenchimento do retângulo está saindo de uma

cor e chegando em outra.
Clicando agora na caixa de opções de cores na barra de propriedades,
veremos a seguinte tela:
Clicando sobre a setinha na caixa Predefinição, poderemos escolher um

efeito de preenchimento pronto para ser usado.
10
Caso queira testar outras configurações de cores, basta clicar sobre os

“potinhos” de tinta que aparecerá mais uma vez todas as amostras de cores, que já
conhecemos.
Selecionando então uma outra cor, alteraremos o nosso efeito. Caso você
queira diminuir a área de transferência de uma cor para outra, basta clicar sobre o
potinho de tinta e arrastá-lo para a posição desejada.
Você também poderá adicionar outros potes de tinta na trilha do degradê,
apenas clicando ao lado de um dos já existentes, e poderá removê-los clicando com
o mouse sobre eles e arrastando-os para qualquer área abaixo da linha de cor.
Pronto, assim concluímos o efeito de degrade do tipo linear, agora, crie
novos objetos e experimente as outras opções de preenchimento.
Texturas
Podemos ainda adicionar outros efeitos ao preenchimento dos nossos
objetos chamados de Textura.
As texturas podem ser aplicadas em qualquer tipo de preenchimento, sólido
ou qualquer uma das variações do efeito degrade. Para adicionar uma textura, basta
selecionar o objeto, já com a cor de preenchimento definida, e, na barra de
propriedades, clicar sobre a guia de opções Textura. Quando clicar, o Fireworks MX
mostrará a você uma lista com várias opções de texturas para serem aplicadas, e ao
lado do nome, mostrará um exemplo do resultado final que aquela opção
selecionada trará ao objeto.
Logo ao lado da caixa de opções de texturas, existe uma outra caixa com o
nível de transparência da textura, onde, aumentando o valor até 100%, a textura
sobre o objeto ficará no seu nível máximo de visibilidade. Para retirar a textura, basta
levar esse nível até o valor zero.
14. Trabalhando efeitos de contornos

Bem, agora que já sabemos como modificar as cores de preenchimento de
um objeto, iremos também aprender a modificar o seu contorno.
Para trabalhar esses efeitos, usaremos um circulo sem cor de
preenchimento, para que possamos visualizar melhor os efeitos desejados, porém,
não quer dizer que não podemos utilizar os dois tipos de efeitos (preenchimento e
contorno) ao mesmo tempo e no mesmo objeto.
Com o circulo desenhado e selecionado, teremos na barra de propriedades,
a seguinte configuração:
11
Tipo do contorno
Cor do contorno
Espessura do contorno
Opções de textura
Nestas opções podemos configurar vários tipos de bordas para o nosso

objeto e deixá-lo com uma nova aparência. Você poderá agora, trabalhar e descobrir
novos efeitos para os seus objetos. Poderá também adicionar texturas aos contornos
fazendo da mesma forma como aprendeu a colocar no preenchimento.
15. Aplicando efeitos avançados
Podemos através da barra de propriedades adicionar também efeitos mais

avançados aos nossos objetos, como sombras ou relevos entre outros.
Veremos a seguir a aplicação de um efeito do tipo sombra, ficando com você
novamente, a opção de experimentar e conhecer os outros efeitos disponíveis.
Bem, para começarmos, criaremos um retângulo, e com ele selecionado,
iremos até a barra de propriedades, na opção Efeitos e clicaremos no botão
(Adicionar efeitos) e veremos o menu a seguir:
A partir deste menu, iremos com mouse na opção Sombra e brilho e

selecionaremos a nova opção Aplicar sombra.
Teremos como resultado o seguinte efeito sob o nosso retângulo:
E, na barra de propriedades teremos estas novas opções:

Opacidade
Suavidade
Distância
Ângulo
Cor
12
E nesta tela que podermos configurar o nosso efeito atrás do resultado

desejado. Para todos os outros efeitos, serão apresentados caixas de propriedades
semelhantes a essa.
Caso essa tela desapareça, não se preocupe,
podemos voltar a ela a qualquer momento, basta notar que
na nossa barra de propriedades na caixa efeitos, temos
agora um efeito listado, como na figura ao lado.
É nesta caixa que estarão listados todos os efeitos
avançados que aplicarmos no nosso objeto, neste caso, no retângulo. Note que ao
lado do nome do efeito Aplicar sombra existem dois botões, se clicar no botão
(Editar e organizar efeitos) voltaremos a tela anterior de edição das propriedades do
efeito; se clicarmos sobre o botão desmarcando-o, poderemos aplicar ou remover
o efeito ao objeto selecionado.
Voltando a caixa de edição de propriedades do efeito, vamos até a opção
posição, e se mudarmos o valor de 7 para 35 veremos a diferença que acontecerá
ao nosso retângulo, ele ficara assim:
Veja que mudamos o posicionamento da sobra com relação ao objeto

principal. Podemos perceber que a sombra está indo em direção ao canto inferior
direito do retângulo, com isso que a luz está iluminando o objeto a partir do canto
oposto. Se quisermos, podemos ir até a opção Ângulo e alterar o valor, girando o
circulo do ângulo para o lado oposto, e teremos o seguinte resultado (para conseguir
o efeito abaixo mudamos o valor do ângulo de 315 para 129:
Agora você já poderá testar os outros efeitos com outros objetos, lembrando
que podemos também combinar efeitos dentro de um mesmo objeto e vê-los
funcionando ao mesmo tempo.
Usando efeitos pré-definidos

Painel Propriedades
No Fireworks MX podemos encontrar vários efeitos já preparados para
serem usados a qualquer momento. Para acessarmos esses efeitos, devemos clicar
sobre o menu Janela e selecionar a opção Estilos. Quando clicarmos sobre esta
opção, se abrirá no conjunto de painéis a esquerda, um painel chamado
Propriedades, neste painel teremos a guia Estilos, e é este guia que nos interessa
agora.
Veja que dentro da guia Estilos existem vários modelos de efeitos que para
aplicá-los a um objeto, basta selecionar o objeto e clicar sobre a opção desejada.
Perceba que no Fireworks MX tudo é muito simples para que você possa tirar o
máximo de proveito do aplicativo na criação de suas artes ou logotipos.
16. Exercícios
1. Imagine que você foi contratado por uma empresa para fazer a elaboração de
um logotipo. Considere que esta empresa trabalha no ramo dos esportes,
vendendo acessórios para todos os esportes. Crie um logotipo utilizando
13
todos os conhecimentos adquiridos até agora, mas lembre-se, tente fazer algo
profissional.
17. Trabalhando com textos
A partir de agora, iremos conhecer melhor as propriedades da ferramenta

Texto, e vamos também aprender como transformar nossos textos com aplicação de
efeitos.
Para isso, vamos conhecer a tela de propriedades da ferramenta, bastando ir
com o mouse e clicando sobre o botão Texto no painel de ferramentas. Arraste agora
o cursor até a área do documento e digite a palavra Fireworks MX. Agora, com a
ferramenta Ponteiro selecione o texto e abaixo, a barra de propriedades ficara com
esta configuração:
Nesta barra podemos escolher o tipo de fonte que queremos, modificar seu
tamanho, o espaçamento horizontal entre as letras, a altura da letra, sua largura e
sua formatação de alinhamento, podendo deixar uma palavra na direção vertical ou
horizontal. Veja tabela abaixo:
Outra forma de escrevermos um texto é selecionando o menu Texto ->
Editor, dessa forma aparecerá o editor de textos do Fireworks MX (figura abaixo)
onde você pode digitar o texto e já preparar sua configuração antes de aplicá-lo ao
documento.
Fonte Lista dos tipos de fontes

Tamanho Use o ponteiro ou digite no campo para alterar o valor.
Controles de estilo Negrito, Itálico ou Sublinhado.
Kerning (Kerning é o Use o ponteiro ou digite o valor para aproximar ou separar
ajuste de espaço as letras do texto.
entre duas letras). Selecione as letras individuais para espaços diferentes.
Entrelinhamento (É o Use o ponteiro ou digite no campo para alterar o
espaço entre espaçamento entre as linhas do texto. O valor padrão é
14
múltiplas linhas de 100%.

texto).
Unidades de Seta a unidade de espaçamento do entrelinhamento que
entrelinhamento pode ser em porcentagem, com base no tamanho da fonte
ou pixels.
Orientação do texto Seta a direção do texto para horizontal ou vertical, bem
como o sentido.
Alinhamento do texto Clique para alinhar o texto a Esquerda, ao Centro, a Direita,
Justificar ou Esticar o texto.
Recuo do parágrafo Ajusta a primeira linha do parágrafo corrente ou todo o
parágrafo.
Escala horizontal Escalona o caractere em porcentagem do seu tamanho.
Espaço para o Seta o espaçamento acima do parágrafo selecionado.
parágrafo anterior
Espaço depois do Seta o espaçamento abaixo do parágrafo selecionado.
parágrafo
Vale a pena lembrar que todos os efeitos que já vimos anteriormente

funcionam perfeitamente com um texto, assim você poderá colocar seus textos com
diferentes formatos.
17.1 Aprendendo outros efeitos com texto
O Fireworks MX permite que, além dos efeitos já conhecidos, você adicione

caminhos que o seu texto deva seguir, que é o que vamos aprender agora.
Com o texto digitado, crie agora o desenho de um círculo, usando a
ferramenta Elipse no painel de ferramentas, logo abaixo do seu texto ficando como
na figura a seguir:
Agora, selecione os dois objetos juntos clicando sobre eles com a tecla shift
pressionada. Com os dois objetos selecionados, atenção, você deve ter certeza de
ter selecionado somente os dois objetos, o circulo e o texto, caso haja um terceiro
objeto selecionado, o efeito não funcionará corretamente. Então, tendo certeza de
estar com os dois objetos selecionados, siga com o mouse até o menu Texto ->
Anexar ao traçado. Após selecionar esta opção, o seu texto deverá se adaptar ao
caminho informado pelo traçado o círculo, como a figura a seguir:
Assim como fizemos o texto se adaptar ao caminho do círculo, podemos

também adaptá-lo a qualquer outro tipo de caminho, desde que seja traçado pela
15
linha de contorno. Da mesma forma que anteriormente, podemos adicionar ao texto

no novo traçado, qualquer efeito que já foi visto até agora.
Para remover o texto do traçado, e obtê-lo na sua forma original, basta
selecionar o texto e seguir com o mouse até o menu Texto -> Separar a partir do
traçado. Dessa forma, teremos de volta o texto e o círculo.
Agora você já pode treinar os conhecimentos adquiridos até esse ponto,
testando os outros efeitos de texto.
18. Combinando formas simples
No Fireworks MX podemos facilmente criar formas como retângulos,

círculos, elipses e outros, podemos ter uma certa dificuldade na hora de criar formas
mais complexas. Para isso podemos utilizar as formas de combinação de objetos,
que veremos a seguir. Para começarmos, vamos desenhar dois círculos. Para
chegar as opções, devemos clicar sobre o menu Modificar -> Combinar traçados.
União ´ Combina dois ou mais objetos sobrepostos em um só.
Interseção ´ Cria um objeto a partir da área em comum entre dois ou mais

objetos.
Perfurar ´ Use um objeto para perfurar (cortar) outros objetos que estiverem
abaixo.
Cortar ´ Use o objeto mais acima como modelo para a posição que deseja
recortar. Ele serve como base para o corte nos outros objetos.
16
Como percebemos, o novo objeto criado com a combinação dos outros,

recebe atributos de preenchimento e contorno do objeto mais ao fundo.
19. Desenhando uma estrela
Para que você consiga fazer o desenho de uma estrela, basta selecionar a
ferramenta Polígono no painel de ferramentas. E Na barra de propriedades, na
opção Forma, alterar para Estrela.
20. Trabalhando com imagens Bitmaps
20.1 Importando uma imagem

No Fireworks MX você pode facilmente importar uma imagem do tipo bitmap
para editá-la e você poderá exportar imagens das mais variadas extensões. Para
poder importar uma imagem, você de primeiro criar um novo documento.
Em seguida, clicar com o mouse sobre o menu Arquivo -> Importar.

Na caixa que se abrir na tela, você deverá localizar o arquivo que deseja
importar.
Caso você queira importar uma imagem mantendo seu tamanho original,
quando localizar o arquivo clique sobre ele e, mantendo o mouse pressionado,
arraste o arquivo até a área do documento abaixo da janela.
Caso contrário, selecione o arquivo, clique sobre o botão Abrir. Após isso,
você voltará ao documento, e o cursos do mouse estará como na figura abaixo:
Agora você poderá clicar e mantendo o mouse pressionado, definir o

tamanho da imagem a ser importada :
17
E quando o tiver definido, é só soltar o mouse que sua figura aparecerá:
20.2 Modificando o tamanho da imagem e da tela
Veja que a nossa figura não está ocupando toda a área do nosso
documento. Podemos facilmente resolver este problema, para isso, devemos seguir
com o mouse e clicar sobre o menu Modificar -> Tela -> Ajustar Tela.
Esta opção fará com que a área do documento que está sobrando,
seja automaticamente alterada para o tamanho da imagem
Caso seja necessário, modificar as dimensões da imagem, a melhor forma de se

fazer é clicando sobre o menu Modificar -> Tela -> Tamanho da Imagem. Teremos
então uma tela com as seguintes opções:
18
Com a opção Limitar proporções ativada, podemos ver os “cadeados” ao

lado direito da janela. Quando eles estiverem aparecendo, quer dizer que caso você
altere o valor da largura ou da altura da imagem, o Fireworks MX irá alterar o outro
proporcionalmente. Caso queira que isso não ocorra, basta desmarcar esta opção, o
que não é muito recomendado, pois dependendo do conteúdo, a imagem poderá
perder definição e qualidade.
O mesmo você poderá fazer com o tamanho do documento, porém,
devemos lembrar de algumas dicas:
1. Se a imagem, estiver ocupando o tamanho total do documento (da tela),
se você aumentar ou diminuir o tamanho da imagem, o tamanho da tela
acompanhará a imagem.
2. Caso você aumente somente o tamanho da tela, a imagem irá permanecer
com o tamanho atual.
3. Caso você diminua somente o tamanho da tela, e o novo tamanho seja
menor que o tamanho da imagem, a imagem terá parte de sua área
cortada e esta área não poderá ser visualizada.
4. O comando Ajustar tela funciona tanto quando o tamanho da tela for
maior que o da imagem, como quando o tamanho da tela for menor que a
imagem.
Podemos notar nas telas anterior que o botão Sair do modo Bitmap está
desabilitado, por tanto, estamos trabalhando em modo vetorial apesar de termos
importado uma imagem bitmap. Para entrar em modo bitmap, devemos, com a
ferramenta Ponteiro (a primeira da barra de ferramentas) clicar duas vezes sobre a
imagem. Podemos então ter certeza de estarmos em modo bitmap observando que o
botão Sair do modo Bitmap está agora habilitado.
20.3 Usando a ferramenta Varinha mágica
A ferramenta Varinha mágica, localizada na divisão BITMAP da barra de

ferramentas, serve para selecionarmos áreas de uma imagem bitmap por afinidades
de cores, ou seja, queremos remover o fundo da nossa figura, então, se clicarmos
com a ferramenta Varinha mágica na área branca do fundo da imagem, veremos que
19
ela selecionará automaticamente todas as áreas que contenham a cor branca como
a seguir:
20.4 Alterando cor de uma imagem bitmap
Com uma área de nossa imagem selecionada, podemos ir até o menu Filtros
-> Ajustar cor -> Matiz/Saturação e na tela que nos aparecer, alterar as opções de
Matiz, Saturação e Luminosidade da nossa figura, alterando assim, a cor de toda a
área selecionada.
Outra forma de se fazer isso é a seguinte: Como estamos com o fundo da
imagem selecionado, e queremos mudar somente ele, e como ele já está
selecionado, podemos simplesmente apertar na tecla Delete no nosso teclado, e
remover toda a área selecionada. Note que da forma anterior, não estamos
apagando, mas, modificando a cor, já desta maneira, você irá apagar a área
selecionada e escolher sua cor, definindo a cor de fundo do documento.
Para alterar a cor do fundo da tela (documento), devemos após apagar o
conteúdo selecionado, clicar sobre o menu Modificar -> Tela -> Cor da tela. Veja que
aparece uma caixa com apenas três opções: Branco, Transparente e Personalizar.
Ao lado da ultima opção, podemos encontrar uma caixa de cores e ali, selecionar a
nova cor de fundo da nossa imagem.
Pronto, agora só falta tirarmos a seleção. Para isso, devemos ir até o menu
Selecionar -> Cancelar seleção ou simplesmente digitar no teclado as teclas ctrl+d.
21. Exercícios
1. Pratique os conhecimentos da aula de hoje.
22. Trabalhando com máscaras
Máscara é um método usado para filtrar a propriedade de visibilidade de um

objeto utilizando um outro objeto. As máscaras mostrar ou esconder o conteúdo
afetado de uma imagem, ou ter forma do objeto de máscara.
Você pode utilizar objetos vetoriais e bitmaps para criar seus efeitos de
máscara. Abaixo segue uma tabela com três maneiras de se criar máscaras de
objetos utilizando o Fireworks MX.
Método Acesso Usar quando você quiser
Colar como máscara Menu Editar Selecionar e recortar o objeto máscara, e
posicionar no todo do objeto que deseja
esconder.
Colar em Menu Editar Selecionar e recortar o objeto a ser
máscarado e colar dentro do objeto de
máscara.
20
Adicionar máscara Painel Camadas Adicionar uma área de transparência a

uma imagem bitmap. Você também
poderá definir uma cor para essa
máscara dependendo do tipo de
preenchimento.
Vamos agora exemplificar o primeiro item da tabela acima, ficando com você a tarefa
de experimentar os outros tipos efeitos de máscara. Criando máscara
Devemos para começar, abrir uma imagem para aplicarmos uma máscara.
Após abrir a imagem, devemos criar o objeto máscara, ou seja, o objeto com que
terá a forma que desejo definir para a minha figura, ficaremos então com dois
objetos, como segue:
Como vimos na tabela, devemos agora, selecionar o objeto máscara, e

recortá-lo, ficando apenas com a figura de trás. Selecionando a figura, e seguindo
com o mouse até o menu Editar -> Colar como máscara, teremos o seguinte
resultado:
Podemos perceber que a elipse escondeu o objeto que estava atrás,

deixando visível somente a área em comum aos dois.
Agora podemos experimentar os outros tipos de máscara. Lembrando que
você poderá usar vários efeitos de preenchimentos as suas máscaras.
21
23. Trabalhando com Pontos ativos e Fatias
Uma das grandes características do Fireworks MX é a capacidade de

adicionar interatividade às paginas web. Com ele, você pode criar Pontos ativos ou
fatias em objetos vetoriais ou bitmaps. Pontos ativos ou fatias, também conhecidos
como Objetos Web, são conjuntos de códigos html que permitem a você ligar um
conteúdo da web a uma determinada área de uma imagem, permitindo a você vários
tipos de interatividade com o seu documento. No Fireworks MX, você pode criar
estes tipos de objetos sem que precise digitar uma única linha de código, como
veremos a seguir.
23.1 Criando pontos ativos
O Fireworks MX possui as ferramentas necessárias para criar pontos ativos

e podem ser encontradas na divisão Web do painel de Ferramentas.
Ferramenta Ponto ativo retangular Ferramenta fatia
Ocultar fatias e pontos ativos Mostrar fatias e pontos ativos
A figura abaixo mostra os diferentes tipos de pontos ativos:
Existem duas maneiras de se criar pontos ativos:

1. Você pode desenhar um ponto ativo na sua imagem, utilizando a
ferramenta Ponto ativo retangular, circular ou poligonal.
2. Você pode selecionar um objeto e criar um ponto ativo sobre ele. Por
exemplo você pode criar pontos ativos sobre textos ou uma forma
vetorial ou uma imagem bitmap.
A tabela abaixo mostra as diferentes formas de se criar pontos ativos em

uma imagem:
Use esta ferramenta ou Para fazer isto
comando
Cria pontos ativos retangulares ou circulares.
Ponto ativo retângulo
Clique com o mouse a arraste para criar as áreas
Ponto ativo círculo
desejadas.
Cria pontos ativos em formas irregulares.
Desenhe a contorno do ponto ativo clicando com o
Ponto ativo poligonal
mouse, criando a forma, como se estivesse usando a
ferramenta caneta.
Editar -> Inserir -> Cria um ponto ativo sobre a área de um ou mais objetos.
Ponto Ativo
22
Caso você selecione mais um objeto, na hora de criar pontos ativos através
do menu editar, irá aparecer uma mensagem perguntando se você deseja criar um
ponto ativo para cada objeto, ou um para todos os pontos.
23.2 Camada da Web
O painel de Camadas grava e mostra todas as informações sobre pontos

ativos e fatias na Camada da Web que fica localizada no topo das camadas do
painel Camadas. Esta camada você não tem permissão para apagar ou mover. Por
padrão, o Fireworks MX define essa camada como ativa para todas as outras
camadas ou molduras. Porém, caso seja necessário, você poderá ocultar os pontos
ativos ou as fatias, clicando no botão Ocultar fatias e pontos ativos e Mostrar fatias e
pontos ativos localizados no painel de Ferramentas ou utilizando o próprio painel
Camadas, ocultando ou mostrando a Camada da Web. Note que se você preferir
utilizar o painel Camadas, você ainda poderá ocultar pontos ativos ou fatias
individuais.
23.3 Ligando paginas ao ponto ativo
Depois que você criou um ponto ativo, você pode ligá-lo a uma URL criando
um link. Caso você não defina um, o ponto ativo será um link para a pagina atual,
onde ele se encontra. E quando uma pessoa clicar com o mouse sobre a área do
ponto ativo, a página referida no link será aberta.
Quando definimos um ponto ativo, podemos ver na barra de Propriedades,
as seguintes configurações:
Na tabela abaixo encontramos a descrição de todos as opções:
Forma Tipo da forma do ponto ativo (retângulo, circulo, polígono).

Link Permite que você crie uma ligação digitando uma URL ou selecionando
no menu pop-up.
Alt Use para aplicar um texto alternativo. Este texto aparece quando
rolamos o mouse sobre a imagem no momento da visualização da
pagina no navegador.
Destino Permite que você defina o local onde a pagina será aberta na janela do
navegador. Você poderá definir um destino ou utilizar um valor padrão:
Abre a página referenciada na própria moldura ou
Branco ou _self
janela.
Abra a pagina em uma nova janela no navegador,
_blank
sem alterar a pagina principal.
_parent Abre a pagina na mesma janela que contem o link.
Abre a pagina em uma nova janela do navegador
_top
removendo todas das molduras.
23
23.4 Usando o painel URL
O Fireworks MX traz uma forma muito prática de gerenciar todas as

referências que você faz dentro do seu documento, ou seja, todos os links criados.
Você pode criar um banco de URL’s (links) criando os mesmos de acordo com a
necessidade de criação ou criar um banco antes de começar a construção da sua
aplicação (neste caso, você já deverá ter feito um planejamento de tudo que vai
precisar na sua aplicação), ou ainda criar ao final da criação do ambiente e ir
setando cada local com sua respectiva ligação. Desta forma, ficará muito mais
simples de trabalhar no caso de repetir o mesmo link em vários locais.
Para acessar o painel URL, devemos is com o mouse sobre o menu Janela -
> URL. Veja que ativamos somente uma guia do painel Propriedades, portanto, caso
este painel já esteja ativado, basta clicar com o mouse sobre a guia URL.
Adicionar URL atual à

biblioteca
Lista de URL’s
Adicionar URL à biblioteca Apagar URL da biblioteca
Todas as URL’s que você digitar na barra de propriedades, será gravada no

painel URL e ai, você poderá editar ou remover esta URL. Quando você possui uma
lista de URL’s gravadas no painel URL, para adicionar um link fica muito simples,
bastando você selecionar o texto, ou ponto ativo, ou fatia, ou imagem, enfim,
selecionar o objeto que receberá o link e dar um clique com mouse sobre a URL (no
painel URL) que você deseja que este objeto abra.
Abaixo temos mais algumas opções que podem nos ajudar no
gerenciamento dessas URL’s. Podemos chegar até ele, clicando com mouse na guia
de opções do painel URL. Teremos então:
24
Adicionar URLs Adiciona todas as URLs usadas no documento à biblioteca.

usados à Biblioteca
Apagar URLs não Apaga todas as URLs da biblioteca que não estão sendo
usadas usadas.
Adiciona a URL à biblioteca e ao objeto selecionado
Adicionar URL
simultaneamente.
Editar URL Edita a URL selecionada.
Excluir URL Remove a URL selecionada da biblioteca.
Importa uma lista de URLs de um arquivo HTML ou da Lista de
Importar URL
favoritos no Internet Explorer ou Netscape.
Exportar URL Exporta as URLs da biblioteca em um arquivo HTML
23.5 Ferramenta Fatia
Fatias, assim como pontos ativos, são usados para criar objetos da web
interativos. Ambos permitem que você defina regiões interativas nas quais você pode
adicionar links ou comportamentos, embora, cada tipo de ferramenta trabalhe de
uma forma diferente.
Fatias são o resultado de uma imagem muito grande cortada em varias
imagens pequenas. Cada um destes pedaços (fatias) serão exportados em um
arquivo separado. Uma vez que esta imagem é exportada, o Fireworks MX cria um
documento HTML que contém o código responsável pelo reagrupamento dos
pequenos arquivos montando novamente a imagem completa, dentro de uma tabela
HTML.
Existem varias vantagens na utilização de fatias de uma imagem, que
podemos citar dentre elas:
Cada fatia pode ser otimizada com a maioria das propriedades de um arquivo como
formatos e qualidades. Geralmente, diferentes áreas de uma figura muito grande,
requerem diferentes tipos de otimização. Por exemplo: para uma parte da imagem,
JPEG deve ser a melhor escolha para a exportação e em outra parte, GIF pode ser a
melhor escolha. Assim você poderá, dividir uma imagem grande, em duas imagens
menores e de formatos diferentes, e obter novamente a imagem grande quando
exportar.
1. As fatias podem assumir vários tipos de comportamento, e cada
fatia da imagem, pode assumir um diferente.
2. Caso você tenha que alterar uma das fatias, não é necessário
exportar a figura inteira novamente, podendo exportar somente a
região da fatia.
23.6 Criando fatias
Existem duas formas ferramentas diferentes que podem ser usadas para
criar fatias:
Você pode utilizar a ferramenta Fatia ou Fatia poligonal para criar as fatias
ou você pode também selecionar um objeto e criar uma fatia sobre ele. Utilizando
ambas as técnicas, após criar a fatia, você verá algumas guias que definem as linhas
25
e as colunas da tabela que o Fireworks MX irá criar quando você exportar seu
arquivo. Use estas guias para ter certeza de que os itens fatiados estão alinhados
em colunas. Para esconder as guias, selecione o menu Exibir -> Guias de fatias.
Vale a pena lembrar que, quando você criar uma fatia em algum objeto, você
poderá movê-la para qualquer parte da imagem, onde você desejar que o objeto seja
fatiado.
24. Fireworks MX e Java Script
No Fireworks MX você pode criar facilmente botões, efeitos de rollover, e

menus do tipo pop-up (que veremos a seguir), sem precisar ter nenhum
conhecimento de código Java script, que é necessário para criação dos mesmos,
como já foi dito antes.
24.1 Comportamentos
Botões, rollovers e menus pop-up podem possuir uma grande variedade de

comportamento. Estes comportamentos adicionam um efeito visual a mais para
estes objetos. Por exemplo, um comportamento de rollover, faz com que um simples
botão mude sua aparência com um simples movimento do mouse sobre ele.
Um comportamento possui duas partes básicas: um evento e uma ação,
onde o evento é a atividade do usuário. Por exemplo, o usuário deve mover o mouse
sobre um botão. A ação é o resultado que este evento resulta.
24.2 Painel comportamento
Você pode gerenciar comportamentos dos seus objetos através do painel

Comportamentos. Através deste painel você poderá criar, editar e remover
comportamentos anexados aos pontos ativos, as fatias ou outros símbolos.
Para se aplicar um comportamento a um objeto, é muito simples, bastando
que você selecione o objeto, e através do painel Comportamentos, selecionar o
botão Adicionar comportamento (+) e seguir até a opção desejada no menu que
aparecer.
Abaixo encontraremos uma descrição
Comportamento O que faz
26
Rollover simples Adiciona a uma fatia um efeito de

rollover quando ocorrer o evento do
mouse rolar sobre a área ou ativa
uma área com estado ativo na
moldura 1 e estado de sobre na
moldura 2.
Trocar imagem Troca uma imagem dentro de uma
fatia especificada com outra em um
frame diferente, ou outra imagem
externa.
Restaurar imagem de troca Restaura a imagem original trocada.
Definir imagem da barra de Define uma fatia como parte de uma
navegação barra de navegação. Cada fatia que é
parte de uma barra de navegação
deve ter este comportamento. Uma
barra de navegação inclui os estados
de “Abaixo” e “Sobre enquanto estado
Acima” para todas as fatias ou botões
da barra.
A opção definir imagem da barra de
navegação é um grupo de
comportamentos contendo Sobre na
barra de navegação, Abaixo na barra
de navegação e Restaurar barra de
navegação.
Definir o menu Pop-up Anexa um menu Pop-up a fatia ou ao
ponto ativo.
Definir texto da barra de Permite que você defina um texto
status para ser mostrado na de status da
janela do navegador.
25.Trabalhando com Molduras (frames)
Molduras geralmente são utilizadas na criação de imagens com animação

(gifs aminados), porém, veremos uma outra aplicação simples para as molduras.
Iremos utilizá-las para criarmos efeitos de rollover. Porém, nada impedirá que você
comece a criar seus gifs animados.
Podemos acessar o painel Moldura através do menu Janela -> Molduras.
Utilizaremos o mesmo arquivo que vem sido mostrado nas aulas
anteriormente, mas isso não quer dizer que você poderá fazer com outro arquivo.
Apenas para lembrar, o arquivo que estamos falando é o arquivo com a
logomarca da fundação. E como sabemos, na mesma figura existe o logotipo e o
texto explicativo, por esse motivo, teremos antes de começar, que retirar o texto e
deixar somente o logotipo, como na figura abaixo.
27
Agora, criaremos uma fatia sobre a imagem do logotipo e outra fatia abaixo
da imagem:
Agora, se formos até o painel Molduras poderemos verificar que possui
somente uma moldura, chamada Moldura1.
Distribuir para molduras Excluir moldura

Nova moldura / Duplicada
Para alterarmos o nome de uma moldura basta dar dois cliques sobre o
nome da moldura, digitar o novo nome e pressionar
enter.
Criaremos então uma nova moldura,
clicando sobre o botão Nova moldura / Duplicada, e
renomearemos a primeira para Imagem e a nova
moldura para Texto. Teremos então a seguinte
configuração, mostrada na figura ao lado:
E, com a moldura Texto selecionada, iremos digitar

o texto que tinha sido retirado da figura:
28
É importante notar que quando selecionamos a moldura Texto, a imagem do

logo tipo desaparece, e mesma coisa acontece com o texto quando selecionamos a
moldura Imagem. Caso isto não esteja acontecendo, você provavelmente deve ter
colocado o texto e a imagem na mesma moldura, e não é isso que queremos. Mas
se você tiver feito isso, para resolver, basta que você selecione o texto, recorte e
após selecionar a moldura correta, cole novamente, ajustando-o na posição correta.
Já estamos quase concluindo nosso efeito, agora, basta selecionar a fatia
que cobre a imagem, e clicando com o mouse sobre o botão de comportamentos, o
botão branco no centro da fatia, e mantendo o botão do mouse pressionado, arrastar
o cursor até a fatia abaixo aparecendo a janela abaixo:
Na janela Trocar imagem podemos seleciona na opção “Trocar imagem de:”

selecionar a moldura que contém o conteúdo que queremos mostrar quando o
mouse rolar sobre a área da fatia de cima, como possuímos somente duas molduras
e queremos mostrar o texto quando este evento ocorrer, selecionamos a opção
“Texto (2)” onde texto é o nome que definimos para a moldura e (2) o número de
ordem da moldura no painel Molduras. Podemos ver ainda que existe uma linha na
29
cor azul, ligando as duas fatias. Clicando sobre o botão OK estaremos completando
nosso efeito de rollover.
Como ainda não aprendemos a exportar os nossos gráficos, para
visualizarmos como funciona o efeito que acabamos de criar, basta, na janela
principal do documento, clicar sobre a guia Visualização e testar o efeito.
26. Exercícios
1. Crie uma imagem com 6 fatia onde 5 fatias serão ligadas a 6ª

fatia, alterando somente a moldura que será exibida sempre que o
mouse rolar sobre uma delas. Para isso, lembre-se que precisará
de pelo menos 7 molduras.
27. Criando botões
Podemos criar facilmente um botão utilizando o Fireworks MX, pois ele traz
um assistente para criação que nos ajuda e torna o trabalho mais simples.
Bom, para começarmos, devemos criar um objeto que já servirá como um
dos estados do nosso botão, que veremos a seguir, podendo ser um retângulo ou
qualquer outra forma que quisermos para nosso botão.
Desenharemos então um retângulo medido 90x35 e colocaremos sobre ele
um texto e alguns efeitos como na figura abaixo:
Agora, o que devemos fazer é: selecionar o nosso botão e seguir com o

mouse até o menu Modificar -> Símbolo -> Converter em símbolo então aparecerá
uma janela onde deveremos escolher uma entre três opções. Selecionaremos a
opção Botão e colocaremos o nome de “botao1”. Este nome, servirá para
identificarmos o nosso botão dentro da nossa biblioteca, caso necessitemos usá-lo
novamente.
Após setarmos estas opções, veremos que será criada uma espécie de fatia
sobre o botão, ficando assim:
Agora, para editar o nosso botão, devemos clicar duas vezes sobre ele.
30
28. Estados de um botão
Um botão é um objeto que possui quatro estados, isto que dizer que ele terá quatro
comportamentos diferentes para quatro eventos diferentes:
28.1 Estado Acima

Ocorre quando o botão está sendo exibido, porém, não existe nenhum
evento do mouse com ele, ou seja, o mouse está em outra área da tela.
28.2 Estado Sobre

Ocorre quando o mouse rola sobre o botão, ou seja, o mouse entre sobre a
área do botão.
28.3 Estado Abaixo

Este estado é visualizado quando o mouse é pressionado sobre o botão.
28.4 Estado Sobre durante o estado Abaixo

Este estado existe para que, em uma barra de botões, você possa saber
qual a seção ou qual o ultimo botão que foi pressionado.
28.5 Área ativa

Define a real área ativa do botão, podendo ocupar exatamente a área total
do botão ou uma área maior ou menor. Lembrando que, a área ativa, define a área a
partir de onde os estados devem ocorrer.
29. Editor de botões do Fireworks MX
Quando clicamos duas vezes sobre o nosso botão, entramos no editor de

botões do Fireworks MX, que tem a seguinte aparência:
31
Veja que acima, encontramos uma guia para cada estado.

Como nosso estado acima já está montado, iremos cuidar então do próximo
estado. Clicando sobre a guia Sobre, veremos que o nosso botão não aparece nesse
estado, isto quer dizer que ele ainda não possui uma formatação para quando o
mouse rolar sobre ele.
Podemos notar agora existe um botão com o titulo Copiar gráfico acima. Este
botão serve para que não precisemos ter todo o trabalho tido anteriormente na
criação do nosso estado de Acima, clicando nele, será criado uma copia do modelo
contido na guia Acima e assim poderemos alterar somente alguns detalhes do nosso
botão.
Assim, poderemos ir criando e modificando todos os estados do nosso botão, e após
concluído toda essa fase, clicando sobre o botão Concluído, finalizamos nosso
botão. Da mesma forma, para vermos como ficou, devemos ir até a guia
Visualização na janela principal do documento e testarmos os efeitos de dos os
estados.
30. Criando menus Pop-up
Menus Pop-up são barras de menus que podemos anexar a uma fatia ou
ponto ativo e posicionar onde quisermos. Como o botão que acabamos de criar
possui uma fatia acima dele, podemos então criar um menu deste tipo e anexá-lo ao
botão.
Para iniciar, iremos clicar com o mouse sobre o botão de comportamentos,
no centro da fatia sobre no botão criado:
Podemos ver que nos aparece uma janela com várias opções, seguindo até
a opção Adicionar menu Pop-up, daremos um clique e veremos uma nova janela
como a que segue, e nesta janela definiremos os rótulos das nossas opções de
menus.
32
No Editor de menu pop-up do Fireworks MX encontramos quatro passos

para criar um menu. No primeiro, Conteúdo, podemos definir os rótulos dos nossos
menus de acordo com a nossa necessidade. Esta tela possui quatro botões que são:
Adicionar menu, Excluir menu, Excluir menu, Recuar o menu para fora e Recuar
menu.
30.1 Adicionar menu

Permite que você adicione um novo rótulo de menu ou sub-menu.
30.2 Excluir menu

Apaga o registro de um menu ou de um sub-menu.
30.3 Recuar o menu para fora

Faz com que uma opção que seja um sub-menu, se torne uma opção de menu
principal.
30.4 Recuar Menu

Permite definir uma opção de sub-menu. Uma opção de sub-menu será
apresentada na tela como uma opção que está deslocada um pouco para direita.
Esta será uma opção de sub-menu da primeira opção esteja mais esquerda e acima
dela.
Na imagem acima, vemos duas opções de Menu principal: Estados e

Cidades. De lá também podemos notar que Amazonas e Roraima, são sub-menus
33
da opção Estados, e Manaus e Boa Vista, sub-menus da opção Cidades. Dessa

forma, podemos definir vários menus e sub-menus.
Clicando sobre o
botão Próximo, ou sobre
a guia Aparência,
veremos a próxima tela
de criação do nosso
menu. Nesta tela,
poderemos criar uma
formatação para o nosso
menu. Poderemos por
exemple escolher se
queremos as opções de
menu na horizontal ou
vertical, e poderemos
também modificar o tipo
de fonte e outras
configurações.
Podemos notar
que temos duas divisões
para dois estados
diferentes: Estado
Acima, e Estado Sobre.
Como já estudamos
isso, sabemos a que se
relaciona cada um dos dois. Para os dois estados, podemos definir a cor do texto e
da célula do menu. A partir desta tela, já podemos ter uma noção de como é e como
vai ficar nosso menu Pop-up.
Nas próximas telas, poderemos definir propriedades como tamanho da
celular de menu e por ultimo a posição do menu com relação a fatia na qual será
anexada e a posição dos sub-menus com relação a posição definida para o menu.
Quando acabarmos de definir todas as prioridades, devemos clicar sobre o botão
Concluído. Após isso, voltaremos para o corpo do documento, porém agora, quando
selecionamos a fatia sobre o botão, veremos um contorno vermelho mostrando onde
irá aparecer o nosso menu pop-up. Caso queiramos mudar a posição basta clicar
com mouse sobre a área vermelha do menu e arrastá-lo até a posição desejada. E
para visualizar, da mesma forma anterior clicando sobre a guia Visualização.
31. Dicas do Fireworks MX
No Fireworks MX podemos encontrar vários objetos que nos ajudam em

nosso trabalho e, veremos algums a partir de agora.
31.1 Menu Comandos

No menu comandos, podemos encontar uma opção chamada Creative que
possui algumas ferramentas uteis para que, se for o caso de usarmos, ganharmos
tempo na sua preparação.
34
Através desta opção poderemos por exemplo adiconar facilmente uma

moldura a nossa imagem, escolhendo padrão de textura e a largura da borda.
Com a opção Adicionar Ponta de seta, podemos adicionar uma ponta de
uma seta em uma linha criada com a ferramenta Linha, por exemplo:
Caso queiramos colocar uma imagem em Tons de Cinza ou com efeito de Sepia,
temos as opções que nos permitem fazer isso apenas selecionando a imagem e
clicando sobre a opção diretamente no menu.
31.2 Menu Modificar
No menu modificar podemos encontrar outras ferramentas que nos ajudam

na organização de um layout ou de outra aplicação que estejamos criando.
Através da opção Tranformar, podemos girar uma figura ou distorcer, entre
outras. Com a opção Organizar podemos fazer com que uma imagem ou um objeto
do nosso documento vá para trás de todos os outros objetos ou apenas do objeto
logo abaixo dele. Da mesma forma, podemos trazer um objeto que está atrás dos
demais para a frente. Note que o que você pode fazer através das opções deste
menu, você aprendeu a fazer através do painel Camadas nas suas aulas anteriores.
31.3 Criando Animações
Existe na Internet, um formato de imagem que nos permite fazer uma

pequena animação como já foi dito anteriormente. O formato Gif apesar de não
comportar uma boa qualidade de definição de imagem, permite que criem efeitos de
transparência e de animação.
Com o Fireworks MX, criar uma animação é muito mais simples do que se
pensa.
Para iniciar, criaremos um circulo em um documento novo, e abriremos o
painel Molduras (que já conhecemos).
Para darmos vidas a nossa animação, que será fazer com que o circulo saia
de um canto a outro da área do documento, basta criarmos varias molduras e para
cada moldura, duplicarmos o circulo e colocá-lo em uma posição diferente, assim
quando clicarmos sobre o botão Play, veremos o circulo se locomover de um lado a
outro do documento.
32. Exercícios
Crie um bunner (uma faixa de anuncio) medindo 300x60. Este bunner deverá fazer
um anuncio do seu projeto final, portanto quando acabar, peça para que o seu
instrutor salve em uma basta com seu nome no servidor para evitar algum problema.
33. Exportando uma imagem
Até agora aprendemos a usar as ferramentas do Fireworks MX na criação do

nosso objeto porém, ainda não podemos ver o resultado final no navegador.
35
Para isso, precisamos exportar nosso arquivo. Exportar, quer dizer que
iremos transformar nossa imagem vetorial para bitmap, para que possa ser usada na
internet, uma vez que na internet só são aceitas imagens do tipo bitmap. Como já
falamos, existem vários tipos de imagens bitmaps, algumas permitem que você
tenha uma ótima qualidade com um tamanho reduzido, outras permitem que defina
uma área a ser transparente, e esta se adaptará a qualquer cor de fundo porém, sem
muita definição e com um arquivo de tamanho um pouco maior.
Veremos aqui, um exemplo de exportação para uma imagem do tipo JPEG
que, é hoje um dos formatos mais utilizado na Internet, pois ele, é um exemplo que
permite alta definição por um tamanho de arquivo reduzido.
34. Painel Otimizar
O Fireworks MX possui um painel que tem a propriedade de definir o tipo de

arquivo que estamos trabalhando, podendo selecionar o tipo e ver automaticamente
o resultado aplicado no documento aberto.
Para acessar o painel Otimizar devemos ir com o mouse até o menu Janela -
> Otimizar. Então, no connjunto de paineis, poderemos ver um painel como a
imagem abaixo:
Na caixa onde encontramos a opção JPEG, podemos definir o tipo de nosso

arquivo, clicando sobre o botão da caixa de menu, veremos as seguintes opções:
36
Todos os formatos mostrados na lista que aparece acima, são formatos de

imagens bitmaps para serem utilizadas na web, cada uma dentro de uma
necessidade diferente.
Após selecionar o tipo JPEG, podemos ainda definir o nível de qualidade da
imagem que queremos, onde quanto maior for a qualidade, mais nitidez a imagem
terá, porém terá também um arquivo maior. Como padrão, é utilizado o valor 72,
pois, nos dá uma boa qualidade e um arquivo pequeno.
Vale lembrar que é sempre bom independente de ter algum comportamento
ou não, sempre utilizarmos fatias, pois assim, criaremos vários arquivos pequenos
formando uma imagem grande, o que faz com que a imagem seja montada (aberta)
bem mais rápido do que um único arquivo.
35. Visualizar Exportação
Além do painel Otimizar, podemos contar com a opção Visualizar exportação

encontrada no menu Arquivo, que nos permite também selecionar o tipo de arquivos
que queremos para a nossa imagem a ser exportada. Seguindo com o mouse até
esta opção, teremos a seguinte visualização:
37
Dividiremos esta tela em duas partes para podermos entendê-la melhor.

Nesta parte, através da guia Opções podemos definir o tipo que arquivo que
queremos, assim como foi visto no painel Otimizar.
Na guia Arquivo encontramos meios para alterar, se
quisermos, o tamanho do arquivo. Podemos notar que
quando clicamos sobra guia Arquivo as L e A estão ligadas
com um cadeado, fazendo com que as alterações de largura
(L) ou altura (A) sejam feitas proporcionalmente, ou seja, se
você alterar o valor da largura o Fireworks MX alterará
automática e proporcionalmente o valor da altura, e fará a
mesma coisa com a altura caso você altere a largura. Para
retirar esta característica, bastar dar um clique sobre a
opção Restringir, desmarcando a caixa de seleção.
Na guia Animação podemos encontrar opções para
cada uma das molduras de nossa imagem animada,
podendo fazer alterações em cada uma separadamente ou
em todas de uma única vez. Porém, como nosso arquivo
não se trata de uma animação, esta guia não tem
importância para nós agora.
Na outra parte da tela, podemos encontrar opções

de visualização do arquivo final, ou seja, de como ficará
quando exportado.
Na barra acima, encontramos, da esquerda para a direita, as ferramentas:

Ponteiro – para selecionar o nosso objeto dentro da área de visualização.
Exportar Área – selecionando uma área da imagem com esta ferramenta, só
será exportada a área dentro da seleção, ficando sem exportar tudo que sobrar da
figura.
38
Aumentar/Reduzir – ferramenta que permite darmos um zoom para aproximar

(aumentar) ou afastar a imagem. Quando selecionada o ponteiro se transforma em
uma lente com o sinal + em seu interior, assim, ao clicar a imagem será aproximada,
para reduzir a imagem (afastar) deve-se manter pressionada a tecla alt no teclado.
Assim o sinal de + virará um sinal de -. Podemos também utilizar para isso, a caixa
que se encontra logo ao lado da ferramenta, escolhendo diretamente o valor do
zoom.
Visualizar 1, 2 ou 4 janelas – permite que a área de visualização seja divida
em 2 ou 4 janelas com a mesma imagem. Desta forma, podemos testar em cada
uma das divisões da janela, um formato de arquivo diferente e escolher qual das
opções é a mais aconselhável a exportar. E para selecionar uma área para exportar,
basta clicar sobre ela.
Os próximos botões são utilizados para navegarmos através das molduras
de uma imagem animada.
Escolhidas todas as opções e feito todas as alterações necessárias, é hora de clicar

sobre o botão Exportar. Na janela que aparecer, temos ainda que definir outras
opções.
Em Salvar em podemos definir o local onde salvaremos o nosso arquivo

exportado.
Devemos então definir o nome do nosso arquivo na caixa Nome do arquivo.
Em Salvar como tipo escolhemos quais as naturezas de arquivos que
estamos salvando, ou seja, se é somente uma imagem, ou se queremos também
salvar um arquivo HTML. Esta opção de salvar um arquivo HTML estará selecionada
quando formos exportar uma imagem na qual criamos fatias ou outros
comportamentos, como menus pop-up, por exemplo, ou comportamentos de rollover,
pois estes comportamentos são gerados através de códigos Java Script e HTML e
por tanto, por esse motivo, devem ser guardados em algum lugar.
No caso ainda de estarmos trabalhando com fatias, estará habilitada a opção
Fatias, na qual poderemos escolher entre Exportar fatias, Apenas fatias
selecionadas, Incluir áreas sem fatias, Apenas a moldura atual, e ainda aparecerá
39
uma outra opção que é a possibilidade de criar uma sub-pasta especialmente para
guardar os arquivos das fatias, já que quando trabalhamos com fatias, já vimos que o
Fireworks MX cria muitos arquivos para formar a nossa imagem original, desta
forma, podemos ter uma melhor organização de nossos arquivos.
Quando clicar sobre o botão Salvar o arquivo estará pronto ser utilizado na
sua home page ou onde for necessário.
40
41
36. VISÃO GERAL DO FLASH MX
O Flash é o software pioneiro na criação de animações dimensionáveis e

interativas para Web. Se você desejar criar logotipos com animação, controle para
navegação em sites da Web, animações extensas ou sites da Web inteiros do Flash,
considere o Flash como uma ferramenta ideal para sua criatividade devido à
eficiência e flexibilidade desse produto.
O programa FLASH 6.0 da Macromedia e é aceito sem plugin no Windows
98, Internet Explorer 4.0 ou superior e Netscape 4.5 ou superior. Versões anteriores
destes browsers necessitam de plugin que pode ser obtido no próprio site da
Macromedia.
37. Conhecendo a Área de Trabalho do Flash
Menu principal
Barra de Linha do
Ferramentas Tempo
Palco
37.1 Barra de Ferramentas
Ferramenta Seta: como todo aplicativo de desenho, tem que existir uma ferramenta
que selecione os objetos, os mova, rotacione e escale (dimensões). Pois é, está
aqui!
Ferramenta Subseleção: permite selecionar partes de um objeto, como os nós que

formam uma curva, afim de alterá-los. É uma ferramenta nova.
Ferramenta Laço: seleciona parte do objeto com a mesma tonalidade ou seleciona

parte do objeto manualmente.
Ferramenta Linha: desenha linhas retas definindo-se os pontos extremos.
42
Ferramenta Texto: permite escrever no Palco, criando quadros de texto e campos de

texto.
Ferramenta Oval: desenha ovais e circulos.
Ferramenta Retângulo: desenha retângulos e quadrados.
Ferramenta Caneta: desenha Linhas Bézier (definida por nós) para melhor edição
posterior.
Ferramenta Lápis: permite desenhar à mão livre, linhas irregulares e polígonos

fechados.
Ferramenta Pincel: cria polígonos fechados a partir do preenchimento.
Ferramenta Tinteiro: altera as configurações das linhas de contorno dos objetos.
Ferramenta Balde de tinta: altera as configurações do preenchimento dos objetos.
Ferramenta Conta Gotas: seleciona uma configuração de preenchimento ou

contorno de algum objeto do Palco para ser padrão.
Ferramenta Borracha: apaga áreas selecionadas.
Ferramenta Mão: permite alterar rapidamente a visualização.
Ferramenta Zoom: aumenta ou diminui o zoom.
37.2 Ferramentas Auxiliares da Seta
Imã, para desenhar polígono, quadrado e oval perfeitos, manter a ferramenta imã
ativada.
Suavizar contorno
Modificar cantos do contorno.
Rotacionar objeto.
Aumentar ou diminuir tamanho do objeto.
43
37.3 Ferramentas Auxiliares do Laço
Varinha mágica: seleciona parte do objeto com a mes-ma tonalidade;
Propriedades da varinha mágica: determina área de abrangência da seleção.
Varinha mágica poligonal: seleciona manualmente parte do objeto.
37.4 Ferramenta Auxiliares do Texto
Menu > Texto (Escolha a opção desejada)
37.5 Ferramentas Auxiliares da Oval
Cor do contorno – Aplica cor ao contorno do objeto.
Cor do preenchimento – Aplica cor no objeto.
Cores padrão – Permite voltar para as cores padrão: contorno preto e preenchimento
branco.
Sem cor – Exclui a cor. Ou do contorno ou do preenchimento.
Trocar cor – Permite alternar as cores do preenchimento e do contorno.
37.6 Ferramentas Auxiliares do Retângulo
Cor do contorno – Aplica cor ao contorno do objeto.
Cor do preenchimento – Aplica cor no objeto.
44
Cores padrão – Permite voltar para as cores padrão: contorno preto e preenchimento
branco.
Sem cor – Exclui a cor. Ou do contorno ou do preenchimento.
Trocar cor - Permite alternar as cores do preenchimento e do contorno.
Inserir cantos arredondados para polígono – Permite arredondar os cantos do

retângulo.
37.7 Ferramentas Auxiliares de Lápis
Escolher o formato do lápis – Clicando na seta de expansão, você terá as opções do

traço do lápis.
Acertar Suavizar Tinta nanquin
37.8 Ferramentas Auxiliares do Pincel
Tamanho do pincel
Formato do pincel
37.9 Ferramentas Auxiliares de Balde de Tinta
37.10 Ferramenta Auxiliares da Borracha
- Escolhe o formato da borracha

- Apaga linha e preenchimento no desenho
- Escolhe o tamanho e o formato da borracha
45
37.11 Cenas e Símbolos
Editar Cena Editar Símbolos
Olho: visualizar ou esconder Camadas (layer)

Cadeado: trancar ou destrancar Camadas
Quadrado: exibir ou não somente os contornos da Camada
Folha branca: adicionar Camada (layer)

Folha lilás: adicionar Camada Guia
Excluir Camada: exclui a camada selecionada.
37.12 Quadros – Frames

1 2 3 4 5 6 7 8
1- Quadro selecionado
2- Casca de cebola – para adicionar camada guia
3- Contornos da casca de cebola – para visualizar os contornos da camada guia
4- Editar múltiplos quadros – para selecionar os quadros que serão editados
5- Modifica marcadores da cebola
6- Determina quantos quadros tem a animação
7- Determina quantos quadros/segundo
8- Determina o tempo de duração da animação
38. Criando Animações
38.1 Movimentando Objetos

Aplicação 01. Movimentando um símbolo ( objeto ou texto )
1. Desenhe uma figura ( bola, retângulo... ) ou digite um texto.
2. Clique na ferramenta seta .

3. Selecione toda a figura e tecle F8 para transformá-la em um símbolo.
4. Na Caixa de Diálogo aparecerá:
Nome: “ digite um nome “
Comportamento: marque gráfico
5. Sobre a figura aparecerá um sinal ( + ) dentro do objeto.
6. Com o botão direito do mouse selecione e insira um quadro- chave na linha do
tempo 50.
7. Nessa ação estamos repetindo a figura do quadro anterior, portanto, desloque a

figura para um outro lugar qualquer do palco.
46
8. Selecione a linha do tempo = 1 e com o botão direito do mouse insira movimento

(criar interpolação movimento ).
9. A mudança de cor na linha do tempo indica que há movimento.
10. Para visualização prévia tecle <enter >.

11. Para visualizar a animação tecle Crtl + enter.
12. Para voltar tecle Crtl + F4 ou feche a janela que foi aberta.
38.2 Efeito Alpha
Aplicação 02. O nome começa claro e termina escuro
1. Comece mudando a cor do fundo.

2. Insira um texto ou palavra na tela.
3. Selecione toda a figura e tecle F8 para transformá-la em um símbolo.
4. Na Caixa de Diálogo aparecerá:
Nome: “ digite um nome “
Comportamento: marque gráfico
5. Sobre a figura aparecerá um sinal ( + ) dentro do objeto.
6. Com o botão direito do mouse selecione e insira um quadro - chave na linha do
tempo 50.
7. Nessa ação estamos repetindo a figura do quadro anterior, portanto, desloque - a
.
8. Selecione a linha do tempo = 1 e com o botão direito do mouse insira movimento
(criar interpolação movimento).
9. A mudança de cor na linha do tempo indica que há movimento.
10. Sobre o texto clique com o botão direito e : Painéis > Quadros > Efeitos >Alpha
> Alpha 20
Painel Alpha
11. Para visualização prévia tecle < enter >

12. Para visualizar a animação tecle Crtl + enter
13. Para voltar tecle Crtl + F4 ou feche a janela que foi aberta.
Obs: O mesmo procedimento vale para figuras. Você também pode fazer o
movimento da aplicação anterior junto com essa.
38.3 Adicionar Camada Guia
Aplicação 03. Fazer um objeto percorrer um caminho qualquer
1. Siga os passos das aplicações anteriores e crie uma animação.

2. Com a linha de tempo = 1 selecionada, faça a seguinte ordem:
a) . insira uma camada guia;
47
b) . insira editar vários quadros.
3. Note que aparecerá um marcador cinza na linha do tempo do primeiro ao último

movimento, ao mesmo tempo em que os objetos do início e do fim estarão
marcados como na figura. Se não acontecer, puxe uma das pontas do marcador
até a última linha do tempo que você inseriu a animação.
4. Acione o ímã.
5. Na ferramenta lápis escolha o modo Suavizar e faça o traçado que quiser ligando
de um (+) ao outro nas figuras.
Importante! Quando o traçado for feito as linhas irão aparecer sobre o objeto.
Se não acontecer, desfaça o caminho e faça novamente (a camada guia deverá
esta selecionada.
6. Teste com <enter>.
7. Ctrl +enter rodar animação.
8. Ctrl + F4 voltar.
38.4 Efeito Morphing
Aplicação 04. Vamos transformar objetos em outros
1. Desenhe um quadrado verde na tela

2. Insira um quadro - chave na linha de tempo = 20 .
3. Acione o ímã.
4. Desenhe uma bola preta sobre o quadrado
5. Delete (apagar) o resto do quadrado.
6. Insira um quadro - chave na linha de tempo = 40.
7. Desenhe um retângulo vermelho sobre a bola.
8. Delete (apagar) o resto da bola.
10. Desativar o ímã.
11. Desenhe uma outra bola (amarela) e apague o que sobrou da outra figura.
12. Selecionar da primeira até a penúltima linha.
13. Com o botão direito do mouse na linha selecionada Painéis > quadros > quadro:
Rótulo:
Interpol: forma
Atenuação:
Mistura: distributivo
14. Tecle < enter > visualização prévia.

15. Tecle Ctrl + enter para visualização.
16. Tecle Ctrl + F4 para voltar.
Obs: Desativar o ímã antes de fazer a última figura
48
Antes de visualizar tente mudar a cor de cada figura que você adicionou
38.5 Efeito Morphing Com Palavras e Objetos
Aplicação 05. Fazer um objeto transformar – se em uma palavra (efeito morphing)

1. Insira uma figura na tela ( desenhe ou importe )
2. Selecione a figura e tecle Ctrl + B para torná-la um bitmap.
4. Clique fora da figura.
5. Digite sobre a figura a palavra AMAZONAS.
6. Delete (apagar) a figura.
7. Selecione o texto e tecle Ctrl + B para torná-la um bitmap
8. Selecionar da primeira até a penúltima linha.
9. Com o botão direito do mouse na linha selecionada
Painéis > quadros > quadro:
Rótulo:
Interpol: forma
Atenuação:
Mistura: angular
10. Tecle <enter> visualização prévia.
11. Tecle Ctrl + <enter> para visualização.
Como exercício tente fazer a palavra transformar-se em uma figura.
38.6 Efeito Morphing Específico
Aplicação 06. Fazer uma transformação “ morphing”, nesse caso, decidindo

especificamente como será feita.
1. Selecione o ímã.
2. Insira uma circulo.
4. Com a linha de tempo = 30 selecionada, insira um retângulo e delete o circulo
5. Selecione da primeira até a penúltima linha
6. Botão direito do mouse na linha selecionada,
Painéis > quadros > quadro:
Rótulo:
Interpol: forma
Atenuação:
Mistura: angular
7. Selecione a primeira linha de tempo,
Modificar > transformar > Adicionar referência de forma.
8. Aparecerá uma bolinha vermelha na figura.
49
9. Arraste para uma das extremidades, botão direito do mouse na bolinha e

Adicionar referência.
10. Arraste a outra bolinha para outra das extremidades, botão direito do mouse na
bolinha e Adicionar referência.
11. Faça esse movimento quantas vezes quiser.
12. Clique na última linha e arraste as bolinhas que estão uma sobre as outras para
qualquer das extremidades.
13. Note que as bolinhas mudarão de cor, ficarão ( verde ).
14. Se não mudar, arraste um pouco mais para fora da figura mas sem deixar de
tocá-la.
15. Tecle < enter > visualização prévia.

38.7 Efeito Rotação
Aplicação 07. Fazer um conjunto de bolas girar no sentido horário ou anti-horário
1. Insira uma bolinha na tela.

2. Com ela selecionada, tecle Ctrl + D para copiar
3. Faça quantas você quiser.
4. Selecione a linha de tempo = 50.
5. Selecione todas as bolinhas e tecle F8 . Clipe de filme - OK
6. Selecione a primeira linha de tempo, botão direito do mouse Painéis > Quadros >
Quadro:
Rótulo: Interpol: Movimento
Atenuação:
Girar: Sentido Anti-horário - 999
Opções:
7. Tecle < enter > visualização prévia

Obs: Tente fazer o boneco se movendo também.

In > a animação começa rápida e vai ficando devagar
Out > o inverso da In
50
38.8 Clip De Filme
Aplicação 08. Trabalhando com Clip de Filme
1. Ctrl + L para exibir a biblioteca.

2. Vai aparecer uma caixa: Biblioteca.
3. Clique no sinal de (+), lá em baixo.
4. Na caixa de diálogo: Nome: ..............
Comportamento: clipe de filme
5. Na tela que aparecer vamos montar nosso
Clipe de filme.
6. Desenhe uma bola.
7. Tecle F6 quatro vezes, para repetir a figura.
8. Selecione a linha de tempo = 2 e mude a cor da bola.
9. Selecione as outras linhas (separadamente)
e vá mudando a cor das outras bolas.
10. Clique em cena1 (volta para a primeira cena),
e arraste da biblioteca para a página principal o símbolo
do clipe de filme que você criou.
11. Tecle Ctrl + < enter > para visualizar.
Obs: Cena1 fica em baixo do símbolo da impressora.
Após esse exercício tente fazer um sinal de trânsito.
39. Máscaras
Aplicação 09. Trabalhando com Máscaras
O efeito máscara cria camadas que escondem parte de outras camadas que
estejam abaixo de camadas em que foi criada a máscara.
Efeito padronagem:
1. Clique em 12.0 fps e modifique o tamanho da animação para 320 x 240 pixels
2. Selecione a ferramenta Brush (pincel) e pinte com várias cores a área de trabalho
3. Selecione a linha do tempo = 40 e insira um quadro > F6
4. Renomeie esta camada como padronagem
5. Insira uma camada acima e renomeie de texto
6. Clique no olho para esconder a camada padronagem
7. Volte a camada do texto e digite a palavra : E F E I T O em arial black, 28
8. Selecione o texto > F8 para transformar em símbolo gráfico
9. Mova o texto para parte superior à esquerda
10. Insira um quadro chave na linha do tempo = 10 e mova o texto para parte
superior à direita
51
11. Insira um quadro chave na linha do tempo 20 e mova o texto para parte superior à
esquerda
direita
esquerda
14. Selecione a linha do tempo de 1 até 39, botão direito do mouse > Criar
Interpolação de movimento
15. Clique no olho novamente da camada padronagem para que ela seja exibida
16. Clique sobre a camada texto > botão direto do mouse > Máscara
17. Observe que automaticamente as duas camadas foram trancadas (cadeado)
18. Salve o exercício na sua pasta
19. Ctrl+Enter, para testar a animação
20. Ctrl+F4 para voltar à área de trabalho.
Criando botão animado
O botão tem quatro estágios:
Normal – como o botão aparece sem passar o mouse

Sobre – como o botão aparece quando o mouse passa sobre ele
Pressionado – como o botão aparece quando é clicado
Àrea – define a área “clicável”, ou seja, a área em que ele é acionado
1. Na biblioteca clique em novo símbolo

2. Nome: botão1; comportamento: botão
3. Desenhe uma bola verde gradiente
4. Desenhe outra bola verde dentro da primeira bola e pinte novamente de verde
gradiente.
5. Retire as bordas.
6. Usando a ferramenta dimensionar, diminua o tamanho da bola de dentro e pinte o
espaço em branco dentro do botão da mesma cor.
7. Digite em branco e em Arial Blak a palavra ENTRE e centralize na bola na bola
verde.
8. Pressione F6 para selecionar os estágios Normal, Sobre, Pressionado e Área
9. Selecione o estágio SOBRE, clique sobre a bola de dentro para selecionar e pinte
novamente de verde gradiente.
10. Selecione a palavra ENTRE e pinte de amarelo
11. Selecione o estágio PRESSIONADO, clique sobre a bola para selecionar e pinte
de verde.
12. Deixe o está ÁREA como está.
13. Volte à cena principal e arraste o botão da biblioteca para o palco
14. Pressione CTRL + Enter para testar o botão.
52
Aplicação 11. Criando objeto e arrastando com mouse.

1. Crie um botão
3. Nome: botão; comportamento: botão
4. Desenhe uma bola pinte de azul
5. Pressione F6 para selecionar os estágios Normal, Sobre, Pressionado e Área

6. Volte para Cena 1
8. Nome: botao move; comportamento: clip de filme
9. Puxe o botão para o clip de filme
10. Puxe o clip de filme para cena principal
11. Botão direito do mouse em cima do objeto: painéis > instância, comportamento:
clip de filme, nome: bola
12. Dê dois cliques em objeto para abrir o clip de filme, ou, dois cliques no símbolo
do clip de filme na biblioteca
13. Botão direito do mouse em cima do objeto > em ações do objeto: dois cliques em
starDrag
14. Clique em on (press) no lado de direito do quadro de ações > evento: pressionar
15. Clique em starDrag > destino: dê o nome da instância (para procurar clique em
inserir caminho de detino no canto inferior direito )
16. Dê um clique em do caminho em seguida OK
17. Em ações clique em stopDrag>evento:soltar
18. Volte a cena principal
19. CTRL+Enter para testar o filme.
40. Ações do Flash – A Parte Programável do Aplicativo
O Flash possui uma série de ações, todas elas pré definidas e fáceis de
encontrar e de usar, vamos tomar como exemplo o quadro chave 10 no filme (vamos
colocar uma ação nele):
No menu botão direito do mouse para entrar na tela de ações, dê um duplo

clique para selecionar.
53
Para abrir a categoria clique duas vezes na ação desejada. Como exemplo
vamos usar duas ações:
PLAY – Faz com que o Flash execute o filme se este estiver parado, a partir do
quadro onde a ação foi inserida. A sintaxe é simplesmente play.
STOP – faz o filme parar de rodar (como a ação será inserida no quadro 10, o filme
não passará deste ponto, a sintaxe é simplesmente stop; sem parâmetros.
Note que ao inserir uma ação no filme aparece a letra (a) que indica que naquele
quadro há uma ação.
41. Usando a Ajuda do Flash
41.1 Guia para Mídia Instrutiva
O pacote do Flash MX contém uma variedade de mídias para ajudá-lo a

conhecer o programa rapidamente e a dominar a criação de filmes do Flash Player —
incluindo a ajuda on-line exibida no navegador da Web, aulas interativas, um tutorial,
dois manuais impressos e um site da Web atualizado regularmente.
41.2 As aulas e o Tutorial do Flash
Se você não conhece o Flash ou tiver usado somente um conjunto limitado de

seus recursos, comece com as aulas. As aulas apresentam os recursos principais do
Flash, permitindo que você pratique em exemplos isolados.
O tutorial apresenta o fluxo de trabalho no Flash mostrando como criar um
filme básico. O tutorial pressupõe o entendimento dos tópicos abordados nas aulas.
Para iniciar as aulas, selecione Ajuda > Aulas > Introdução.
41.3 Usando o Flash e Guia de Referência do Actionscript
O Usando o Flash contém instruções e informações para usar todas as

ferramentas e comandos do Flash. É fornecido como ajuda on-line e como manual
impresso. A ajuda on-line dispõe de diversos filmes do Flash Player que demonstram
efeitos e recursos.
O Guia de Referência do ActionScript contém instruções e informações sobre
o ActionScript, incluindo escrever na linguagem ActionScript, criar interação com o
ActionScript e um dicionário completo do ActionScript. É fornecido como ajuda on-
line e como manual impresso.
54
41.4 Ajuda do Flash
O Flash MX contém três sistemas de ajuda: Usando o Flash, Referência do

ActionScript e Dicionário do ActionScript.
Para tirar o melhor proveito da Ajuda do Flash, a Macromedia recomenda o
uso do Netscape Navigator 4.0 ou posterior ou do Microsoft Internet Explorer 4.0 ou
posterior no Windows, e o Netscape Navigator 4.0 ou posterior no Macintosh. Se
você usar um navegador 3.0, todo o conteúdo dos filmes e a Ajuda do Flash ainda
estarão acessíveis, mas alguns recursos (como a Pesquisa) não funcionarão. A
execução simultânea do Flash e da Ajuda do Flash em um Macintosh requer até 32
MB de memória, dependendo das necessidades de memória do seu navegador.
Para usar a Ajuda do Flash:
1. Escolha um dos três sistemas de ajuda no menu Ajuda.

2. Navegue pelos tópicos da Ajuda utilizando um dos seguintes recursos:
3. A guia Conteúdo organiza as informações por assunto. Clique nas entradas do
nível superior para exibir os subtópicos.
4. A guia Índice organiza informações como um índice impresso tradicional. Clique
em um Termo para saltar para um tópico relacionado.
5. A guia Localizar procura qualquer seqüência de caracteres em todo o texto do
tópico. Essa guia requer um navegador 4.0 ou posterior compatível com Java.
Para procurar uma frase, digite-a na caixa de entrada de texto.
6. Para procurar arquivos que contêm duas palavras-chave (por exemplo, camadas
e estilo), separe cada palavra por um sinal de adição (+).
7. Para procurar arquivos que contêm uma única palavra-chave ou frase completa,
separe as palavras por um espaço.
8. Os botões Anterior e Próximo permitem a movimentação pelos tópicos de uma
seção.
9. O ícone do Flash vincula você ao site Centro de Suporte Flash na Web.
55
56
42. INTRODUÇÃO AO DREAMWEAVER MX
O DreamWeaver MX é um editor de HTML profissional para o

desenvolvimento de páginas, sites e aplicativos para a Internet que já é bastante
utilizado no meio dos desenvolvedores pela facilidade que sua interface apresenta.
Ele oferece ferramentas suficientes para aqueles que gostam de trabalhar em

modo texto, como por exemplo, as dicas de código que são exibidas à medida que
são digitados os comandos.
O DreamWeaver MX também facilita a vida daqueles que não tem afinidade

com códigos HTML, ele possui uma interface gráfica que possibilita a criação de
páginas, sites e aplicativos sem a necessidade de digitação de uma só linha de
código. Possuindo painéis, guias, menus e o inspetor de propriedades junto da área
de trabalho, facilita-se a busca de problemas e se agiliza as definições em geral.
Sendo um produto da família MacroMedia ele tem ligações com outros

aplicativos como por exemplo, o Flash, o Fireworks, o ColdFusion etc. No decorrer
da apostila veremos como o DreamWeaver MX conversa com alguns desses
aplicativos.
O DreamWeaver MX possui também extensões que devem ser baixadas

(download) do site da Macromedia (www.macromedia.com.br). Tais extensões
trazem novos recursos para o aplicativo que podem ser bastante úteis.
Na Internet você também encontra muitas referências sobre o DreamWeaver

MX e as versões que o antecederam.
43. Conhecendo a Área de Trabalho
O item 1 desta apostila abordará o conhecimento da área de trabalho:
57
43.1 Barra de Título
A barra de títulos contém o nome do programa que está sendo usado, no

caso, Macromedia DreamWeaver e o nome do arquivo que está sendo editado.
43.2 Guias
O DreamWeaver possui uma barra denominada “INSERIR” que contém

“guias”, e estas possuem ícones de atalhos para ferramentas básicas, ou seja, as
mais utilizadas na construção do site.
43.3 Guia Common
Nessa guia há ferramentas básicas do DreamWeaver. São elas:
Hiperlink: inserir link;
Email Link: link para e-mail;
Ancora: Link para um lugar específico dentro do próprio documento ou outro

qualquer;
Inserir Tabela: Inserir tabela;
Desenhar camada;
Imagem: Inserir uma imagem;
Flash: Inserir arquivo flash (.swf);
Imagem Rollover: Insere uma imagem que é substituída por outra ao passar do
mouse;
Menu de Navegação: Cria um menu com troca de imagens;
Linha Horizontal;
Data;
Comentários.
Outras guias serão abordadas de outra forma no decorrer da apostila.
43.4 Barra de "Edição do Documento"
58
Denominada “Documento” essa barra possui ferramentas que exibem informações

do arquivo em edição, tais como, o título, exibição de layout, layout e HTML e apenas
o HTML. É muito usada na manutenção dos sites, quando da necessidade de
correções no código HTML.
43.5 Painéis
Os painéis possuem informações relacionadas a ações avançadas dentro de

uma página. Dentre os painéis existentes podemos destacar:
- Design: onde buscaremos informações sobre o arquivo .css que será vinculado ao
arquivo; e
- Arquivos: onde teremos a definição e a respectiva árvore de diretórios do site em
evidência. Esses painéis podem ser exibidos e ocultados através do menu “janela”
na opção "ocultar painéis".
43.6 Área de Desenvolvimento
A área de desenvolvimento exibe tudo o que está sendo criado no site. Nessa
área usamos um termo WYSIWUG (What You See Is What You Get – O que você vê
é o que você terá), sendo assim tudo o que está na área de desenvolvimento está
como será exibido no browser, excetuando-se as linhas e marcas de símbolos
visíveis que identificam algum atributo à imagem ou texto.
43.7 Barra "Inspetor de Propriedades"
A barra Inspetor de Propriedades, que fica exatamente no pé da área de

desenvolvimento, exibe informações fundamentais sobre o que está sendo feito no
site.
Tudo o que for inserido na área de desenvolvimento terá informações

importantes na barra de propriedades. Essa barra é a mais importante da área de
trabalho, pois através dela você identificará problemas nas definições de atributos.
44. Tipos de páginas
Aqui serão abordados:
- Tipos de Páginas;
- Configuração de Página; e
- Formatação de Texto.
59
O DreamWeaver possui diversos tipos de páginas: básicas, dinâmicas,

modelos, CSS, frames entre outras. Nesta apostila iremos abordar páginas básicas,
modelos, CSS e frames.
44.1 Configuração de Páginas
Na barra de menus em “Modificar”, “Propriedades da página”, você encontrará

tudo o que se refere à cor de fundo, texto, links, imagem de fundo, margens.
45. Formatação de Texto
O texto pode ser formatado de duas ou três maneiras:
- através de barra inspetor de propriedades;

- através da barra “Inserir” na guia “Common”; e
- através de uma folha de estilos, que será abordada mais adiante.
46. Tabelas
Neste tópico iremos abordar os seguintes temas relacionados a tabelas:
- Inserção;
- Mesclagem;
- Fundos;
- Alinhamentos;
- Auto-formatação;
- Fixa e escalonável;
- CellPadding;
- CellSpacing;
- Indexação;
- Criação de layouts com tabelas.
As tabelas ajudam bastante no desenvolvimento do site. Elas podem ser fixas

ou escalonáveis. A vantagens e desvantagens em trabalhar com as duas, isso você
deverá decidir quando da inserção das mesmas.
Há algumas considerações com relação ao alinhamento das tabelas que

devem ser discutidas, por exemplo, nunca se alinha uma tabela com alinhamento de
60
texto e sim com o alinhamento da célula ou células. Para mudar a porcentagem da

largura da célula, selecione a célula que deverá receber um novo valor.
Para inserir uma tabela você pode usar:

- o menu “Inserir” e a opção “Tabela”
- a na barra “Inserir” a guia “Tabelas”

Feito isto, será exibida a caixa de propriedades “Inserir Tabela”, representada
abaixo. Essa caixa possui as definições da sua tabela.
47. Imagens
Abordaremos neste item:
- Inserção de Imagem;
- Alinhamentos.
Como já abordado no início da apostila, a guia "Common" possui um ícone

para que você insira suas imagens. Faça um teste.
Quando inserida a imagem, você poderá clicar sobre ela e usar alguns comandos da
barra “Inspetor de Propriedades”, tais como, inserir um link, fazer um mapa da
imagem com vários links,alinhamento e inserir borda.
47.1 Imagens Interativas

A imagem cambiável é o conhecido rollover, ou seja, quando se coloca
o mouse em cima de uma imagem, a mesma muda para uma outra imagem.
Clique em Inserir >> Imagens interativas e >> imagem cambiável, ou clique no
ícone no Painel Inserir. Abrirá a caixa de diálogo.
61
No campo “Nome da imagem”: nomeie esta imagem.

No campo “Imagem original”: clique no botão Procurar e localize a imagem.
No campo “Imagem cambiável”: clique no botão procurar e localize a outra imagem.
No campo Pré-carregar a imagem cambiável: deixe este item selecionado.
No campo “Texto Alternativo”: Você poderá digitar algum texto que aparecerá
assim que o mouse for colocado em cima da imagem.
No campo “Quando tiver clicando, vá para a URL”: clique no botão procurar e
selecione a URL de destino (igual a link).
48. Links
Existem seis tipos de links:
- Relativo: você apenas cita o nome do arquivo e o diretório (em alguns casos)
exemplo: nomedoarquivo.html
- Absoluto: deve-se digitar o caminho inteiro do arquivo
exemplo: http://www.fflch.usp.br/sti/index2.html
- Download: esse tipo de link depende de um formato, por exemplo, se você colocar
um link para um arquivo do Word e o usuário possuir Word na máquina, o arquivo
será aberto. Caso o arquivo do Word esteja compactado em formato .zip, quando o
usuário clicar sobre ele fará, obrigatoriamente, o download do arquivo e
posteriormente o programa WinZip entrará em ação.
exemplo: arquivo.doc (o Word o abrirá);
Arquivo.zip (será feito o download e depois o WinZip será aberto para

descompactação do arquivo)
- E-Mail: esse tipo de link faz com que, ao ser clicado, o link abra a janela do
programa de envio de e-mail padrão da máquina do usuário com o endereço do e-
mail já inserido no campo “e-mail”.
exemplo: mailto:abc@usp.br
62
- Âncora: esse tipo de link é muito usado. Ele faz com que o visitante vá a lugares
específicos dentro da página ativa ou qualquer outra página do site.
exemplo: <a href=“#fim”>fim</a>
No final da página inclui-se uma frase com a âncora
<a name= “fim” >Aqui é o fim</a>
Quando o usuário clicar sobre a palavra “fim” ele irá para a âncora em questão
nomeada como “fim”, na página ativa ou em qualquer outra página ou site.
- Mapa de imagem: mapear uma imagem pode ser uma mão na roda para aqueles
que não querem muito trabalho quando da criação dos layouts, uma vez que basta
criar a imagem e usar as ferramentas de mapeamento de imagem que estão na
barra de propriedades.
49. Mídias
O DreamWeaver MX faz parte de um grupo de programas especialmente

desenvolvidos para a Internet. Esse grupo é composto do Flash MX, Fireworks MX e
outros aplicativos. Basta acessar o site da Macromedia (www.macromedia.com.br)
para conhecer mais sobre estes e outros programas. A guia “Common” possui
atalhos para a inserção de mídias que são:
Fireworks
Flash
Clicando sobre qualquer um deles, uma janela se abre para que você escolha o
arquivo que será inserido no site.
Quando selecionada a mídia o “Inspetor de Propriedades” abrirá opções

relacionadas ao arquivo inserido.
49.1 Botões Flash
Botão Flash, são botões animados que você poderá utilizar em suas
páginas. Clique em Inserir >> Imagens interativas e no >> Botão Flash,
ou clique no ícone no Painel Inserir.
63
Aparecerá a caixa e diálogo:
No campo “Amostra”: visão de vários tipos de botões. No campo Estilo:

seleciona o tipo de botão desejado.
No campo “Texto do botão”: digite o texto do botão.
No campo “Fonte”: tipo de fonte.
No campo “Tamanho”:tamanho do texto.
No campo “Link”: clique no botão procurar e localize a URL desejada. No
campo Cor do fundo: adiciona uma cor de fundo.
No campo “Salvar como”: nomeie o botão deixando a extensão - *.swf.
49..2 Texto Flash

Texto Flash, são textos animados que você poderá utilizar em suas
páginas.
Clique em Inserir/Imagens interativas/Texto Flash, ou clique no ícone
no Painel Inserir.
64
Aparecerá a caixa e diálogo:
No “Campo Fonte”, define uma fonte.

No “Campo Tamanho”, define o tamanho da fonte. No “Campo Cor”,
define a cor do texto.
No “Campo Cor da Imagem Cambiável”, define a cor do texto. No “Campo
Texto”, digite o texto desejado.
No Campo Mostrar a Fonte”, deixe este item selecionada para ver no
“Campo Texto” a fonte escolhida.
No “Campo Link”, clique no botão procurar e localize a URL desejada. No
Campo “Cor de Fundo”, define uma cor de fundo.
No campo “Salvar como”, nomeie o arquivo deixando a extensão - *.swf.
50. Layers
As layers ajudam quando queremos que algo fique em lugar específico na

página, por exemplo, queremos que um logotipo fique flutuando sobre a janela.
Há apenas um problema com as Layers: versões inferiores a 4 do Netscape

não trabalham com esse recurso, invalidando seu projeto.
Para inserir uma layer:

- Na barra “Inserir”, “Common” selecione o ícone “Desenhar Camada” e desenhe
a layer onde quiser, você pode até desenhar diversas layer e construir um layout.
51. Janela Popup
Você conhece aquela janela chatinha que se abre logo que um site é aberto?
Então, a tal janela chatinha é uma “Janela PopUp”. Muito boa para dar
informações de última hora, anunciar promoções, eventos, mas, muito inconveniente
quando usada em excesso.
A construção de uma “Janela PopUp” é muito simples:
65
- Selecionar a "tag body" no "Inspetor de Propriedades"
- Clicar no sinal de "+"
- Escolher a opção “Abrir a janela do navegador” e as propriedades da janela serão

exibidas como abaixo:
52. Formulários
Os formulários também são páginas em html, os quais os visitantes do site

preenchem e enviam suas sugestões, cadastros, pedidos etc.
Para criar um formulário:
- Clique na barra “Inserir” na guia “Formulários” no ícone “Formulário” ;
- Insira uma tabela com a quantidade de linhas e colunas necessárias;
- Insira os dados que serão solicitados de um lado (de preferência do lado esquerdo);
- Insira os campos correspondentes ao dado solicitado. Tipos de Campos:
- Insere um contorno tracejado vermelho indicando um formulário.
Observe que o inspetor de propriedade foi alterado.
- Define o nome do formulário.
- Insere a URL, o endereço mailto (e-

mail), ou navegar para um arquivo.
66
- Define a forma como o navegador e o servidor irão

processar o formulário.
- Define qual quadro ou janela o servidor utilizará ao exibir

uma resposta ao formulário.
- Define o tipo de codificação (qual formado os

dados são enviados).
- Insere um campo e texto .
Observe que o inspetor de propriedades foi alterado
- Define o nome do campo.
- Define o comprimento do campo em pixels.
-Define o número máximo de caracteres que podem ser

inseridos no campo.
- Define: Linha simples, texto digitado

somente em uma linha; Multi-linha, texto com várias linhas; Senha œ texto
aparecerá como asteríscos.
Observe que se você optar por —Multi-linha“, o campo de texto se

altera
E no Inspetor de Propriedades os campos: valor inicial e quebra

automática de linha, são alterados, onde no campo “Valor Inicial” você
poderá colocar algum texto ou deixar em branco e no campo(Quebra
automática de linhas) você poderá optar por:
Padrão: rolagem do campo determinado pelo navegador.
Desativada: o texto digitado só mudará de linha quando o usuário utilizar a
tecla [ENTER]
67
Virtual: Haverá a quebra de linha quando o texto chegar na borda direita da

área de texto
Física: converte as quebras de linha quando os dados são enviados para o
Servidor.
- Você poderá digitar algum texto ou apenas

deixar em branco.
- Inseri uma área de texto com multi-linha.
- permite ao usuário escolher várias opções .

Observe que o inspetor de propriedades é alterado.
- Define o nome da caixa de seleção
- indicará nas informações que será passada para

você a opção que o usuário optou.
- Define se você deseja que uma ou mais opções fique

já selecionada.
- permite ao usuário escolher apenas uma opção .

Observe que o inspetor de propriedades é alterado:
- Define o nome do botão de opção.
68
- Indicará nas informações que será passada para

você, a opção que o usuário optou.
- Define se você deseja que uma ou mais opções fique

já selecionada.
- Define um grupo de botões. Ao acionar esta tecla aparecerá uma

caixa de diálogo.
No campo “Nome”, dê um nome ao botão .

No campo “Botões de opção”, acrescente ou diminua a quantidade de
botões utilizando os sinais + e -.
No “Campo Identificador”, clique no primeiro item e digite o nome da
opção (assim sucessivamente com os outros identificador), Clique em OK.
- Define um botão menu em lista .
Observe que o inspetor de propriedade é alterado.
- Define o nome da lista de opção.
69
- Neste campo,
estando a opção Tipo acionado em Menu, para se inserir as opções clique
em e abrirá uma caixa de diálogo.
Nesta caixa de diálogo clique logo abaixo do item Identificador do

item e vá digitando as opções (clique em + ou œ para aumentar ou
diminuir as opções) Clique no botão[OK].
Observe que no inspetor de propriedades o item
ficou com a relação das opções que você

colocou na caixa de diálogo acima.
No campo Tipo estando acionado em lista para se inserir as

opções, faço o mesmo que no item anterior (Tipo estando acionado em
Menu) e após clicar no botão [OK] o inspetor de propriedades será
alterado novamente.
- Define a altura da lista e no item Seleções, se estiver

selecionado permiti múltiplas escolhas, para isto o usuário deverá
selecionar a opção e manter a tecla CTRL pressionada e ir selecionando as
outras opções.
- O browser carrega a opção desejada para uma outra página. Ao

acionar este campo aparecerá uma caixa de diálogo:
70
No “Campo Texto” dê o nome da opção.

No “Campo Itens do menu” permite acrescentar ou diminuir as opções
utilizando os botões [+] ou [—].
No “Campo Quando tiver selecionado vá para a URL”, Clique em

procurar e localize a URL desejada, ou digite o endereço completo da URL:
exemplo - http://www.cadex.com.br
No “Campo Nome do menu”, dê um nome a esta opção.
No “Campo Opções”, você pode inserir o botão Ir após o menu.
OBS: Esta opção é selecionada caso você queira ativar a primeira opção
clicando no Ir, caso queira deixar esta opção apenas como rótulo, não
selecione este item.
Selecione o primeiro item após a alteração da URL: retorna ao

primeiro item após a alteração da URL. Clique no botão [OK].
Aparecerá na área de trabalho: ou caso você tenha
optado pelo item “Inserir o botão Ir”.
- Permite o usuário anexar um arquivo .
- Insere um botão.
Observe que logo após acionar este botão, o Inspetor de Propriedade

é alterado.
71
No “Campo Denominação” você digita o texto do botão, ou utilize o

campo Ação escolhendo uma das opções: o item “Enviar” o formulário cria
o botão o item “Redefinir o Formulário” cria o botão e o item
“Nenhuma” cria o botão.
53. Templates
Os templates ou modelos são utilizados quando se tem um layout padrão para

todas as páginas, ou seja, quando todas as páginas forem utilizar as mesmas
imagens, links, textos e etc.
Nestes templates serão criadas regiões que serão bloqueadas e regiões que
serão editáveis (que podem ser alteradas e etc...).
Vamos criar um exemplo de templates. Abra uma nova página e crie uma
tabela com 3 linhas e as seguintes configurações: Preenchimento da célula=0,
Espaçamento entre as células=0,
Largura=800 e Borda=0.
Vamos supor que nesta primeira linha da tabela, você irá utilizar uma imagem
de logotipo do seu site, e na terceira linha você irá utilizar um texto, mas
somente uma parte dele você deseja que seja editável e a segunda linha
será o corpo da página, a qual será deixada como região editável da página.
Selecione esta segunda linha, pressionando a tecla CTRL e clicando com o

mouse sobre a mesma, vá a menu Inserir/Objetos de Modelos/Região editável. Na
caixa de diálogo dê um nome a esta região editável, exemplo: corpo, clique em no
Botão [OK]. Na terceira linha selecione o trecho do texto que você deseja ser
editável e faça o mesmo procedimento que foi feito para a segunda linha.
72
Observe que a célula e o trecho do texto ficaram demarcados e com os

respectivos nomes.
Você poderá deixar a primeira linha já com a imagem, ou poderá adicioná-la
posteriormente. Salve este templates, vá em arquivo/salvar como modelo e na caixa
de diálogo no campo salvar como dê um nome a este templates, exemplo:
site_modelo.
OBS: O Dreamweaver salva os templates com a “extensão.dwt” e ficará armazenado

na pasta Templates, que será criada automaticamente na raiz do site.
Feche este arquivo.
53.1 Criando Páginas à Partir do Template
Você já tem um modelo e poderá utilizá-lo para criar outras páginas para o
seu site. Vá em menu Arquivo/Novo e na caixa de diálogo clique em Modelo, no
campo modelo clique no site — Primeiro Site“. No campo ao lado aparecerá o
templates que você salvou como site_modelo. Clique em criar.
73
Observe que a área de trabalho ficou com uma borda amarela, isto significa
que você está usando um Templates. Repare que ao passar o mouse sobre a
primeira linha o cursor fica com um símbolo — “Pare”, isto significa que esta região
está e só poderá ser modificada no próprio Templates. Na segunda linha que está
demarcada em azul você editá-la, pois a mesma foi definida como uma região
editável. Salve esta página normalmente como HTML, vá em Arquivo/Salvar como e
na caixa de diálogo de um nome a esta página.
53.2 Modificando um Template
Como vimos o templates é um modelo e ao criarmos novas páginas com o

templates o Dreamweaver pega as informações do Templates e as projeta no
arquivo HTML. Suponha que você queira modificar o logotipo do seu site. Usando o
templates, basta você alterá-lo que automaticamente serão feitas a alteração em
todas as páginas.
Vá ao menu Arquivo/Abrir , clique na pasta Templates e no arquivo

site_modelo. Faça as alterações desejadas. Salve este templates. Clique em Salvar
tudo e na caixa de diálogo pressione a tecla — “Shift” e selecione todas as páginas
que utilizaram este templates.
Clique em atualizar, aparecerá uma nova tela informando quantas páginas

foram atualizadas. Clique em fechar.
74
54. Frames
Os frames são divisões da tela do browser, ou seja, mais de uma página em

uma só tela. Para se criar uma página com 2 frames será necessário 3 páginas,
sendo uma para cada frame e outra para a página principal que terá as informações
destes frames.
Clique em >> Arquivo >> Novo e abrirá a caixa de diálogo:
No campo Geral/Categoria, clique em Conjuntos de molduras.
No campo Conjuntos de molduras escolha a moldura que desejar.
55. Criando Âncoras
Este recurso é útil para você que queira que os links e o conteúdo fiquem na mesma
página.
Crie 3 links no topo do seu documento: escreva Parágrafo 1, Parágrafo 2 e Parágrafo

3.
Agora insira esta matéria logo abaixo do link (copie este texto e cole no seu
documento):
PARÁGRAGO 1
Ao contrário do que meu nome indica, não sou judia. Inclusive, estudei em colégio
católico, já quis ser freira, mas faz tempo que concluí que, infelizmente, o discurso
das religiões, em geral, fomenta mais ódio do que amor, mais guerra que paz (sem
falar que sempre achei todas as religiões incrivelmente machistas). Então, graças a
Deus, sobrevivi à escola católica e hoje estou bastante isenta da culpa imposta pela
religião. Isso posto, fui ver “A Paixão de Cristo”, de Mel Gibson, com plena
consciência de que o fundamentalismo cristão tão em voga nos EUA apóia o filme, e
de que ele está sendo acusado de anti-semita e homofóbico. Será que ele é? Contra
os homossexuais, sem dúvida. Herodes é pintado como gay e o diabo usa
maquiagem e lança olhares insinuantes a Jim Caviezel, que faz Jesus (depois
descobri que Satanás, que mais parece aquela criatura computadorizada de “Senhor
dos Anéis”, é interpretado por uma atriz, pra dar-lhe um look mais andrógino ainda).
75
Contra os judeus, não tenho tanta certeza. Certo, eles pedem a morte de Jesus e
são estúpidos, e Pilatos é que é um cara legal, mas pelo menos Judas se mostra
arrependido de sua traição (e eu fiquei com pena dele). Além do mais, culpar os
judeus soa contraditório. Afinal, a história oficial diz que Jesus veio pra cá pra morrer
por nós e redimir-nos de nossos pecados (seja lá quais sejam, como diz o rapaz de
“Eleição”). Ou seja, Jesus é um sacrifício de Deus para os homens. Sob este ângulo,
ninguém além de Deus pode ser acusado de matá-lo. Claro, a gente pode especular
sobre que Deus é esse que condena seu próprio filho à morte, mas o filme nunca
suscita tal discussão. Porque “Paixão” fala da carne, não do espírito.
PARÁGRAFO 2
E quanta carne... Não me lembro de ter visto um filme tão violento, logo eu que amei
“Kill Bill”. Outras aventuras com o Mel, tipo “Mad Max”, têm a violência dos
quadrinhos. Mas esta de “Paixão” parece muito real e ininterrupta. Todo santo
espinho, chicotada e prego recebido por Jesus é visto em close, em câmera lenta.
Nem filme de terror é tão explícito assim. Ver tanto sangue e tortura é perturbador.
Tudo bem, condenar “Paixão” por ser brutal seria hipocrisia, já que toda a religião
cristã é baseada nesses símbolos sangrentos. Não foi o Mel que inventou. Só não
sei qual o propósito de se fazer um filme tão visceral. Tá, o propósito de qualquer
filme, mesmo dos clássicos, pode ser questionado. Mas “Paixão” não traz salvação
nenhuma. Vamos ver: o verdadeiro horror não é se escandalizar com o que fazem a
Jesus. É se escandalizar se fazem isso com qualquer um, ponto final, até com um
psicopata demente como Barrabás. Ou a pena de morte é aceitável em alguns
casos? A ideologia dominante por trás de “Paixão” (e da sua fonte, a Bíblia) vem à
tona quando um dos dois criminosos na cruz diz que ele merece tudo isso, ele sim
merece ser punido e sofrer, mas Jesus, não. Sério? O outro ladrão ri e
instantaneamente é castigado por um corvo que lhe arranca os olhos. Isso é que é
dar a outra face? Esse é o Deus misericordioso? Se bem que esta violência em si
não é enfocada, apenas sugerida. Pode crer que se o corvo atacasse Jesus
veríamos a cena em todos seus detalhes.
PARÁGRAFO 3
Mas vamos à minha parte favorita da análise, que é a reação do público. Olha, não
ouço tanto choro no cinema desde “ET”. O pessoal realmente se comoveu. Lógico
que alguns devotos não viram necessidade de se desligar do mundo material, e até
atenderam seus celulares durante a sessão. Mas foram minoria. Assim que “Paixão”
terminou, ouvi o espectador do meu lado dizer que este era o melhor filme de toda a
sua vida. Já eu saí da sala meio em estado de choque. Não entendo nada de
budismo, por exemplo, mas sinto que uma religião que tem como símbolo um gordo
meditando pacificamente deve passar valores bem diferentes de outras por aí que
glorificam o calvário de um barbudo se esvaindo em sangue. O Mel soube captar
bem essa relação sado-masô. Minha aposta é que o filme vai ser encampado pelas
religiões cristãs por ser fiel à barbárie descrita no Novo Testamento.Como o papa
disse, “é como foi”. O velhinho deve saber.
76
Agora selecione o PARAGRAFO 1 (o título, não o parágrafo).
Clique no botão que fica na barra de ferramentas Insert / Common (Inserir /

Comuns) Irã aparecer esta janela, onde você vai escrever parágrafo 1.
Faça isso nos outros parágrafos também, com seus respectivos nomes.
Agora suba até os links no topo da página e link cada um da seguinte forma:
Isso mesmo, você deve colocar uma cerquilha antes de colocar o nome da
âncora.
Assim o html irá entender que você não quer buscar um link qualquer, e sim
uma âncora. Repita isso nos outros links e você irá obter o resultado esperado.
56. Trabalhando com Java Script no Dreamweaver
Antes de vermos o procedimento de inserirmos códigos de JavaScript no

Dreamweaver, vamos entender a diferença entre Java e JavaScript.
A linguagem Java é usada para desenvolver programas para a Internet . Estes

programas estão na forma de applets, que são carregados pelo navegador
separadamente do documetno HTML, e só depois são executados.
Já o JavaScript é uma linguagem que permite injetar lógica em páginas escritas em
HTML (HyperText Mark-up Language). Os parágrafos de lógica do JavaScript podem
estar soltos ou atrelados à ocorrência de eventos, sendo que os soltos são
executados na seqüência em que aparecem na página (documento) e os atrelados a
eventos são executados apenas quando o evento ocorre.
Para inserir parágrafos de programação dentro do HTML, é necessário

identificar o início e o fim do set JavaScript, da seguinte forma:
<SCRIPT LANGUAGE="JAVASCRIPT">
Set de instruções
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da página.
77
Entretanto, para melhor visualização e facilidade de manutenção, recomenda-

se que toda a lógica seja escrita no início do documento, criando-se funções que
serão chamadas quando se fizer necessário (normalmente, atreladas a eventos).
Observação: os comandos JavaScript são sensíveis à caixa (maiúsculas e
minúsculas) em sua sintaxe. Portanto, é necessário verificar e obedecer à forma de
escrever os comandos. Caso seja cometido algum erro de sintaxe quando as escrita
de um comando, o JavaScript interpreta a linha como variável.
Agora vamos ao procedimento de como inserir códigos JavaScript em uma

página utilizando a janela de códigos do dreamweaver.
Copie o código JavaScript que você deseja. Você pode utilizar como exemplo
um dos dois códigos abaixo:
O primeiro é o código de “Data AutoAtualizável” em forma escrita e o segundo
também funciona como data autoatualizável só que em forma de “Relógio
Analógico”.
Ative o modo de exibição de código do Dreamweaver clicando no botão .

Agora cole um dos códigos descritos acima. Volte para o mdo de exibição normal e
visualize no navegador.
— 1º CÓDIGO
<SCRIPT LANGUAGE="JAVASCRIPT">
mdata = new Date()

mhora = mdata.getHours()
mdia = mdata.getDate()
mdiasemana = mdata.getDay()
mmes = mdata.getMonth()
mano = mdata.getYear()
if (mhora < 12)
document.write('Bom dia - ');
else if(mhora >=12 && mhora < 18)
document.write('Boa Tarde - ');
else if(mhora >= 18 && mhora < 24)
document.write('Boa Noite - ');
//document.write('');
if(mdiasemana == 0)
document.write('Domingo, ');
else if(mdiasemana == 1)
document.write('Segunda Feira, ');
document.write('Terça Feira, ');
document.write('Quarta Feira, ');
document.write('Quinta Feira, ');
document.write('Sexta Feira, ');
78
document.write('Sábado, ');
document.write(mdia+' de ');
if(mmes == 0)
document.write('Janeiro de ');
else if(mmes == 1)
document.write('Fevereiro de ');
else if(mmes == 2)
document.write('Março de ');
else if(mmes == 3)
document.write('Abril de ');
else if(mmes == 4)
document.write('Maio de ');
else if(mmes == 5)
document.write('Junho de ');
else if(mmes == 6)
document.write('Julho de ');
else if(mmes == 7)
document.write('Agosto de ');
else if(mmes == 8)
document.write('Setembro de ');
else if(mmes == 9)
document.write('Outubro de ');
else if(mmes == 10)
document.write('Novembro de ');
else if(mmes == 11)
document.write('Dezembro de ');
document.write(mano+'');
document.write('');
</script>
— 2º CÓDIGO
<SCRIPT TYPE=TEXT/JAVASCRIPT>
var Timer = null;
function OnOff() {
if (Timer != null) {
clearTimeout(Timer);
Timer = null;
Frm3.CLKon.value = ' Ligar ';
return;
} else {
Frm3.CLKon.value = 'Desligar';
Running();
}
}
function Running() {
with (new Date()) {
var Q=getTime();
79
Timer = setTimeout('Running()', 1000-Q%1000);

var St = 'Agora ' + ISOlocalDTstr() + ' local<br>' +
UTCstr() + ' UTC<br>01.01.1970 GMT + '+Q+' ms';
}
DynWrite('RunClock', St);
}
// Relógio Analógico
// =================
dCol='000066';//date colour.
fCol='660000';//face colour.
sCol='990000';//seconds colour.
mCol='660000';//minutes colour.
hCol='660000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=100;
ClockFromMouseX=50;
//Alter nothing below! Alignments will be lost!
d=new
Array("DOMINGO","SEGUNDA","TERÇA","QUARTA","QUINTA","SEXTA","SÁBADO
");
m=new
Array("JANEIRO","FEVEREIRO","MARÇO","ABRIL","MAIO","JUNHO","JULHO","AG
OSTO","SETEMBRO","OUTUBRO","NOVEMBRO","DEZEMBRO");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=120;
xmouse=150;
scrll=0;
80
props="<font face="+font+" size="+size+" color="+fCol+"><B>";

props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font
face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font
face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font
face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-
align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div
for (i=0; i < n; i++)
document.write('<div id="ieFace"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-
align:center">'+props+Face[i]+'</B></font></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div
for (i=0; i < H.length; i++)
81
document.write('<div id="ieHours"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-
size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes"
size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds"
size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-
(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
function Move() {
if(frm1.CLmouse.value == 'Movimentar') {
frm1.CLmouse.value = ' Fixar ';
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
} else {
frm1.CLmouse.value = 'Movimentar';
(ns)?window.onMouseMove=Mouse:document.onmousemove='';
ymouse=120;
xmouse=150;
}
}
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
82
for (i=0; i < H.length; i++){

var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',50);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
57. Mapeando Imagens
Primeiramente vamos inserir uma imagem qualquer. Neste exemplo eu usei um

Mapa. Vá ao menu Insert (inserir) > Image(imagem).
83
Vai abrir uma janela. Nesta janela você busca na sua pasta onde esta a
imagem. Após inserida a imagem, vamos mapeá-la facilmente.
Abra o Inspetor de Propriedades. Vá ao menu Window(Janela) >

Properties(propriedades) ou pressione CTRL + F3.
Presta atenção na imagem acima. Agora veja a diferença na imagem abaixo.

Após você ter aberto o Inspetor de Propriedades, depois você clica na imagem
(mapa). Tem que aparecer a ferramenta de mapeamento na caixa de propriedades.
Veja abaixo:
84
Atenção! A Ferramenta Mapeamento é esta que se encontra do lado esquerdo

na parte inferior da caixa de propriedades.
A primeira da direita pra esquerda é a que você irá usar para mapear bem
certinho cada parte da cidade. Os outros você usaria se fosse um círculo, elipse ou
quadrado. ok ?
Então você seleciona o mapeamento que for adequado e vai contornando
com cliques até fechar.
Depois de mapear você ira colocar o link na mesma caixa de propriedades.

OBS: para mais segurança, não digite o nome do link e sim mande procurar clicando
na pastinha amarela. Veja a imagem final.
58. Configurando FTP no Dreamweaver
58.1 O que é FTP?
O FTP (File Transfer Protocol) é um protocolo da Internet para transferência

de arquivos. Assim como o HTTP é um protocolo utilizado para acessar sites de
páginas da Web, o FTP é utilizado para acessar sites de transferência de arquivos.
Embora os navegadores (browsers) mais recentes tenham capacidade para

acessar sites FTP, é recomendado que se utilize outros softwares exclusivos para
esta tarefa - pois eles oferecem mais recursos e facilidades nesta área. Dois
softwares bastante conhecidos são o CUTEFTP e o FTP COMMANDER. O segundo
é de graça e pode ser baixado na Internet com bastante facilidade.
O FTP pode ser acessado pelo Menu SITE > NEW SITE(Novo Site).
Na tela (Local Info) defina os seguintes dados:
1º Campo: Nome do site.
2º Campo: Local do HD onde está o site.
3º Campo: Endereço virtual do seu site.
4º Campo: "Enable Cache" - Marca o cache da transferência.
Na tela (Remote Info) selecione a opção FTP.

1º Campo: "FTP Host" - É o endereço do seu servidor. EX: ftp.seudominio.com.br.
85
2º Campo: "Host Directory" - Pasta na qual seu FTP deverá iniciar (deixe em branco
se não existir).
3º Campo: "LOGIN" - Seu Login no servidor.
4º Campo: "PASSWORD" - Sua Senha no servidor.
86

Curso Fundacao Rede Amazonia Macro Media Fireworks MX

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso Fundacao Rede Amazonia Macro Media Fireworks MX

Uploaded by

Copyright:

Available Formats

CENT RO DE I NF O RM ÁT I CA

1. INTRODUÇÃO AO FIREWORKS MX............................................................................ 5

28.5 Área ativa ..................................................................................................................... 31

43.4 Barra de "Edição do Documento" ................................................................................ 58

2. Conhecendo os tipos de Imagens Digitais

Com o Fireworks MX você pode criar dois tipos de imagens: vetoriais e

A área de trabalho do Fireworks MX inclui:

O Fireworks MX possui 2 modos básicos de trabalho, o modo Objeto, onde

2. Escolha novamente a mesma opção para desativar.

8. Conhecendo nossas ferramentas

Moldura da caixa de seleção

Ponto ativo retangular Fatia

9. Criando um novo documento

Para criar um novo documento de imagem vetorial, selecione a opção Novo

10.1 Painel Histórico

10.2 Painel camadas

Editar / Bloquear Camada Nova Imagem Bitmap

Camada Nova / Duplicada

11. Vamos trabalhar um pouco com camadas

1. Crie um novo documento medindo 300x300.

1. Quais os tipos de imagens que o Fireworks MX trabalha, e quais as suas

13. Trabalhando efeitos de preenchimento

No Fireworks MX você pode personalizar todos os seus objetivos vetoriais

ferramentas. Ao clicar, abrirá a seguinte tela:

Quando clicamos na caixa de rolagem nas opções de

Podemos perceber que o preenchimento do retângulo está saindo de uma

Clicando sobre a setinha na caixa Predefinição, poderemos escolher um

Caso queira testar outras configurações de cores, basta clicar sobre os

14. Trabalhando efeitos de contornos

Nestas opções podemos configurar vários tipos de bordas para o nosso

15. Aplicando efeitos avançados

Podemos através da barra de propriedades adicionar também efeitos mais

A partir deste menu, iremos com mouse na opção Sombra e brilho e

E, na barra de propriedades teremos estas novas opções:

E nesta tela que podermos configurar o nosso efeito atrás do resultado

Veja que mudamos o posicionamento da sobra com relação ao objeto

Usando efeitos pré-definidos

17. Trabalhando com textos

A partir de agora, iremos conhecer melhor as propriedades da ferramenta

Fonte Lista dos tipos de fontes

múltiplas linhas de 100%.

Vale a pena lembrar que todos os efeitos que já vimos anteriormente

17.1 Aprendendo outros efeitos com texto

O Fireworks MX permite que, além dos efeitos já conhecidos, você adicione

Assim como fizemos o texto se adaptar ao caminho do círculo, podemos

linha de contorno. Da mesma forma que anteriormente, podemos adicionar ao texto

18. Combinando formas simples

No Fireworks MX podemos facilmente criar formas como retângulos,

União ´ Combina dois ou mais objetos sobrepostos em um só.

Interseção ´ Cria um objeto a partir da área em comum entre dois ou mais

Como percebemos, o novo objeto criado com a combinação dos outros,

19. Desenhando uma estrela

20. Trabalhando com imagens Bitmaps

20.1 Importando uma imagem

Em seguida, clicar com o mouse sobre o menu Arquivo -> Importar.

Agora você poderá clicar e mantendo o mouse pressionado, definir o

E quando o tiver definido, é só soltar o mouse que sua figura aparecerá:

20.2 Modificando o tamanho da imagem e da tela

Caso seja necessário, modificar as dimensões da imagem, a melhor forma de se

Com a opção Limitar proporções ativada, podemos ver os “cadeados” ao

20.3 Usando a ferramenta Varinha mágica

A ferramenta Varinha mágica, localizada na divisão BITMAP da barra de

20.4 Alterando cor de uma imagem bitmap

22. Trabalhando com máscaras