III.4 Macromedia Flash Programa de Animao Grfica Web . . . . . . . . . . . . . . . . . .

2
III.4.1 Apresentao do programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . III.4.2 Projectos multimdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . III.4.3 Ferramentas de desenho e pintura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . III.4.4 Som . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . III.4.5 Botes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 6 6 7 8

III.4.6 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 III.4.7 Animao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 III.4.8 Publicao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

III.5 Dreamweaver Programa de Edio de Pginas Web . . . . . . . . . . . . . . . . . . . . . . 18

III.5.1 Apresentao do programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 III.5.2 Criao de documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 III.5.3 Insero e formatao de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 III.5.4 Hiperligaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 III.5.5 Insero de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 III.5.6 Multimdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 III.5.7 Camadas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 III.5.8 Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 III.5.9 Publicao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Questes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Solues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Unidade III

III.4 Macromedia Flash Programa de Animao Grfica Web

III.4.1 Apresentao do programa
O programa Macromedia Flash um software vocacionado para a animao vectorial para a Web. Permite animaes que ultrapassam o simples GIF animado, atingindo graus elevados de interactividade e associando texto, udio, vdeo, imagem, etc. Atravs de cdigo (ActionScript) permite um nvel avanado de controlo da informao e de integrao com outras aplicaes e linguagens de programao, nomeadamente, ASP, consultas de bases de dados, etc. Atendendo a que os ficheiros que produz tm tamanho reduzido, quando comparados com outros ficheiros de informao grfica, e que podem ser visualizados nas plataformas de sistemas operativos mais comuns, como por exemplo, Windows e Linux, o Flash tem ganho preponderncia nos ltimos tempos, sendo uma referncia para trabalhos multimdia. O Macromedia Flash apresenta as seguintes vantagens: formato de exportao comprimido e aberto (SWF); compatvel com a maioria das plataformas e linguagens da Web; bom controlo sobre a imagem; permite som, vdeo, imagem e animao; possibilita um elevado nvel de interactividade.

O Macromedia Flash apresenta os seguintes inconvenientes: contedos dificilmente indexados em todos os motores de busca; pode levar a um excesso de animaes, em detrimento dos objectivos reais; pode diminuir a usabilidade; tendencialmente complexo; obriga ao uso de plug-ins.

Criao de Pginas Web

O ambiente de trabalho do Macromedia Flash apresentado na Fig. III.25.

3 4 5 6

7 8

Ambiente de trabalho do Flash.

Fig. III.25

1. Camadas (layers) nveis de empilhamento de objectos. 2. Linha de tempo (timeline) mostra graficamente a permanncia do objecto na escala temporal. 3. Controlo de visualizao aumenta ou diminui a rea do palco. 4. Caixa de ferramentas ferramentas comuns a outras aplicaes. 5. rea do palco local onde os objectos ganham visibilidade. 6. Conjunto de painis vrios painis de trabalho. 7. Painel de aces rea de insero de cdigo ActionScript. 8. Caixa / Inspector de propriedades (Property Inspector, P.I.) menu de contexto de acordo com a ferramenta seleccionada.

O Macromedia Flash carateriza-se pela disponibilizao de uma linha de tempo (timeline) e pela utilizao de camadas. Estas caractersticas tambm podem ser encontradas no Dreamweaver, que uma aplicao destinada edio e publicao de sites produzida pela mesma empresa: no entanto, o Flash permite a animao de praticamente todo o tipo de recursos visuais, enquanto o Dreamweaver est limitado a imagens e layers. As camadas so, por analogia, uma espcie de acetatos transparentes que suportam um objecto em cada folha.
Nota: Cada camada poder ter mais de um objecto mas, em termos de animao, prefervel guardar apenas um objecto por camada.

Unidade III

Na mesma linha da camada existem os quadros (assinalados, na Fig. III.26, com o nmero 4), que correspondem, em sentido figurativo, aos fotogramas de um filme. Se existirem quadros, o objecto dessa camada vai ser visualizado; caso contrrio, o objecto no aparece.

1 2 3 4 5

Fig. III.26

Linha de tempo.
1. Cabea de leitura 2. Camada oculta 3. Camada activa 4. Quadros ou clulas (frames) 5. Camada bloqueada

Nota: Ver as cinco primeiras lies apresentadas na Ajuda do Flash, para consolidar estas noes.

possvel observar, na parte inferior da Fig. III.26, a expresso 12.0 qps (quadros por segundo). Esta taxa de quadros, ajustvel, representa a velocidade com que os quadros so exibidos (frame rate): uma velocidade alta implica a perda de nitidez de pormenores da animao; pelo contrrio, uma velocidade baixa pode criar uma aparncia de arranques e paragens. Note-se que uma velocidade alta pode representar ficheiros maiores, por isso mais demorados na transferncia.

Criao de Pginas Web

t a r e f a
novo. Guardar o documento com o nome tarefaFlash.fla. Nota: A extenso .fla preenchida automaticamente pelo programa.

T III.6

1. Abrir o programa Macromedia Flash. Criar um novo documento com o comando Arquivo

2. Clicar sobre o palco e verificar o nome do ficheiro no P.I. 3. Modificar a rea do palco para 320 x 240 atravs do P.I. do palco. 4. Colorir o palco com uma cor a gosto. 5. Diminuir a taxa de quadros para 10 qps.
Nota: As tarefas 2 a 5 devem ser confirmadas no P.I. do palco.

6. Criar uma imagem parecida com a apresentada ao lado. 7. Fazer um arrastamento da imagem para o centro. 8. Usar a lupa da caixa de ferramentas para aumentar. 9. Utilizar a tecla Alt alternadamente com a lupa. 10. Arrastar o palco com a ferramenta de visualizao que tem uma mo desenhada. 11. Criar uma nova camada. 12. Com um duplo clique sobre o nome da camada, alterar o nome da camada1 para 10tic e
o da camada2 para 10tic cpia.

13. Ocultar as camadas. 14. Abrir a biblioteca atravs do menu JANELA. 15. Tornar as camadas ocultas novamente visveis.
Ver as lies 6 e seguintes do menu AJUDA e investigar as bibliotecas comuns. Fazer mais animaes em Flash, visando atingir objectivos concretos de uma pgina Web que se pretenda criar.

III.11, III.12

Unidade III

III.4.2 Projectos multimdia

O programa Macromedia Flash trabalha com os principais elementos multimdia: texto, imagem, som, vdeo e animao. At verso Mx, o Flash no tem comandos para 3D, embora permita carregar ficheiros finais (.swf) com essas caractersticas.

III.4.3 Ferramentas de desenho e pintura

A Fig. III.27 mostra uma descrio das ferramentas de desenho e pintura mais importantes. As ferramentas cujas legendas tm um asterisco (*) apresentam alguma especificidade prpria do Flash.
1 2 3 4 5 6 7 8 14 15 16 17 18 19 20 21 1. Seta (V) usada para seleccionar e mover objectos, assim como para remodelar linhas e formas. 2. Linha (N). 3. Caneta (P) para desenhar linhas rectas ou curvas com grande preciso. 4. Oval (O). 5. Lpis (Y) desenha linhas (com a tecla Shift premida) e formas livres. 6. Transformao livre (Q). 7. * Nanquim (S) (Ink Bottle) permite colorir um contorno. 8. Conta-gotas (I) selecciona e activa a cor sobre a qual se clicou. 9. Mo (H) permite arrastar a visualizao do palco. 10. Cor do trao com respectiva cor activa. 11. Cor de preenchimento com opo gradiente e respectiva cor activa. 12. Cor branca e preta, modifica a cor do trao para preto e do preenchimento para branco. 13. Opes da ferramenta seleccionada. 14. * Sub-seleccionar (A) (Outline Selector) permite mover e editar pontos criados com a Caneta e ajustar curvas de Bzier (usar com cuidado). 9 22 15. Lao (L). 16. Texto (T). 17. Rectngulo (R) com a tecla Shift pressionada, permite desenhar um quadrado. 10 11 12 23 18. Pincel (B). 19. * Transformar preenchimento (F) permite alterar o gradiente na cor de preenchimento. 20. Balde de tinta (K). 21. Borracha (E). 22. Zoom (M, Z). 13 23. Troca a cor do trao pela cor do preenchimento.

Fig. III.27 Ferramentas de desenho e pintura.

Nota: A letra associada ferramenta corresponde primeira letra do respectivo significado em lngua inglesa, com excepo das repeties. Esta letra d acesso ferramenta a partir do teclado: por exemplo, Alt + P Caneta, Pen.

Criao de Pginas Web

Na tabela seguinte esto resumidos os principais comandos dos menus do programa Macromedia Flash.
Menu
ARQUIVO

Principais comandos
manusear ficheiros: abrir, guardar fechar, criar modelos; importar udio, vdeo e imagens e exportar; configurar, visualizar publicao e publicar; visualizar, configurar pgina e imprimir. recortar, copiar e colar; desfazer aco e refazer aco; edio sobre o quadro; edio de smbolos; mapear fontes, atalhos e configuraes. trabalhar com o zoom; ver rguas, grades e guias; activar linha de tempo e rea de trabalho. criar e remover cenas; converter ou inserir smbolo; criar camada ou pasta; inserir e limpar quadros (chave em branco ou no); criar interpolao de movimento. alterar camada, cena ou documento; trocar ou editar smbolo; suavizar, acertar, optimizar, sub-menu forma; transformar: girar, inclinar, inverter, livremente, etc. alinhamentos, fontes, tamanhos, estilos. o avano, paragem e retrocesso do filme. activar, ou no, os vrios painis de ferramentas; acesso s bibliotecas. acesso Ajuda, lies, tutoriais e exemplos.

EDITAR

EXIBIR

INSERIR

MODIFICAR

TEXTO CONTROLAR JANELA

AJUDA

III.4.4 Som
No Flash, a insero de som passa pela importao do ficheiro para a biblioteca e depois por um arrastamento para o palco. Normalmente deixa-se o som numa camada vazia (Fig. III.28).

III.4.4

Fig. III.28

Insero de

Nota: A abertura da biblioteca faz-se atravs do menu JANELA ou da tecla Funo (F11).

som.

Unidade III

III.4.5 Botes
O Macromedia Flash permite vrios tipos de interactividade. Uma das possibilidades usar botes. No Flash, o boto pode ter quatro estados (Fig. III.29): Para cima quando no est a sofrer nenhuma influncia do rato ou teclado; Sobre quando o apontador do rato est sobre o boto; Para baixo quando est pressionado pelo apontador do rato; rea zona em que o boto sensvel ao clique.
A B

Fig. III.29 Os quatro estados que um boto pode ter no Flash : Para cima (A), Sobre (B), Para baixo (C) e rea (D).

possvel associar cdigo ActionScript s clulas da linha de tempo e aos objectos do palco. Os botes no so excepo, como se v na Fig. III.30.
Fig. III.30

Cdigo ActionScript associado a um boto.

A grande fora do Flash passa pela utilizao de cdigo ActionScript.

Criao de Pginas Web

t a r e f a
o nome tarefaFlash2.fla. pria e uma camada separada:

T III.7

1. Abrir o programa Macromedia Flash. Criar um novo documento. Guardar o documento com 2. Digitar o texto seguinte, atendendo a que cada pargrafo deve ter a sua caixa de texto prA energia nuclear tem os seus perigos. Obtm-se a partir da fisso nuclear, que, para alm de originar energia til para o Homem, conduz tambm produo de materiais perigosos. Por este motivo, alguns pases, prudentemente, esto a encerrar as suas centrais nucleares. A fuso nuclear (processo inverso da fisso) no produz materiais perigosos, mas est ainda distante a possibilidade de ser usada para a produo de energia em grande escala.

3. O tipo de texto dever ser esttico. 4. Activar o comando Alinhar (Ctrl + K) do menu JANELA. 5. Carregar no boto No palco. 6. Seleccionar as caixas de texto e alinhar esquerda, horizontalmente. 7. Formatar a fonte para Trebuchet MS, tamanho 25, centrada. 8. Inserir um quadro na clula 60 de todas as camadas. 9. Arrastar a clula 1 da segunda camada para o quadro 10. Na camada 3, arrastar a clula 1
para a clula 20 e assim sucessivamente.

10. Verificar, arrastando a cabea de leitura, o aparecimento dos blocos de texto da parte
superior para a parte inferior.

11. No menu CONTROLAR, activar o comando Reproduzir (Enter).

Testar a cena pressionando Ctrl + Enter. Explorar a ferramenta Pincel nos seus diferentes modos de pintura. Completar com outros recursos (textos e figuras animadas) o que poder vir a ser uma pgina Web sobre energia nuclear, usando o mais possvel o Macromedia Flash.

III.13, III.14

10

Unidade III

III.4.6 Imagens
Existem, essencialmente, dois tipos de imagens: 1. Mapas de bits (raster images) imagens criadas por uma grelha de cores, conhecida por pixels; editam-se pontos (Fig. III.31).

Fig. III.31

Imagem mapa de bits e respectiva ampliao parcial.

2. Imagens vectoriais criadas por linhas e curvas, geradas matematicamente, independentes da resoluo; podem ser redimensionadas sem perder a qualidade; editam-se formas (Fig. III.32).

Fig. III.32 Imagem vectorial e respectiva ampliao parcial.

O Flash importa um nmero extenso de formatos de imagens, com as extenses .png, .bmp, .emf, .gif, .jpg, .wmf, .pct, .psd, .pntg, .tga, .tif, .cgi, etc. (Fig. III.33 A). A importao destes ficheiros, assim como os ficheiros de som e vdeo, feita em ARQUIVO Importar ou ARQUIVO Importar para a biblioteca (Fig. III.33 B).
Nota: Como leitura complementar, colocar a palavra-chave vectoriais no menu AJUDA Usando o Flash (F1) e seleccionar o tpico Sobre grficos bitmap e vectoriais.

Criao de Pginas Web

11

Fig. III.33

Formatos de importao (A) e importao para a biblioteca (B).

Depois de colocados na biblioteca, os objectos podem ser arrastados para o palco. Este processo chama-se instanciamento. Pode, por exemplo, criar-se uma estrela e depois puxar este smbolo da biblioteca para originar um cu estrelado. O Flash considera apenas um smbolo, mesmo que algumas estrelas sejam modificadas no palco quanto cor, forma, tamanho, etc. Esta reutilizao de smbolos responsvel pelo relativamente pequeno peso das animaes em Flash.
Nota: Como leitura complementar, colocar a palavra-chave instncia no menu AJUDA Usando o Flash (F1) e seleccionar o tpico Smbolos e instncias.

Para editar uma cor ou retirar um fundo de uma imagem mapa de bits, utilizar o comando MODIFICAR Desmembrar (Break apart). Com a Varinha mgica, opo da ferramenta Lao (L), seleccionar o fundo e carregar na tecla Delete. Finalmente, tornar a agrupar a imagem com o comando MODIFICAR Agrupar. Os comandos Suavizar, Optimizar e Acertar, do menu MODIFICAR, podem ser usados para melhorar e optimizar a imagem.

12

Unidade III

Um mapa de bits pode ser convertido numa imagem vectorial com o comando MODIFICAR Traar bitmap (Fig. III.34).

Fig. III.34

Traar bitmap.

Nota: O comando MODIFICAR Optimizar deve ser usado, depois de uma converso de mapa de bits para vectorial, no intuito de diminuir o nmero de curvas do desenho.

A operao Traar bitmap normalmente realizada aps vrias tentativas. O grfico vectorial final pode ser mais pesado do que o mapa de bits inicial, caso a imagem seja bastante complexa.

III.4.7 Animao Animaes de movimento (tween)

A animao tween da palavra inglesa between (entre) corresponde ao esforo do programa para calcular as imagens intermdias, quando apresentada uma situao inicial (A) e uma situao final (B) (Fig. III.35).

Fig. III.35

Animao de

movimento.

Para criar uma animao de movimento (tween) de uma imagem, proceder da seguinte forma: 1. importar uma imagem para a livraria do Flash: ARQUIVO Importar para livraria (FILE Import to library); 2. criar uma nova camada (layer); 3. seleccionar um quadro dessa camada; 4. abrir a livraria com F11;

Criao de Pginas Web

13

5. arrastar, da livraria, a imagem para o palco; 6. seleccionar a imagem (se for um quadrado ou um crculo, clicar duas vezes); 7. convert-la em smbolo (Fig. III.36): seleccionar INSERIR Converter em smbolo (INSERT Convert to symbol), ou pressionar F8; dar um nome e clicar na opo Grfico (Graphic);

Fig. III.36

Converter em

smbolo.

Nota: No caso de prever que o trabalho envolver cdigo ActionScript, dever optar-se pela opo Clipe de filme (Movieclip).

18. criar uma keyframe na clula 30, por exemplo. Seleccionar o quadro 30 e carregar em F6 (ou INSERIR Quadro-chave); 19. arrastar a imagem anterior para uma nova posio; 10. sobre os quadros anteriormente criados, carregar no boto direito do rato e activar Criar interpolao de movimento Animao tween (tween animation) (Fig. III.37).

Fig. III.37 Criar interpolao de movimento com o rato.

Para criar um efeito de transparncia gradual (Fig. III.38), isto , passar de alfa a 100% para alfa a 0%, realizar as seguintes operaes: realizar os itens anteriores de 1 a 9; seleccionar o ltimo keyframe na linha de tempo (timeline); depois, clicar na imagem; na caixa de propriedades, activar o menu pendente Cor para a opo Alfa e ajustar para o valor 0%.
Nota: possvel optar por todas as variantes de transparncia entre 100% e 0%.

III.4.7a

Animao com efeito de transparncia.

Fig. III.38

14

Unidade III

III.4.7b

Para criar rotaes na imagem, realizar as seguintes operaes (Fig. III.39): realizar os itens anteriores (pginas 12 e 13) de 1 a 9; seleccionar o primeiro keyframe na linha de tempo (timeline); na caixa das propriedades, activar o menu pendente Rotao e optar por Sentido horrio ou Sentido anti-horrio; digitar o nmero de voltas que pretende ver o objecto a rodar.

Fig. III.39

Animao de

rotao.

Animao com guia

III.4.7c

Para criar uma animao de movimento com guia (motion guide), efectuar os seguintes passos: realizar os itens anteriores de 1 a 10; com o boto direito do rato, clicar sobre a camada anterior; seleccionar o comando Adicionar guia de movimento ou activar o comando INSERIR Guia de movimento (Fig. III.40); desenhar uma guia nesta nova camada; com a clula que inicia a interpolao de movimento seleccionada, puxar a cruz, pelo seu ponto de registo, para o incio da guia; com a ltima clula da interpolao de movimento seleccionada, puxar a cruz, pelo seu ponto de registo, para o fim da guia; testar a animao com Ctrl + Enter.

Fig. III.40

Adicionar guia de movimento.

Criao de Pginas Web

15

Animao de forma A animao de forma faz-se seguindo os passos 1 a 9 (descritos nas pginas 12 e 13), mas sem realizar o passo 7. Seleccionado um dos quadros intermdios da animao, abrir o menu pendente Interpol, na barra Propriedades, e activar Forma (Fig. III.41).

III.4.7d

Fig. III.41

Animao de

forma.

Animao quadro a quadro Cada clula vai conter um objecto com uma pequena alterao relativamente clula anterior. Estas alteraes podem ser obtidas com a ajuda de vrias tcnicas e ferramentas: Traar bitmaps, Separar bitmaps, Seta, Sub-seleccionar, etc.

III.4.7e

Animao com mscaras Neste tipo de animao, a forma do objecto de uma camada serve para mostrar parte de um segundo objecto noutra camada (Fig. III.42).

~ n be
Clula 1

gua m bem recioso

Clula 5

A gua um bem precioso

Clula 10

A gua um bem precioso

Clula 15

Fig. III.42

Exemplo de uma animao com mscaras.

A mscara consiste, no exemplo da Fig. III.42, num crculo que vai aumentando de tamanho, por interpolao de movimento, e a camada mascarada consiste num texto fixo, igual ao da clula 15. A camada que exibe a interpolao de movimento definida com mscara.

III.4.7f

16

Unidade III

III.4.8 Publicao
O ficheiro de trabalho tem a extenso .fla. Este formato s lido na prpria aplicao Flash. A publicao de um trabalho final tem trs fases: escolher os formatos de sada com as vrias opes (Ctrl + Shift + F12); fazer a visualizao da publicao em Visualizar publicao; exportar a publicao (Shift + F12). Todos estes comandos esto disponveis no menu ARQUIVO. O Flash, entretanto, permite a publicao do trabalho final em vrios formatos:

Formato
SWF

Caractersticas
O mais usado, necessita de um visualizador (Flash player) para trabalhar. Achata as camadas do ficheiro FLA. Formato Web por excelncia, envolve o SWF em cdigo para ser visvel em HTML. Permite movimento e uma cor transparente; ptimo para sequncias de animao curtas (faz a montagem). Imagens do tipo fotogrfico, com gradientes de muitas cores. Tipo de imagem mapa de bits, tem um canal alfa de transparncia. Formato de vdeo QuickTime. Ficheiro executvel que inclui o visualizador (Flash Player). Projector para Macintosh.

HTML GIF

JPG PNG MOV EXE HQX

Criao de Pginas Web

17

t a r e f a
flash.

T III.8

1. Abrir o programa Macromedia Flash; criar um novo documento, com o nome memorias2. Pesquisar na Internet uma imagem semelhante apresentada e import-la para a livraria. 3. Desmembrar a imagem anterior. 4. Retirar o seu fundo. 5. Rodar a imagem de forma que a memria fique na horizontal.

6. Importar outras imagens de memrias (SD, MMC, Compact flash, Smart Media, etc.) para a biblioteca.

7. Arrastar para o palco as imagens anteriores, de modo

que cada uma fique na sua camada.

8. Associar a cada memria um texto com o nome da

mesma.

9. Aplicar:
interpolao de movimento para as memrias SD e MMC; animao com guia para a memria Compact flash; transparncia de 80% a 10% com movimento memria Smart Media; animao com rotao s restantes memrias.

10. Fazer uma animao com mscara para o texto memoriasflash. 11. Fazer a publicao e optimizao nos formatos SWF, HTML, GIF, EXE e PNG.
Criar uma nova animao, que associe a cada uma das memrias um boto. O boto, quando carregado, deve mostrar a memria; caso contrrio, deve esconder a memria. Nota: Poder ser necessrio usar cdigo ActionScript associado ao boto.

III.15, III.16

18

Unidade III

III.5 Dreamweaver Programa de Edio de Pginas Web

Para iniciar o Dreamweaver, pressionar o boto INICIAR Todos os Programas Macromedia Macromedia Dreamweaver (Fig. III.43).

Fig. III.43

Iniciar o

Dreamweaver.

Nota: Em alternativa, seleccionar o comando Executar a partir do boto INICIAR e digitar Dreamweaver, pressionando em seguida a tecla Enter.

III.5.1 Apresentao do programa

III.5.1a

O ambiente de trabalho do Dreamweaver e seus componentes

O Dreamweaver fornece duas opes de apresentao da rea de trabalho (Fig. III.44): janela; painis integrados ou flutuantes.
A B

Fig. III.44

Duas organizaes para o ambiente de trabalho do Dreamweaver: janela (A) e painis integrados (B).

Criao de Pginas Web

19

Painis de objectos e propriedades

1 3

6 7

1. Barra Inserir contm botes para insero de vrios tipos de objectos no documento, como imagens, tabelas e camadas, permitindo definir vrios atributos medida que so inseridos. possvel, por exemplo, inserir uma imagem clicando no cone de Imagem, na barra Inserir. Tambm se pode utilizar o menu INSERIR em vez da barra Inserir. 2. Grupos de painis so conjuntos de painis relacionados, agrupados sob um cabealho. 3. Barra de ferramentas do documento contm botes e menus pendentes que possibilitam diferentes visualizaes da janela do documento (visualizao do Projecto e de Cdigo), vrias opes de exibio e algumas operaes comuns, como a visualizao no browser. 4. Janela do documento mostra o documento que est a ser criado e editado. 5. Painel do site permite gerir os ficheiros e as pastas que compem o site, mostrando os seus nomes de modo anlogo ao Explorador do Windows. 6. Selector de tags situa-se na barra de status, na parte inferior da janela do documento; mostra a hierarquia das tags (etiquetas) que delimitam a seleco actual na visualizao do projecto. 7. Inspector de propriedades mostra e permite alterar vrias propriedades do objecto ou texto seleccionado. Cada tipo de objecto apresenta propriedades distintas.

Fig. III.45 Painis de objectos e propriedades do Dreamweaver.

Nota: Para expandir um grupo de painis, clicar na seta de expanso esquerda do nome do grupo; para desanexar um grupo de painis, arrastar a pina na extremidade esquerda da barra de ttulo do grupo.

20

Unidade III

Criao e gesto de um Web site

Os sites do Dreamweaver constituem uma maneira de organizar todos os documentos associados a um site da Web. Para cada site a ser criado na Web, necessrio configurar um site no Dreamweaver. Este processo permitir, por exemplo, que o Dreamweaver utilize o protocolo de comunicao FTP para transferir o site do computador local para o servidor da Web, para controlar automaticamente as hiperligaes e para gerir os arquivos. No possvel fazer uso completo dos recursos do Dreamweaver se no for definido um site. Para configurar um site do Dreamweaver (Fig. III.46):

III.5.1b

seleccionar SITE Novo site. Aparecer a caixa de dilogo Definio do site; clicar no separador Bsico, para utilizar o Assistente de definio do site, ou no separador Avanado, para usar as definies avanadas; concluir o processo de configurao do site do Dreamweaver no Assistente de definio do site, responder s perguntas e clicar em Avanar, para continuar o processo de configurao.

Configurar um site de Dreamweaver.

Fig. III.46

III.5.2 Criao de documentos HTML Criao, abertura e guarda de documentos HTML

Como criar documentos Para criar um novo documento em branco, proceder da seguinte forma (Fig. III.47):

Fig. III.47 Criao de um novo documento.

Criao de Pginas Web

21

seleccionar ARQUIVO Novo; na lista Categoria, seleccionar a categoria do documento a ser criado; na lista Pgina bsica, seleccionar o tipo de pgina que deseja e clicar em Criar. Para criar um novo documento a partir de um modelo: escolher ARQUIVO Novo para abrir a caixa de dilogo Novo documento; no separador Modelos, na lista Modelos, seleccionar o site do Dreamweaver que contm o modelo desejado; seleccionar o modelo a ser utilizado; desmarcar a opo Actualizar a pgina quando o modelo for alterado, para que o novo documento do modelo passe a ser independente; clicar em Criar; guardar o documento.

Como criar documentos existentes Determinados ficheiros, como documentos CSS, so abertos somente na visualizao do cdigo. Se o documento a ser aberto um arquivo do Microsoft Word guardado como HTML, convm import-lo para o Dreamweaver em vez de o abrir. Ao importar um arquivo HTML do Word, o Dreamweaver pode limpar as tags de markup irrelevantes que o Word insere em arquivos HTML. possvel utilizar o comando Limpar o HTML do Word para definir uma cor de fundo para a pgina e limpar a formatao da folha de estilos CSS no documento importado. Para abrir um arquivo existente, proceder da seguinte forma: seleccionar ARQUIVO Abrir. na caixa de dilogo que aparece, seleccionar o ficheiro a ser aberto; clicar em Abrir.

Como guardar documentos Ao guardar um documento, evitar utilizar espaos e caracteres especiais nos nomes de ficheiros e pastas, ou seja, no utilizar acentos, pontuao, , etc. Alm disso, no colocar um nmero no incio de um nome de ficheiro.

22

Unidade III

Para guardar um documento: seleccionar ARQUIVO Salvar; na caixa de dilogo, navegar at a pasta onde se vai guardar o ficheiro; em Nome do ficheiro, digitar um nome para o ficheiro; clicar em Salvar para guardar o ficheiro.

Definio das propriedades Os ttulos de pginas, as cores e imagens de fundo, as cores do texto e dos links, tal como as margens, so propriedades bsicas de todos os documentos HTML. O ttulo da pgina identifica o documento. Uma cor ou imagem de fundo define a aparncia geral do documento. As cores do texto e dos links ajudam os utilizadores do site a distinguir entre texto comum e hipertexto e tambm a identificar os links que foram ou no visitados. Para alterar o ttulo de uma pgina (Fig. III.48): seleccionar Exibir Barra de ferramentas Documento (caso a barra de ferramentas ainda no esteja seleccionada); clicar com o boto direito do rato numa rea vazia do documento e, em seguida, seleccionar Propriedades da pgina;
Alterar o ttulo de uma pgina.

Fig. III.48

na caixa de texto Ttulo, digitar o ttulo da pgina e pressionar Enter; clicar em OK. O ttulo exibido na barra de ttulo da janela do documento e na barra de ferramentas, se esta estiver visvel. Um asterisco (*) indica que o documento contm alteraes que ainda no foram guardadas (Fig. III.49).

Fig. III.49

Barra de ttulo da janela do documento.

Para definir uma imagem ou cor de fundo (Fig. III.50): 1. Seleccionar MODIFICAR Propriedades da pgina ou, alternativamente, seleccionar Propriedades da pgina no menu de atalho, se estiver a ser usada visualizao de Projecto da janela do documento.

Criao de Pginas Web

23

Fig. III.50

Definir imagem ou cor de fundo.

2. Para definir uma imagem de fundo, clicar no boto Procurar, pesquisar a imagem e seleccion-la. Alternativamente, digitar o caminho / a localizao da imagem de fundo na caixa Imagem de fundo.
Nota: O Dreamweaver colocar lado a lado (repetir) a imagem de fundo se esta no preencher toda a janela, exactamente como fazem os browsers. Para que a imagem de fundo no seja repetida, seleccionar a opo Folhas de estilo em cascata.

3. Para definir uma cor de fundo, clicar na caixa Fundo e seleccionar uma cor na paleta de cores.

III.5.3 Insero e formatao de texto Insero de texto e objectos

H vrias formas de adicionar texto a um documento do Dreamweaver. Para adicionar texto a um documento, seguir um dos procedimentos abaixo: 1. Digitar o texto directamente na janela do documento. 2. Copiar o texto de outra aplicao, alternar para o Dreamweaver, posicionar o ponto de insero no documento e escolher EDITAR Colar (o Dreamweaver no mantm a formatao de texto que foi aplicada no outro programa, mas preservar as quebras de linha).

24

Unidade III

Definio da fonte, tamanho, cor e alinhamentos

A formatao de um documento no Dreamweaver semelhante utilizada num processador de texto, como por exemplo o Word. No Inspector de propriedades, utilizar o sub-menu Texto Formato do pargrafo ou o menu pendente Formato para definir o estilo de formatao padro (Pargrafo, Pr-formatado, Cabealho 1, Cabealho 2, etc.) para um bloco de texto (Fig. III.51). Para alterar a fonte, o tamanho, a cor e o alinhamento do texto seleccionado, usar o menu TEXTO ou o Inspector de propriedades (Fig. III.52). Para aplicar formatao de texto como Negrito, Itlico, Sublinhado, etc., utilizar o sub-menu Texto Estilo.

Fig. III.51 Estilos de formatao padro.

Fig. III.52 Formatar (A) e alinhar texto (B).

possvel combinar vrias formataes num nico estilo, denominado estilo HTML, guardando-o em Estilos HTML (Fig. III.53).

Fig. III.53

Guardar estilos de formatao.

Criao de Pginas Web

25

III.5.4 Hiperligaes
H trs tipos de caminhos de link, que so os seguintes: caminhos absolutos (por exemplo, http://www.jovem.te.pt/servlets/Lazer?P=Noticias&ID=5663); caminhos relativos (por exemplo, 10TIC/exemplo.html); caminhos relativos raiz do site (por exemplo: /manuais/10TIC/exemplo.html). Com o Dreamweaver possvel seleccionar facilmente o tipo de caminho a ser criado para os links.
Nota: prefervel usar links relativos a documentos ou a sites: assim, mesmo que o site seja publicado com outro endereo, o link continuar a funcionar.

Criao e edio de links

Podem ser criados diversos tipos de links num documento: links a outro documento ou ficheiro, que pode ser de imagem, de filme, de som ou PDF; links de ncora com nome, que saltam para uma localizao especfica dentro de um documento; links de correio electrnico, que criam uma nova mensagem com o endereo do destinatrio j preenchido; links nulos e de script, que permitem anexar comportamentos a um objecto ou executar cdigo JavaScript. Para adicionar uma hiperligao utilizando o comando Hyperlink: colocar o ponto de insero onde a hiperligao deve ser inserida no documento; escolher INSERIR Hyperlink ou, na barra Inserir, seleccionar o separador Comuns e clicar no boto Hyperlink aparecer a caixa de dilogo da Fig. III.54;

preencher a caixa de dilogo; clicar em OK.

Fig. III.54

Inserir Hyper-

link.

26

Unidade III

Para criar uma ncora com nome: na visualizao de Projecto, na janela do documento, posicionar o ponto de insero no local onde se pretende inserir a ncora com nome; optar por um dos procedimentos seguintes: escolher INSERIR ncora com nome ou, alternativamente, pressionar as teclas Ctrl + Alt + A; outra possibilidade , na barra Inserir, seleccionar o separador Comuns e clicar no boto ncora com nome aparecer a caixa de dilogo da Fig. III.55;

Fig. III.55

Criar uma ncora com nome.

no campo Nome da ncora, digitar um nome para a ncora.

Para estabelecer um link a uma ncora com nome: na visualizao de Projecto, na janela do documento, seleccionar um texto ou uma imagem a partir da qual ser criado um link; no campo Link, no Inspector de propriedades, digitar um sinal de cardinal (#) e o nome da ncora. Por exemplo: para estabelecer um link a uma ncora com o nome TIC no documento actual, digitar #TIC; para estabelecer um link a uma ncora com o nome TIC num documento diferente, na mesma pasta, digitar nomedoficheiro.html#TIC.
Nota: Os nomes de ncoras distinguem maisculas e minsculas.

III.5.4

Para criar um link de correio electrnico: na visualizao de Projecto, na janela do documento, colocar o ponto de insero onde dever aparecer o link de correio electrnico, ou seleccionar o texto ou a imagem a ser mostrada nesse local;

Criao de Pginas Web

27

escolher INSERIR Link de correio electrnico ou, na barra Inserir, separador Comuns, clicar no boto Inserir link de correio electrnico surgir a caixa de dilogo da Fig. III.56;

Fig. III.56 Criar um link de correio electrnico.

preencher a caixa de dilogo; clicar em OK.

Nota: Ao usar a opo INSERIR Link de correio electrnico, no digitar espaos entre os dois pontos e o endereo electrnico. Deve ficar, por exemplo, mailto:10tic@te.pt.

Para criar um link nulo: seleccionar o texto, uma imagem ou um objecto na visualizao de Projecto, na janela do documento; no Inspector de propriedades, na caixa de texto Link, digitar javascript:; (a palavra javascript, seguida de dois pontos e de um ponto e vrgula).

Para criar um link de script, proceder depois da seguinte forma: no campo Link, no Inspector de propriedades, digitar javascript: seguido de cdigo JavaScript ou de uma chamada funo, que normalmente envolve o nome da funo definida e a chamar.

28

Unidade III

III.5.5 Insero de imagens Insero de imagens na pgina

Ao inserir uma imagem num documento do Dreamweaver, o programa gerar automaticamente uma referncia dessa imagem no cdigo HTML. Para garantir que essa referncia est correcta, o ficheiro de imagem dever estar no site. Caso no esteja no site actual, o Dreamweaver perguntar se deve ser copiado para o site.

III.5.5a

Para inserir uma imagem na pgina: posicionar o ponto de insero onde a imagem dever ser includa na janela do documento; no separador Comuns da barra Inserir, clicar no boto Imagem ou seleccionar INSERIR Imagem (Fig. III.57);

Fig. III.57

Boto Inserir.

na caixa de dilogo, seleccionar Sistema de arquivos para escolher um ficheiro de imagem ou Procurar para escolher a imagem ou origem do contedo a ser inserido; no Inspector de propriedades (JANELA Propriedades), definir as propriedades da imagem (Fig. III.58).

Fig. III.58 Janela do Inspector de propriedades.

Criao de Pginas Web

29

t a r e f a
Guardar o documento com o nome index.htm.

T III.9

1. Abrir o programa Dreamweaver. Criar um novo documento com o comando Arquivo novo. 2. Atribuir o ttulo 10TIC Poupar energia. 3. Mudar a cor do fundo da pgina para #FFFF99. 4. Inserir o ttulo O que fazer para poupar energia, com fonte Verdana, tamanho 12 e cor
azul, centrado.

5. Inserir uma tabela como a apresentada a seguir:

C1 C2 C4 C3

6. Inserir na clula C2 uma imagem de uma lmpada incandescente (pesquisa na Web). 7. Inserir na clula C3 uma imagem de uma lmpada economizadora. 8. Explicar na clula C4 que cuidados se podem ter que permitam poupar energia; usar a fonte
Arial, tamanho 8 e uma cor escura.

9. Criar uma hiperligao no texto que chame uma pgina da Web relacionada com energia,
aberta numa nova janela.

10. Criar outra pgina HTML em branco, guardando-a com o nome dreamdoc2.htm na mesma
pasta da pgina index.htm.

11. Inserir na pgina dreamdoc2.htm uma lista de oito electrodomsticos com rendimentos de
energia baixos, com um espao de dez linhas entre eles.

12. Criar uma ncora com nome na ltima designao inserida. 13. Na pgina com a tabela, criar uma hiperligao que abra a pgina da lista no ponto de
ncora com nome anterior.

14. Na clula C1 especificar a identificao de quem est a executar esta tarefa, inserindo uma
hiperligao para o respectivo endereo de correio electrnico.

15. Configurar as pginas anteriores como um novo site, definindo a ligao ao servidor como
sendo atravs de rede local e especificando outra pasta previamente criada (que pode ser no mesmo computador) como o endereo do servidor. Optimizar a aplicao criada com outros recursos do Dreamweaver.

III.17, III.18

30

Unidade III

Criao de imagens dinmicas

Uma imagem dinmica aquela que, quando exibida no browser, alterada por aco do rato. Este tipo de imagem consiste em pelo menos duas imagens: a imagem primria (exibida quando a pgina for carregada pela primeira vez) e a imagem secundria (que ser exibida quando o rato desencadear a aco sobre a imagem primria). As imagens dinmicas devero ter o mesmo tamanho, caso contrrio o Dreamweaver redimensionar automaticamente a segunda imagem para que as suas propriedades coincidam com as da primeira.

III.5.5b

Para criar uma imagem dinmica: na janela do documento, colocar o ponto de insero no local onde dever aparecer a imagem; escolher INSERIR Imagens interactivas Imagem cambivel; exibida a caixa de dilogo da Fig. III.59.

Fig. III.59 Caixa de dilogo para inserir uma imagem dinmica.

em Nome da imagem, digitar um nome para a imagem dinmica; em Imagem original, clicar em Procurar e seleccionar a imagem a ser exibida quando a pgina carregar ou, alternativamente, digitar o caminho do arquivo da imagem na caixa de texto;

Criao de Pginas Web

31

em Imagem cambivel, clicar em Procurar e seleccionar a imagem a ser exibida quando o rato desencadear a aco; alternativamente, digitar o caminho do arquivo da imagem na caixa de texto; seleccionar a opo Pr-carregar a imagem cambivel para que a imagem seja pr-carregada na Cache do browser, evitando atrasos quando o ponteiro passar sobre ela; em Texto alternativo, digitar texto para descrever a imagem; em Quando tiver clicado, v para a URL, clicar em Procurar e seleccionar o ficheiro; alternativamente, digitar o caminho do ficheiro a ser aberto quando um utilizador clicar na imagem dinmica;
Nota: Se no for definido um link para a imagem, o Dreamweaver insere um link nulo (#) no cdigo-fonte HTML. Se o link nulo for removido, a imagem dinmica no funcionar.

clicar em OK para fechar a caixa de dilogo da Fig. III.59; seleccionar ARQUIVO Visualizar no browser; no browser, passar o cursor sobre a imagem original: a exibio deve alternar para a imagem secundria.

Utilizao de um editor de imagens externo

possvel definir quais os tipos de ficheiro que um determinado editor pode abrir e seleccionar editores diferentes para outros tipos de ficheiro. Por exemplo, possvel configurar o Dreamweaver para iniciar o Paint Shop Pro quando quiser editar um arquivo GIF e iniciar o PhotoShop quando o arquivo tiver o formato JPG ou PNG. Para configurar um programa editor de imagem conforme o tipo de ficheiro, seleccionar EDITAR Preferncias Tipos de arquivos/editores (Fig. III.60). Para adicionar um tipo de ficheiro lista de extenses visualizada nas Preferncias, em Tipos de arquivos/editores, proceder da seguinte forma: clicar no boto de adio (+) situado acima da lista de extenses; digitar a extenso do tipo de arquivo (incluindo o ponto no incio da extenso), ou diversas extenses relacionadas, separadas por espaos. possvel, por exemplo, digitar .css .png .jpg.

32

Unidade III

Fig. III.60 EDITAR Preferncias.

Para adicionar um editor a um determinado tipo de arquivo: seleccionar a extenso do tipo de arquivo na lista Extenses; clicar no boto de adio (+) situado acima da lista de editores; seleccionar a aplicao a ser adicionada lista Editores na caixa de dilogo que for exibida. Escolher, por exemplo, o cone do aplicativo Excel e adicion-lo lista Editores.

III.5.6 Multimdia Insero de objectos multimdia

O Dreamweaver permite adicionar sons, filmes ou outros ficheiros dinmicos e interactivos aos sites da Web, de maneira rpida e fcil. possvel incorporar ou editar os ficheiros e objectos multimdia, como por exemplo Flash e Shockwave, applets Java, Quicktime, ActiveX e som, assim como objectos de boto e texto Flash, editveis no prprio Dreamweaver.

Criao de Pginas Web

33

Importao de contedos do Flash

A tecnologia Flash constitui a soluo mais eficiente para a produo de grficos e animaes com base em vectores. O Dreamweaver disponibiliza objectos Flash para serem usados com ou sem o programa de criao Flash. possvel utilizar esses objectos para criar botes e textos a incluir num documento HTML. O boto Flash um boto actualizvel baseado num modelo Flash. possvel personalizar um objecto boto Flash adicionando texto, cor de fundo e links para outros arquivos. possvel inserir botes Flash durante o trabalho, quer na visualizao do projecto quer na visualizao do cdigo.
Nota: necessrio guardar os documentos antes de inserir um objecto Flash.

Para inserir um objecto boto Flash: na janela do documento, posicionar o ponto de insero onde se pretende inserir o boto Flash; na barra Inserir, seleccionar Mdia e, em seguida, clicar no cone do Boto Flash; alternativamente, seleccionar INSERIR Imagens interactivas Boto Flash (Fig. III.61);

III.5.6a

Fig. III.61

Inserir um

boto Flash.

34

Unidade III

em Estilos, seleccionar o estilo de boto; no campo Texto do boto (opcional), digitar o texto a ser exibido;
Nota: Este campo aceitar alteraes apenas se o boto seleccionado tiver o parmetro {Button Text} definido. O texto digitado substituir o parmetro {Button Text} quando o ficheiro for visualizado.

em Fonte, seleccionar a fonte; a fonte seleccionada no ser vista no campo Exemplo, mas possvel clicar em Aplicar para inserir o boto na pgina (para examinar a aparncia do texto); no campo Tamanho, digitar um valor numrico para o tamanho da fonte; em Link (opcional), digitar o URL de um link; no campo Destino (opcional), especificar a localizao na qual o documento com link ser aberto; possvel seleccionar uma moldura ou opo de janela no menu pendente (os nomes das molduras s so listados se o objecto Flash estiver num conjunto de molduras); no campo Cor de fundo (opcional), definir a cor de fundo para o ficheiro Flash; utilizar o selector de cores ou digitar um valor hexadecimal da Web (como por exemplo #FFFFFF); no campo Salvar como, digitar um nome para o ficheiro de modo a guardar o novo arquivo SWF;
Nota: possvel utilizar o nome do ficheiro padro (por exemplo: button1.swf) ou digitar um novo nome. Se o ficheiro contiver um link relativo a um documento do site, ser necessrio guardar o ficheiro na mesma pasta que o documento HTML actual para manter os links relativos ao documento.

clicar em Aplicar ou OK para inserir o boto Flash na janela do documento.

Insero de um filme Shockwave numa pgina Web

Ao inserir um ficheiro Shockwave, o Dreamweaver utilizar as tags object (para o programa ActiveX) e embed (para o plug-in) para obter os melhores resultados em todos os browsers. Ao alterar o ficheiro no Inspector de propriedades, o Dreamweaver mostrar as entradas dos parmetros apropriados s tags object e embed. Para inserir um filme Shockwave: na janela do documento, colocar o ponto de insero onde se pretende inserir o ficheiro Shockwave; no separador Mdia da barra Inserir, clicar no cone/boto Shockwave; alternativamente, escolher INSERIR Mdia Shockwave;

Criao de Pginas Web

35

na caixa de dilogo que ser exibida, seleccionar um ficheiro Shockwave; no Inspector de propriedades, digitar a largura e altura de visualizao nas caixas L e U.

Adio de som
H vrios tipos diferentes de ficheiros e formatos de som, assim como diversas maneiras de adicionar som s pginas da Web. Entre os factores a serem considerados antes de decidir qual o formato e mtodo a serem utilizados para adicionar o som, esto o objectivo, o pblico, o tamanho do arquivo, a qualidade do som e as diferenas entre os browsers.
Nota: Os ficheiros de som so tratados de forma diferente e inconsistente pelos diversos browsers. Pode ser recomendvel adicionar um ficheiro de som a um filme Flash e, em seguida, incorporar um ficheiro SWF.

Hiperligao para um ficheiro de som Uma hiperligao para um ficheiro de som uma forma simples e efectiva de adicionar som s pginas da Web. Este mtodo permite escolher se se quer ouvir o som e coloca-o disposio de um pblico maior, uma vez que alguns browsers no oferecem suporte a ficheiros de som incorporados. Para criar uma hiperligao para um ficheiro de som, proceder do seguinte modo: seleccionar o texto ou a imagem que deseja utilizar como hiperligao para o ficheiro de som; no Inspector de propriedades, clicar no cone correspondente pasta para procurar o ficheiro de som; alternativamente, digitar o caminho e o nome do ficheiro no campo Link. Incorporao de um ficheiro de som A incorporao de som um processo que inclui o programa de reproduo de som directamente na pgina, mas que s ser executado se os visitantes do site dispuserem do plug-in apropriado ao ficheiro escolhido. possvel ajustar, por exemplo, o volume, a aparncia do programa de reproduo do som na pgina e os pontos de incio e fim do som.

36

Unidade III

III.5.6b

Para incorporar um ficheiro de som: na visualizao de projecto, colocar o ponto de insero onde deseja incorporar o ficheiro; no separador Mdia da barra Inserir, clicar no cone / boto Plug-in; alternativamente, escolher INSERIR Mdia Plug-in; no Inspector de propriedades, clicar no cone correspondente pasta para procurar o ficheiro de udio; alternativamente, digitar o caminho e o nome do ficheiro no campo Link; digitar a largura e a altura, atravs da insero dos valores nos campos apropriados ou do redimensionamento da rea de reserva de espao de plug-in, na janela Documento.

Insero de controlos ActiveX

Os programas ActiveX (anteriormente conhecidos como programas OLE) so componentes reutilizveis semelhantes a applets que podem funcionar como plug-ins dos browsers. No Dreamweaver, o objecto ActiveX permite fornecer atributos e parmetros a um programa ActiveX no browser do utilizador do site; alm disso, utiliza a tag object para marcar o local na pgina onde ser exibido.

Para inserir o contedo do programa ActiveX (Fig. III.62): na janela do documento, colocar o ponto de insero onde se pretende inserir o contedo; no separador Mdia da barra Inserir, clicar no cone / boto ActiveX; alternativamente, seleccionar INSERIR Mdia ActiveX.

Fig. III.62

Inserir o contedo do programa ActiveX.

Criao de Pginas Web

37

t a r e f a
Guardar o documento com o nome index.htm.
C1 C3 C4 C5 C6 C2

T III.10

1. Abrir o programa Dreamweaver. Criar um novo documento com o comando Arquivo novo. 2. Mudar a cor do fundo da pgina para #99CCFF. 3. Inserir o ttulo Preveno rodoviria, com fonte Verdana, tamanho 12 e cor preta, centrado. 4. Inserir uma tabela como a apresentada a seguir:

5. Na clula C1, inserir uma imagem de um sinal de trnsito de limite de velocidade. 6. Na clula C2, descrever sucintamente a importncia do cumprimento dos limites de velocidade na frequncia e na gravidade dos acidentes usar fonte Verdana, tamanho 8 e uma cor contrastante. www.projectos.TE.pt/links
para saber mais sobre...

7. Inserir um boto Flash na clula C6 que permita abrir,

numa nova janela, o site da Direco Geral de Viao na pgina de sinalizao rodoviria. para a imagem de um acidente.
Direco Geral de Viao (sinalizao rodoviria)

8. Inserir em C3 uma imagem dinmica de um carro que, ao ser percorrida pelo cursor, mude 9. Inserir em C5 um vdeo atravs de um dispositivo plug-in. 10. Utilizando um dispositivo ActiveX, inserir em C4 um som, de preferncia que simule o rudo
de um carro. Nota: Procurar um ficheiro de som na pasta Windows\Media, por exemplo.

11. Configurar o dispositivo ActiveX inserindo os seguintes valores no Inspector de propriedades:

classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 id=WindowsMediaPlayer1 L=197 U=44> param name=URL value=??Caminho para o ficheiro de msica??> param name=enabled value=-1 param name=autoStart value=0

12. Configurar as pginas anteriores como um novo site, definindo a ligao ao servidor como
sendo atravs de rede local e especificando outra pasta previamente criada (que pode ser no mesmo computador) como o endereo do servidor. Dividir uma imagem grande em pedaos; inseri-los numa tabela com bordo zero de modo a reconstituir a imagem global e, atravs do comando INSERIR Imagem cambivel, criar um cenrio animado que interaja com o utilizador. Optimizar o documento criado com mais recursos do Dreamweaver.

III.19, III.20

38

Unidade III

III.5.7 Camadas dinmicas

Quando se coloca uma camada num documento, o Dreamweaver insere a tag HTML correspondente camada no cdigo. recomendvel configurar o Dreamweaver para utilizar a tag div ou span nas camadas. Por omisso, o Dreamweaver cria as camadas utilizando a tag div.

Criao e manipulao de camadas

O Dreamweaver permite criar de forma interactiva camadas na pgina e posicion-las com preciso. Para criar uma camada h duas alternativas: 1. Para desenhar uma camada, clicar no boto Desenhar camada, na barra Inserir, e em seguida arrastar para o documento na respectiva janela. 2. Para inserir o cdigo de uma camada num determinado local do documento, posicionar o ponto de insero na janela do documento e, em seguida, escolher INSERIR Camada.
Nota: Se a opo Elementos invisveis estiver activa, os elementos na pgina podero parecer deslocados. Contudo, como os elementos invisveis no aparecero no browser, quando a pgina for visualizada todos os elementos visveis aparecero nas posies correctas.

Para desenhar diversas camadas consecutivamente: clicar no boto Desenhar camada, na barra Inserir; manter a tecla Ctrl pressionada e clicar no documento, arrastando para construir/desenhar cada camada.
Nota: Poder-se- continuar a adicionar novas camadas desde que no se solte a tecla Ctrl.

Criao de animao na linha de tempo

O HTML dinmico, ou DHTML, refere-se combinao entre HTML e uma linguagem de criao de scripts que permite alterar as propriedades de estilo ou posicionamento de elementos HTML. No Dreamweaver, as linhas de tempo utilizam o HTML dinmico para alterar as propriedades de camadas e imagens ao longo do tempo. As linhas de tempo so utilizadas para criar animaes que dispensem outro software, embora utilizem JavaScript.

Criao de Pginas Web

39

As linhas de tempo permitem alterar a posio, visibilidade, ordem de empilhamento e o tamanho de uma camada. As funes de camadas das linhas de tempo funcionam apenas nos browsers de verses 4.0 ou mais avanadas. As linhas de tempo tambm so teis para outras aces que devero ocorrer aps o final da transferncia da pgina. Podem, por exemplo, alterar o ficheiro de origem de uma tag de imagem, para mostrar imagens diferentes, durante um certo perodo de tempo. O painel Linhas de tempo mostra como as propriedades das camadas e imagens se alteram ao longo do tempo. Escolher JANELA Outros Linhas de tempo, para abrir o painel Linhas de tempo (Fig. III.63).

1 2 3 4 5 6

Fig. III.63

Linhas de

tempo.

1. Menu pendente Linhas de tempo especifica que linhas de tempo do documento esto exibidas no painel Linhas de tempo. 2. Inspector de propriedades indica o nmero sequencial de quadros. O nmero entre os botes Voltar e Executar representa o quadro actual. A durao da animao pode ser controlada ao definir o nmero total de quadros e o nmero de quadros por segundo (qps). A definio padro de 15 qps e constitui uma boa taxa mdia, a ser utilizada na maior parte dos browsers executados nos sistemas mais comuns. 3. Canal de comportamentos o canal contendo os comportamentos que devero ser executados num determinado quadro da linha de tempo. 4. Marcador de execuo mostra o quadro da linha de tempo que est em exibio na janela do documento. 5. Barra de animao mostra a durao de cada animao de objecto. Uma nica linha pode incluir vrias barras, que representam diversos objectos. Barras diferentes no podem controlar o mesmo objecto no mesmo quadro. 6. Canal de animao exibe as barras para animar as camadas e imagens.

40

Unidade III

Para animar uma camada utilizando uma linha de tempo, proceder da seguinte forma: mover a camada at ao ponto inicial da animao (Fig. III.64);

Mover a camada at posio inicial.

Fig. III.64

escolher JANELA Outros Linhas de tempo; seleccionar a camada a ser animada; escolher MODIFICAR Linha de tempo Adicionar objecto linha de tempo; alternativamente, arrastar a camada seleccionada at ao painel Linhas de tempo;
Nota: Aparecer uma barra no primeiro canal da linha de tempo. O nome da camada aparecer na barra (Fig. III.65).

clicar no marcador do quadro primrio, no final da barra;

Adicionar um objecto linha de tempo.
Fig. III.65

mover a camada na pgina para o local onde dever estar no final da animao: aparecer uma linha exibindo o caminho da animao na janela do documento (Fig. III.66);

Mover a camada at posio final.

Fig. III.66

se se desejar que a camada se mova em curva, seleccionar a respectiva barra de animao e, mantendo pressionada a tecla Ctrl, clicar num quadro no meio da barra de animao para adicionar um quadro primrio na posio do cursor; alternativamente, clicar num quadro no meio da barra de animao e, no menu de atalhos, escolher Adicionar quadro primrio. Repetir esta etapa para definir outros quadros primrios;

Criao de Pginas Web

41

arrastar a camada para descrever o caminho em curva pretendido (Fig. III.67);

Fig. III.67

Arrastar a camada em curva.

manter pressionado o boto Executar para visualizar a animao na pgina. Repetir o procedimento para adicionar outras camadas e imagens linha de tempo, criando uma animao mais complexa.

Criao de uma linha de tempo arrastando um caminho Para criar uma animao com um caminho complexo, a gravao do caminho medida que se arrasta a camada poder ser mais eficiente do que a criao de quadros primrios individuais. Para criar uma linha de tempo arrastando um caminho, proceder da seguinte forma: seleccionar uma camada; mover a camada at ao ponto inicial da animao; escolher MODIFICAR Linha de tempo Gravar o caminho da camada; arrastar a camada pela pgina para criar um caminho; soltar a camada no ponto em que a animao dever parar o Dreamweaver adicionar uma barra de animao linha de tempo, que possuir o nmero apropriado de quadros primrios; no painel Linhas de tempo, clicar no boto Rebobinar (Fig. III.68); manter pressionado o boto Executar para visualizar a animao.

Fig. III.68

Rebobinar .

42

Unidade III

III.5.8 Formulrios
possvel utilizar quebras de linha, pargrafos, texto pr-formatado ou tabelas para formatar os formulrios. Um formulrio no pode ser inserido noutro formulrio, ou seja, as tags no podem ser sobrepostas, embora seja possvel incluir mais de um formulrio numa pgina.

Criao de formulrios
Os objectos de formulrios so inseridos seleccionando-se INSERIR Objectos de formulrio ou acedendo aos objectos de formulrio no separador Formulrios da barra Inserir (Fig. III.69).

Fig. III.69

Categoria
1 2 3 4 5 6 7 8 9 10 11 12

Formulrios.

11. Formulrio insere um formulrio no documento. O Dreamweaver insere tags form de abertura e finalizao no cdigo-fonte HTML. Quaisquer outros objectos de formulrio, como campos de texto, botes e outros, devem ser inseridos entre as tags form, para que os dados sejam processados correctamente por todos os navegadores. 12. Campo de texto insere um campo de texto. Os campos de texto aceitam qualquer tipo de entrada alfanumrica. O texto digitado pode ser exibido como uma linha simples, ou com marcadores ou asteriscos (para proteco das senhas). 13. Campo oculto insere um campo oculto no documento, no qual possvel armazenar dados do utilizador. Os campos ocultos permitem armazenar informaes complementares. 14. rea de texto insere o equivalente ao campo de texto, mas prevendo linhas mltiplas. Nota: No Inspector de Propriedades, seleccionar Linhas mltiplas transforma um campo de texto em rea de texto. Por outro lado, as opes Linhas simples e Senha transformam uma rea de texto em campo de texto. 15. Caixa de seleco insere uma caixa de seleco. As caixas de seleco permitem mltiplas respostas num nico grupo de opes. 16. Boto de opo insere um boto de opo. Os botes de opo representam opes exclusivas. A seleco de um boto num grupo cancela a escolha de todos os outros botes do mesmo grupo. 17. Grupo de botes de opo insere vrios botes de opo com o mesmo nome. 18. Lista/menus permite criar opes do utilizador numa lista e permitir seleccionar diversas opes na lista. A opo Menu exibe os valores de opo num menu pendente e permite seleccionar apenas uma nica opo. 19. Menu pendente insere uma lista de navegao ou menu. Os menus pendentes permitem inserir um menu no qual cada opo vinculada a um documento ou arquivo. 10. Campo de imagens permite inserir uma imagem. Os campos de imagens podem ser utilizados em vez dos botes Enviar para criar botes com aparncia grfica. 11. Campo de arquivos insere um campo de texto em branco e um boto Procurar num documento. Os campos de arquivos permitem que se procure ficheiros nos discos locais e se efectue o upload com dados do formulrio. 12. Boto insere um boto com texto. Os botes realizam tarefas quando so pressionados, como o envio e redefinio dos dados dos formulrios. possvel adicionar um nome ou identificador personalizado ao boto, ou utilizar um dos identificadores predefinidos: Enviar ou Redefinir.

Criao de Pginas Web

43

Para adicionar um formulrio a um documento: colocar o ponto de insero onde o formulrio deve ser includo; escolher INSERIR Formulrio ou seleccionar o separador Formulrios na barra Inserir e clicar no boto / cone Formulrio;
Nota: Com a pgina no modo de visualizao de projecto, os formulrios so indicados por um contorno pontilhado a vermelho. Se este contorno no estiver visvel, verificar se a opo EXIBIR Auxlios visuais Elementos invisveis est seleccionada.

na janela do documento, clicar no contorno do formulrio para escolher; alternativamente, o formulrio seleccionar a tag <form> no selector de tags situado no canto inferior esquerdo da janela do documento; no campo Nome do formulrio, no Inspector de propriedades, digitar um nome exclusivo para identificar o formulrio;
Nota: Dar um nome a um formulrio possibilita referenci-lo ou control-lo com uma linguagem de scripts, como JavaScript ou VBScript. Se o formulrio no tiver um nome, o Dreamweaver gera um nome utilizando a sintaxe formn e aumentar o valor n para cada formulrio includo na pgina.

especificar, no campo Aco do Inspector de propriedades (Fig. III.70), o caminho at pgina ou o script dinmico que processar o formulrio (digitar o caminho completo ou clicar no cone de pasta para navegar at pasta que contm a pgina do script);

Fig. III.70 Inspector de propriedades.

no menu pendente Mtodo, escolher o mtodo de transmisso dos dados do formulrio ao servidor (Fig. III.71).

Fig. III.71

Opes do menu pendente Mtodo.

III.5.9 Publicao Publicao das pginas num servidor Web

Para colocar os ficheiros um servidor remoto ou de teste, proceder do seguinte modo: no painel Site, escolher um site no menu pendente Site; seleccionar os ficheiros para transferir.

44

Unidade III

Nota: Normalmente os ficheiros so escolhidos na visualizao local, mas possvel seleccion-los na visualizao remota, se se preferir.

clicar no boto Colocar na barra de ferramentas do painel Site ou, no menu de atalho, escolher Colocar (se o ficheiro estiver aberto na janela do documento, ser possvel escolher SITE Colocar); se o ficheiro no tiver sido guardado, dependendo da definio da preferncia, possvel que aparea uma caixa de dilogo (no painel Site, na caixa de dilogo Preferncias) que permite guardar o ficheiro antes de o colocar no servidor; para efectuar a transferncia dos ficheiros dependentes, clicar em Sim; para os ignorar, clicar em No na janela de dilogo que se abre automaticamente para o efeito.
Nota: Para interromper a transferncia de arquivos, clicar no boto Cancelar na caixa de dilogo Status. possvel que a transferncia no pare imediatamente.

Gesto e actualizao dos contedos de um Web site

O painel Site permite exibir um site, inclusive todos os arquivos locais, remotos e do servidor de teste que a ele estiverem associados. Utiliza-se o painel Site para executar as operaes de manuteno de ficheiros, como por exemplo: criar novos documentos HTML; exibir, abrir e transferir arquivos; criar pastas; excluir itens; transferir arquivos entre sites locais, remotos e servidores de teste; determinar o layout da navegao do site utilizando o mapa do mesmo. Depois dos ficheiros terem sido criados ou modificados no site local, possvel sincroniz-los, ou seja, envi-los para o site remoto (public-los): seleccionar SITE Sincronizar para transferir as verses mais recentes dos ficheiros de e para o site remoto.

Criao de Pginas Web

45

t a r e f a
Guardar o documento com o nome anim01.htm.

T III.11

1. Abrir o programa Dreamweaver. Criar um novo documento com o comando Arquivo novo. 2. Criar uma camada inserindo o cdigo <div id="Layer1" style="position:absolute;
visibility:inherit; width:200px; height:115px; z-index:1"></div> na janela do documento, usando o visualizador de cdigo.

3. Modificar a cor de fundo da camada para #33FF99. 4. Inserir uma imagem de uma espiga de milho no interior da camada. 5. Fechar o painel Inspector de propriedades e abrir o painel Linhas de tempo. 6. Arrastar a camada para a barra de animao 1. 7. Seleccionar o quadro final da animao na respectiva linha e arrastar a camada para outra
posio.

8. Seleccionar um quadro intermdio e adicionar um quadro primrio; arrastar a camada para

outra posio de modo a criar um caminho de deslocao curvo, quase circular.

9. Adicionar o comportamento Mensagem pop-up animao, desencadeado quando se clica

na camada, com a mensagem Alimento biolgico!.

10. Seleccionar a opo Execuo automtica e verificar a animao visualizando a pgina no

browser (F12).

11. Adicionar mais camadas com animaes idnticas mas usando outros caminhos, atribuindo
equitativamente a mensagem Alimento biolgico! e Alimento transgnico!. O que acontecer?

12. Estender a animao de modo que, mantendo o ritmo de 15 qps, ela dure 1 minuto. 13. Adicionar o comportamento de ocultao das camadas linha de comportamentos no ltimo
quadro.

14. No quadro a seguir ao ltimo, adicionar o comportamento que mostre a mensagem Acabou! Verificar se tem uma alimentao saudvel.

15. Visualizar a pgina no browser e jogar durante 1 minuto, fazendo o balano total dos pontos.
Com a ajuda do professor, procurar um servidor na Web que permita publicar sites usando o protocolo FTP (ex.: http://homepages.sapo.pt). Criar uma conta de acesso, configurar um novo site no Dreamweaver e publicar o site.

III.21, III.22

46

Unidade III

Questes
Flash

1. Qual a principal funo do Macromedia Flash?

A. Edio de som. B. Edio de imagem. C. Navegar na Web. D. Animao e interactividade.

2. A que tipo de animao corresponde a figura?

A. De movimento. B. De forma. C. Com mscara. D. De aproximao.

3. O que significa a expresso instanciar um objecto?

A. Coloc-lo numa nova camada. B. Aplicar o zoom sobre o objecto. C. Arrast-lo da biblioteca. D. Criar uma interpolao de movimento.

4. Qual o cdigo nativo do Macromedia Flash?

A. JavaScript. B. ActionScript. C. Java. D. DHTML.

5. Das seguintes extenses de formatos de ficheiros, indicar a que no est directamente acessvel
na publicao do Flash. A. .swf B. .mov C. .xml D. .jpeg

6. Que ferramenta se deve usar para converter uma imagem mapa de bits em vector?
A. Traar mapa de bits. B. Separar mapa de bits. C. Unir mapa de bits. D. Interpolao.

Criao de Pginas Web

47

Dreamweaver

7. Indicar qual das opes seguintes no se adapta ao Dreamweaver.

A. Permite criar animaes de objecto em funo do tempo. B. Facilita a publicao de pginas Web. C. Muda o formato das imagens para se adequarem Web. D. Permite limpar as tags inseridas pelo Word nas pginas Web.

8. Que comando se utiliza para inserir uma imagem dinmica no Dreamweaver?

A. INSERIR Imagem. B. INSERIR Formulrio. C. INSERIR Imagens interactivas Imagem cambivel. D. INSERIR Objectos de modelos Regio editvel.

9. Que comando se usa para configurar um novo site no Dreamweaver?

A. SITE Novo site. B. SITE Mapa do site. C. SITE Editar site. D. SITE Arquivos do site.

10. Que objectos podem ser animados nas linhas de tempo, em Dreamweaver?
A. Tabelas e imagens. B. Vdeos e formulrios. C. Imagens e molduras. D. Camadas e imagens.

11. Qual o atributo que, no Dreamweaver, d a ordem de posio relativa na visualizao das
camadas? A. Id. da camada. B. Vis. C. ndice Z. D. Estouro.

12. O que so, em Dreamweaver, os comportamentos?

A. Cdigos atribudos a objectos relacionados com uma aco. B. Cdigos dos atributos dos objectos. C. Objectos multimdia que mostram vdeo. D. Caixas de dilogo perguntando o que se quer fazer.

48

Solues
11. D. 12. A. 13. C. 14. B. 15. C. 16. A. 17. C. 18. C. 19. A. 10. D. 11. C. 12. A.

TIC CD-ROM do Aluno 972-47-2498-0-3