7 - Criação de Páginas 7 - Criação de Páginas WebWeb

Macromedia Dreamweaver Macromedia Dreamweaver

MultimédiaMultimédia

Inserção de objectos multimédiaInserção de objectos multimédia

O O DreamweaverDreamweaver permite adicionar sons, permite adicionar sons, filmes ou outros ficheiros dinâmicos e filmes ou outros ficheiros dinâmicos e interactivos aos sites da Web, de maneira interactivos aos sites da Web, de maneira rápida e fácil. É possível incorporar ou rápida e fácil. É possível incorporar ou editar os ficheiros e objectos multimédia, editar os ficheiros e objectos multimédia, como por exemplo como por exemplo FlashFlash e e ShockwaveShockwave, , applets Javaapplets Java, , QuicktimeQuicktime, , ActiveXActiveX e som, e som, assim como objectos de botão e texto assim como objectos de botão e texto Flash, editáveis no próprio Flash, editáveis no próprio DreamweaverDreamweaver..

Importação do conteúdos do Importação do conteúdos do FlashFlash

O O DreamweaverDreamweaver disponibiliza objectos disponibiliza objectos FlashFlash para serem usados com ou sem o para serem usados com ou sem o programa de criação programa de criação FlashFlash. É possível . É possível personalizar um objecto botão personalizar um objecto botão FlashFlash adicionando texto, cor de fundo e adicionando texto, cor de fundo e linkslinks para outros arquivos. É possível inserir para outros arquivos. É possível inserir botões Flash durante o trabalho, quer na botões Flash durante o trabalho, quer na visualização do projecto quer na visualização do projecto quer na visualização do código.visualização do código.

Importação do conteúdos do Importação do conteúdos do FlashFlash

Para inserir um objecto botão Para inserir um objecto botão FlashFlash:: na janela do documento, posicionar o ponto de inserção na janela do documento, posicionar o ponto de inserção

onde se pretende inserir o botão Flash;onde se pretende inserir o botão Flash; na barra Inserir, seleccionar «Mídia» e, em seguida, clicar na barra Inserir, seleccionar «Mídia» e, em seguida, clicar

no ícone do no ícone do Botão FlashBotão Flash; alternativamente, seleccionar ; alternativamente, seleccionar INSERIR – Imagens interactivas – Botão Flash.INSERIR – Imagens interactivas – Botão Flash.

Inserção de um filme Shockwave Inserção de um filme Shockwave numa página Webnuma página Web

Para inserir um filme Para inserir um filme ShockwaveShockwave::na janela do documento, colocar o ponto de na janela do documento, colocar o ponto de

inserção onde se pretende inserir o ficheiro inserção onde se pretende inserir o ficheiro ShockwaveShockwave;;

no separador «Mídia» da barra Inserir, clicar no no separador «Mídia» da barra Inserir, clicar no ícone/botão ícone/botão ShockwaveShockwave; alternativamente, ; alternativamente, escolher escolher INSERIR – Mídia – ShockwaveINSERIR – Mídia – Shockwave;;

na caixa de diálogo que será exibida, seleccionar na caixa de diálogo que será exibida, seleccionar um ficheiro Shockwave;um ficheiro Shockwave;

no Inspector de propriedades, digitar a largura e no Inspector de propriedades, digitar a largura e altura de visualização nas caixas L e U.altura de visualização nas caixas L e U.

Adição de somAdição de som

Há vários tipos diferentes de ficheiros e Há vários tipos diferentes de ficheiros e formatos de som, assim como diversas formatos de som, assim como diversas maneiras de adicionar som às páginas da maneiras de adicionar som às páginas da Web.Web.Hiperligação para um ficheiro de som;Hiperligação para um ficheiro de som; Incorporação de um ficheiro de som;Incorporação de um ficheiro de som;

Adição de somAdição de som

Para criar uma hiperligação para um ficheiro Para criar uma hiperligação para um ficheiro de som, proceder do seguinte modo:de som, proceder do seguinte modo:seleccionar o texto ou a imagem que deseja seleccionar o texto ou a imagem que deseja

utilizar como hiperligação para o ficheiro de som;utilizar como hiperligação para o ficheiro de som;no Inspector de propriedades, clicar no ícone no Inspector de propriedades, clicar no ícone

correspondente à pasta para procurar o ficheiro correspondente à pasta para procurar o ficheiro de som; alternativamente, digitar o caminho e o de som; alternativamente, digitar o caminho e o nome do ficheiro no campo «Link».nome do ficheiro no campo «Link».

Adição de somAdição de som

Para incorporar um ficheiro de som:Para incorporar um ficheiro de som:na visualização de projecto, colocar o ponto de inserção onde na visualização de projecto, colocar o ponto de inserção onde

deseja incorporar o ficheiro;deseja incorporar o ficheiro;no separador «Mídia» da barra Inserir, clicar no ícone / botão no separador «Mídia» da barra Inserir, clicar no ícone / botão

Plug-inPlug-in; alternativamente, escolher ; alternativamente, escolher INSERIR – Mídia – Plug-INSERIR – Mídia – Plug-inin;;

no Inspector de propriedades, clicar no ícone correspondente no Inspector de propriedades, clicar no ícone correspondente à pasta para procurar o ficheiro de áudio; alternativamente, à pasta para procurar o ficheiro de áudio; alternativamente, digitar o caminho e o nome do ficheiro no campo «Link»;digitar o caminho e o nome do ficheiro no campo «Link»;

digitar a largura e a altura, através da inserção dos valores digitar a largura e a altura, através da inserção dos valores nos campos apropriados ou do redimensionamento da área nos campos apropriados ou do redimensionamento da área de reserva de espaço de plug-in, na janela «Documento».de reserva de espaço de plug-in, na janela «Documento».

Inserção de controlos Inserção de controlos ActiveXActiveX Os programas Os programas ActiveX ActiveX são componentes reutilizáveis semelhantes são componentes reutilizáveis semelhantes

a a appletsapplets que podem funcionar como que podem funcionar como plug-insplug-ins dos dos browsersbrowsers.. Para inserir o conteúdo do programa Para inserir o conteúdo do programa ActiveXActiveX::

na janela do documento, colocar o ponto de inserção onde se pretende na janela do documento, colocar o ponto de inserção onde se pretende inserir o conteúdo;inserir o conteúdo;

no separador «Mídia» da barra Inserir, clicar no ícone / botão no separador «Mídia» da barra Inserir, clicar no ícone / botão ActiveXActiveX; ; alternativamente, seleccionar alternativamente, seleccionar INSERIR – Mídia – ActiveXINSERIR – Mídia – ActiveX..

Criação e manipulação de Criação e manipulação de camadascamadas

O O DreamweaverDreamweaver permite criar de forma permite criar de forma interactiva camadas na página e posicioná-las interactiva camadas na página e posicioná-las com precisão.com precisão.

Para criar uma camada há duas alternativas:Para criar uma camada há duas alternativas: Para desenhar uma camada, clicar no botão Para desenhar uma camada, clicar no botão

Desenhar camadaDesenhar camada, na barra Inserir, e em seguida , na barra Inserir, e em seguida arrastar para o documento na respectiva janela.arrastar para o documento na respectiva janela.

Para inserir o código de uma camada num Para inserir o código de uma camada num determinado local do documento, posicionar o ponto determinado local do documento, posicionar o ponto de inserção na janela do documento e, em seguida, de inserção na janela do documento e, em seguida, escolher escolher INSERIR – CamadaINSERIR – Camada..

Criação e manipulação de Criação e manipulação de camadascamadas

Para desenhar diversas camadas Para desenhar diversas camadas consecutivamente:consecutivamente:clicar no botão clicar no botão Desenhar camadaDesenhar camada, na barra , na barra

Inserir;Inserir;manter a tecla manter a tecla CtrlCtrl pressionada e clicar no pressionada e clicar no

documento, arrastando para documento, arrastando para construir/desenhar cada camada.construir/desenhar cada camada.

Criação de animação na linha Criação de animação na linha de tempode tempo

No No DreamweaverDreamweaver, as linhas de tempo utilizam o HTML , as linhas de tempo utilizam o HTML dinâmico para alterar as propriedades de camadas e dinâmico para alterar as propriedades de camadas e imagens ao longo do tempo. As linhas de tempo são imagens ao longo do tempo. As linhas de tempo são utilizadas para criar animações que dispensem outro utilizadas para criar animações que dispensem outro software, embora utilizem software, embora utilizem JavaScriptJavaScript..

As linhas de tempo permitem alterar a posição, As linhas de tempo permitem alterar a posição, visibilidade, ordem de empilhamento e o tamanho de visibilidade, ordem de empilhamento e o tamanho de uma camada. As funções de camadas das linhas de uma camada. As funções de camadas das linhas de tempo funcionam apenas nos tempo funcionam apenas nos browsersbrowsers de versões 4.0 de versões 4.0 ou mais avançadas. ou mais avançadas.

Escolher Escolher JANELA – Outros – Linhas de tempoJANELA – Outros – Linhas de tempo, para , para abrir o painel Linhas de tempo.abrir o painel Linhas de tempo.

Criação de animação na linha Criação de animação na linha de tempode tempo

1.1. Menu pendente «Linhas de tempo» – especifica que linhas de tempo do Menu pendente «Linhas de tempo» – especifica que linhas de tempo do documento estão exibidas no painel Linhas de tempo.documento estão exibidas no painel Linhas de tempo.

2.2. Inspector de propriedades – indica o número sequencial de quadros. O Inspector de propriedades – indica o número sequencial de quadros. O número entre os botões número entre os botões VoltarVoltar e e ExecutarExecutar representa o quadro actual. representa o quadro actual. A duração da animação pode ser controlada ao definir o número total de A duração da animação pode ser controlada ao definir o número total de quadros e o número de quadros por segundo (qps). A definição padrão quadros e o número de quadros por segundo (qps). A definição padrão é de 15 qps e constitui uma boa taxa média, a ser utilizada na maior é de 15 qps e constitui uma boa taxa média, a ser utilizada na maior parte dos browsers executados nos sistemas mais comuns.parte dos browsers executados nos sistemas mais comuns.

1

23

4

5

6

Criação de animação na linha Criação de animação na linha de tempode tempo

3.3. Canal de comportamentos – é o canal contendo os comportamentos que Canal de comportamentos – é o canal contendo os comportamentos que deverão ser executados num determinado quadro da linha de tempo.deverão ser executados num determinado quadro da linha de tempo.

4.4. Marcador de execução – mostra o quadro da linha de tempo que está em Marcador de execução – mostra o quadro da linha de tempo que está em exibição na janela do documento.exibição na janela do documento.

5.5. Barra de animação – mostra a duração de cada animação de objecto. Uma Barra de animação – mostra a duração de cada animação de objecto. Uma única linha pode incluir várias barras, que representam diversos objectos. única linha pode incluir várias barras, que representam diversos objectos. Barras diferentes não podem controlar o mesmo objecto no mesmo Barras diferentes não podem controlar o mesmo objecto no mesmo quadro.quadro.

6.6. Canal de animação – exibe as barras para animar as camadas e imagens.Canal de animação – exibe as barras para animar as camadas e imagens.

1

23

4

5

6

Criação de uma linha de tempo Criação de uma linha de tempo arrastando um caminhoarrastando um caminho

Para criar uma linha de tempo arrastando um caminho, proceder da Para criar uma linha de tempo arrastando um caminho, proceder da seguinte forma:seguinte forma: seleccionar uma camada;seleccionar uma camada; mover a camada até ao ponto inicial da animação; escolher mover a camada até ao ponto inicial da animação; escolher MODIFICAR – MODIFICAR –

Linha de tempo – Gravar o caminho da camadaLinha de tempo – Gravar o caminho da camada;; arrastar a camada pela página para criar um caminho; soltar a camada no arrastar a camada pela página para criar um caminho; soltar a camada no

ponto em que a animação deverá parar;ponto em que a animação deverá parar; no painel Linhas de tempo, clicar no botão no painel Linhas de tempo, clicar no botão RebobinarRebobinar; manter pressionado ; manter pressionado

o botão o botão ExecutarExecutar para visualizar a animação. para visualizar a animação.