Nome:

Turma:

Dreamweaver
Índice
Aula 01-Introdução ao Dreamweaver 8.5 Classificando uma tabela.........................28
Configurações de Máquina.........................5 Auto Formatação....................................29
Iniciando o Programa................................5 Layout - Visualização de layout................29
Definindo um site local..............................6 Desenhando uma tabela de layout:...........29
Interface do Dreamweaver 8......................7 Desenhando uma célula de layout:...........30
Criando um Novo Documento HTML............8 Aula 05-CSS e Extensions Manager.....32
Salvando um arquivo HTML........................9 Criando um novo CSS Style.....................32
Dando um título para sua página..............10 Extensions Dreamweaver .......................34
Propriedades do documento ....................10
Aula 06-Trab:Tabela/Imagem/Links...37
Category - Appearance............................10
Title (Título) / Encoding (Codificação)........11 Aula 07-Library e Template.................38
Colocando texto em uma página...............11 Library (biblioteca) ................................38
Formatando Texto...................................12 Para criar um item de biblioteca: .............38
FONTE..................................................12 Excluindo um item da Library ..................39
CORES..................................................12 Recriando um item de Library...................39
Visualizando no Navegador......................13 Templates (Modelos) ..............................39
STYLE...................................................13 Criando um template..............................40
Como inserir datas ................................13 Editable Region......................................40
Desfazer e Repetir..................................14 Criando Editable Region...........................40
Salvando um Template............................41
Aula 02-Trabalhando com Imagens.....15
Novo a partir de um template..................41
Inserindo objeto de texto Flash................15
Modificando o modelo.............................41
Monitorando o Tamanho da Página............16
Trabalhando com Imagens.......................16 Aula 08-Trab:Modelo...........................44
Propriedades da Imagem.........................17 Aula 09-Photo Album - Flash Button....45
Editando a Imagem................................18 Create Web Photo Album.........................45
Background de Imagem..........................18 Flash Button..........................................46
Criação Rollover Image...........................19 Para inserir um objeto de botão Flash........46

Aula 03-Trabalhando com Hiperlinks...21 Modificando um Flash Button...................47

Inserindo link Relativo e Absoluto.............21 Aula 10-Trab:Albuns de Fotos.............49
Criação de um link de correio eletrônico ...22
Aula 11-Frames e Navigator Bar..........50
Link Interno – Anchor (Âncora)................22
Criar um Frameset..................................50
Image Map (Mapa de Imagens)................23
Excluindo frames....................................50
Para criar um Image Map.........................23
Usando o painel Frames..........................50
Aula 04-Elementos de design..............26 Exibindo painel Frames:..........................51
Standard – Modo Visualização Padrão........26 Selecionado uma frame:.........................51
Inserir uma tabela..................................26 Selecioando um Frameset:.......................51
Selecionando linhas e colunas..................27 Propriedades do Frame............................51
Definindo as propriedades da tabela..........27 Propriedades do Frameset.......................51
Salvando o Frameset e os Frames.............52 Inserindo Vídeo no Dreamweaver ............80
Salvando os Frames................................52 Utilizando um Link..................................80
Navigator Bar........................................52 Utilizando Plugin.....................................80
Criando uma Navigator Bar......................52 Inserindo Áudio no Dreamweaver.............81
Incorporando o Objeto Plugin ..................81
Aula 12-Trab: Frames..........................55
Incorporando ActiveX..............................81
Aula 13-Formulário.............................56
Trabalhando com o Flash.........................82
Os objetos de formulário.........................56
Aula 19 - Agência Viaja Brasil..............85
Validate Form (Validação de Formulário)....59
Aula 20-Publicação o Site....................86
Aula 14-Behavior I..............................62
Hospedagem..........................................86
Aplicando Behaviors (Comportamentos)....62
Hospedagem Paga..................................86
Go to URL (ir para a URL)........................63
Hospedagem Gratuita.............................87
Open Browser Window............................63
Domínio................................................87
Set Text: Set text of Status Bar................64
Enviando os arquivos para o servidor........88
Play Sound (Executar o som)...................64
Pop Message (Mensagem pop-up).............64
Swap Image..........................................65
Executar e Para Timeline.........................65

Aula 15-Layer e Behaviors II...............67

Desenhando Layer..................................67
Selecionando Layer.................................67
Painel Layer...........................................68
Propriedades dos Layers..........................68
Conversão entre Layers e Tables . ............69
Para converter Layers em uma Table: .......69
Para converter Tables em Layers: ............70
Behaviors (Comportamentos) II...............70
Drag Layer (arrastar camadas).................70
Show/Hide Layers...................................70

Aula 16-Trab: Behaviors......................73

Aula 17-Timeline e Behaviors III........74

Painel Timeline.......................................74
Criando Animação..................................74
Controles Timelines................................75
Modificando sua Timeline.........................75
Keyframe (quadro-chave)........................76

Aula 18-Plugins e Elementos Flash......79

Trabalhando com Vídeo...........................79
 Dreamweaver

Aula 01-Introdução ao Dreamweaver 8

O Dreamweaver 8 é um editor profissional de HTML, que projeta e gerencia sites e aplica-
tivos para a Internet.
HTML é a sigla de Hypertext Markup Language (linguagem de marcação de hipertexto).
Essa linguagem consiste em um conjunto de códigos (chamados de marcas ou tags) usados
para definir a aparência e funcionalidade das páginas da Web. Um documento formatado com
código HTML é chamado de documento HTML.
A atual versão, trás inúmeras novidades e novos recursos para facilitar o uso e gerar uma maior
produtividade em seus trabalhos. A tecnologia Roundtrip HTML do Dreamweaver 8, importa
documentos HTML feitos em outros aplicativos ou até mesmo feito por um desenvolvedor, sem
alterar ou adicionar código extra.
Os recursos de edição visual do Dreamweaver 8, são do tipo WYSIWYG(“What You See Is
What You Get” - O que você vê é o que você adquire). Permitindo adicionar rapidamente ima-
gens, textos e funcionalidades aos seus documentos HTML, sem ter que escrever uma linha
de código ou até mesmo saber programar em HTML.

Configurações de Máquina
O macromedia Dreamweaver 8 consome muitos recursos de sua máquina e para que este
programa funcione corretamente a configuração mínima do seu computador deve ser:
Processador: Intel Pentium® III 800 MHz ou equivalente.
Sistema Operacional: Microsoft® Windows® 2000 ou Windows XP.
Memória RAM: 256 MB RAM (recomendado 1 GB para rodar simultaneamente com Fireworks
8 e Flash 8).
Disco Rígido: 650 MB livres no disco somente para a instalação do programa.
Video: 1024 x 768 pixels.

Iniciando o Programa
Para iniciar o Macromedia Dreamweaver 8 basta ir ao Menu Iniciar > Programas > Macro-
media > Macromedia Dreamweaver 8.

Iniciando o Dreamweaver 8

5
 Dreamweaver

Definindo um site local

Para que você possa gerenciar todos os seus documentos HTML gerados pelo Dreamweaver
8, temos que informar um Site Local de trabalho que iremos usar para armazenar as páginas
HTML, imagens, vídeos, sons, arquivos Flash e tudo que for utilizado em nosso site.
Uma das maneiras de definir o Site Local é através da tela de abertura:

Tela de Abertura

1 - Selecione Dreamweaver Site, na categoria Create New (Criar Novo)

Definindo Site Local – Site Definition

2 - Informe o nome do site a ser criado no campo Site Name: Aula 01

3 - Informe o local onde vamos armazenar todo o site no campo Local root folder:

6
 Dreamweaver

C:\Dreamweaver Aula01\
4 - Clique no botão OK.
Pronto, acabamos de configurar o nosso site.

Interface do Dreamweaver 8
No Windows, a área de trabalho integrada do Dreamweaver 8 apresenta todas as janelas e
painéis reunidos em uma única janela maior do aplicativo.

Interface - Dreamweaver 8

Insert bar – (barra Inserir): contém botões para inserção de vários tipos de “objetos”, como
imagens, tabelas e camadas em um documento. Para ficar mais prático estaremos mudando
a forma de visualização do menu Insert bar, clicando sobre o triangulo ao lado da opção
Common e selecionando a opção Show as Tabs.

Mudando a forma de visualização do Insert bar

Ficando com esta nova aparência mais prática e usual.

Insert bar no formato de visualização em guias.

Document toolbar - (barra de ferramentas do documento): contém botões e menus

pop-up que possibilitam diferentes visualizações da janela do documento (Code - visualização
do código HTML, Split - 50% visualização do código HTML e 50% visualização do layout do

7
 Dreamweaver

projeto e Design - visualização do layout do projeto), várias opções de exibição e algumas

operações comuns, como a visualização no navegador.

Document toolbar - barra de ferramentas do documento

Document window – (janela do documento): exibe o documento que está sendo criado
e editado.
Panel groups – (grupos de painéis): são conjunto de painéis relacionados, agrupados sob
um cabeçalho. Para expandir um grupo de painéis, clique na seta de expansão, à esquerda
do nome do grupo; para desanexar um grupo de painéis, arraste a pinça, na extremidade
esquerda da barra de título do grupo.
Tag selector – (seletor de tags): na barra de status situada na parte inferior da janela do
documento, mostra a hierarquia das tags que delimitam a seleção atual na visualização do
projeto. (tags são códigos HTML).
Property inspector – (inspetor de propriedades): permite exibir e alterar várias proprieda-
des do objeto ou texto selecionado. Cada tipo de objeto apresenta propriedades diferentes.
Files panel - (painel do Site): permite gerenciar os arquivos e as pastas que compõem o
site. Para obter mais informações, veja Sobre o painel Site. Esse painel também possibilita a
exibição de todos os arquivos no disco local, como no Windows Explorer.

Criando um Novo Documento HTML

Uma das formas de criar um documento HTML e através da tela de entrada se ainda estiver
visível, clicando sobre a opção HTML, na categoria Create New (Criar Novo).

Criando um novo documento HTML atrás de tela de entrada

Outra forma é através do menu File > New. Aparecerá a tela New Document.

8
 Dreamweaver

New Document - Criando um novo documento HTML

Na tela New Document selecione a guia General e escolha em Category a opção Basic page.
Em Basic page a opção HTML e confirme a criação da página através do botão Create.

Salvando um arquivo HTML

Não espere para salvar somente depois de inserir texto ou elementos gráficos na página, sal-
ve a página logo após criação, assim quando você inserir elementos gráficos ou outra mídia,
todos os caminhos que fazem referência ao local onde estão armazenados esses elementos
em seu site, serão produzidos corretamente. Em alguns casos o Dreamweaver não permite a
inserção de objetos enquanto o arquivo não estiver salvo, bem como não exibirá no Browser
sua página enquanto não a salvar.
Dar nomes a arquivos HTML, é um pouco diferente de dar nomes a outros tipos de arquivos,
tendo em vista que depois esses arquivos serão enviados para Internet e serão armazenados
no Servidor Web. Por isso e bom seguir as seguintes orientações:
1 - o nome deverá estar em letra mi-
núscula e sem espaço, se necessário
use os caracteres de sublinhado ou hífen
(Ex.:“meu_primeiro-arquivo”);
2 - não precisa colocar a extensão HTML,
até porque o Dreamweaver fará isso au-
tomaticamente;
3 - evite iniciar o nome de seus arquivos
com números;
4 - não devemos usar quaisquer carac-
teres especiais, como %, !, #, $, ¨, &, *,
(, ), §, ª, º, @, /, <, >, |, ou \.
5 - evite usar nomes de arquivos e pastas
muitos longos, visto que eles serão parte
do endereço (URL) que deve ser digitada
para chegar a sua página.

9
 Dreamweaver

Dando um título para sua página

Todo documento HTML que você cria precisa ter um título. O título é usado principalmente para
identificação do documento e aparecerá na barra de título do navegador (Browser). Escolha
uma frase curta e informativa que descreva o objetivo do documento. Acostume-se a adicionar
um título em cada página que criar, antes mesmo de adicionar texto ou elementos gráficos na
página. Caso você não informe nenhum título à página o Dreamweaver chamará o arquivo de
Untitled Document (Documento sem título).
Uma das maneiras de inserir um título à página é através da barra Document toolbar, inse-
rindo o título desejado no campo Title (título).

Document toolbar - barra de ferramentas do documento

ou através do Menu Modify> Page Properties, na área de Category (Categoria) escolha

Title/Encoding e no campo Title (Título) informa o título.

Propriedades do documento
Através da janela Page Properties no menu Modify> Page Properties ou Ctrl+J, podemos
especificar a família de fonte e tamanho a ser utilizada como padrão, a cor de background,
as margens, os estilos de links e outros aspectos referentes à página.

Category - Appearance

Propriedades de Página - Categoria Aparência

Page Font: define a fonte padrão para todo o documento.

Size: define o tamanho padrão da fonte para todo o documento.
Text Color: define a cor do texto do documento.
Background Color: define a cor de fundo da página. Para escolher nova cor, clique no qua-
dradinho de cor ao lado ou digite o código da cor.
Background Image: define a imagem de fundo da página se houver. Clique em Browse para
selecionar a imagem desejada. Se não houver imagem, deixe o campo em branco.
Repeat: se a imagem ira ou não se repetir, no caso da mesma ser menor que o tamanho da
página.
Left Margin: define um valor em pixels para a margem esquerda (valor aceito pelo Internet

10
 Dreamweaver

Explorer). Se não quiser margem, digite 0.

Top Margin: define um valor em pixels para a margem do alto (valor aceito pelo Internet
Explorer). Se não quiser margem, digite 0.
Margin Width: especifica um valor em pixels para a largura da margem (valor aceito pelo
Netscape). Se não quiser margem, digite 0.
Margin Height: especifica um valor em pixels para a altura da margem (valor aceito pelo
Netscape). Se não quiser margem, digite 0.

Title (Título) / Encoding (Codificação)

Propriedades de Página - Categoria Título e Codificação

Title: define o título da página. O título é exibido no alto da janela do navegador, que é o
mesmo mostrado na barra de ferramentas do Dreamweaver.
Encoding: define a codificação do documento.

Colocando texto em uma página

Inserir texto é uma tarefa muito simples no Dreamweaver, principalmente para os usuários
experientes em algum processador de textos. Você pode adicionar textos das seguintes for-
mas:
1- Digitando diretamente no Dreamweaver.
Basta digitar as palavras na área de Document Window e pressionar ENTER se quiser criar um
novo parágrafo. Caso queira apenas criar uma quebra de linha pressionar SHIFT+ENTER.
2- Copiar e Colar Especial
No Word selecione todo o texto a ser copiado, vá até o menu Editar e escolha Copiar (Ctrl+C),
no Dreamweaver vá até o menu Edit e escolha Paste Special (Ctrl+Shift+V). Na janela
Paste Special você escolhe de que forma deseja colocar o texto no Dreamweaver.
*** Imagem de Paste Special ***
Descrição do que cada item faz.
3- Importando arquivos do Word e do Excel
O Dreamweaver também pode importar arquivos de Word e do Excel, através do Menu File>
Import> Word Document ou Menu File> Import> Excel Document.

11
 Dreamweaver

Formatando Texto
Para formatar um texto, e tão simples como no Word:

Properties Inspector - Painel de Propriedades

FONTE

No Dreamweaver, ao invés de definir somente um tipo de fonte para uma palavra ou texto,
você define várias fontes (uma lista com diversos tipos de fontes), pois assim, o navegador
verificará se a primeira fonte da lista está instalada no computador do usuário, caso não esteja,
ele verifica a segunda, e assim por diante. Se nenhuma das fontes sugeridas estiver disponível,
a palavra ou texto será exibido na fonte padrão do navegador do usuário.
É importante saber que as fontes de texto utilizadas nas páginas de Internet deveram estas
instaladas nos computadores dos utilizadores, para que estas sejam corretamente visualizadas,
e evitar discrepâncias no tipo de fonte utilizada. Por isso é conveniente utilizar as fontes de
texto padrão instaladas com o Windows. São elas o Arial, Helvetica, Times New-Roman,
Courier New, Courier, Georgia, Times, Verdana e Geneva. No caso de utilizarmos outro
tipo de fonte de texto corre-se o risco de não ser correctamente visualizada no Browser, utili-
zando-se muitas vezes para isso um imagem de texto (normalmente um .gif) ou Texto Flash
como veremos mais a frente nesta apostila.

CORES

No Dreamweaver, muitas caixas de diálogo, assim como o Properties inspector (Painel

de Propriedades) de diversos elementos de páginas, contêm uma caixa de cores, que abre
um seletor de cores. Utilize o seletor de cores para escolher uma cor para um elemento da
página.
Em HTML, as cores são expressas como valores hexadecimais (por exemplo: #FF0000) ou
como nomes de cores (vermelho). Uma cor aceita pela Web tem a mesma aparência no Nets-
cape Navigator e no Microsoft Internet Explorer nos sistemas Windows em execução no modo
de 256 cores. Na prática, diz-se que há 216 cores comuns e que qualquer valor hexadecimal
que combine os pares 00, 33, 66, 99, CC ou FF (valores RGB 0, 51, 102, 153, 204 e 255,
respectivamente) representa uma cor aceita pela Web.
No entanto, testes revelam que existem somente 212 cores aceitas pela Web em vez de 216,
pois o Internet Explorer, quando executado no Windows, não interpreta corretamente as cores
#0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0).
Devemos ativar a opção Snap to Web Safe, para que todas as cores utilizadas no Dreamwe-
aver sejam transformadas para cores seguras na Web.

Paleta de Cores

12
 Dreamweaver

Visualizando no Navegador
É recomendável testar as páginas visualizando-as nos Browser (navegadores) normalmente
durante o projeto e o processo de criação das páginas. Com este método você poderá detectar
erros com antecedência sem copiá-los ou repeti-los. Antes de visualizar no navegador devemos
sempre salvar o arquivo.
Para visualizar a página no Browser (navegador), devemos ir ao menu File> Preview in
Browser e escolher o navegador, ou senão teclar F12.

STYLE

O menu pop-up Style indica a formatação aplicada atualmente ao texto selecionado. Toda
formatação feita na página pode ser reaproveitada, basta selecionar o local aonde será apli-
cada e escolhe um estilo no menu pop-up Style. Para retirar o estilo aplicado basta selecionar
o texto que contém a formatação e escolher Nome no menu pop-up Style.

nemu pop-up Style

Uma boa técnica de trabalho e Renomear os Styles, tornando assim mais fácil sua identificação.
Para isso selecione Rename no menu pop-up Style.

Renomeando Estilos

Escolha o Style a ser renomeado e de o novo nome.

Como inserir datas

O Dreamweaver fornece um objeto Data
conveniente, que insere a data atual
em qualquer formato preferido (com ou
sem a hora) e dá ao usuário a opção de
atualizar a data sempre que o arquivo
for salvo. Vale lembrar que a data/hora
inserida refere-se à data da inserção
do objeto Data ou a data de quando foi
salvo pela ultima vez.
Para inserir uma data podemos ir ao

Insert Bar> Common> Date

13
 Dreamweaver

Desfazer e Repetir
Para cancelar as últimas ações podemos usar a opção Undo, no memu Edit> Undo (Ctrl+Z).
Podemos controlar o máximo ações a ser desfeitas através da opção
Podemos através da opção Maximum number of history steps definir o numero de vezes
que podemos voltar atrás nas ações. Podendo ir de 2 a 99999.
Outra opção muito interessante é o comando Redo, no menu Edit> Redo (Ctrl+Y). Após
executada uma ação podemos selecionar o que desejamos e aplicar novamente a ação.

Exercício 01

1. Defina o Site no Local indicado pelo professor.

2. Crie uma nova página e mude a cor de fundo.
3. Importe o arquivo de texto fornecido pelo seu professor e crie diversos estilos de texto ,
modificando a fonte, tamanho, alinhamento, cor e vá aplicando-os ao documento .
4. Para finalizar salve o arquivo como “index.html” .
5. Para visualizá-lo Pressionando a tecla F12.

14
 Dreamweaver

Aula 02-Trabalhando com Imagens

As imagens constumam ser utilizadas para adicionar interfaces gráficas (como botões de na-
vegação), apelo visual (por exemplo: fotografias) ou elementos de design interativos, como
imagens cambiáveis ou um mapa de imagens.

Inserindo objeto de texto Flash

O objeto de texto Flash permite criar e inserir um filme Flash que contém apenas texto. Isso
permite criar um pequeno filme gráfico com base em vetores com as fontes de designer e o
texto escolhido.
Para inserir um objeto de texto Flash você pode ir ao Insert Bar> Common clicar sobre a

seta de expansão do botão Media e escolher Flash Text. Ou pelo menu Insert>
Media> Flash Text

Caixa de diálogo Inserir Texto Flash

Font: pode se usar qualquer fonte, mesmo as não instaladas no computador do usuário, por-
que será gerado um arquivo flash.
Size: tamanho da fonte.
Color: cor da Fonte.
Rollover color: cor da Fonte quando o mouse estiver sobre o arquivo Flash.
Text: Texto desejado.
Show font: mostrar visualização final enquanto edição.
Link: página html a ser aberta.
Target: em que lugar será aberta à página
Bg color: cor de fundo do arquivo Flash
Save as: nome como será salvo o arquivo Flash.

15
 Dreamweaver

Monitorando o Tamanho da Página

A barra de status exibe as dimensões atuais da janela do documento (em pixels). Para definir
um tamanho de janela que caiba em qualquer uma das varias resoluções de vídeo, escolha
um tamanho no menu pop-up.
O tamanho da janela mostrada reflete as dimensões internas da
janela do navegador, sem incluir as bordas; o tamanho do moni-
tor é exibido entre parênteses. Por exemplo: seria recomendável
utilizar o tamanho “760 x 420 (800 x 600, maximinizado)” se
for provável que os visitantes ao seu site estejam utilizando o
Microsoft Internet Explorer ou o Netscape Navigator nas suas
configurações padrão em um monitor de 800 x 600.
Também pode-se ter uma estimativa de tamanho e tempo de espera para se visualizar por
completo o Site. No menu Edit> Preferences> Category: Status Bar, temos uma lista com
a resoluções mais usadas.

Lista de Tamanho de janelas do documento

Trabalhando com Imagens

Existem muitos tipos diferentes de formatos de arquivos gráficos, mas três formatos são ge-
ralmente utilizados nas páginas da Web – GIF, JPEG e PNG. A resolução mais utilizada para
Internet e 72 dpi e atualmente, os formatos de arquivo GIF e JPEG são os que apresentam
melhor suporte e podem ser exibidos na maioria dos navegadores.
Os arquivos PNG adaptam-se melhor a quase todos os tipos de gráfico da Web devido a sua
flexibilidade e pequeno tamanho de arquivo; entretanto, a exibição de imagens PNG conta
com suporte parcial apenas em Microsoft Internet Explorer (4.0 e navegadores posteriores) e
em Netscape Navigator (4.04 e navegadores posteriores). Portanto, a não ser que seu projeto
se destine a um público-alvo específico que utilize navegadores mais modernos com suporte
para o formato PNG, utilizar GIFs ou JPEGs será uma escolha mais segura.para atingir um
público maior.
Os arquivos GIF (Graphic Interchange Format) utilizam um máximo de 256 cores, e são
mais apropriados para exibir imagens em tons descontínuos ou aquelas que contêm grandes
superfícies de cores sólidas, como barras de navegação, botões, ícones, logotipos ou outras
imagens com matizes e cores uniformes, por exemplo.
O formato de arquivo JPEG (Joint Photographic Experts Group) é a opção mais avança-
da para imagens fotográficas ou de tons contínuos, porque os arquivos JPEG podem conter
milhões de cores. À medida que a qualidade do arquivo JPEG aumenta, também aumentam o
tamanho do arquivo e o tempo de download. Geralmente é possível equilibrar a qualidade da
imagem e o tamanho do arquivo, compactando um arquivo JPEG.
O formato de arquivo PNG (Portable Network Group) é um substituto livre de patentes
ao GIF, que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza
e true-color, além de suporte ao canal alfa de transparência. O formato PNG é o formato de
arquivo nativo de Macromedia Fireworks. Os arquivos PNG mantêm todas as informações sobre

16
 Dreamweaver

Layers, vetores, cores e efeitos originais (por exemplo: aplicação de sombra) e, a qualquer
momento, todos os elementos podem ser editados. Os arquivos devem ter extensão .png,
para serem reconhecidos como PNG por Macromedia Dreamweaver 8.
Ao inserir uma imagem em um documento do Dreamweaver 8, o programa gerará automatica-
mente uma referência desse arquivo no código-fonte HTML. Para garantir que essa referência
esteja correta, o arquivo de imagem deverá estar no site. Caso não esteja no site atual, o
Dreamweaver 8 perguntará se o arquivo deve ser copiado para o site.
Podemos inserir uma imagem através do Insert Bar> Common clicar sobre a seta de expan-

são do botão Images e escolher Image, ou através do menu Insert> Image.

Uma boa dica para não ter problemas com imagens e salvar sempre o arquivo HTML antes de
inserir uma imagem. Para que o Dreamweaver administre essa imagem de uma forma mais
segura.

Propriedades da Imagem
Selecione a imagem e através do Properties Inspector (Painel de Propriedades) para
ver todas as propriedades da imagem. Caso não estejam visível todas as opções click na seta
de expansão no canto inferior direito da janela Properties Inspector (Painel de Proprie-
dades).

Painel de Propriedades da Imagem

Campo de Texto Nome da Imagem: Serve para dar um nome de referência a imagem
W: Largura da Imagem em pixels (quando se redimensiona a imagem o numero fica em ne-
grito, para voltar ao padrão basta clicar sobre a letra W).
H: Altura da Imagem em pixels (quando se redimensiona a imagem o numero fica em negrito,
para voltar ao padrão basta clicar sobre a letra H).
Src: especifica o arquivo de origem da imagem. Clique no ícone correspondente à pasta para
procurar o arquivo de origem, ou digitar o caminho.
Link: especifica um hiperlink para a imagem.
Alt: especifica um texto alternativo que é exibido no lugar da imagem para os navegadores
somente de texto ou para aqueles definidos para download manual de imagens. Para os usu-
ários com deficiência visual, que utilizam sintetizadores de fala com navegadores somente de
texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também será exibido
quando o ponteiro estiver sobre a imagem.
Border: define a largura, em pixels, da borda da imagem. O padrão é sem borda.
Align: A opção Alinhar coloca uma imagem e o texto na mesma linha.
A opção Default geralmente especifica um alinhamento da Baseline (linha de base). (o
padrão pode ser diferente, dependendo do navegador do visitante do site).
As opções Baseline and Bottom alinham a parte inferior do objeto selecionado à linha de
base do texto (ou de outro elemento do mesmo parágrafo).
A opção Top alinha a parte superior de uma imagem à parte superior do item mais alto (ima-
gem ou texto) na linha atual.
A opção Middle alinha a parte central da imagem à linha de base da linha atual.
A opção Text Top alinha a parte superior da imagem à parte superior do caractere mais alto
17
 Dreamweaver

da linha de texto.
A opção Absolute Middle alinha a parte central da imagem à parte central do texto da linha
atual.
A opção Absolute Bottom alinha a parte inferior da imagem à parte inferior da linha de texto
(que inclui descendentes, como na letra g).
A opção Left coloca a imagem selecionada na margem esquerda, quebrando automaticamente
as linhas do texto em volta dele à direita. Se o texto alinhado à esquerda-preceder o objeto
na linha, ele geralmente forçará os objetos alinhados à esquerda a passarem para a próxima
linha.
A opção Right coloca o objeto na margem direita, quebrando automaticamente as linhas do
texto em volta dele à esquerda. Se o texto alinhado à direita preceder o objeto na linha, ele
geralmente forçará os objetos alinhados à direita a passarem para a próxima linha.

Editando a Imagem

No Dreamweaver 8 podemos inicializar um Editor de Imagem externo para fazer pequenos

ajustes na imagem selecionada. Quando instalado Fireworks e o editor de imagem com quem
ele vai trabalhar.

1- Botão Edit - Inicializa o Macromedia Fireworks.

2- Botão Optimize in Fireworks - Abre o visualizar de exportação do Fireworks.
3- Botão Crop - Aqui você pode recortar sua imagem diretamente no Dreamweaver 8.
4- Botão Image Resampling - Você pode através desse botão diminuir o tamanho de sua
imagem em pixel, melhorando seu carregamento.
5- Botão Brightness/Contrast - Com esse botão você controla o brilho e o contraste da
imagem, diretamente no Dreamweaver 8.
6- Botão Sharpen - você edita a nitidez da imagem , diretamente no Dreamweaver 8.

Background de Imagem
Podemos colocar uma imagem de fundo na página, através do menu Moodify> Page Proper-
ties (Ctrl+J) ou pelo Properties Inspector (Painel de Propriedades) botão Page Properties
quando não temos nada selecionado.

Propriedades de Página - Categoria Aparência

Em Page Properties> Category: Appearance> Background image informaremos a imagem a ser

18
 Dreamweaver

inserido no fundo da página e em Repeat, podemos controlar a imagem para no-repeat (sem
repetição), repeat (no caso da imagem ser menor que a tela a mesma se repetirá), repeat-x
(no caso da imagem ser menor que a tela a mesma se repetirá no eixo x) e repeat-y (no caso
da imagem ser menor que a tela a mesma se repetirá no eixo y).

Criação Rollover Image

Uma Rollover Image (imagem cambiável) é aquela que, quando exibida em um navegador, é
alterada quando o ponteiro do mouse é movido sobre a mesma.
Para criarmos uma Rollover Image poder ir ao menu Insert> Image Objetcs e escolher
Rollover Image ou através do Insert Bar> Common clicar sobre a seta de expansão do

botão Images e escolher Rollover Image.

Inserindo um Rollover de Imagem

Esse tipo de imagem consiste de fato em duas imagens: a Original image: (imagem primá-
ria exibida quando a página for carregada pela primeira vez) e a Rollover image: (imagem
secundária que será exibida quando o cursor for deslizado sobre a Original image).
As Rollover Image (imagens cambiáveis) deverão ter o mesmo tamanho; caso contrário,
o Dreamweaver redimensionará automaticamente a segunda imagem para que coincida com
as propriedades da primeira.
É impossível ver o efeito de uma Rollover Image na janela do documento de Dreamweaver.
Para ver o efeito precisamos pressionar F12 para visualizar a página em um navegador e,
depois, rolar o ponteiro do mouse sobre a imagem.

19
 Dreamweaver

Exercício 02

Nesta aula vamos testar diversos tipos de imagens, vamos inserir imagens “.gif”, criaremos
imagens rollover e texto flash

1. Defina o site no local indicado pelo seu professor.

2. Crie uma nova página e coloque uma imagem de fundo nela.
3. Insira gif’s no topo da página.
4. Salve o arquivo com o nome de “index.html” para podermos colocar os Flash Text.
5. Crie 2 Flash Text um deles entre os 2 gif’s do topo da página e outro logo abaixo.
6. Crie 3 Rollover images logo abaixo do flash text.
7. Salve o arquivo e pressione F12 para visualizar.
8. O Arquivo deve ter o Layout parecido com o abaixo:

Exemplo do site

20
 Dreamweaver

Aula 03-Trabalhando com Hiperlinks

Precisamos interligar nossos documentos, para isso o Dreamweaver oferece varias formas de
criar os Links (hipelinks) para documentos, imagens e arquivo de multimídia.
Temos os seguintes tipos de Links (hiperlinks):
Link relativo: quando vinculamos documentos que estão na mesma pasta de trabalho.
Link absoluto: quando vinculamos a uma URL externa, informando protocolo, nome de ser-
vidor com o caminho e o nome do arquivo. Ex.: http://www.uol.com.br
Link de email: quando vinculamos um endereço de correio eletrônico para abrir o gerenciador
de email instalado na maquina do usuário. Ex. mailto://bolinhadeacucar@ig.com.br
Link interno: esse é do tipo âncora, aponta para dentro do mesmo documento. Ex. #ais
Pelo menu Modify> Properties page> Category:Links

Propriedades de Página - Categoria Link

Podemos alterar a fonte e tamanho padrão que será aplicado a todos os Links da página, e
as cores dos comportamentos dos Links; Link color: (quando for visto pela primeira vez no
Browser), Rollover Links: (quando o ponteiro do mouse sobre), Visited Links: (quando o
Link já tiver sido visitado), Active Links: (No momento do click do mouse).
Undeline style: Se o link terá ou não sublinhado.

Inserindo link Relativo e Absoluto

Temos que primeiro selecionar o que receberá o comportamento de link, um texto ou uma
imagem. Depois no Properties Inspector do objeto selecionado, no campo Link clique no ícone
correspondente à pasta para procurar o arquivo que deseja abrir, ou digite o caminho e nome
(Link relativo).
Se for uma página da internet, no campo Link digite o endereço com o protocolo. Ex.: http://
www.aisinformatica.com.br. (Link absoluto).

Painel de Propriedades de texto

21
 Dreamweaver

Painel de Propriedades de imagem

Criação de um link de correio eletrônico

Um link de correio eletrônico abrirá uma nova janela de mensagem (utilizando o programa
de correio eletrônico associado ao navegador do usuário) sempre que for clicado. Na janela
de mensagem eletrônica, o campo Para: será atualizado automaticamente com o endereço
especificado no link de correio eletrônico.

Podemos inserir um Link para Email através do Insert Bar> Common> Email Link

Caixa de diálogo de Link de Email

Na janela Email Link, em; Text: coloca-se o texto que aparecerá na página como link;
E-mail: o e-mail que aparecerá no campo Para: de seu programa de correio eletrônico quando
clicarmos sobre o texto inserido no campo Text.

Link Interno – Anchor (Âncora)

Existe outro tipo de link, os links internos, chamados Anchor (Âncora), estes links são utiliza-
dos para ir para determinada parte da mesma página. Aplicam-se quando a página tem um
texto muito extenso.
Este link funciona assim, primeiro vamos até um ponto da nossa página e damos a ele um
nome. Depois criamos um Link com o nome dado ao determinado ponto em nossa página.

Podemos inserir um nome em um ponto de nossa página através do Insert Bar> Com-
mon> Named Anchor (Nome da Âncora) ou através do menu Insert> Named Anchor
(Ctrl+Alt+A).

Caixa de diálogo Nome da Âncora

Na janela Named Anchor no campo Anchor name insira o nome da âncora. Os nomes de
âncoras só podem conter letras (de preferência tudo minúsculo) e números, não podem conter
espaços e nem começar com número.
Aparecerá o marcador da âncora. Caso o marcador da âncora não apareça, vá ao menu Edit>
Preferences> Category:Invisible Elements ative em Show a opção Named anchors.

22
 Dreamweaver

Agora que já temos um local em nossa página com um nome, vamos criar um Link interno.
Assim como os Links Relativos e Absolutos, basta selecionar o texto ou imagem que rece-
berá a ação de Link e no campo Link insira um sinal de sustenido (#) e o nome da âncora.
Ex.: caso o nome da ancora seja “imagem01”, digite “#imagem01”.
Podemos também chamar uma âncora de um outro arquivo no campo Link desta forma pa-
gina.html#nome_da_anchor:
pagina.html – é a página onde está a Anchor (Âncora) desejada;
#nome_da_anchor – nome da Anchor (Âncora) desejada.
Uma outra forma de criar Links Relativos e Links Internos, e através do ícone de mira ao
lado do campo de Link, no Properties Inspector (Painel de Propriedades). Após sele-
cionado o texto ou imagem que receberá a ação de Link (no caso de ser um Link Interno),
clique na mira e arraste até sobre o marcador da âncora visível na página atual ou na página
desejada (caso a página esteja visível) e solte. Ou (no caso de ser um Link Relativo) arraste
até sobre o arquivo desejado na área do File Painel (Painel de Arquivo) e solte.
Ainda podemos controlar como serão abertas as páginas chamadas pelos Links Relativos,
Absolutos e Internos;
Blank: faz abrir o link em uma nova janela em branco no navegador.
Top: faz o link substituir o conteúdo da janela atual.
Parent: se você estiver utilizando molduras aninhadas, faz o link abrir na moldura-pai.
Self: faz o link abrir na mesma moldura que o link.

Image Map (Mapa de Imagens)

Um Image Map (Mapa de Imagens) é uma imagem que foi dividida em regiões, ou pontos
ativos; quando um ponto ativo for clicado, ocorrerá uma ação (um novo arquivo será aberto,
por exemplo). Utilize o Properties inspector (Painel de propriedades) da imagem para criar e
editar graficamente os Image Map (Mapa de Imagens).

Para criar um Image Map

1. Na Document windows (janela do documento), selecione a imagem;

2.Clique na seta de expansão, no canto inferior direito do Properties inspector (Painel de pro-
priedades), para examinar todas as propriedades;
3. No campo Map Name (Nome do Mapa), digite um nome para o Image Map (Mapa de Ima-
gens). Caso sejam utilizados vários mapas de imagens no mesmo documento, verifique se
cada mapa tem um nome diferente. Os Map Name (Nomes dos Mapas) só podem conter letras
(de preferência tudo minúsculo) e números, não podem conter espaços e nem começar com
número.

Painel de Propriedades de imagem

4. Para definir as áreas do mapa de imagens, siga um dos procedimentos abaixo:

Selecione a Oval Hotspot Tool (Ferramenta Ponto ativo circular) e arraste o cursor sobre
a imagem para criar um ponto ativo circular.
Selecione a Rectangular Hotspot Tool (Ferramenta Ponto ativo retangular) e arraste o

23
 Dreamweaver

cursor sobre a imagem para criar um ponto ativo retangular.

Selecione a Polygon Hotspot Tool (Ferramenta Ponto ativo poligonal) e defina um ponto
ativo com forma irregular, clicando uma vez em cada canto. Clique na Pointer Hotspot Tool
(ferramenta de seta) para fechar o formato.
5. Após a criação do ponto ativo, será exibido respectivo Properties inspector (Painel de
propriedades). Para cada ponto ativo preencha o campo Link.

Painel de Propriedades de Mapa de imagem

Caso não apareça a área mapeada, vá ao menu View> Visual Aids> Image Maps.

24
 Dreamweaver

Exercício 03

Vamos criar um site completo com imagens, links e imagens mapeadas..

1. Defina o site no local indicado pelo professor
2. Crie um arquivo e modifique a página para ficar com a aparência do modelo,mude a cor do
plano de fundo,insira imagens e crie 4 textos: “Home”, “Músicas”, “Mapa” e “contatos”.
3. Salve com o nome de “index.html”
4. Crie os outros arquivos de acordo com os modelos fornecidos :
5. “musicas.html” : importe os textos e faça as Âncoras
6. “mapa.html”: insira a imagem e mapeie a imagem criando 3 links diferentes
7. “contato.html”: crie um link para correio eletrônico
8. Ao terminar volte para a página “index.html” e crie os links para as páginas nos textos
criados anteriormente
9. Salve os arquivos e pressione F12 para visualizá-los no navegador
10. Teste os links e chame seu professor

index.html mapa.html

contato.html musicas.html

25
 Dreamweaver

Aula 04-Elementos de design

As tabelas são ferramentas poderosas para a apresentação de dados tabulares e para a definição
do layout de textos e gráficos em uma página HTML. A maioria dos designers utiliza tabelas
para definir o layout de páginas da Web. O Dreamweaver fornece dois modos de visualização
e manipulação de tabelas: Standard (Visualização padrão), na qual as tabelas são apre-
sentadas como grades de linhas e colunas, e Layout (Visualização de layout), que permite
desenhar, redimensionar e mover as caixas na página para definir a estrutura da página.

Standard – Modo Visualização Padrão

O modo padrão é o modo mais usado para inserir dados tabulares (divididos em colunas e
linhas) em páginas da Web. Criar tabelas no modo padrão do Dreamweaver é semelhante a
criar tabelas em outros aplicativos, como o Microsoft Word.

Inserir uma tabela

1. Certifique-se de estar na Visualização de Padrão, através do Insert bar> Layout > Stan-
dard.

2. Clique sobre ícone Table . Ou pelo menu Insert> Table (Ctrl+Alt+T)

Painel de Propriedades da Tabela

Na janela Table podemos informar os parâmetros da tabela que será criada:

Rows (Linhas): determina o número de linhas que terá a tabela.
Columns (Colunas): determina o número de colunas que terá a tabela.
Table width (Largura da Tabela): especifica a largura da tabela em pixels, ou em porcen-
tagem do tamanho da janela do Browser.
Border thickness (Espessura da Borda): especifica a largura em pixels da borda da ta-
bela, se você não informar nenhum tamanho alguns Browser vão entender como se tivesse

26
 Dreamweaver

informado 1. Caso você informe 0 e os limites das células não aparecer, vá ao menu View>

Visual Aids> Table Borders. Ou através do ícone Visual Aids no Document Toolbar,
ativando a opção Table Borders.

Cell padding (Espaçamento dentro da célula): determina o espaço em pixels entre a borda
das células e o conteúdo.

Cell spacing (Espaçamento entre as células): determina o espaço em pixels entre as

células da tabela.

Verifique se a opção no menu View> Visual Aids> Table Widths, está ativa, se não estiver
ative, pois essa opção vai permitir visualizar o tamanho da tabela e das células. Ou através

do ícone Visual Aids no Document Toolbar, ativando a opção Table Widths.

Selecionando linhas e colunas

Você pode selecionar individualmente linha e coluna ou múltiplas linhas ou colunas.

Posicione o Ponteiro no lado esquerdo da tabela na altura linha a ser selecionada e click para
selecionar toda a linha. Se mantiver o mouse pressionado e arrastar poderá selecionar várias
linhas.

Selecionando linhas e colunas

Clicando na Área sobre a tabela de podemos ativar o menu que permiti, Select Column (Sele-
cionar a Coluna); Clear Column Width (Limpar Largura da Coluna); Insert Column Left (Inseri
uma coluna a esquerda); Insert Column Right (Inseri uma coluna a direita).

Quando movimentamos os delimitadores das células segundo a tecla Shift todas as células
se movem.

Definindo as propriedades da tabela

Quando uma tabela é selecionada, o Properties Inspector (Painel de propriedades) per-
mite exibir e alterar propriedades da tabela.

Se o Properties Inspector (Painel de propriedades) não estiver expandido, clique na seta

de expansão, no canto inferior direito, para ver todas as propriedades.

27
 Dreamweaver

Se uma célula for selecionada o Properties Inspector (Painel de propriedades) permite exibir

e alterar propriedades da célula.

Classificando uma tabela

Você pode classificar as linhas de uma tabela baseada no conteúdo uma única coluna, ou pode

executar uma classificação mais complicada baseada nos conteúdos de duas colunas.

1- Selecione a tabela

2- Menu Commands> Sort Table

Classificando uma tabela

Sort by (Classificar por): determina qual coluna será usada para classificar a tabela.

Order (Ordem): classificar em ordem Alphabetically (Alfabética) ou Numerically (Numérica).

Na ordem Ascending (Ascendente) Descending (Descendente).

Then by (em Seguida por): determina qual coluna será usada para classificar a tabela em

caso de empate.

Order (Ordem): classificar em ordem Alphabetically (Alfabética) ou Numerically (Numérica).

Na ordem Ascending (Ascendente) Descending (Descendente).

28
 Dreamweaver

Auto Formatação
Podemos fazer uma formação rápida usando alguns modelos de tabelas prontos no Dreamwe-
aver. No menu Commands> Format Table.

Auto formação da Tabela

Layout - Visualização de layout

Na visualização de Layout, é possível definir o layout de uma página antes de adicionar o con-
teúdo. Por exemplo: é possível desenhar uma célula na parte superior da página para conter
um gráfico de cabeçalho, outra célula no lado esquerdo da página para conter um menu de
links e uma terceira célula, à direita, para o conteúdo.

Desenhando uma tabela de layout:

1. Certifique-se de estar na visualização de layout, através do Insert bar> Layout> Layout.

Clique no botão Layout Table (Desenhar a tabela de layout).

2. O ponteiro do mouse se transforma em um sinal

de adição (+).
3. Posicionar o ponteiro do mouse na página e ar-
raste-o para criar a tabela de layout.
Se não houver nenhum outro conteúdo na página,
a nova tabela será posicionada automaticamente no
canto superior esquerdo desta.
A tabela é exibida com um contorno verde na pági-
na. Uma guia denominada Layout Table (Tabela de
layout) é exibida na parte superior de cada tabela
desenhada para ajudar a selecioná-la e distingui-la
de outros elementos da página. É possível definir
um tamanho específico para a tabela clicando na
borda da tabela e arrastando suas alças de redi-
mensionamento.

29
 Dreamweaver

Desenhando uma célula de layout:

1. Certifique-se de estar na visualização de layout, através do Insert bar> Layout> Layout.

Clique no botão Draw Layout Cell (Desenhar a célula de layout).

2. O ponteiro do mouse se transforma em um sinal de adição (+).

3. Posicione o ponteiro onde deseja iniciar a célula na tabela e arraste-o para criar a célula
de layout.
A célula será exibida contornada em azul na página.

30
 Dreamweaver

Exercício 04

1. Defina o site no local indicado pelo professor

2. Crie uma nova página e salve-a com o nome de “index.html”
3. Crie uma tabela e ajuste-a para ficar como no layout abaixo
4. Insira as imagens e os textos para ficar como no modelo
5. Salve o arquivo e pressione F12 para visualizar.

modelo

31
 Dreamweaver

Aula 05-CSS e Extensions Manager

A folhas de estilo ou Cascading Style Sheets (ou ainda definições de estilos em cascata), ge-
ralmente denominadas por CSS são ações inseridas no código da página que vão desencadear
um determinado acontecimento. As CSS foram criadas e tornaram-se padrão em 1996 pela
World Wide Web Consortium (W3C).
Um estilo é um grupo de atributos de formatação que controla a aparência de uma faixa de
texto de um único documento. A folha de estilos CSS pode ser utilizada para controlar vários
documentos simultaneamente e inclui todos os estilos de um documento.
A vantagem de utilizar as folhas de estilos CSS é que, além de estarem vinculadas a vários
documentos, quando um estilo CSS for atualizado ou alterado, a formatação de todos os
documentos que utilizam essa folha de estilos específica será também automaticamente atu-
alizada.
Os estilos CSS são identificados pelo nome ou pelo rótulo HTML, o que permite alterar o atri-
buto de um estilo e exibir as modificações no texto inteiro ao qual esse estilo foi aplicado. Os
estilos CSS nos documentos HTML podem controlar a maioria dos atributos tradicionais de
formatação de texto, como fonte, tamanho e alinhamento. Eles podem especificar também
atributos exclusivos de HTML, como posicionamento, efeitos especiais e imagens cambiáveis
pelo mouse.
Os exemplo mais comum de CSS são a alteração do formato do cursor, tirar o sublinhado dos
links, criar uma mensagem especifica na barra de status do browser, eliminar as barras de
rodagem (scrool bar), etc, etc.
Nunca houve tanta interação com as folhas de estilo como existe nesta versão do Dreamweaver
8. Ao abrir as Properties Page (propriedades de página), já encontram opções que criam
os CSS padrões do site com fonte, tamanho, cor, tipo, margem de página etc... Na edição da
página as modificações feitas por você vão sendo transformadas em
novos estilos... por exemplo: Se você coloca uma cor e negrito numa
parte do texto, um novo CSS é criado na hora, sempre seguindo a
seguinte nomenclatura: style1, style2 ...
No Properties Inspector (Painel de Propriedades), sempre que
você selecionar um objeto, a caixa Style vai aparecer, e nela você terá
todos os estilos criados.

Criando um novo CSS Style

Se o painel CSS Styles não estiver aparecendo vá ao

menu Window > CSS Style.
Com a opção Current (atual) podemos ver todos os
parâmetros do estilo em uso. Selecionando a opção
All (todos) podemos ver uma lista de todos os estilos
da página.Vamos clicar no segundo ícone que aparece

na parte inferior direito do painel CSS Style, New

CSS Style.

32
 Dreamweaver

Caixa de diálogo Criando Estilo CSS

Name: especifica o nome para o estilo. Observe que o estilo criado terá o nome unnamed.
Você Pode inserir qualquer nome, desde que mantenha o ponto. Exemplo: “.titulo1”.
Selector Type: especifica o tipo de estilo a ser criado:
Class (can apply to any tag): cria uma class, que pode ser aplicado a qualquer tag.
Tag (redefines the look of a specific tag): cria um novo visual para as tags do HTML.
Advanced (Ids, contextual selectors, etc): para a criação de style de link, os seletores
link, hover, visited, etc.
Define In: especifica se o estilo será vinculado ou não. Se escolher o item New Style Sheet
File, o estilo será vinculado, criando um arquivo externo para armazenar o CSS (*.CSS). Se es-
colher This Document Only, não será vinculado, gerando to o código CSS junto do HTML.
Vamos escolher Class (can apply to any tag) e em Define In: This Document Only, de
um nome de “.titulo1” e ok!.

Caixa de diálogo propriedades de Estilo CSS

Após a sua confirmação, observe que no painel CSS Styles já consta com o nosso primeiro
CSS Style. Como foi mencionando, no Properties Inspector (Painel de Propriedades) também
consta o nosso CSS Style, de uma forma mais visual, facilitando assim a escolha dos estilos.
1 - Attach Style Sheet - Anexando um arquivo de CSS Style externo ao nosso documento
- No painel lateral CSS Style, click no primeiro ícone Attach Style Sheet.
2 - Edit Style - Alterando um CSS Style criado - Selecione o estilo que deseja alterar e no

33
 Dreamweaver

painel lateral Design, vamos até o terceiro ícone o Edit Style.

Com esse procedimento podemos no campo File/URL informar o arquivo CCS Style que será
Import (importado) ou Link (anexado) ao documento em uso.

Podemos clicar sobre sample style sheets (exemplos de folhas de estilos). E escolhe um
conjunto de exemplo de folha de styles.

Exemplos de Folhas de Estilo

Extensions Dreamweaver
As Extensions (extensões) são novos recursos que podem ser facilmente adicionados ao Dre-
amweaver. É possível utilizar muitos tipos de extensions; por exemplo: há extensions que
permitem reformatar tabelas, efetuar conexões a bancos de dados auxiliares ou que podem
ajudá-lo a escrever scripts para navegadores.
O Extension Manager é um aplicativo independente que permite instalar e gerenciar as exten-
sions nos aplicativos da Macromedia.
Inicie o Extension Manager no Dreamweaver escolhendo no menu Commands> Manager
Extensions.

34
 Dreamweaver

Gerenciador de Extensões

Install New Extensions – através deste botão podemos informar qual extensão será
instalada. Outra forma de instalar uma Extensions e ir até a pasta onde está salva a Exten-
sions e aplicar um clique duplo sobre ela. A janela Macromedia Extension Manager se abrirá
solicitando a confirmação da instalação, uma vez confirmado a Extensions e instalada.
Depois de instalada a extension podemos pelo Extension Manager, entender para que serve,
e como fazer para acionar a extension instalada.

35
 Dreamweaver

Exercício 05

1. Defina o site no local indicado pelo seu professor

2. Crie um novo arquivo e crie um estilo css para criar um fundo fixo para usar de back-
ground
3. Crie um estilo CSS para link e modifique as propriedades do link , ele não deve ficar su-
blinhado e deve mudar de cor quando passarmos o mouse sobre ele
4. Salve o Arquivo e visualize

Exemplo de site com fundo fixo e estilos css

36
 Dreamweaver

Aula 06-Trab:Tabela/Imagem/Links
Usando tabela alinhe os elementos fornecido pelo ser professor sonforme segue abaixo:

Text Flash

Texto

Rollover Rollover Rollover Rollover

Image Image Image Image

Rollover Rollover Rollover Rollover

Image Image Image Image

As imagens que estam com o comportamento de Rollover deveram apontar para partes do
arquivo que estão na mesma página através de âncora.

Text Flash

Título

Rollover
Image
Texto

37
 Dreamweaver

Aula 07-Library e Template

Ao desenvolver sites da Web, você pode acumular um número cada vez maior de recursos. Em
alguns casos, é possível utilizar as mesmas recursos para vários sites ou definir um conjunto
de recursos preferidos que podem ser utilizadas para todos os seus sites. Com o Macromedia
Dreamweaver 8, é possível utilizar o Assets Panel (Painel de Recursos) para ajudá-lo a
gerenciar os recrusos de seu site. O Assets Panel (Painel de Recursos) permite localizar
facilmente e visualizar diversos tipos de recursos armazenados em seu site, como imagens,
filmes, cores, scripts e links. Você pode arrastar facilmente um recurso do Assets Panel
(Painel de Recursos) até seu documento para inseri-lo em uma página.
O Assets Panel (Painel de Recursos) também fornece acesso a dois tipos especiais de re-
cursos: Librarys (Bibliotecas) e Templates (Modelos). Os itens da Library (biblioteca) e
Template (modelo) são recursos vinculados. Ao editar de um item de Library (biblioteca) ou
Template (modelo) atualiza todos os documentos nos quais os recursos foram aplicados.
Utilize os itens de Library (biblioteca) e Template (modelo) quando quiser reutilizar con-
teúdo ou elementos de projeto específicos em um site ou em vários sites.
Os itens de Library (biblioteca) são reservados para uso com elementos de projeto indivi-
duais, como informações de direito autorais de um site ou logotipo.
Os modelos permitem controlar uma área de projeto maior. O autor de modelo desenvolve
uma página e define quais áreas da página podem aceitar edições de projeto ou conteúdo.

Library (biblioteca)
Uma Library (biblioteca) é um arquivo especial do Dreamweaver que contém uma coleção
recursos individuais ou cópias de recursos criados por você para serem inseridas nas páginas da
Web. Os itens de Library (biblioteca) são elementos de página como imagens, tabelas, sons
e filmes Flash, que podem ser reutilizados em diversas páginas. É possível atualizar todas as
páginas que utilizam um item de biblioteca, sempre que desejar alterar o conteúdo do item.

Para criar um item de biblioteca:

1- Selecione um elemento que pretende inserir na biblioteca.

2- Menu Windows>Assets (Recursos) (F11) no painel de Assets selecione o ultimo botão

da lista Library.

Assets Panel - Painel de Recursos

38
 Dreamweaver

Caixa de diálogo Relátorio de Atualizações da Library

Para desvincular um item inserido no documento do item da Library, basta ir no Properties

inspector (Painel de Propriedades) e clicar sobre o botão (destacar do

original). O objeto deixa de fazer parte dos itens associados a Library, não sendo mais atu-
alizado em conjunto com o Library.

Excluindo um item da Library

1- Selecione o item da Library que pretende excluir.

2- Na parte inferior do painel Assets (recursos), clique no botão Delete.

Tenha cuidado ao excluir um item de biblioteca, pois não será possível utilizar o comando
Undo (Ctrl+Z) para recuperá-lo.
A exclusão de um item remove-o da Library, mas não altera o conteúdo de qualquer um dos
documentos que utilizam o item.

Recriando um item de Library

Quando excluímos um item da Library, nenhum documento que utilize o item será alterado,
pórem todos os itens continuam com comportamentos de Library. Para reverter isto devemos
selecionar o item, ir ao Properties inspector (Painel de Propriedades) e clicar sobre o botão

(destacar do original).
Se a exclusão do item da Library foi feita por engano podemos utilizar um dos itens do docu-
mento que ainda tem o comportamento de Library para recriá-lo.
1- Selecione o item em um documento.
2- No Properties inspector (Painel de Propriedades) e clicar sobre o Recreate.

Templates (Modelos)
Um Template (modelo) de Dreamweaver é um tipo especial de documento utilizado para criar
um layout de página “bloqueado”. O autor do template desenvolve o layout da página e cria
regiões no template que são editáveis em documentos baseados em um template. Em um
template, o designer controla quais elementos um usuário de template, como programadores,
artistas gráficos ou outros desenvolvedores, podem editar.

39
 Dreamweaver

Uma das principais e mais poderosas características dos templates é sua capacidade de atu-
alizar diversas páginas simultaneamente. Um documento criado a partir de um template per-
manece conectado a ele (a menos que o documento seja posteriormente desanexado). Dessa
forma, é possível modificar um template e atualizar imediatamente todos os documentos nele
baseados.

Criando um template
O procedimento para criar um template é idêntico ao utilizado para criar páginas HTML co-
muns:
1- Clique no menu File> New

Criando um arquivo Template

Na janela New Document selecione a guia General e escolha em Category a opção Tem-
plate Page. Dentro de Template Page: selecione a opção HTML Template e confirme a
criação do Template através do botão Create.

Editable Region
Após criar um novo template será necessário criar uma editable region (região editável).
Uma editable region é uma seção que pode ser modificada pelo usuário do template. O autor
do template pode definir qualquer área de um template como editável.

Criando Editable Region

1- Coloque o ponto de inserção onde deseja inserir uma editable region (região editável).
2- No menu Insert> Templates Objects > Editable Region (Ctrl+Alt+V) ou através do
Insert Bar> Common clique sobre a seta de expansão do botão Template e escolha
Editable Region.

Nomeando uma região editavél

40
 Dreamweaver

3.Informe um nome único para a região.e clique em OK.

A editable region (região editável) é inserida em um conjunto retangular re-

alçado no template com uma cor de destaque.

Salvando um Template

Se o arquivo tem uma região editável ao clicar no menu File>Save, a janela de Save as Tem-
plate abrirá.

Caixa de diálogo Salvar como Modelo

Em Site: a qual Site pertencerá o Template; Existing templates: lista dos templates existen-
tes; Description: descrição do template; Save as: com que nome será salvo o template.
Também é possível transformar um arquivo já existente em um template. Para isso basta clicar
no menu File>Save as Template, ou através do Insert Bar> Common clique sobre a seta

de expansão do botão Template e escolha Make Template

E recomendável que criemos uma Editable Region (região editável) antes de salvar, senão
o Dreamweaver apresentará uma mensagem dizendo que o Template que esta sendo salvo
não contém nenhuma região editável.
Um arquivo salvo com template recebe a extensão .dwt.

Novo a partir de um template

Uma vez definido o design do template, é possível criar novos documentos com a sua aparência
e especificar conteúdos diferentes nas editable region (regiãos editáveis).
1. Clique no menu File> New
Na janela New Document selecione a guia Templates e escolha em Template: o site que
tem o template desejado. Dentro do site selecionado, escolha o template que deseja utilizar
e confirme a criação do template através do botão Create.

Modificando o modelo

Modificar um template é tão simples como modificar uma página qualquer.

1. Clique no menu File> Open, para localizar o arquivo de template. Normalmente os tem-
plates estão na pasta Templates, dentro da raiz do site;
2. Modifique o templates da forma que preferir;

41
 Dreamweaver

3. Clique em File> Salve para armazenar as alterações. O Dreamweaver exibirá uma caixa
de diálogo alertando que o template foi alterado e que as páginas nele baseadas devem ser
atualizadas.
Basta confirmar para que o programa modifique todas as páginas baseadas no template.

42
 Dreamweaver

Exercício 07

1. Defina o site no local indicado pelo professor

2. Crie uma página e salve com o nome de “index.html” e deixe-a parecida com o exemplo
3. Crie uma página para servir de base para as outras e deixe-a como o exemplo e salve-a
como Template
4. Peça um novo arquivo baseado no modelo criado e crie as páginas indicadas pelo seu
professor
5. Repita a etapa 4 até completar o site
6. Volte para a “index.html” e faça os links, salve todos os arquivos e pressione F12 para
visuzlizar o site

Modelo da Index.html

Modelo do Template e a página finalizada

43
 Dreamweaver

Aula 08-Trab:Modelo
Utilizando o Mapa do Brasil fornecido pelo seu professor, faça mapa de imagem em todos os
estados. Ao clicar sobre a área mapeada ira para um outro local do mesmo documento com
as informações sobre o Estado. Como Pontos turísticos, comida típicas, etc.

44
 Dreamweaver

Aula 09-Photo Album - Flash Button

O Fireworks 8 e o Flash 8 são ferramentas de desenvolvimento da Web poderosas e projeta-
das para criar imagens gráficas e filmes SWF visíveis em páginas da Web. O Dreamweaver
8 é rigorosamente integrado a essas ferramentas para permitir a simplificação do fluxo de
trabalho de criação para a Web.
Nesta aula faremos o Dreamweaver interagir com o Fireworks criando um Web Photo Álbum,
trabalhar com filmes Flash criando Flash Button e ainda usando a extension Banner Image
Builder criar efeitos de transição em imagens.

Create Web Photo Album

O comando Create Web Photo Album (Criar álbum de fotografias na Web) do Dreamwe-
aver permite a geração automática de um site na Web que sirva de vitrine para um álbum de
imagens de uma determinada pasta. Este comando utiliza o JavaScript para chamar o Fireworks,
que cria uma miniatura e uma imagem maior para cada imagem na pasta. O Dreamweaver cria
uma página da Web com todas as miniaturas, bem como os links para as imagens maiores.
Para utilizar o comando Create Web Photo Album (Criar álbum de fotografias na Web),
é preciso ter o Dreamweaver e o Fireworks 4 ou mais avançado instalados no sistema.
Antes de começar, coloque todas as imagens do álbum de fotografias em uma única pasta (a
pasta não precisa estar em um site). Além disso, certifique-se de que os nomes de arquivos
das imagens terminam em extensões reconhecidas pelo comando Create Web Photo Album
(Criar álbum de fotografias na Web) (.gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff). As imagens
com extensões de arquivo não reconhecidas não são incluídas no álbum de fotografias.
Clique no menu Commands>Create Web Photo Album

Caixa de diálogo Criando álbum de foto para Web

Photo album title (Título do álbum de fotografias)- digite um título. O título será exibido
em um retângulo cinza na parte superior da página que contém as miniaturas. Se desejar, é
possível digitar até duas linhas de texto adicional para que sejam exibidas diretamente abaixo
do título, nos campos Subheading info (Informações do sub-cabeçalho) e Other info
(Outras informações).
Source images folder: pasta da origem das imagens.
Destination folder: pasta de destino.
Thumbnail size: tamanho da imagem miniatura.
Show filenames: mostrar os nome dos arquivo abaixo da figura miniatura.

45
 Dreamweaver

Columns: número de colunas.

Thumbnail format: formato das imagens miniaturas.
Photo format: formato da fotografia.
Scale: Ao definir como 100%, o sistema cria imagens grandes com o mesmo tamanho das
originais.
Create navigation page for each photo: Cria uma página de navegação para cada fotogra-
fia, contendo os links de navegação.
Clique em OK para criar o código HTML e os arquivos de imagem do álbum de fotografias na
Web.
O Fireworks é acionado (se ainda não estiver em execução) e cria as miniaturas e as imagens
grandes. Esse procedimento pode durar vários minutos, se o usuário tiver incluído um grande
número de arquivos de imagem. Quando o processamento é concluído, o Dreamweaver fica
ativo novamente e cria a página que contém as miniaturas. As miniaturas são mostradas em
ordem alfabética por nome de arquivo.

Flash Button
O Dreamweaver disponibiliza alguns Flash button (botões Flash) que podem ser personalizados
pelo usuário.

Para inserir um objeto de botão Flash

1. Na janela do documento, coloque o ponto de inserção onde deseja inserir o Flash Button
(botão Flash);
2. No menu Insert> Media > Flash Button ou através do Insert Bar> Common clique

sobre a seta de expansão do botão Media e escolha Flash Button.

Caixa de diálogo Inserir Botão Flash

Na lista Sample (Estilos), selecionar o estilo de botão que deseja.
No campo Button text (Texto do botão) (opcional), digite o texto que deseja que seja
exibido.

46
 Dreamweaver

No menu pop-up Font (Fonte), selecione a fonte que deseja utilizar.

No campo Size (Tamanho), digite um valor numérico para o tamanho da fonte.
No campo Link (opcional), digite um link relativo a documento ou absoluto para o botão.
No campo Target (destino) (opcional), especificar a localização na qual o documento com link
será aberto. É possível selecionar uma moldura ou opção de janela no menu pop-up. Nomes
de molduras são listados somente se o objeto Flash estiver sendo editado enquanto estiver
em um conjunto de molduras.
No campo Bg color (cor de fundo) (opcional), defina a cor de fundo para o filme Flash. Utilize
o seletor de cores ou digitar um valor hexadecimal da Web (como, por exemplo: #FFFFFF).
No campo Save as (Salvar como) digite um nome de arquivo para salvar o novo arquivo
SWF.
3. Clique em Apply (Aplicar) ou OK para inserir o botão Flash na janela do documento.

Modificando um Flash Button

Para modificar as propriedades de um Flash Button (botão Flash) basta aplicar um clique
duplo sobre ele ou clicar sobre o botão Edit (Editar) do Properties inspector (Painel de
Propriedades).

47
 Dreamweaver

Exercício 09

1. Defina o site no local indicado pelo professor

2. Crie uma pasta na área de trabalho e coloque as imagens indicas pelo seu professor nela
3. Crie o Web Photo Album
4. Abra todas as páginas no Dreamweaver e substitua os links por botões Flash
5. Salve o arquivo e chame seu professor

48
 Dreamweaver

Aula 10-Trab:Albuns de Fotos

Crie um tabela contendo os elementos fornecidos pelo seu professora alinhamantos como
segue:

Título

Imagem Imagem Imagem

Resumo Resumo Resumo

do Álbum do Álbum do Álbum

FB FB FB

Ao Clicar sobre o (FB) Flash Button-Botão Flash iremos para a página do nosso
álbum de fotos. Não esquecer de colocar um botão voltar em nosso álbum de fotos
para a página principal.

Solicite e seu professor a nova versão do Web Photo Album2.1

49
 Dreamweaver

Aula 11-Frames e Navigator Bar

Um Frame (moldura) é uma região de uma janela do navegador que pode exibir um docu-
mento HTML independentemente do que está sendo exibido no restante da janela.
Um Frameset (conjunto de molduras) é um arquivo HTML que define o layout e as pro-
priedades de um conjunto de frames, incluindo o número de frames, seu tamanho e posicio-
namento, bem como a URL da página a ser inicialmente exibida em cada frame.

Criar um Frameset
Para criar um conjunto de molduras clique no menu File> New

Criando um Arquivo Frameset

Na janela New Document selecione a guia General e escolha em Category a opção Frame-
sets. Dentro de Framesets: selecione o modelo desejado e confirme a criação do framesets
através do botão Create. Ou através do Insert Bar> Layout clique sobre a seta de expansão
do botão Frames e escolha o modelo desejado.

Excluindo frames

Para excluir um frame, arraste a sua borda para fora da página ou até a borda do frame-
mãe. Se houver conteúdo não salvo em um documento de um frame que estiver sendo re-
movida, o Dreamweaver solicitará que o documento seja salvo.

Usando o painel Frames

O painel Frames fornece uma representação visual dos Frames e Framesets. Através dele
podemos selecionar os Frames e os Framesets, e modificá-los através do Properties inspector
(Painel de Propriedades).

50
 Dreamweaver

Exibindo painel Frames:

Clique no menu Windows> Frames (Shift+F2)

Selecionado uma frame:

Clique no frame desejado dentro do painel de Frames.

Selecioando um Frameset:
Clique na borda que circunda todos os frames no painel Frames.

Propriedades do Frame

Após selecionar um Frame ou Frameset no painel Frames podemos alterar diversas proprie-
dades através do Properties inspector (Painel de Propriedades).
Lembre-se de quem cada frame é um arquivo, o que significa poder alterar propriedades como
cor de fundo da página, cor do texto e dos links, etc.

Propriedades do Frame selecionado

Src: especifica o documento de origem a ser exibido no frame. Clique no ícone de pasta para
procurar e selecionar um arquivo
Scroll: especifica se as barras de rolagem serão exibidas no frame.
No resize: evita que os usuários arrastem as bordas do frame para redimensioná-lo em um
navegador
Borders: mostra ou oculta as bordas do frame atual quando exibida em um navegador.
Border: color define uma cor para todas as bordas do frame.
Margin width: define a largura em pixels das margens esquerda e direita (o espaço entre as
bordas da moldura e o seu conteúdo).
Margin height: define a altura em pixels das margens superior e inferior (o espaço entre as
bordas da moldura e o seu conteúdo).

Propriedades do Frameset

Propriedades do Frameset

Borders: mostra ou oculta as bordas do frame atual quando exibida em um navegador.

Border color: define uma cor para todas as bordas do frame.
Border width: especifica uma largura para todas as bordas no frameset.

51
 Dreamweaver

A opção Value digite uma altura para a row (linha) selecionada ou uma largura para a
column (coluna) selecionada.

Salvando o Frameset e os Frames

A melhor forma de não se perder ao salvar e começar pelo Frameset:

1- No painel de Frames selecione a borda que circunda todos os frames.
2- Clique no menu File> e escolha a opção Save Frameset.
3 - Após salvar o Frameset, salve todos os Frames.
Como cada frame é um arquivo HTML independente, você deverá salvar cada frame sepa-
radamente. Assim, por exemplo, se temos uma conjunto dividido em três frames teremos
três arquivos para salvar fora o Frameset que já salvamos.

Salvando os Frames

1- Clique dentro da área do documento que deseja salvar.

2- Clique no menu File> e escolha a opção Save Frame.
Faça isso para quantos frames existirem. Somente após ter salvo todos os frames e Frameset
e que podemos visualizar no Browser (navegador) (F12).

Navigator Bar
Uma Navigator Bar (Barra de Navegação) é composta por uma ou um conjunto de imagens,
que exibe as alterações com base nas ações de um usuário. As barras de navegação são, com
freqüência, um modo fácil de se mover entre as páginas e arquivos de um site.

Criando uma Navigator Bar

Para criarmos uma Navigator Bar (Barra de Navegação) temos que ter um conjunto de
imagens para exibir os estados de cada elemento de navegação.
Clique no menu Insert> Insert Objects> Navigator Bar, ou através do Insert Bar> Com-

mon clique sobre a seta de expansão do botão Image e escolha Navigation Bar.

Caixa de diálogo da Barra de Navegação

52
 Dreamweaver

Nav bar elements: elementos da barra de navegação.

Element name: nome do elemento a ser inserido
Up image (imagem ativa): imagem que aparece quando o usuário ainda não clicou ou in-
teragiu com o elemento. Clique em Browse para selecionar a imagem a ser inserida.
Over image (Imagem sobreposta): a imagem que aparecerá quando o cursor for movido
sobre uma imagem ativa. Clique em Browse para selecionar a imagem a ser inserida.
Down image (Imagem inativa): a imagem que aparece após o clique no elemento. Clique
em Browse para selecionar a imagem a ser inserida.
Over while down image (Imagem sobreposta enquanto inativa): a imagem que apa-
recerá quando o cursor for deslizado sobre a imagem inativa, após o clique do usuário. Clique
em Browse para selecionar a imagem a ser inserida.
Alternate text (texto Alternativo): digite um nome descritivo para o elemento que apare-
cerá no lugar da imagem para os navegadores somente de texto ou para os navegadores que
tiverem sido definidos para o download manual de imagens.
When clicked, go to URL (Quando clicado, vá para a URL): clique no botão Procurar para
selecionar um arquivo vinculado a ser aberto e, em seguida, no pop-up menu, escolha o local
de abertura do arquivo. Escolha uma dentre as seguintes opções:
Selecione Main window (Janela principal), para abrir o arquivo na mesma janela.
Selecione um frame (moldura) na qual o arquivo será aberto, se a navigator bar (barra de
navegação) estiver em um frameset.
Options: Preload images (Pré-carregar as imagens) para efetuar o download das imagens
quando a página for carregada. Se esta opção não estiver selecionada, pode haver uma de-
mora quando o usuário mover o cursor do mouse sobre os elementos da navigator bar (barra
de navegação).
Show “Do wn image” initially (Mostrar a “imagem inativa” inicialmente), para exibir o
elemento escolhido em seu estado inativo, quando a página for exibida. Por exemplo: quando
a home page for carregada, o elemento “Home” na barra de navegação deverá estar no estado
inativo. Quando esta opção for selecionada, aparecerá um asterisco após o elemento na lista
Elementos da navigator bar (barra de navegação).
Insert (Inserir): No menu pop-up Inserções, escolha se deseja inserir os elementos da barra
de navegação Vertically (Vertical) ou Horizontally (horizontalmente) no documento.
Use tables (usando tabela): Para inserir os elementos da barra de navegação dentro de
uma tabela, marque a caixa de seleção use tables (utilizar as tabelas).
Clique no botão com o sinal de adição (+) para adicionar outro elemento à barra de nave-
gação, em seguida, repita as etapas anteriores para definir o elemento.
Clique em OK ao terminar de adicionar e definir os elementos da navigator bar (barra de
navegação).
Não é necessário incluir imagens de barra de navegação para os quatro estados; por exemplo:
talvez sejam escolhidos apenas os estados Up image (imagem ativa) e Over image (iamgem
inativa).

53
 Dreamweaver

Exercício 11

1. Defina o site no local indicado pelo professor

2. Crie uma página com frames e Flash Buttom
3. Não se esqueça de aterar o destino do Flash buttom ara “MainFrame” para o link sempre
abrir na moldura central

index.html quem.html

contato.html links.html

54
 Dreamweaver

Aula 12-Trab: Frames

1. Crie um Fameset “Top and Nested Left Frames” com três parte superiror, lado esquerdo e
lado direito, conforme segue abaixo.
2. Na parte do menu crie uma barra de Navegação Vertical.
3. Crie uma tabela com imagens de acordo com o exemplo
4. Crie mais três páginas com assuntos variados e faça os links sempre abrirem na moldura
central

Título

NB
NB Image Image Image Image

NB
NB
Image Image Image Image

Image Image Image Image

55
 Dreamweaver

Aula 13-Formulário
Os formulários permitem interagir com os visitantes a um site da Web. Os formulários coletam
informações dos usuários e as enviam ao servidor para serem processadas. Os formulários
podem conter vários objetos que possibilitam esta interação.

Os objetos de formulário

No Dreamweaver, os tipos de entrada em formulários são denominados objetos de formulário.

Os objetos de formulários são inseridos através do menu Insert> Form ou acessando Insert
bar> Form.

Objeto de Formulário

Form (Formulário): insere um formulário no documento. Isso deve ser feito antes de
inserir qualquer campo. O formulário é uma espécie de recipiente que irá conter todos os
objetos.

Propriedades do Formulário

Com o formulário selecionado o Properties Inspector (Painel de propriedades) mostra

opções como Form name (nome do formulário); Action (Ação) – informa ao navegador
o que fazer com os dados do formulário; Method (método) – define como os dados do
formulário são manipulados:
GET- anexa conteúdos de formulário ao URL especificado no campo ação. Essas informações
são, portanto, visíveis na barra de endereço do navegador. O método GET não é um método
seguro de transferência de dados, por isso não deve ser usado para as informações sigilosas,
como os números de cartão de crédito. Este método tem um número limitado de informações
(8192 caracteres) que podem ser enviadas, não sendo assim indicada para formulário com
muitas informações.
POST – é capaz de enviar muito mais informações e é mais confiável e seguro. Ele é o méto-
do mais comum usado em scripts para enviar dados de formulário. O método POST usa uma
requisição HTTP para enviar o valor do formulário no corpo de uma mensagem.
Padrão – usa o método-padrão do Browser (navegador), que geralmente e GET.

Text Field (Campo de texto): insere um campo de texto em um formulário. Os campos

de texto aceitam qualquer tipo de entrada alfanumérica. O texto digitado pode ser exibido como
uma linha simples, linhas múltiplas, marcadores ou asteriscos (para proteção das senhas).

Propriedades do Campo de Texto

56
 Dreamweaver

O Properties Inspector (Painel de propriedades) exibe opções como: TextField (nome

do campo); Char width (largura do caractere)- tamanho da caixa; Max Chars (número
máximo de caracteres)- que a caixa poderá conter; Init val (valor inicial)- o texto que já
estará visível quando o usuário exibir o formulário; e Type (tipo de campo): (Single line:
linha simples, Multi line: múltiplas linhas ou Password: campo de senha).

Fieldset (Grupo de Campos): insere uma área para melhor organizar os campos. Esta
área receberá um nome informado no campo Legend. Tanto podemos inserir o Fieldset e
depois os campos, como podemos inserir os campos, selecionar todos os campos desejados
e inserir um Fieldset.

Caixa de diálogo Grupo de Campos

Checkbox (Caixa de Seleção): insere uma caixa de seleção em um formulário. As cai-

xas de seleção permitem múltiplas respostas em um único grupo de opções. O usuário poderá
selecionar quantas opções forem aplicáveis.

Propriedades da Caixa de Seleção

O Properties Inspector (Painel de propriedades) permite definir o Checkbox name (nome

da caixa de seleção); Checkbox value (valor da caixa de seleção)- valor a ser enviado
ao Servidor caso esta caixa de seleção seja selecionada; Initial state (estado inicial)- se-
lecionado ou não selecionado.

Radio button (Botão de opção): insere um botão de opção em um formulário. Os bo-

tões de opção representam opções exclusivas. A seleção de um botão em um grupo cancela
a escolha de todos os outros botões do mesmo. Por exemplo: o usuário pode selecionar Sim
ou Não.

Propriedades do Botão de Rádio

No Properties Inspector (Painel de propriedades) será possível definir o Checked value

(valor)- valor a ser enviado ao Servidor caso este botão de opção seja selecionado; Initial
state (estado inicial)- selecionado ou não selecionado.

57
 Dreamweaver

Radio Group (Grupo de botão de opção): insere um grupo de botões de rádio no formu-
lário.

Propriedades do Grupo de botão de opção

Na janela Radio Group podemos em Name (nome)- dar o nome ao grupo de botão de op-
ção; Radio buttons (botões de rádio)- cria os botões de rádio do grupo, em Label: inserir o
nome que deverá aparecer e em Value: o valor a ser enviado para o Servidor da Web. Para
inserir mais Radio buttons basta clicar no sinal de “+”, e para apagar e só clicar no sinal de “–”.
Layout using (layout utilizado): de que forma será feita a separação das linhas do grupo.
Line Breaks (quebra de linhas) ou Table (tabela): dentro de uma tabela.

List/Menu (Lista/menus): permite criar opções do usuário em uma lista. A opção Lista
exibirá os valores de opção em uma lista de rolagem e permitirá aos usuários selecionar diver-
sas opções na lista. A opção Menu exibe os valores de opção em um menu pop-up e permite
aos usuários selecionar apenas uma única opção.

Propriedades do campo Lista / Menu

Ao selecionar este objeto no formulário o Properties Inspector (Painel de propriedades)
permitirá escolher entre Menu (menu) ou List (lista), além de mostrar o botão List Values
(Valores da lista). Clicando neste botão você poderá escolher as opções da lista. Se a opção
List (lista) for escolhida, será ativado a visualização da opção Allow multiple (seleções
múltiplas) que permite seleções múltiplas ou não.

Jump Menu (Menu de salto): insere uma lista de navegação ou menu pop-up. Os me-
nus de salto permitem inserir um menu no qual cada opção é vinculada a um documento ou
arquivo.

Caixa de diálogo Validar formulário

58
 Dreamweaver

Na janela Insert Jump Menu podemos em Menu itens (itens do menu)- visualizar os
itens de menu, incluir, excluir e trocar a ordem; em Text (texto)- informar o texto; When
selected, go to URL (Quando selecionado ir para URL)- Local aonde será inserido página
local ou página na Web a ser aberta quando selecionado o item do menu.

Image Field (Campo de Imagem): permite inserir uma imagem em um formulário. Os

campos de imagens podem ser utilizados para criar botões com aparência gráfica (por ex.:
os botões Enviar e Redefinir).

Button (botão): executam ações quando clicados. Normalmente, as ações incluem o envio
ou a redefinição de um formulário. É possível adicionar um nome ou identificador personalizado
ao botão ou utilizar um dos identificadores predefinidos: “Enviar” ou “Redefinir”.

Propriedades do campo Button

No Properties Inspector (Painel de propriedades) será possível definir o Button name
(Nome do Botão); o Value (Valor)- comportamento a ser executado (Submit-Enviar, Reset-
Limpar); a Action (Ação)- Submit form (Enviar o Formulário); Reset form (Limpar o
Formulário); Nome (Nenhum).

Validate Form (Validação de Formulário)

A ação Validar o formulário verifica o conteúdo de determinados campos de texto, a fim de
garantir que o usuário tenha digitado o tipo correto de dados. Anexar esta ação a certos cam-
pos de texto com o evento onBlur, a fim de validar os campos à medida que o usuário estiver
preenchendo o formulário, ou anexá-la ao formulário com o evento onSubmit, a fim de avaliar
diversos campos de texto simultaneamente quando o usuário clicar no botão Enviar. A anexa-
ção desta ação a um formulário evita que este seja enviado ao servidor se algum dos campos
contiver dados incorretos.
Para validar determinados campos à medida que o usuário estiver preenchendo o formulário,
selecionar um Text field (campo de texto) e escolher Windows (Janela) > Behaviors
(Comportamentos).
Para validar vários campos quando o usuário enviar o formulário, clique na tag <form> no
Tag Selector (seletor de tags), situado no canto inferior esquerdo da janela do documento,
e escolha Windows (Janela) > Behaviors (Comportamentos).
1- No menu pop-up Ações, escolher Validate Form (Validar o formulário).

Caixa de diálogo Validar Formulário

59
 Dreamweaver

2- Escolher o campo a ser validado em Named Fields (Campos de Nome).

3- Escolher a validação a ser utilizada no campo selecionado.
Value (Valor): Required (obrigatório)- se estiver selecionado o usuário será obrigado a
preencher este campo.
Accept (Aceitar): Anything (Qualquer item)- será aceito no campo selecionado qual-
quer valor; Number (Número)- somente será aceito número no campo selecionado; Email
address (Endereço de E-mail)- somente será aceito conteúdo neste campo que contenha
o símbolo @, isso não quer dizer que será testado se o e-mail existe ou não; Number from...
to... (Número de...até...)- somente será aceito número no campo selecionado, porém que
estejam entre a faixa de números inseridas nos campos from e to.
4- Clique em OK.
5- Escolha o evento onBlur (ao mudar de campo), se o usuário mudar de campo sem cum-
prir as regras da validação receberá uma mensagem de erro.

60
 Dreamweaver

Exercício 13

1. Defina o site no local indicado pelo professor

2. Crie um novo arquivo e faça um formulário como o modelo com diversos recursos visto
nesta aula
3. Salve o arquivo e chame seu professor

61
 Dreamweaver

Aula 14-Behavior I
Um behavior (comportamento) é uma combinação entre uma Action (ação) e um Event
(evento). Por exemplo: quando o usuário mover o mouse sobre uma imagem (um evento),
esta poderá ser realçada (uma ação).
Uma Action (ação) consiste de código previamente escrito em JavaScript, que realiza deter-
minadas tarefas, como a abertura da janela de um navegador.
Os Event (evento) são definidos pelos navegadores para cada elemento da página; por
exemplo: onMouseOver (com o Mouse sobre), onMouseOut (com o Mouse fora) e onClick
(ao clicar) que são eventos associados a Links na maior parte dos navegadores, enquanto
que onLoad (ao carregar) é um evento associado a Imagens e a tag <body> (corpo do
documento).
Os Events (eventos) que podem ser utilizados para disparar uma determinada ação variam
de acordo com o navegador utilizado. Ao aplicar um behavior (comportamento) a um elemen-
to do seu documento, você estará especificando uma Action (ação) e o Event (evento) que a
disparará.

Aplicando Behaviors (Comportamentos)

Clique no menu Windows> Behavior

Painel de Comportamentos

Actions (Ações) (+): exibe uma lista de ações que podem ocorrer. A escolha de uma ação
acarretará o aparecimento da caixa de diálogo Parâmetros.
Delete (Excluir) (-): remove uma determinada ação e o evento a ela associada da lista do
Painel de Behaviors.
SHOW EVENTS FOR (Mostrar eventos para): especifica os navegadores nos quais os Beha-
viors deverá funcionar. A seleção feita neste menu determinará os eventos que aparecerão no
menu pop-up Events. Clique no (+) e selecione o penúltimo da lista de Actions.

Escolhendo para quais tipos de navegores serão aplicados os Behaviors

Events (Eventos) exibe todos os eventos que podem disparar a ação. Os eventos que apa-
recerão dependerão do objeto selecionado. Se os eventos esperados não aparecerem, certifi-

62
 Dreamweaver

que-se de que o objeto correto esteja selecionado.

Botões de setas acima e abaixo: movem a ação selecionada para cima ou para baixo na
lista de comportamentos. As ações serão executadas na ordem especificada.
Apenas os eventos reconhecidos pelos navegadores selecionados aparecerão no menu pop-up
Events (Eventos). Alguns Behavior interessantes:

Go to URL (ir para a URL)

Abre uma nova página na janela ou na moldura especificada. Esta ação é particularmente
útil para alterar o conteúdo de duas ou mais molduras com um clique. Ela também pode ser
chamada em uma timeline, para que salte até uma nova página depois de um determinado
intervalo de tempo.

Caixa de diálogo do Beharvior - Go to URL

Open in: Local onde será exibida a página.
URL: página a ser exibida.

Open Browser Window

Abre uma URL em uma nova janela. É possível especificar as propriedades da nova janela,
inclusive o seu tamanho, nome e atributos (se ela será redimensionável, possuirá uma barra
de menus, etc.).

Caixa de diálogo do Behavior - Open Browser Window

URL to display (URL a ser exibida): documento ou URL (página da Internet) a ser exibi-
da.
Window width: largura da janela em pixels.
Window height: altura da janela em pixels.
Attributes:
Navigation toolbar: Barra de Navegação.

63
 Dreamweaver

Location toolbar: Barra de ferramenta Local

Status bar: Barra de status
Menu bar: Barra de Menus
Scrollbars as needed: Barras de rolagem, se necessárias.
Resize handles: Alças de redimensionamento.
Window name: Nome da janela.

Set Text: Set text of Status Bar

A ação Definir a mensagem de status mostra uma mensagem na barra de status, na parte
inferior esquerda da janela do navegador. Por exemplo: é possível utilizar esta ação para des-
crever o destino de um link na barra de status, em vez de mostrar a URL a ele associada.

Caixa de diálogo do Behavior - Set Text of Status Bar

Message: Mensagem e ser inserida na Barra de Status.

Play Sound (Executar o som)

Utilize a ação Executar o som, para executar um som. Por exemplo: é possível executar um
efeito sonoro sempre que o ponteiro do mouse for passado sobre um link ou executar um clipe
de música quando a página for carregada.

Caixa de diálogo do Behavior - Play Sound

Play sound: informar o som a ser executado.

Pop Message (Mensagem pop-up)

A ação Mensagem pop-up exibe um alerta em JavaScript com a mensagem por você especifi-
cada. Como os alertas em JavaScript possuem apenas um botão (OK), utilizar esta ação para
fornecer informações ao usuário, em vez de apresentar-lhe uma opção.

Caixa de diálogo do Behavior - Pop Message

Popup Message: mensagem a ser inserida para servir de alerta em JavaScript.
64
 Dreamweaver

Swap Image

A ação Permutar a imagem permuta uma imagem por outra, ao alterar o atributo src da tag
img. Utilize esta ação para criar botões cambiáveis e outros efeitos em imagens (inclusive a
permuta simultânea de mais de uma imagem).

Caixa de diálogo do Behavior - Swap image

Images: selecione a imagem cuja origem deseja alterar.
Set source to: informe o arquivo da nova imagem.
Preload images: Se estiver ativado os novas imagens serão carregadas no cachê do nave-
gador. Esse processo evita os atrasos causados pelo download quando as imagens tiverem de
ser exibidas.
Restore images onMouseOut: restaura as images quando o mouse sai de cima.

Executar e Para Timeline

Utilize as ações Play (Executar) TimeLine e Stop (Parar) TimeLine, para permitir que
o visitante inicie ou pare uma timeline ao clicar em um link ou botão ou inicie ou pare uma
timeline automaticamente ao passar o cursor sobre um link, imagem ou outro objeto. A ação
Play (Executar) TimeLine será automaticamente anexada à tag <body> com o evento
onLoad.

Caixa de diálogo do Behavior - Play Timeline

65
 Dreamweaver

Exercício 14

1. Defina o site no local indicado pelo professor

2. Crie um novo arquivo e teste os diversos comportamentos vistos na aula
3. Teste também as diversas ações de mouse

4. Crie um Swap Image com tres imagens e deixe como o modelo abaixo:

Open Browser

Play Sound
Set Text

66
 Dreamweaver

Aula 15-Layer e Behaviors II

Os Layers são elementos de arquivos HTML que podem ser posicionados em qualquer ponto da
página. Elas podem conter texto, imagens ou qualquer outro conteúdo que possa ser inserido
no corpo de um documento HTML.
Com o Dreamweaver, pode-se inserir e animar os Layers, sem ter que codificar nada em JavaS-
cript ou HTML. É possível colocar os Layers na frente ou atrás de outros, ocultá-los enquanto
outros são exibidos e movê-los na tela. Os Layers também podem ser animadas e ter suas
propriedades alteradas por Behaviors (comportamentos).

Desenhando Layer

Para desenhar uma Layer clique o botão Draw Layer do Insert Bar>Layout e em se-
guida arraste sobre a página.

Propriedade de uma Layer

A Layer tem uma pequena caixa externa no canto superior esquerdo Alça de Seleção utiliza-
da para selecionar e mover o Layer. Ao clicar na Alça de Seleção, o layer e selecionado e oito
alças de redimencionamento aparecem.

O ícone Layer pode ser recortado, copiado, colado, reposicionado. Ao mover o ícone, o
Layer não se move, você move somente o código do Layer para outro local diferente na origem
HTML. Caso o ícone Layer não esteja visível vá ao menu Edit>Preferences> Category:
Invisible Elements ative em Show a opção Anchor points for layers. Verifique ainda se
no menu View> Visual Aids>Invisible Elements está ativado.

Selecionando Layer

Dependendo da complexidade do layout da página, você pode selecionar o Layer de várias

maneiras:
1- quando há Layers que não estão sobrepostos, clique na alça de seleção do Layers que
deseja trabalhar.
2- quando há Layers em lugares específicos no código HTML, escolha o ícone Layer.
3- quando há muitos Layers sobrepostos ou estiver trabalhando com Layers invisíveis, utilize
o Painel Layers para escolher o Layer desejada pelo nome.

67
 Dreamweaver

Painel Layer

Nesse painel você gerencia os Layers em sua página web. Ele oferece principalmente, uma
boa visão dos Layers contidas em sua página. Oferece também um método bem rápido de
selecionar um Layer e permite alterar o índice Z (ordem de empilhamento) de um Layer.
Para abri-lo: Menu Windows> Layer (F2).

Painel de Propriedades Layers

No Painel Layer são listados as configurações de visibilidade, nome e índice-z para cada Layer.
Você pode alterar qualquer uma dessas propriedades no próprio Painel.
A visibilidade de um Layer é notificada pelo símbolo de olho na primeira coluna do painel.
Temos então: olho fechado indica um Layer oculto, olho aberto indica um Layer visível e ne-
nhum olho indica que o atributo visibilidade esta configurado como padrão (inherit).
Para alterar um nome de um Layer, dê um clique duplo no nome atual do Layer no painel
(segunda coluna) e o nome é destacado. Digite o novo nome e tecle enter.
Para alterar a ordem de empilhamento, siga o mesmo procedimento anterior descrito só
que na terceira coluna. Você pode inserir um número positivo ou negativo.

Propriedades dos Layers

Após selecionar um Layer podemos alterar diversas propriedades através do Properties ins-
pector (Painel de Propriedades).

Propriedades de um Layer selecionado

Layer ID (Identidade da Layer): especifica um nome que identificará o Layer no painel Layer
e no código JavaScript. Digite um nome. Utilize apenas caracteres alfanuméricos padrão; não
use caracteres especiais, como espaços, hífens, barras ou pontos. Cada Layer deve possuir
seu próprio nome exclusivo.
L e T (esquerda e alto): especificam a posição do canto superior esquerdo do Layer em
relação à página, ou à Layer-mãe (se aninhada).
W e H (largura e altura) especificam a largura e altura da Layer.
Nota: Se o conteúdo do Layer exceder o tamanho especificado, a sua margem inferior se
alargará para acomodar o conteúdo. A margem inferior não se alargará quando a Layer apa-
recer em um navegador, a não ser que a propriedade Overflow (estouro) esteja definida como
Visível.
Z-Index (Índice Z): determina o índice Z (ou ordem de empilhamento) do Layer. Em um
navegador, os Layers com números mais elevados aparecem na frente daquelas com números

68
 Dreamweaver

menores. Os valores podem ser positivos ou negativos. É mais fácil alterar a ordem de empilha-
mento das Layers utilizando o painel Layers do que digitando valores específicos ao índice Z.
Vis (visibilidade): especifica se o Layer estará inicialmente visível ou não. Escolha uma das
seguintes opções:
Default (Padrão): não especifica uma propriedade de visibilidade. Se a visibilidade não for
especificada, a maioria dos navegadores herdará o valor do Layer-mãe, adotando a definição
Herdar (Inherit).
Inherit (Herdar): utiliza a propriedade de visibilidade do Layer-mãe.
Visible (Visível): exibe o conteúdo do Layer, independentemente do valor do Layer-mãe.
Hidden (Oculto): oculta o conteúdo do Layer, independentemente do valor do Layer-mãe.
Bg image (Imagem do fundo): especifica a imagem de fundo do Layer. Clique no ícone da
pasta, para procurar e selecionar um arquivo de imagem.
Bg color (Cor do fundo): especifica a cor de fundo do Layer. Deixe esta opção em branco
para especificar um fundo transparente.
Overflow (Estouro): controla como as Layers aparecerão em um navegador quando o con-
teúdo exceder o tamanho especificado do Layer:
Visible (Visível): indica que o conteúdo adicional aparecerá no Layer; na realidade, esta se
alargará para acomodar o conteúdo.
Hidden (Oculto): especifica que o conteúdo adicional não será exibido no navegador.
Scroll (Rolar): especifica que o navegador adicionará barras de rolagem à Layer, indepen-
dentemente de sua necessidade.
Auto (Automático): faz com que o navegador inclua barras de rolagem à Layer, somente
quando forem necessárias (ou seja, quando o conteúdo da Layer exceder os seus limites).

Conversão entre Layers e Tables

É possível criar o layout utilizando layers e, em seguida, convertê-las em tables, para que o
layout possa ser visualizado nos navegadores mais antigos.

Para converter Layers em uma Table:

1- Clique no menu Modify> Convert> Layers to Table.

Caixa de diálogo Convertendo Layers em Table

2- Na caixa de diálogo que aparecer, selecione as opções desejadas.
3- Clique em OK.
Os Layers serão convertidos em uma Table.

69
 Dreamweaver

Para converter Tables em Layers:

1- Clique no menu Modify> Convert> Tables to Layers.

Caixa de diálogo Convertendo Tables em Layers

2- Na caixa de diálogo que aparecer, selecione as opções desejadas.
3- Clique em OK.
As Tables serão convertidas em Layers. As células vazias não serão convertidas em Layers, a
não ser que elas tenham cores de fundo.
Nota: Os elementos de página que estavam fora das Tables também serão colocados em
Layers.

Behaviors (Comportamentos) II
As camadas podem ser combinadas com behaviors para permitir que seus visitantes interajam
com sua página. Dois behaviors fazem isso muito bem o Drag Layer (arrastar camadas) e o
Show/Hide Layers (mostrar e ocultar camadas).

Drag Layer (arrastar camadas)

Possibilita ao visitante pegar um Layer na janela do navegador e movê-lo para um local di-
ferente na página. Essa é um maneira excelente de criar jogos interativos ou ferramentas de
ensino com elementos que podem ser movidos pelo usuário.
1- Clique no menu Windows> Behavior.
2- Selecione a tag <body>, clique sobre o sinal de (+) no painel Behavior e escolha Drag
Layer.

Caixa de diálogo do Behavior - Drag Layer

3- Escolha o Layer que deseja arrastar e clique em OK.

Show/Hide Layers

A ação Show/Hide Layers (mostrar e ocultar camadas) mostra, oculta ou restaura a visibilidade
padrão de uma ou mais camadas. Esta ação é útil para mostrar informações à medida que
o usuário interage com a página. Por exemplo: à medida que o usuário passar o ponteiro do

70
 Dreamweaver

mouse sobre a imagem de uma planta, uma camada poderá ser disparada, mostrando detalhes
sobre a época e região de crescimento da planta, a quantidade de sol necessária, o tamanho
que a planta pode atingir e assim por diante. Também podemos fazer menus utilizando este
behaviors.
1- Clique no menu Windows> Behavior.
2- Selecione a tag <body>, ou uma imagem, ou um link e clique sobre o sinal de (+) no painel
Behavior e escolha Show-Hide Layers.

Caixa de diálogo do Behavior - Show/Hide Layers

3- Escolha o Layer ou Layers que deseja controlar a visibilidade e clique em OK.

71
 Dreamweaver

Exercício 15

1. Defina o site no local indicado pelo professor

2. Crie um novo arquivo e vamos testar os novos Behaviors aprendidos
3. Crie as camadas e insira as imagens qeu o seu professor lhe fornecerá
4. Monte as layers conforme a imagem e aplique o Behavior Drag Layer nelas
5. Salve e visualize o arquivo montando-o como um quebra cabeça

Site com “Drag Layer”

Imagem montada

72
 Dreamweaver

Aula 16-Trab: Behaviors

Com algumas Layer crie o layou abaixo e insira as imagens fornecidas pelo seu professor
conforme abaixo:

Usando o Behavior Swap Image, faça uma animação com imagens que ao passar sobre uma
imagem pequena todas as outras imagens pequenas ficarão cinzas e no centro aparecerá a
imagem selecionada maior

73
 Dreamweaver

Aula 17-Timeline e Behaviors III

As Timelines (linhas de tempo) possibilitam alterar a posição, visibilidade, ordem de empi-
lhamento e o tamanho de um Layer. Vale ressaltar alguns pontos a serem considerados para
aplicação da Timeline:
• As Timelines (linhas de tempo) necessitam de um navegador 4.0 ou superior;
• Para que a Timeline (linha de tempo) possa animar um objeto, esse objeto deve obrigato-
riamente estar inserido em uma Layer (Camada);
• Você pode iniciar um evento (Behavior) em qualquer local de uma Timeline (linha de tem-
po);
• Você pode incluir várias animações em uma mesma Timeline (linha de tempo);
• Você pode ter diversas Timelines (linhas de tempo) que animam diversos Layers simulta-
neamente.

Painel Timeline

Pelo Painel Timelines você gerencia suas linhas de tempo. Para acessá-lo, vá em menu Win-
dow > Timelines. Ele possui basicamente 4 áreas importantes:

Controles da
Timeline
Canal Behavior
Cabeçote de
QUADROS
Reprodução

Canais de Animação

Painel Timelines
Controles da Timelines: inclui a lista drop-down Timeline para selecionar a timeline. Con-
tém também os botões: Rewind, Back e Play, a caixa de texto Fps (frames por segundo) e
as caixas de seleção Autoplay (executar automáticamente) e Loop (repetir infinitamente);
Canal Behavior: mostra o posicionamento de qualquer behavior (comportamento) na timeline
(linha de tempo);
Frames (Quadros): - exibe o número de frames (quadros) para todas as timeline (linhas de
tempo) e o Cabeçote de Reprodução;
Animation canal (Canais de Animação): representa as animações de qualquer layer (ca-
mada) e imagem incluída.

Criando Animação

Você pode inserir no painel Timelines um Layer (camada) de mais de uma forma. Por exemplo,
você pode inseri-lo por meio do Menu Modify > Timeline > Add Object to Timeline ou até
mesmo arrastando-o para uma timeline. Note que ao fazer qualquer um dos processos.

74
 Dreamweaver

O Dreamweaver insere uma Barra de Animação com duração de 15

frames (quadros) rotulada com o nome do objeto. Para adicionar outro
objeto, repita o mesmo processo. Se você quiser adicionar na mesma
Barra de Animação outra camada, clique no frame que você quer que
ela fique e repita o processo.
Para adicionar outro objeto, repita o mesmo processo. Se você quiser
adicionar na mesma Barra de Animação outra camada, clique no frame
que você quer que ela fique e repita o processo.

Painel da Timelines com dois Layer

Controles Timelines

Você não precisa usar seu navegador para visualizar uma timeline. Os Controles da timeline
permitem a você fazer ajustes.

1-Botão Rewind: Move o cabeçote de reprodução para o primeiro frame da timeline;

2-Botão Back: Move o cabeçote de reprodução para o frame anterior da timeline;
3-Indicador de Frame: Indica em qual frame está a animação;
4-Botão Play: Move o cabeçote de reprodução para o próximo frame e se for mantido pres-
sionado, reproduz a animação;
5-Fps: Velocidade de projeção, quantos frames por segundo;
6-Autoplay: Se você marcar essa opção, assim que o download de sua página for concluido,
sua animação será iniciada;
7-Loop: Assinale essa opção para que sua animação seja repetida quando alcançado o frame
final. Você pode definir quantas vezes essa repetição será feita. Após marcar “Loop” vá no
painel Behaviors e clique duas vezes sobre “Go To Timeline Frame”.

Caixa de diáologo do Behavior - Go To Timeline Frame

Na caixa que se abre, você pode em “Loop” determinar quantas vezes será repetido, em “Go
to Frame”, você determina qual será o primeiro frame dessa repetição. Em “Timeline” você
determina em qual Timeline aplicar.

Modificando sua Timeline

Ao adicionar um objeto, perceba na timeline que a Barra de Animação possui um círculo aberto
no início e no fim. Esse círculo aberto determina um keyframe (quadro-chave). É por intermédio

75
 Dreamweaver

desse keyframe (quadro-chave) que você especifica uma alteração no estado do objeto. O que
isso quer disser? Por exemplo, quando você insere um layer em seu site com uma imagem, o
primeiro keyframe (quadro-chave) tem as mesmas propriedades do último keyframe(quadro-
chave) (posição, tamanho, visibilidade etc...) Para que uma animação ocorra você tem que
alterar alguma dessas propriedades. Vamos mover uma camada rapidamente pela tela:
1- crie um Layer;
2- adicione uma imagem a esse Layer;
3- abra o Painel Timelines;
4- arraste o Layer para o Painel Timelines e solte o mouse;
5- selecione o keyframe (quadro-chave) de término na barra de animação da camada;
6- na janela de seu documento pegue a alça de seleção do layer e arraste-a para uma nova
localização.

Caminho da animação
É criada uma linha entre a posição inicial e a posição final. Essa linha se chama: Caminho da
Animação.
7- para visualizar a animação, clique no botão Rewind no Painel Timelines e em seguida clique
e mantenha pressionado o botão Play.
Para você alterar sua Barra de Animação, basta clicar com o botão direito ela ou para mover
totalmente a Barra, clique e arraste-a para onde quiser.

Keyframe (quadro-chave)
Você pode fazer suas animações terem mais de um movimento, para isso, basta adicionar
keyframes (quadros-chave) em sua timeline. Clique com o botão direito do mouse em um frame
de sua Barra de Animação e “AddKeyFrame” ou escolha um frame em sua Barra de Animação
e vá ao Menu Modify > Timelines > AddKeyFrame.

Note que, além de aumentar o número de frames dessa Barra de Animação, inseri um quadro-
chave no frame 10 e outro no frame 20. Alterando em ambos, a posição da camada.

76
 Dreamweaver

Alterando a Velocidade da Animação

Você pode clicar e arrastar o último keyframe de sua animação, aumentando o tamanho do
seu Caminho de Animação, ou você pode alterar o valor do Fps do Painel Timelines. Se for
aumentado o valor de fps todas as animações da timeline serão aceleradas.

77
 Dreamweaver

Exercício 17

1. Defina o site no local indicado pelo professor

2. Com as Layers desenhe a “pista” de corrida
3. Crie as layers como no exemplo e insira as imagens para a criação de um animação
4. Adcione cada layer em uma timeline ou se preferir Desenhe o caminho dela
5. Crie també um behavior Stop/Play Timeline para executar e para a linha de tempo
6. Salve o arquivo e visualize a animação

Layers montadas

Animação em andamento

78
 Dreamweaver

Aula 18-Plugins e Elementos Flash

Macromedia Dreamweaver permite adicionar som ou filmes aos sites da Web de maneira rápida
e fácil. É possível incorporar ou editar os arquivos e objetos multimídia, como, por exemplo: fil-
mes Macromedia Flash e Shockwave, applets Java, Quicktime, Active X e arquivos de áudio.

Trabalhando com Vídeo

É possível fazer o download de um vídeo para um usuário e depois automaticamente reprodu-
zí-lo com uma aplicação auxiliar ou, também, fazer um Streaming de modo que ele reproduza
o vídeo enquanto está descarregando.
O maior problema encontrado pelos Desenvolvedores Web, em relação à disponibilização de
Vídeos, é o tamanho dos arquivos. Para resolver essa questão, os Profissionais e Fabricantes
da Industria desenvolveram várias soluções para criação, armazenamento e reprodução de
mídia digital. Cada solução tem um formato de arquivo diferente exigindo assim que o usu-
ário tenha um sistema de reprodução (plug-in ou controle Active-X ou applet Java) capaz de
interpretar esse formato específico.
Existem atualmente três grandes Desenvolvedores de Mídia de Streaming: RealMedia, Qui-
ckTime e Windows Media. Juntas elas representam todo o mercado de Mídia voltado para Web
atualmente.

RealMedia (www.real.com)
Os três principais componentes de software de RealMedia são:
RealOnePlayer (software cliente - função de visualizar conteúdo em RealMedia);
RealSystem Producer (software de codificação - função de converter arquivos de audio e de
vídeo em arquivos RealMedia - extensão.rm);
RealSystem Server (software de servidor - adequado para disponibilizar RealMedia em RTSP
- Real-Time Streaming Protocol).

QuickTime (www.apple.com/quicktime)
É um sistema operacional multimídia que permite que aplicações (títulos de CD-ROM por
exemplo) executem sobre ele seus conteúdos. Conteúdos esses, que incluem áudio, vídeo,
imagens, objetos 3D, música MIDI, vídeo streaming, filmes em Flash e mp3. Os principais
componentes de software são:
Quick Time Player (software cliente - função de visualizar conteúdo em QuickTime);
QuickTime Pro (software de criação de conteúdo QuickTime);
QuickTime Streaming Server (software de servidor que entrega vídeo na web utilizando o
padrão RTSP, assim como o RealMedia).

Windows Media (www.windowsmedia.com)

Tecnologia de Mídia da Microsoft. Componente de software: Windows Media Player (software
cliente - além de streaming pelas Web, suporta muitos outros tipos de mídia, CDs de áudio, rá-
dio na internet, etc...). O Windows Media Player é nativo do sistema Operacional Windows.

79
 Dreamweaver

Dependendo da configuração de software do usuário, vídeos podem ser descarregados com-

pletamente e sua reprodução iniciar imediatamente (download) ou iniciar a reprodução logo
que boa parte do vídeo foi descarregada (streaming).

Inserindo Vídeo no Dreamweaver

Você pode fazer isso de duas maneiras:

Utilizando um Link

1 - Selecione o texto ou imagem que deseja de link para o arquivo de Vídeo;

2 - No Properties inspector (Painel de Propriedades), insira o nome do arquivo de vídeo na
caixa de texto Link;
3 - É recomendável anotar o tamanho do arquivo ao lado do nome de link, na caixa de texto
Alt. Exemplo: Vídeo AIS - tamanho: 2,8 MB. Isso irá informar ao usuário o tamanho do arquivo
de vídeo.

Utilizando Plugin

Deste modo, você obterá mais controle sobre a reprodução de seu Vídeo. Incorpore-o na sua
página Web com o auxilio da tag <embed>. Ao modificar os atributos da tag <embed>
você altera a maneira de como o vídeo é apresentado.
1 - Clique no menu Insert> Media> Plug-in, ou através do Insert Bar> Common clique
sobre a seta de expansão do botão Media e escolha Plugin.
2 - Por padrão o objeto Plug-in e inserido com Width (largura) 32 e Height (altura) 32.

Painel Propriedades de Plugin

3 - No Properties inspector (Painel de Propriedades) insira as dimensões do vídeo nas caixas
de Width (largura) e Height (altura).
Plug in: nome; Width: largura; Heigth: altura;
Src: URL do metarquivo .rpm;
Plg URL: URL do plug-in caso o usuário não o tenha (www.real.com);
V space: espaço vertical;
H space: espaço horizontal;
Play: testa seu filme;
Align: alinhamento do Vídeo;
Border: largura da borda;
Parameters: controle de seu filme.
Opções para Parameters:
Autostart: inicia o filme logo que conteúdo esteja disponível (valores = true ou false);
Controls: colocação de elementos de painel de controle (valores = all, controlpanel, ima-
gewindow, infovolumepanel, infopanel, playbutton, positionslider, positionfield, statuspanel,

80
 Dreamweaver

statusbar, stopbutton, statusbar, stopbutton, statusfield, volumeslider);

Nolabels: suprime os rótulos Title, Author e Copyright no painel Status (valores= true ou
false)

Inserindo Áudio no Dreamweaver

Sobre os formatos de arquivos de áudio:
O formato .mid (Interface digital de instrumento musical, Musical Instrument Digital
Interface) destina-se à música instrumental. Arquivos MIDI contam com suporte em diversos
navegadores e não requerem um plug-in. Um pequeno arquivo MIDI pode fornecer um longo
clipe de som.
Os arquivos no formato .wav (waveform) têm boa qualidade de som, contam com suporte
em vários navegadores e não requerem um plug-in. É possível gravar arquivos WAV próprios
de um CD, fita, microfone e outros dispositivos. No entanto, o grande tamanho dos arquivos
limita seriamente o comprimento dos clipes de som que podem ser utilizados nas páginas da
Web.
O formato .mp3 (áudio do Motion Picture Experts Group ou Camada-3 de áudio MPEG)
é um formato compactado que torna os arquivos de som consideravelmente menores. A qua-
lidade som é muito boa, mas o tamanho do arquivo é maior do que um arquivo Real Audio.
O grau de compactação do formato .ra, .ram, .rpm ou Real Audio é muito alto e os tamanhos
de arquivos são menores do que os arquivos no formato MP3. A qualidade de som é inferior
à dos arquivos MP3. Para poder executar esses arquivos, os visitantes deverão efetuar o do-
wnload e instalar o aplicativo auxiliar RealPlayer.
Quando inserimos um arquivo de áudio no site, podemos controlar na apresentação do próprio
player: o volume de reprodução do áudio, quais partes do player ficarão visíveis, bem como
o ponto inicial e final da música. O Dreamweaver controla esses parâmetros por meio de dois
objetos: o Objeto Plugin e Objeto ActiveX.
Incorporando o Objeto Plugin

Cada objeto chama um tipo específico de Player. O Objeto Plugin padrão chama o LiveAudio
Plugin em um navegador Netscape ou o controle de Windows Media Player no Internet Explo-
rer.
1- Posicione o cursor aonde deseja que o painel de controle apareça;
2- Clique no menu Insert> Media> Plug-in, ou através do Insert Bar> Common clique
sobre a seta de expansão do botão Media e escolha Plugin.

Painel de Propriedades do Plugin

Incorporando ActiveX

O Windows Media Player é o player padrão do Internet Explorer. Você pode reproduzir por ele
vários formatos de áudio, tais como MP3, AIFF, WAV , MIDI, etc... Quando você “chama” o
Media Player por um Objeto ActiveX, você pode controlar, dentre outras coisas, sua largura,
sua altura, número de loops, etc...
01. Posicione o cursor aonde deseja que o painel de controle apareça;
02 - Clique no menu Insert> Media> ActiveX, ou através do Insert Bar> Common clique
sobre a seta de expansão do botão Media e escolha ActiveX.

81
 Dreamweaver

Painel de Propriedades do ActiveX

Para que funcione no Browser Nestscape e recomendado que sempre deixe ativado a opção
Embed.
Opções para Parameters:
AutoStart: true ou false (determina se o som começa a reproduzir quando o download estiver
completo);
PlayCount: número inteiro (o número de vezes que o arquivo deve repetir);
SelectionStart: número inteiro (determina o início do áudio em relação ao início do arqui-
vo);
SelectionEnd: número inteiro (determina o fim do áudio em relação ao início do arquivo );
ShowControls: true ou false (mostra ou não o painel de controles);
ShowDisplay: true ou false (mostra ou não o painel de exibição);
Volume: número inteiro, sendo 0 mais alto e 10000 mais baixo (configura o volume do ar-
quivo).
Trabalhando com o Flash
A tecnologia Macromedia Flash constitui a solução mais eficiente para a produção de gráficos
e animações com base em vetores. Flash Player está disponível tanto como um plug-in de
Netscape Navigator quanto um controle ActiveX para Microsoft Internet Explorer no PC, tendo
sido incluído nas versões mais recentes de Netscape Navigator, Microsoft Internet Explorer e
America Online.
Antes de utilizar os comandos Flash disponíveis no Dreamweaver, é necessário revisar os três
tipos diferentes de arquivos Flash.
O arquivo de documentos Flash (.fla) é um arquivo-fonte para qualquer projeto Flash. Este
arquivo somente pode ser aberto e editado pelo Flash.
O arquivo de filme Flash (.swf) é uma versão compactada do arquivo Flash (.fla), otimizado
para visualização na Web. Esse arquivo pode ser executado em navegadores e visualizado no
Dreamweaver, mas não pode ser editado no Flash.
Os arquivos do modelo Flash (.swt) possibilitam a modificação e substituição de informações
num arquivo de filme Flash. Esses arquivos são utilizados no Flash Button, permitindo a mo-
dificação do modelo com os seus próprios textos ou links, para criar um SWF personalizado.
1- Posicione o cursor aonde deseja que apareça o filme Flash;
2- Clique no menu Insert> Media> Flash, ou através do Insert Bar> Common clique sobre
a seta de expansão do botão Media e escolha Flash.

Painel de Propriedades filme Flash

Nome: especifica o nome que identificará o filme Flash.
W e H (largura e altura): especificam a largura e altura do objeto, em pixels.
File (Arquivo): especifica o caminho até o arquivo do objeto Flash. Clique no ícone corres-
82
 Dreamweaver

pondente à pasta, para procurar um arquivo, ou digitar um caminho.

Edit (Editar): abre a caixa de diálogo de objeto Flash para edições no objeto Flash selecio-
nado.
Reset size (Redefinir o tamanho): retorna o botão selecionado ao tamanho original do
filme.
V space e H space: especificam o número de pixels de espaço em branco acima, abaixo e
em ambos os lados do filme Flash.
Quality (Qualidade): define a qualidade do filme Flash. A aparência do filme é melhor com
uma definição High (elevada), mas necessita um processador mais rápido para ser apre-
sentado corretamente na tela.
A opção Low (Baixa) enfatiza a velocidade em detrimento da aparência, enquanto High fa-
vorece a aparência em detrimento da velocidade.
A opção Auto Low (Baixa automática) enfatiza a velocidade de início, mas melhora a apa-
rência, se possível.
A opção Auto High (Alta automática) enfatiza ambas as qualidades inicialmente, mas sa-
crifica a aparência em função da velocidade, se necessário.
Scale (Escala): Esse parâmetro define como o filme será exibido dentro da área definida para
ele pelos valores width e height:
(Default) Show all (mostrar todas): torna visível o filme inteiro na área especificada, ao
manter as mesmas proporções do filme e evitar a distorção. As bordas da cor de fundo poderão
ser exibidas nos dois lados do filme.
No Border (Sem bordas): é semelhante a Mostrar todas, exceto que partes do filme podem
estar cortadas.
Exact fit (Ajuste exato): o filme inteiro preencherá a área especificada, mas não serão
mantidas as proporções do filme, podendo ocorrer algumas distorções.
Align (Alinhar): define como o objeto será alinhado na página.
Bg (Fundo): especifica a cor de fundo do objeto.
Play/Stop (Executar/Parar): permite visualizar o objeto Flash na janela do documento.
Paramenters (Parâmetros): abre uma caixa de diálogo na qual é possível inserir outros
parâmetros

83
 Dreamweaver

Exercício 18

1. Defina o site no local indicado pelo professor

2. Insira alguns arquivos de video no seu site
3. Insira um arquivo de som para ficar tocando como música de fundo
4. Insira também alguns arquivos SWF
5. Salve o arquivo e visualize a página

Modelo do Site

84
 Dreamweaver

Aula 19 - Agência Viaja Brasil

Crie um site para a agência de viagem Viaja Brasil. Este site deverá conter roteiros turístico
especialmente do Território nacional.
Utilize todas as técnicas ensinadas em aula para o bom desenvolvimento do Trabalho.
Poderão ser utilizados os modelos de páginas iniciais do Dreamweaver.
File> New> General> Starter Pages> Travel-Home Page.

85
 Dreamweaver

Aula 20-Publicação o Site

Agora que já aprendemos a fazer páginas HTML, CSS, imagens, filmes Flash, som, vídeo, ani-
mações..., como publicamos na Internet? O que devo saber antes de publicar minha página. ???
Inicialmente vamos entender a diferença entre domínio e hospedagem, e o que você precisa
saber na hora de escolher um lugar para mostrar seu trabalho e colocar sua página.

Hospedagem
Também conhecida como host, é o espaço que você adquire para publicar seu site. Planos de
hospedagem pagos geralmente oferecem muito mais ferramentas que os hosts gratuitos. Os
hosts grátis geralmente trazem banners ou pop-ups de propaganda, que desalinham o seu
layout ou irritam seu visitante.

Hospedagem Paga

Na hora de escolher um plano de hospedagem pago você deve analisar alguns detalhes:
Espaço oferecido: sempre escolha um plano que oferece mais espaço do que o seu site
realmente ocupa. Algumas ferramentas, como estatísticas e e-mail próprio, também podem
ocupar espaço, e sempre deve haver uma precaução caso o site mude de layout ou aumente
seu conteúdo.
Banda ou tráfego mensal: além do espaço em MB que o site ocupa alguns planos de hospe-
dagem também limitam o tráfego mensal do seu site. Quanto mais visitas um site tem, mais
tráfego ele gera, portanto é essencial adquirir um plano com a banda “folgada”. Nunca se sabe
quando pode haver um pico de visitas no site, e é muito desagradável encontrar uma página
fora do ar porque o domínio já ultrapassou sua cota mensal de tráfego.
Também é importante tomar cuidado com os e-mails, porque em algumas empresas o envio
e recebimento de mensagens usando a caixa postal da própria hospedagem também podem
gastar banda. Se for o caso, você pode criar uma conta de e-mail gratuito e usar um redire-
cionamento para “economizar” o tráfego referente aos seus e-mails.
Redirecionamento: é uma “máscara” usada em endereços de site e domínios para apontar
para outro endereço. Por exemplo, eu posso criar o e-mail profais@gmail.com, gratuito no
Gmail, e no painel de controle da hospedagem do meu domínio crio um redirecionamento con-
tatoais@aisinformatica.com.br, que aponta para o endereço anterior. Assim, quando alguém
me enviar uma mensagem no primeiro endereço, eu receberei no segundo sem gastar banda
da minha hospedagem.
Da mesma maneira, você pode fazer o redirecionamento de domínios. Por exemplo, o
endereço www.aisinformatica.com.br pode apontar para www.grupoais.com.br, um endereço
fora do meu site.
Painel de Controle: hoje em dia, a maioria dos planos de hospedagem oferece esse recurso.
Através do painel de controle você tem acesso a todas as ferramentas que sua hospedagem
oferece, desfrutando de todas elas sem precisar pedir liberação ao suporte técnico (embora
praticamente todos os hosts mantenham um FAQ com as perguntas mais freqüentes para os
usuários tirarem suas dúvidas sem precisar recorrer à ajuda do suporte). Acesso às estatísti-
cas do site, criação de contas de e-mail, gerenciamento de redirecionamento e instalação de
recursos adicionais são exemplos do que você pode encontrar nos painéis de controle mais
comuns do mercado.
Estatísticas: embora existam ótimos serviços gratuitos de estatísticas, praticamente todos os
hosts do mercado oferecem essa ferramenta. É muito importante acompanhar com frequência
informações como navegadores e sistemas operacionais que os usuários usam (para poder
adequar seu site ao maior número de visitantes possível), palavras chaves usadas para chegar
até ele e links que sites de terceiros que os visitantes usaram para chegar até você.
86
 Dreamweaver

Se você vai publicar um portfólio, site de profissional liberal, serviço ou empresa, vale a pena
investir num plano de hospedagem pago, para ter a segurança do seu site o tempo todo no ar,
além de não estragar seu layout com banners e pop-ups típicos das hospedagens grátis.

Hospedagem Gratuita

Mas se você está publicando um site pessoal, a hospedagem gratuita pode ser uma boa op-
ção. O importante é conhecer outros sites que já usam o mesmo serviço, para avaliar até que
ponto as propagandas influenciam na visualização do trabalho, e se o serviço não sai do ar
constantemente.

Domínio
Já o domínio é o endereço do site. Você vai adquirir um domínio - .com, .net, .org ou .br
por exemplo - pelo período mínimo de um ano, através de pagamento com boleto ou cartão
de crédito. Se daqui 12 meses sua anuidade não for renovada, o domínio ficará disponível para
outra pessoa registrar. Algumas empresas também oferecem a opção de registrar ou renovar
seu domínio a cada 2 anos ou mais.
Para comprar um domínio .com.br, você deve possuir um CNPJ e efetuar a compra no site
www.registro.br. Segue alguns exemplos possíveis para domínio (solicite endereço da lista
completa para seu professor):
Somente para pessoas jurídicas
ART.BR- Artes: música, pintura, folclore
EDU.BR- Entidades de ensino superior
COM.BR- Comércio em geral
GOV.BR- Entidades do governo federal
ORG.BR- Entidades não governamentais sem fins lucrativos
TV.BR- Empresas de radiodifusão de sons e imagens
ETC.BR- Entidades que não se enquadram nas outras categorias

Outros domínios nacionais podem ser registrados apenas com o seu CPF. Segue alguns exem-
plos possíveis para domínio (solicite endereço da lista completa para seu professor):
Somente para pessoas físicas
ADV.BR- Advogados
ENG.BR- Engenheiros
ETI.BR- Especialista em Tecnologia da Informação
FOT.BR- Fotógrafos
JOR.BR- Jornalistas
MUS.BR- Músicos
PRO.BR- Professores
Já para domínios internacionais, você não precisa de nenhum documento. Procure no Google
por “registro de domínio”, ou informe-se com o seu professor quais empresas de registro de
domínios internacionais eles recomendam - com a instabilidade do dólar, vale a pena procurar
por várias empresas porque os preços têm variado nos últimos meses.

87
 Dreamweaver

Enviando os arquivos para o servidor

A forma de enviar arquivos dependerá das informações fornecidas pelo seu servidor web.
Alguns, por exemplo, aceitam o envio de dados através de uma página de gerenciamento que
pode ser acessada no browser. Mas a maioria dos servidores recebem os arquivos de seus
usuários através do protocolo FTP (File transfer protocol).
Para enviar arquivos a um servidor FTP você não precisa de programas específicos, visto que
o Dreamweaver já possui um excelente cliente FTP integrado. Este cliente poderia ser confi-
gurado durante a criação dos nossos sites, mas preferimos comentar este assunto numa aula
específica para facilitar o entendimento.
1- Para configurar as opções do cliente FTP devemos clicar em Site > Manage Sites, escolha
o Site que deseja Publicar e clique no botão Edit.

Escolhendo um Site no Gerenciador de Sites

2- Na janela que se abrir escolha Advanced.

Propriedades de Página - Categoria Link

3- Escolhemos Remote Info (Informações remotas) na lista de Category (categorias)
à esquerda;
4-. Escolhemos FTP na caixa de listagem Access (Acesso) e preenchemos as opções;
FTP host: é o nome completo de um computador no formato da Internet, como, por exem-
plo: ftp.server.com.br. Digite o nome completo do host sem qualquer texto adicional. Esta
informação é fornecida pelo seu servidor.

88
 Dreamweaver

Host directory: Digite o nome do diretório do host no site remoto onde serão armazenados
os documentos que estarão visíveis para o público. Esta informação é fornecida pelo seu ser-
vidor.
Login: Digite o nome de login (nome de identificação do usuário) e o Password (senha) utili-
zados para estabelecer a conexão ao servidor de FTP. Estas informações são fornecidas pelo
seu servidor.
Clique em Test (Testar), para testar o logon e a senha.
Marque a caixa de seleção Maintain synchronization information (Efetuar o upload au-
tomático dos arquivos para o servidor ao salvar), se quiser que o Dreamweaver efetue
o upload do arquivo para o site remoto quando for salvo.

Janela de publicação do Site

Se as configurações forem definidas corretamente, você poderá usar a janela Site para enviar
e retirar arquivos do servidor remoto.

Efetua a conexão com o host remoto. A conexão deve ser feita para que seja possível
trocar arquivos com o site remoto.

Atualizar (F5): Atualiza as informações do site local e do site remoto.

Obter o(s) arquivo(s). Transfere o arquivo do site remoto para o site local.

Colocar o(s) arquivo(s). Transfere o arquivo do site local para o site remoto.

89
 Dreamweaver

Exercício 20

1. Defina o site no local indicado pelo professor

2. Monte o Site conforme orientação do seu professor
3. Cadastre-se no Site de hospedagem indicado pelo seu professor
4. Faça FTP dos arquivos do seu site

90