7 - Criação de Páginas Web

Apresentação em tema: "7 - Criação de Páginas Web"— Transcrição da apresentação:

1 7 - Criação de Páginas Web
Macromedia Dreamweaver Multimédia

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

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

4 Importação do conteúdos do Flash
Para inserir um objecto botão Flash: na janela do documento, posicionar o ponto de inserção onde se pretende inserir o botão Flash; na barra Inserir, seleccionar «Mídia» e, em seguida, clicar no ícone do Botão Flash; alternativamente, seleccionar INSERIR – Imagens interactivas – Botão Flash.

5 Inserção de um filme Shockwave numa página Web
Para inserir um filme Shockwave: na janela do documento, colocar o ponto de inserção onde se pretende inserir o ficheiro Shockwave; no separador «Mídia» da barra Inserir, clicar no ícone/botão Shockwave; alternativamente, escolher INSERIR – Mídia – Shockwave; na caixa de diálogo que será exibida, seleccionar um ficheiro Shockwave; no Inspector de propriedades, digitar a largura e altura de visualização nas caixas L e U.

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

7 Adição de som Para criar uma hiperligação para um ficheiro de som, proceder do seguinte modo: seleccionar o texto ou a imagem que deseja utilizar como hiperligação 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».

8 Adição de som Para incorporar um ficheiro de som:
na visualização de projecto, colocar o ponto de inserção onde deseja incorporar o ficheiro; no separador «Mídia» da barra Inserir, clicar no ícone / botão Plug-in; alternativamente, escolher INSERIR – Mídia – 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, através da inserção dos valores nos campos apropriados ou do redimensionamento da área de reserva de espaço de plug-in, na janela «Documento».

9 Inserção de controlos ActiveX
Os programas ActiveX são componentes reutilizáveis semelhantes a applets que podem funcionar como plug-ins dos browsers. Para inserir o conteúdo do programa ActiveX: na janela do documento, colocar o ponto de inserção onde se pretende inserir o conteúdo; no separador «Mídia» da barra Inserir, clicar no ícone / botão ActiveX; alternativamente, seleccionar INSERIR – Mídia – ActiveX.

10 Criação e manipulação de camadas
O Dreamweaver permite criar de forma interactiva camadas na página e posicioná-las com precisão. Para criar uma camada há duas alternativas: Para desenhar uma camada, clicar no botão Desenhar camada, na barra Inserir, e em seguida arrastar para o documento na respectiva janela. Para inserir o código de uma camada num determinado local do documento, posicionar o ponto de inserção na janela do documento e, em seguida, escolher INSERIR – Camada.

11 Criação e manipulação de camadas
Para desenhar diversas camadas consecutivamente: clicar no botão Desenhar camada, na barra Inserir; manter a tecla Ctrl pressionada e clicar no documento, arrastando para construir/desenhar cada camada.

12 Criação de animação na linha de tempo
No Dreamweaver, as linhas de tempo utilizam o HTML dinâmico para alterar as propriedades de camadas e imagens ao longo do tempo. As linhas de tempo são utilizadas para criar animações que dispensem outro software, embora utilizem JavaScript. As linhas de tempo permitem alterar a posição, visibilidade, ordem de empilhamento e o tamanho de uma camada. As funções de camadas das linhas de tempo funcionam apenas nos browsers de versões 4.0 ou mais avançadas. Escolher JANELA – Outros – Linhas de tempo, para abrir o painel Linhas de tempo.

13 Criação de animação na linha de tempo
1 2 3 4 5 6 Menu pendente «Linhas de tempo» – especifica que linhas de tempo do documento estão exibidas no painel Linhas de tempo. Inspector de propriedades – indica o número sequencial de quadros. O número entre os botões Voltar e Executar representa o quadro actual. 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 é de 15 qps e constitui uma boa taxa média, a ser utilizada na maior parte dos browsers executados nos sistemas mais comuns.

14 Criação de animação na linha de tempo
1 2 3 4 5 6 Canal de comportamentos – é o canal contendo os comportamentos que deverão ser executados num determinado quadro da linha de tempo. Marcador de execução – mostra o quadro da linha de tempo que está em exibição na janela do documento. 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. Barras diferentes não podem controlar o mesmo objecto no mesmo quadro. Canal de animação – exibe as barras para animar as camadas e imagens.

15 Criação de uma linha de tempo arrastando um caminho
Para criar uma linha de tempo arrastando um caminho, proceder da seguinte forma: seleccionar uma camada; mover a camada até ao ponto inicial da animação; escolher MODIFICAR – Linha de tempo – Gravar o caminho da camada; arrastar a camada pela página para criar um caminho; soltar a camada no ponto em que a animação deverá parar; no painel Linhas de tempo, clicar no botão Rebobinar; manter pressionado o botão Executar para visualizar a animação.