Tutorial Macromedia Dreamweaver 2
Tutorial
Macromedia Dreamweaver 2
1
Tutorial Macromedia Dreamweaver 2
Indice
1)
INTRODUÇÃO.......................................................................................................................................................3
OVERVIEW .....................................................................................................................................................................3
VISUALIZANDO A VERSÃO COMPLETA DO SITE. ................................................................................................................4
COMO AS PÁGINAS DO TUTORIAL ESTÃO AGRUPADAS .......................................................................................................5
2)
DEFININDO UM SITE LOCAL ............................................................................................................................6
FAZENDO O UPLOADING DE UM SITE ................................................................................................................................8
3)
EDITANDO A HOMEPAGE OLIVEBRANCH ..................................................................................................10
DEFININDO A COR E A IMAGEM DO BACKGROUND ..........................................................................................................10
DEFININDO O TÍTULO DA PÁGINA...................................................................................................................................12
CRIANDO UM MAPA DO SITE. .........................................................................................................................................12
CRIANDO LINKS ...........................................................................................................................................................15
4)
CRIANDO UM LAY-OUT DE PÁGINA COMPLEXO ......................................................................................18
CONVERTENDO UMA TABELA EM CAMADAS (LAYERS) ...................................................................................................19
ADICIONANDO UMA T ACING IMAGE (IMAGEM DE TRAÇADO) PARA GUIAR O LAY-OUT .....................................................20
POSICIONANDO AS CAMADAS ........................................................................................................................................21
ADICIONANDO NOVAS CAMADAS...................................................................................................................................22
ADICIONANDO IMAGENS ...............................................................................................................................................22
CONVERTENDO CAMADAS EM TABELAS .........................................................................................................................23
5)
EDITANDO UMA TABELA ................................................................................................................................26
FORMATANDO A TABELA ..............................................................................................................................................26
ORDENANDO A TABELA ................................................................................................................................................27
6)
FORMATANDO TEXTOS USANDO ESTILOS.................................................................................................29
7)
APLICANDO UM MODELO (TEMPLATE) ......................................................................................................32
EDITANDO O MODELO ...................................................................................................................................................33
APLICANDO UM MODELO DIFERENTE A UMA PÁGINA ......................................................................................................35
8)
UNINDO “BEHAVIORS” A ELEMENTOS DA PÁGINA. ................................................................................39
9)
ADICIONANDO UM FILME FLASH .................................................................................................................44
10)
CONFIRA O SITE................................................................................................................................................46
2
Tutorial Macromedia Dreamweaver 2
1. Introdução
Para facilitar o seu trabalho e o meu, neste tutorial nós vamos usar os arquivos criados pela
Macromedia assim o que basicamente eu fiz foi traduzir o tutorial que já vem com o Dreamweaver 2,
melhorar as explicações quando elas pareciam confusas, eu espero ter conseguido, e adicionar algumas
novas informações. Você de estar pensando, no que isso facilita o meu trabalho? Eu respondo: Você já
tem todos os arquivos necessários em seu computador, sejam páginas HTML, imagens ou Flash
movies.
Atenção: eu não tornei explicito no texto os locais em que faço comentários ou acrescento informações
ao tutorial Macromedia. Salvo algumas exceções.
Se você for como eu não deve gostar daqueles tutoriais que ficam dizendo, faça isso, depois faça isso, e
depois isso... sem dizer o porquê deste monte de coisas. Infelizmente os tutoriais da Macromedia são
mais ou menos assim. Por isso eu acrescentei, quando possível, mais informações sobre a razão de se
fazer deste, e não do outro modo.
Overview
Neste tutorial, você vai editar um Web Site para uma companhia fictícia, Olivebranch Gourmet Foods,
uma fazenda que vende produtos alimentícios. Quando alguém visitar seu site, ele poderá ler sobre a
oferta do dia ver o catálogo online, os fregueses também poderão saber mais sobre a Olivebranch e
sobre seus eventos.
Você vai aprender como:
•
•
•
•
•
•
•
•
•
•
•
•
Visualizar as páginas em um browser
Definir um site local
Escolher propriedades das páginas como background (imagem de fundo) e cores
dos links
Criar um mapa do site
Criar links
Criar um layout com layers (camadas) e converter as camadas em tabelas
Usar uma “tracing image”
Editar uma tabela
Formatar textos aplicando estilos
Aplicar um modelo
Adicionar “behaviors”
Inserir arquivos Flash
; Para o Dreamweaver as layers
são como as caixas de texto para o Word.
Nota: Neste tutorial as páginas terão certas características que só serão visualizadas em browsers 4.0
ou superiores (Netscape Communicator, Microsoft Internet Explorer).
3
Tutorial Macromedia Dreamweaver 2
Visualizando a versão completa do Site.
Vamos dar uma olhada na versão final do site para termos um idéia do que vamos fazer.
1. No Dreamweaver, escolha File > Open. Encontre a pasta do Dreamweaver, abra a pasta tutorial, e
depois a pasta Olivebranch_site, se você não mudou o caminho na hora de instalar ele deve estar
em:
C:\Arquivos de Programa\Macromedia\Dreamweaver 2\Tutorial\ Olivebranch_site.
2. Selecione index.htm para abrir a home page na janela Document. Não edite esta página, pois ela já
está completa. Nós vamos trabalhar em uma outra versão.
3. Escolha File > Preview in Browser, e então selecione um browser para visualizar. (Lembre-se de
usar um browser 4.0 ou superior).
; Para conseguir visualizar o site completamente você vai precisar do Flash Player,
um plug-in da Macromedia, instalado em seu browser. Para saber se você tem ele
instalado vá para Help > About plug-ins e procure por Shockwave Flash. Se você
não encontrou pode fazer o download em:
http://www.macromedia.com/shockwave/download/
4. Passe o mouse sobre os quatro itens no lado esquerdo da página (about, events, e catalog) e note
que os itens mudam indicando que eles são links ativos. Click em qualquer um deles para explorar
as outras páginas. Nota: A seção gift basket não será usada.
5. Feche o browser quando você enjoar de ver o site.
4
Tutorial Macromedia Dreamweaver 2
Como as páginas do tutorial estão agrupadas
Tanto as páginas HTML completas como as parcialmente completas usadas neste tutorial estão na pasta
Olivebranch_site. Imagens e outros arquivos associados estão em um diretório abaixo.
Cada arquivo tem um nome significativo – por exemplo, o arquivo HTML para a página de eventos é
nomeada events_main.htm. Os arquivos parcialmente completos possuem os mesmos nomes mas com o
sufixo DW2_; dessa forma o arquivos de eventos parcialmente completo chama-se
DW2_events_main.htm.
5
Tutorial Macromedia Dreamweaver 2
1) Definindo Um site local
Para começar a trabalhar com o Dreamweaver, você precisa criar um site local. Este site define a
estrutura das páginas que você está criando. Um site é um local de armazenamento para todos os
documentos (páginas HTML) e arquivos (imagens, sons, etc.) pertencentes ao site na web, em outras
palavras é um local no seu disco onde ficará um cópia do seu site na web. Dessa forma você vai
trabalhar como se estivesse criando um texto e colocando figuras nele, depois de pronto é só carregar
este site local para o seu provedor na web.
Precisamos então definir um nome e uma pasta (root folder), para que o Dreamweaver saiba onde você
planeja armazenar todos os arquivos deste site. Você deve criar um site local para cada site da web que
você trabalhar.
Neste tutorial vamos escolher a pasta Olivebranch_site para ser usada pelo site local.
/ Se até hoje, a única coisa que
você costuma fazer na Internet é navegar com seu
browser, então talvez você esteja um pouco confuso com estes conceitos sobre site
local, site web. Este tutorial não tem a pretensão de ensinar estes conceitos,
apenas mostrar como eles funcionam no Dreamweaver, mas para você não sair
por aí dizendo que eu te deixei na mão, você pode encontrar várias informações
sobre estes conceitos em: http://nib.unicamp.br/~richard ou
http://www.efuse.com/
Para criar um site local:
Agora nós vamos dar um nome para nosso site local e depois escolher o diretório em que ele estará
localizado:
1. Abra a caixa de diálogo Site Definition (Definição do Site) no Dreamweaver: escolha File > New
Site.
2. Na caixa de diálogo Site Definition, certifique-se de que Local Info está selecionada na lista
Category
3. No campo Site Name, escreva My_Tutorial, este será o nome de nosso site. Este nome é
basicamente um apelido que direciona diretamente para a pasta que definimos como nosso site
local.
4. Click na pasta à direita do campo Local Root Folder e navegue até a pasta Olivebranch_site e click
Select.
6
Tutorial Macromedia Dreamweaver 2
Nota: O caminho completo para a pasta Olivebranch_site irá variar dependendo de onde você instalou
o Dreamweaver 2. Por isso não se preocupe se o caminho mostrado na figura for diferente do seu.
5. Observe que existe um Check Box chamado Cache. Deixe ele como está, quando você for criar o
site, o Dreamweaver vai perguntar se você quer criar um cache. Você pode marcá-la agora ou
depois. Se você marcar agora o Dreamweaver vai mostrar uma janela dizendo que irá criar o cache,
e você vai ter que confirmar mais uma vez, quando estiver criando o site.
6. Click OK. Uma nova janela aparece perguntando se você gostaria de criar um arquivo de cache
para este site. Criando um cache para os arquivos do nosso site, cria-se um registro de todos os
arquivos existentes neste site, assim o Dreamweaver pode atualizar os links mais rapidamente se
você mover, renomear ou apagar um arquivo. A janela Site mostra uma lista de todas as pastas e
arquivos que o site local My_Tutorial contém. Esta lista também funciona como um gerenciador de
arquivos (como o Windows Explorer), permitindo que você copie, cole, apague, mova e abra
arquivos da mesma forma que você faz com o Windows Explorer.
Atenção: Sempre que você quiser apagar, mover, renomear, criar, ou qualquer outra ação deste tipo
com os arquivos do seu site, use a janela Site. Dessa forma o Dreamweaver gerencializa estas
mudanças, evitando desastres! Por exemplo, se você mover uma imagem que esta em várias
páginas através da janela Site, o Dreamweaver muda automaticamente os links de todas estas
páginas para encontrar a figura neste novo local. Vai por mim, depois não diga que eu não
avisei.
7
Tutorial Macromedia Dreamweaver 2
7. Estamos com duas janelas abertas, certo? Pois, bem feche a janela Document, aquela que está com
o arquivo index.htm. Mas deixe a janela Site aberta!
Quanto à criação do site local o tutorial da Macromedia para por aqui. Talvez você me pergunte: Como
é que eu vou colocar este Site na Internet? Vou ter que usar um daqueles programas de ftp e copiar os
arquivos?
Para aqueles que quiserem saber como fazer com que o Dreamweaver faça o upload do nosso site leia a
próxima seção. Se isto não te interessar vá para o próximo capítulo, se você decidir ler a próxima
seção, lembre-se: Ela não está no tutorial da Macromedia.
Fazendo o Uploading de um site
Primeiro deixe-me explicar o que é upload. É simples, você está fazendo um site para colocar na
Internet, ou qualquer outra “net” que use HTML. Você criou o site em seu computador e agora vai
copiá-lo o disco que está no computador de um provedor. Assim ele estará acessível para todos que têm
acesso a internet. Isso é upload, copiar seu site do seu computador para o computador do provedor
através da própria internet.
Para definir as opções do servidor:
1. Na janela Site, abra o menu Site > Define Sites. Na caixa com os nomes dos sites clique em
My_Tutorial, para selecioná-lo. Então clique no botão Edit.
2. Na caixa Category clique em Web Server Info. No menu Server Access selecione FTP. Vou
demonstrar apenas o acesso via ftp pois este é a forma mais comum, e é um pouco mais
complicada, já que na Local/Network é só localizar a pasta.
8
Tutorial Macromedia Dreamweaver 2
3. No campo FTP Host digite o endereço do ftp do provedor no qual ficará a sua página. Para
exemplificar vou usar um nome qualquer, mas você deve entrar em contato com seu provedor para
saber o endereço correto. Por exemplo: usuarios.provendo.com.br.
4. Em Host Directory, você deve colocar o nome de seu diretório público. A advertência sobre o
exemplo no passo 3 serve também para agora. Por exemplo: public_html.
5. Para o campo Login, você deve digitar o seu login, isto é o nome que você usa para ser identificado
no provedor que dará lugar às suas páginas. Em password você deve colocar a sua senha, mas para
ter maior segurança deixe em branco. Na hora de fazer o upload o Dreamweaver vai requisitá-la.
6. Clique OK e depois Done.
Pronto! Quando estivemos com o tutorial completo nós vamos fazer o upload!
9
Tutorial Macromedia Dreamweaver 2
2) Editando a Homepage Olivebranch
Agora de você já tem a estrutura do site Olivebranch preparada, vamos abrir a versão incompleta da
homepage. Vamos criar links e escolher uma cor e uma imagem para o background (de fundo), e um
título para a página de tal forma que ela fica como a versão completa.
Para abrir a homepage parcialmente completa no Dreamweaver:
1. Na janela Site, dê um duplo clique em DW2_index.htm.
2. Feche a janela Site.
Definindo a cor e a imagem do Background
Se você usar tanto uma imagem como uma cor para o background, a cor aparecerá enquanto a imagem
estiver sendo baixada, criando um background mais atrativos para os usuários enquanto eles esperam a
imagem ser baixada. Se a imagem do background tiver pixels transparentes, a cor do background será
mostrada através deles.
Para definir uma cor de background para a página:
1. Escolha Modify > Page Properties para abrir a caixa de diálogo Page Properties.
2. Altere a cor padrão do background digitando #FFFCC no campo Background. Neste caso, você
sabe a cor exata que você deseja. Mas você também pode escolher uma cor da paleta ou usar o
“conta gotas” para escolher uma cor de um objeto qualquer na página.
3. Clique Apply para aplicar a cor do backgorund. Assim que você clicar Apply na caixa de diálogo
Page Properties, a página é atualizada na janela Document.
Agora, vamos especificar uma imagem para o backgrund da página:
1. Próximo ao campo Background Image, clique em Browse.
2. Selecione home_bg.jpg na pasta Assets da pasta Olivebranch_site.
10
Tutorial Macromedia Dreamweaver 2
3. Clique Apply para adicionar a imagem do background à página.
4. Deixe a caixa de diálogo Page Properties aberta por enquanto.
Depois destes passos, a nossa página deve estar assim:
11
Tutorial Macromedia Dreamweaver 2
Definindo o título da página.
; O título de uma página HTML é uma de suas partes mais importantes. O título deve
ajudar ao usuário, dizendo a ele o que está prestes a aparecer enquanto o resto da
página carrega no browser, além disso, é este título que identificará a página no
histórico e na lista de bookmarks. Se você não nomear uma página, ela aparecerá na
janela do browser e nas listas de histórico e bookmark como Untitled Document, ou
Sem Nome se seu browser estiver em português.
Para definir um título para a página:
1. No campo Title da caixa de diálogo Page Properties, digite Olivebranch Gourmet Foods, como
título da página, e então clique OK. A barra de título é atualizada para refletir o nome que você deu
ao arquivo.
2. Escolha File > Save para salvar as alterações feitas.
Criando um mapa do site.
Uma mapa do site provê uma representação de alto nível da estrutura do site. Além disso você pode
usar o mapa para adicionar novos arquivos para o site, para adicionar, remover e alterar links. Outro
recurso muito interessante é que você pode transformar este mapa em uma imagem bitmap, para usar
no próprio site ou imprimir.
O homepage de um site sempre aparece no topo do mapa; abaixo dela estão as páginas para as quais ela
possui links. Se a pasta que você definiu como caminho do site tiver um arquivo chamado index.htm, o
Dreamweaver irá automaticamente usá-la como homepage; como a homepage de nosso site
My_Tutorial é chamada DW2_index.htm, iremos redefinir a homepage enquanto alteramos a aparência
do mapa do site.
12
Tutorial Macromedia Dreamweaver 2
Para criar um mapa do site:
1. Na janela Site, pressione e mantenha o ícone Site Map que está no canto superior esquerdo e
escolha Map and Files do menu pop-up.
A janela Site agora aparece dividida em dois “views” de seu local site: na esquerda a árvore do mapa
do site representando a estrutura completa do site Olivebanch (com index.htm como a homepage), e na
direita está a lista de arquivos que nós já conhecemos.
Agora vamos redefinir a homepage do site para que seja usada a versão do tutorial ao invés da versão
completa.
Para trocar a homepage e modificar a aparência do mapa do site:
1.
Escolha View > Layout no menu da janela Site para abrir a caixa de diálogo Site Definition.
2. Selecione Site Map Layout na lista Category da caixa de diálogo Site Definition.
3. Especifique a nova homepage do site clicando na pasta próxima ao campo Home Page e navegando
para DW2_index.htm na pasta Olivebranch_site da pasta Tutorial.
13
Tutorial Macromedia Dreamweaver 2
4. Para termos 3 colunas digite 3 em Number of Columns.
5. Clique OK para fechar a caixa de diálogo Site Definition e retorne à janela Site.
O mapa do site é atualizado para refletir as mudanças, com a versão do tutorial como homepage no
início do mapa.
Por enquanto, a versão tutorial da homepage contém apenas um link. Logo vamos estar adicionando
mais links a ela.
6. Deixe a janela Site aberta por enquanto, assim você pode ver como o mapa do site é atualizado a
medida que você vai adicionando links à homepage.
14
Tutorial Macromedia Dreamweaver 2
Criando Links
As imagens na coluna esquerda da homepage guiam os visitantes através do site Oliverbranch. A
imagem do topo, about, já “linka” (permitam-me o aportuguesar esta palavra como sinônimo de “tem
um link para”) para a página apropriada do site. Você adicionará links para os outros gráficos, events e
catalog para que eles também linkem para as páginas apropriadas. ( Nós não vamos trabalhar com a
imagem gift basket.)
Primeiro adicione um link do gráfico events para a página Events usando o Property inspector.
Para criar um link usando o Property inspector:
1. Clique a barra de título da janela Document que contém DW2_index.htm para torná-la ativa, ou
selecione o nome do arquivo no menu Window.
2. Clique na imagem events para selecioná-la na janela Document.
Nota: Não dê um duplo clique na imagem, ou o Dreamweaver pedirá para você escolher outro arquivo
para substituir a imagem.
3. Escolha Window > Properties para abrir o Property inspector se ele ainda não estiver aberto.
O Property inspector mostra informações sobre a imagem selecionada.
4. No Property inspector, clique na pasta próxima ao campo Link, que está vazio.
5. Na caixa de diálogo Select HTML File, navegue até a pasta Olivebranch_site, escolha
DW2_events_main.htm, e clique Select. Este arquivo aparece no campo Link do Property
inspector.
Agora vamos adicionar um link ao gráfico catalog de uma outra forma, usando o Property inspector e a
janela Site.
1. Clique na barra de título da janela Site para torná-la ativa.
2. Redimensione a janela Document, se necessário, de tal forma que você possa posicionar o lado
esquerdo da janela Document e a Janela Site lado a lado.
15
Tutorial Macromedia Dreamweaver 2
3. Clique na imagem catalog para selecioná-la na janela Document.
4. No Property inspector, arraste o ícone point-to-file (aponte para arquivo), localizado próximo ao
campo Link para a janela Site e aponte o arquivo DW2_cat_main_index.htm
O caminho completo para o arquivo aparece no campo Link no Property inspector para a imagem
catalog.
Assim que você solta o botão do mouse, o mapa do site é atualizado para refletir o link que você
adicionou.
16
Tutorial Macromedia Dreamweaver 2
Um sinal de adição (+) próximo a qualquer ítem do mapa do site indica que há mais ítens associados a
ele. Clique no sinal de adição para expandir a árvore assim você verá os ítens associados; clique no
sinal de subtração (-) para diminuir a visualização do mapa do site.
5. Feche o Property inspector, mas deixe a janela Site aberta.
6. Escolha File > Save para salvar as alterações feitas na home page.
7. Escolha File > Close para fechar a página.
17
Tutorial Macromedia Dreamweaver 2
3) Criando um lay-out de página complexo
Assim como a homepage Olivebranch, a página About Us possuiu um arquivo tutorial relacionado que
já foi iniciado para você. Vamos completar a versão tutorial desta página, de forma que seu lay-out seja
igual ao da versão completa.
Vamos começar abrindo a versão completa da página About Us em um browser pois assim você pode
ir observando-a enquanto trabalha na versão tutorial.
Para visualizar a versão terminada da página About Us em um browser:
1. Escolha File > Open e selecione about_main.htm na pasta Olivebranch_site dentro da pasta tutorial.
Não edite esta página, pois ela pertence ao site terminado.
2. Escolha File > Preview in Browser e selecione um browser 4.0 ou superior.
Deixe a janela do browser aberta para que você possa observá-la mais tarde.
3. No Dreamweaver, escolha File > Close para fechar a janela Document que contém a versão
terminada da página About Us.
Agora, vamos abrir a versão parcialmente completa da página About Us para editá-la no Dreamweaver.
Na janela Site do Dreamweaver, dê um duplo clique no arquivo DW2_about_main.htm.
18
Tutorial Macromedia Dreamweaver 2
Convertendo uma tabela em camadas (Layers)
Tabelas são muito úteis na criação de lay-out de páginas, além disso elas são suportadas em browsers
3.0 e superiores. Camadas são mais úteis ainda na criação de lay-out complexos, pois você pode
reposicionar elementos que foram colocados em camadas simplesmente arratando-o para o seu lugar.
As camadas (layers) não são suportadas por browsers 3.0, entretanto com o Dreamweaver você pode
tomar vantagem das melhores características de camadas e tabelas, simplesmente convertendo um no
outro até que a página tenha o formato que você deseja. Depois que você chegar no lay-out desejado,
você pode convertê-la em formato de tabela, de forma que ela seja visualisada em qualquer browser.
A página About Us foi iniciada utilizando uma tabela para formatá-la. Vamos iniciar convertendo as
células da tabela existente em camadas (layers).
Para converter células de uma tabela em camadas:
1. Escolha Modify > Layout > Reposition Content Using Layers.
2.
Na caixa de diálogo que aparece, retire a seleção das opções Show Grid e Snap to Grid, deixando
as outras opções selecionadas. A opção Show Grid mostra uma grade e a opção Snap to Grid força
as camadas a grudarem na linha mais próxima da grade quando você as cria ou modifica. Embora
isso ajude você a alinhar elementos, neste caso irá impedir que você mova as camadas (layers)
livremente na página como você precisa.
3. Clique em OK para fechar a caixa de diálogo e fazer a conversão.
As células da tabela tornam-se camadas e a paleta Layers aparece para ajudá-lo a controlar todas as
camadas da página atual.
19
Tutorial Macromedia Dreamweaver 2
Adicionando uma Tacing Image (imagem de traçado) para guiar o lay-out
Você pode usar uma imagem JPG, GIF ou PNG como guia para criar uma página web que você
primeiro diagramou em um aplicativo gráfico (como o Adobe Photoshop e o Macromedia Fireworks).
Uma Tracing Image age como um guia de fundo enquanto você diagrama a página na janela
Document. Você irá usar uma Tracing image para posicionar as camadas no documento About Us para
que o design da página seja igual ao da imagem abaixo dela.
Para carregar uma tracing image:
1. Escolha View > Tracing Image > Load.
2. Selecione about_us_comp.gif na pasta Assets, e então clique Select.
3. Na caixa de diálogo Page Properties, use o deslizador Image Transparency para ajustar a
opaticidade da tracing image para 50%.
Ajustando o nível de transparência para 50% faz com que a tracing image apareça apagada na janela
Document, tornando mais fácil para você distinguir entre a tracing image e os elementos editáveis da
página.
4. Clique em OK para adicionar a tracing image e fechar a caixa de diálogo.
Uma imagem, a tracing image, aparece na área de trabalho e as camadas (layers) existentes
aparecem em frente a ela, mas ainda não alinhadas com a tracing image. (Se nenhuma imagem
apareceu, certifique-se de que há uma marca de checagem próximo a Show quando você escolhe o
menu View > Tracing Image > Show.)
20
Tutorial Macromedia Dreamweaver 2
Quando você carrega uma tracing image, a imagem e a cor do background não estão visíveis na janela
do Documento mas aparecerá quando você visualizar a página em um browser.
A tracing image só é visível enquanto você está editando a página na janela Document e nunca
aparecerá quando a página é carregada em um browser.
Posicionando as camadas
Agora mova as camadas que foram criadas a partir da tabela para cima dos seus respectivos lugares na
tracing image.
Para posicionar as camadas na página:
1. Clique na borda da camada (layer) que contém o texto sobre a Olivebranch para selecioná-la. Uma
camada selecionada parece com esta:
2. Pressione o botão do mouse sobre a alça da camada e o mantenha pressionado (ou use as teclas de
setas) para mover esta alça sobre o texto genérico na tracing image, redimencione a camada se
necessário, para que ela tenha o mesmo tamanho da área do bloco de texto na tracing image.
Como os dois blocos contém textos diferentes, as palavras não se alinharão perfeitamente sobre a
tracing image, mas como a tracing image aparece somente na área de trabalho, o texto da camada
aparecerá normalmente em um browser.
21
Tutorial Macromedia Dreamweaver 2
3. Siga os mesmos passos para a camada contendo a letra O e a posicione sobre a letra O da tracing
image.
Adicionando novas camadas
Agora vamos adicionar novas camadas para as outras partes da tracing image que não aparece na sua
página.
Para adicionar novas camadas na página:
1. Clique em uma área “em branco” (sem nenhum objeto) na janela Document.
Certifique-se de que o cursor não está dentro de uma camada já existente, ou você criará camadas
aninhadas, o que não permitirá que você converta as camadas devolta em tabela.
2. Escolha Insert > Layer para adicionar uma nova camada na página.
3. Mova a camada para a área quadrada na tracing image que diz “Diana close-up photo.”
Como a opção Prevent Overlap (prevenir sobreposição) está selecionada na paleta Layer, você não
pode colocar camadas sobre outras. Você deverá redimensionar a camada para que ela possa ser
colocada em seu lugar, sem sobrepor outras.
4. Selecione a camada e a redimencione, conforme necessário, para que ela se ajuste na área
correspondente da tracing image.
5. Repita estes passos para adicionar mais camadas sobre as áreas da tracing image nomeadas “Farm
photo (with daughter)”and “Tree photo.”
Adicionando imagens
Agora, vamos inserir figuras dentro de cada uma das camadas, e então alinhar estas figuras com a
tracing image.
22
Tutorial Macromedia Dreamweaver 2
Para inserir uma figura dentro de uma camada e alinhá-las à tracing image:
1. Dê um clique dentro da camada “Diana close-up photo”para posicionar o cursor dentro da camada
sem selecioná-la.
Uma camada ativa com o cursor inserido dentro dela se parece com esta:
2. Escolha Insert > Image e selecione about_diana.jpg na pasta Assets para adicionar a imagem na
camada.
3. Depois que a imagem apareceu na camada, clique na borda da camada para seleciona toda a
camada, então use as teclas de setas para alinhar a figura sobre a tracing image. (Se for necessário,
redimencione novamente a camada para que ela se ajuste perfeitamente na área respectiva da
tracing image.)
4. Repita estes passos, adicionando a imagem About_daughter.jpg da pasta Assets para a camada
“Tree photo”.
5. Feche a paleta Layer
Convertendo camadas em tabelas
Agora que já terminamos com a diagramação desta página, vamos converter as camadas em tabelas
para que esta página possa ser visualizada tantos em browser 3.0 quanto superiores.
23
Tutorial Macromedia Dreamweaver 2
Para converter todas as camadas em uma tabela:
1. Escolha Modify > Layout > Convert Layers to Table.
2. Clique OK na caixa de diálogo Convert Layers to Table para aceitar as configurações padrão.
O Dreamweaver não pode criar uma tabela a partir de camadas que se sobrepõem, foi por isso que
usamos a opção Prevent Overlap para impedir esta sobreposição, quando criamos as camadas a
partir da tabela original.
Agora vamos visualizar a página About Us que acabamos de editar.
Para visualizar a página em um browser:
1. Pressione F12 para ver o documento no web browser padrão.
Não é necessário salvar um documento antes de visualizá-lo. Todas as funções relativas ao browser
irão funcionar neste preview.
2. Compare o arquivo que acabamos de editar com a versão completa que foi aberta no início da lição.
24
Tutorial Macromedia Dreamweaver 2
Se você fechou “acidentalmente” a janela do browser, a versão completa é about_main.htm.
3. Quando terminar de compará-las, feche ambas as janelas do browser.
4. Retorne ao Dreamweaver e escolha File > Save para salvar as mudanças feitas na página About Us.
5. Escolha File > Close para fechar a página.
25
Tutorial Macromedia Dreamweaver 2
4) Editando uma tabela
A página Olivebranch Events mostra concertos, demonstrações e festivais patrocinados pela nossa
fazenda. Estes eventos são mostrados em uma tabela que descreve a localização, data e natureza de
cada evento.
O arquivo tutorial para a página Events contém a tabela de eventos completa. Vamos editar esta tabela
movendo as colunas e ordenando as informações contidas nas células.
Para abrir a página tutorial Events:
1. Na janela Site, dê um duplo clique no arquivo DW2_events_main.htm.
Se você não encontra a janela Site, escolha Windows > Site Files para abri-la ou torná-la ativa.
A tabela na página se parece com esta:
2. Mantenha a janela Site aberta mas minimizada.
Formatando a Tabela
Vamos mover a coluna Where do lado direito da tabela para o esquerdo, para torná-la a primeira coluna
da tabela.
Para mover colunas dentro de uma tabela:
1. Clique a célula Where no topo da coluna, mantenha o botão pressionado e arraste o ponteiro do
mouse para a última célula da coluna para selecionar toda a coluna.
Uma forma que eu considero mais fácil para selecionar toda a coluna é mover o ponteiro do mouse
exatamente sobre a borda superior da coluna, quando o ponteiro tornar-se uma seta de seleção,
clique e você terá toda a coluna selecionada. Apenas tome o cuidado de só clicar o botão do mouse
quando o ponteiro mudar, senão ao invés de selecionar somente a coluna você vai selecionar toda a
tabela.
26
Tutorial Macromedia Dreamweaver 2
2. Escolha Edit > Cut.
3. Clique dentro da célula When. (Não selecione a célula, apenas posicione o ponteiro dentro dela).
4. Escolha Edit > Paste.
Se tudo correu bem, agora a coluna Where é a primeira da tabela.
Ordenando a tabela
Vamos então colocar a tabela em ordem alfabética pela localização.
Para ordenar células em uma tabela:
1. Clique em qualquer lugar dentro da tabela e escolha Commands > Sort Table.
2. Na caixa de diálogo Sort Table, especifique as seguintes opções:
•
Sort By: Column 1
•
Order: Alphabetically Ascending
•
Then By: Column 2
•
Order: Numerically Ascending.
27
Tutorial Macromedia Dreamweaver 2
A primeira ordem (Sort By) ordena a tabela alfabeticamente, de acordo com o conteúdo da primeira
coluna. A segunda ordem (Then By) ordena a tabela numericamente pelo conteúdo da segunda coluna.
3. Clique OK para ordenar a tabela.
Agora vamos formatar a tabela centralizando o conteúdo das células da coluna When.
Para centralizar o conteúdo das células de uma tabela:
1. Clique na primeira célula abaixo do cabeçalho When, mantenha o botão pressionado e arraste o
mouse para a última célula desta coluna.
2. Escolha Modify > Selection Properties para abrir o Property inspector.
3. Se você não ver o menu Horz no Property inspector, clique na seta expansora no canto inferior
direito para mostrar uma lista completa de propriedades.
4. Escolha Center no menu Horz.
O conteúdo das células da coluna When é centralizado.
28
Tutorial Macromedia Dreamweaver 2
5) Formatando textos usando estilos
Um estilo é um grupo de atributos de formatação que controla a aparência de um bloco ou mais de
texto. No Dreamweaver os estilos funcionam basicamente com nas ferramentas de desktop
publishing como o Adobe Pagemaker. Alguns editores de texto como o Microsoft Word também
possuem a capacidade de formatação por estilos. Por isso eu acho que você já deve estar
acostumado a utilizá-los. O Dreamweaver armazena todos os estilos de um documento em um
planilha (Style sheet).
Vamos criar um estilo personalizado para formatar os cabeçalhos da tabela na página Events.
Para criar um estilo personalizado:
1. Escolha Window > Estilos para abrir a paleta Estilos.
2. Clique em Style Sheet para abrir a caixa de diálogo Edit Style Sheet.
3. Clique em New na caixa de diálogo Edit Style Sheet.
4. Certifique-se de que para Type está selecionada Make Custom Style (class).
5. Digite .tablehead para o nome do novo estilo e clique OK.
29
Tutorial Macromedia Dreamweaver 2
6. Selecione Type na lista que está na esquerda da caixa de diálogo Style Definition. Use as seguintes
configurações para formatar o novo estilo:
•
Font: Arial, Helvetica, sans-serif
•
Size: 18 points
•
Style: normal
7. Clique em OK para fechar esta caixa de diálogo.
8. Clique em Done para fechar a caixa de diálogo Edit Style Sheet, que agora mostra o estilo
.tablehead.
; Bem eu disse na introdução que não gostava daqueles tutorias que só mandar fazer
sem explicar porque fazer desta forma ou usar esta opção. Nos passos para a
criação de um estilo nós usamos o Custom style sem eu explicar porque. Em
outros locais deste tutorial eu já acrescentei várias informações a mais. Agora nos
deparamos com outro problema: para explicar sobre esta questão terei que utilizar
conceitos que vão além deste tutorial, pois tratam do código HTML e de algumas
de suas definições. Se você se considerou satisfeito com esta explicação, muito
obrigado. Senão, no final do tutorial você vai encontrar um apêndice, no qual eu
faço estas explicações, supondo que você já conhece, pelo menos o básico, sobre
o código HTML.
Agora vamos usar a paleta Style para aplicar o estilo .tablehead ao cabeçalho das tabelas na página
Events.
Para aplicar um estilo personalizado:
1. Na janela Document, selecione as três células cabeçalho da tabela mantendo a tecla Control
pressionada enquanto você clica sobre cada uma delas.
2. Clique em .tablehead na paleta Style.
As células mostram o novo estilo no documento.
30
Tutorial Macromedia Dreamweaver 2
3. Feche a paleta Estilo
4. Salve as alterações feitas na página Events escolhendo File > Save.
5. Escolha File > Close para fechar a página.
31
Tutorial Macromedia Dreamweaver 2
6) Aplicando um modelo (template)
Você pode usar modelos para criar documentos para o seu site que tenham uma estrutura e aparência
comum. Modelos são úteis se você quer ter certeza de que todas as página em um site compartilhem
certas características.
Quando você aplica um modelo a um grupo de páginas, você pode editar a informação em todas estas
páginas simplesmente editando o modelo e então reaplicando-o a estas páginas. Ou seja, ao invés de
editar todas as páginas, uma a uma, você altera apenas o modelo e depois solicita ao Dreamweaver que
faça as alterações em todas as páginas em que este modelo foi aplicado. Isto não significa que todas as
páginas são idênticas, você pode definir o que faz parte do modelo e o que é característico de
determinada página. Tais itens permanecerão inalterados, garantindo a integridade das páginas.
A página Olivebranch Catalog possui links para várias páginas de produtos que descrevem produtos
individuais que a companhia oferece para a venda. Como todas estas páginas usam um lay-out idêntico,
elas foram criadas usando um único modelo.
Neste capítulo, vamos modificar um modelo existente para modificar as páginas de produtos que têm
este modelo. Depois disto, vamos aplicar um modelo diferente a estas páginas para reformatá-las sem
alterar seus conteúdos individuais.
Vamos começar vendo as versão completa das páginas do catálogo em um browser.
Para abrir a página Olivebranch Catalog completa:
1. Escolha File > Open e selecione cat_main_index.htm
2. Escolha File > Preview in Browser para abrir a página na janela do browser.
3. Clique nos links para wines, cheeses, mustards e oils para ver as páginas dos produtos.
Note que todas as páginas dos produtos compartilham a mesma barra de navegação no topo da
página. Em adição aos links para as páginas dos produtos, a barra de navegação inclui um link para
a página Catalog principal e (no gráfico mais a direita da barra) um link devolta à homepage
Olivebranch.
4. Feche o browser quando tiver terminado de visualizar as páginas.
5. Retorne ao Dreamweaver e escolha File > Close para fechar a versão completa da página Catalog.
Agora vamos abrir as páginas do catálogo parcialmente completas.
1. Mova a janela Site para o primeiro plano escolhendo Window > Site Files.
2. Encontre o arquivo DW2_cat_main_index.htm na lista e de um duplo clique par abri-lo na janela
Document.
32
Tutorial Macromedia Dreamweaver 2
3. Pressione F12 para visualizar a página tutorial Catalog em um browser
4. Clique nos links wines, cheeses, mustards, e olis para ver as páginas dos produtos com as quais
estamos trabalhando.
Assim como na versão completa, todas as páginas dos produtos utilizam o mesmo modelo, e por
isso parecem tão semelhantes. Neste caso entretanto, falta nestas páginas o link para a página
principal do catálogo e o gráfico no topo que linka para a homepage Olivebranch.
5. Depois de explorar as páginas, feche a janela do browser.
6. Retorne ao Dreamweaver e escolha File > Close para fechar a página principal do catalogo.
Editando o modelo
Agora vamos modificar o modelo das páginas de produtos para consertar a barra de navegação (pois
estão faltando dois links). Depois de fazer as mudanças no modelo, vamos reaplicar o modelo às
páginas dos produtos para que a barra de navegação seja atualizadas em todas estas páginas.
Para abrir o arquivo do modelo da janela Document:
Na janela Site, de um duplo clique em DW2_cat_product.dwt que está na pasta Templates da pasta
Olivebranch_site.
Cada modelo possui regiões “travadas” e editáveis. As regiões travadas só podem ser editadas dentro
do modelo; elas aparecem realçadas nas páginas em que o modelo é aplicado. Regiões editáveis são
“containers” para o conteúdo que é exclusivo a cada página a que o modelo é aplicado. No modelo, as
regiões editáveis estão realçadas.
É assim que o tutorial da Macromedia explica sobre modelos. Se você compreendeu, vá para o próximo
parágrafo, senão vou tentar explicar novamente, de outra forma. Pra começar vamos lembrar que em
um modelo existem regiões comuns à todas as páginas, estas são as regiões chamadas “travadas”
(locked). Elas têm este nome porque você não pode editá-las nas páginas que usam este modelo. Nestas
páginas, elas estão realçadas. Existem também regiões que são exclusivas de cada página. Por exemplo,
neste tutorial existe uma região que possui a descrição do produto desta página, assim vinho tem sua
própria descrição, óleos a sua, etc. Estas regiões são chamadas de “editáveis” pois você deve editá-las
uma a uma em cada página. Quando você estiver trabalhando na página que servirá de modelo às
outras, as regiões editáveis é que estarão realçadas. É isso aí, espero não ter confundido mais ainda!
33
Tutorial Macromedia Dreamweaver 2
Neste modelo, a barra de navegação está em uma região travada, enquanto as áreas para as fotos e
textos dos produtos são editáveis para cada página de produto.
Vamos então editar o modelo, primeiro vamos inserir um link para a figura catalog, depois vamos
adicionar uma nova figura no canto superior direito da página e inserir um link para a homepage
Olivebranch.
Para inserir um link na figura catalog:
1. Dê um clique sobre a figura catalog.
2. Se o Property inspector não estiver visível, Escolha Window > Properties para abri-lo.
3. No Property inpector, clique na pasta perto do campo Link e selecione o arquivo
DW2_cat_main_index.htm na pasta Olivebranch_site.
4. Deixe o Property inspector aberto.
Quer uma dica, deixe nunca feche o Property inspector, ele é bastante útil. Como você já deve ter
percebido, sempre que você clica em um elemento da página ele muda para mostrar as propriedades
deste elemento. Assim você economiza tempo. Se durante o resto do tutorial aparecer um Feche o
Property inspector, eu sugiro que você pule este passo. Vou colocá-los para seguir tudo como está
no tutorial Macromedia.
Para inserir um gráfico e linká-lo a homepage:
1. Clique dentro da célula vazia à direita da figura catalog.
2. Escolha Insert > Image e selecione cat_nav_photos.jpg na pasta Assets.
Uma figura como esta aparece na célula.
34
Tutorial Macromedia Dreamweaver 2
3. Verifique se a figura que você adicionou ainda está selecionada (Se não estiver, selecione-a dando
um clique em cima dela).
4. No Property inpector, clique na pasta perto do campo Link e selecione o arquivo DW2_index.htm
da pasta Olivebranch_site.
5. Feche o Property inspector.
Agora que o modelo está completo, vamos reaplicá-lo às paginas dos produtos.
Para reaplicar o modelo às páginas dos produtos do catálogo:
1. Escolha File > Save para salvar suas mudanças.
2. Quando você for perguntado se deseja atualizar todos os documentos no seu site local que usam
este modelo, clique em Sim (Yes).
Uma caixa de diálogo Update Pages aparece e mostra o status das páginas do site enquanto o
modelo é reaplicado.
3. Depois de todas as páginas serem atualizadas, feche a caixa de diálogo Update Pages.
Como a página principal do catálogo (Catalog) contem links para cada uma das páginas de produtos do
site, você pode usá-la para ver como ficaram as páginas modificadas. Para isso, abra esta página em um
browser, e clique nos links.
Para ver as páginas dos produtos atualizadas:
1. Dê um duplo clique sobre DW2_cat_main_index.htm na janela Site para abri-la na janela
Document.
2. Pressione F12 para visualizar as páginas em seu browser padrão. Para ver em outro browser,
escolha File > Preview in Browser, e escolha um browser diferente.
3. Explore os links para as páginas dos produtos (wines, cheeses, mustards e oils).
4. Em cada uma das páginas dos produtos clique nos links para a página Catalog e para a homepage
na barra de navegação para ver como as alterações feitas no modelo afetaram todas as páginas.
5. Feche o browser quando tiver termindado de testar os links.
6. Retorne ao Dreamweaver e escolha File > Close.
Aplicando um modelo diferente a uma página
Você pode aplicar um novo modelo à uma página mesmo que ela já use um outro modelo. O conteúdo
desta página permanece sem alterações desde que o novo modelo tenha os mesmos nomes para as
regiões editáveis que o modelo usado previamente por elas tinha.
Esta técnica é útil quando você quer mudar a aparência de um grupo de página sem alterar o conteúdo
exclusivo de cada uma delas. Por exemplo, um catálogo deve ter uma versão para o inverno e uma para
35
Tutorial Macromedia Dreamweaver 2
o verão. Você pode criar um design totalmente novo sem editar o conteúdo usando um modelo
diferente para mudar as imagens de background e as cores da página, ou ainda rearranjar as posições
das regiões editáveis.
Aqui nós vamos aplicar o modelo de inverno para a página de um produto, mudando sua aparência para
a nova estação.
Para aplicar um novo modelo a uma página existente:
1. Na janela Site, dê um duplo clique em DW2_cat_wines_flc.htm para abrir a página de vinhos na
janela Document.
Seções da página que estão realçadas em uma cor diferente identificam regiões travadas que só podem
ser editadas no modelo utilizado para esta página. (Se você não vê nenhuma diferença de cores entre as
regiões da página, escolha Edit > Preferences, selecione Highlighting da lista Category e selecione a
opção Show próxima a Locked Regions. Se ainda você não consegue ver as regiões realçadas, escolha
View > Invisible Elements
2. Escolha Windows > Templates para abrir a paleta Template.
A paleta Template contém uma lista de todos os arquivos de modelos (dwt) no site local, localizado
na pasta Templates da pasta Olivebranch_site.
3. Na paleta Template, clique em cat_product_winter.dwt para realçá-la na lista.
36
Tutorial Macromedia Dreamweaver 2
4. Redimensione a paleta Template para visualizar o modelo inverno (winter) dentro dela.
O modelo de inverno tem um design diferente do modelo que atualmente é utilizado nas páginas
dos produtos, mas como ele contém as mesmas regiões editáveis que o modelo atual, você pode
aplicá-lo à página sem perder nenhuma informação.
5. Clique em Apply to Page para aplicar o modelo de inverno para na página de vinhos (wines).
6. Feche a paleta Template.
7. Pressione F12 para visualizar a nova página de vinhos em um browser.
8. Quando você terminar de visualizar a página, feche a janela do browser e retorne ao Dreamweaver.
9. Se preferir, você pode escolher File > Save para salvar as mudanças que foram feitas na página de
vinhos (wines); os links do site trabalharão independentes do modelo aplicado à página.
37
Tutorial Macromedia Dreamweaver 2
10. Escolha File > Close para fechar a página.
38
Tutorial Macromedia Dreamweaver 2
7) Unindo “Behaviors” a elementos da página.
Até aqui nós utilizamos ferramentas que, em certo grau, estão disponíveis em outros bons editores
HTML. Neste capítulo, você vai encontrar ferramentas que, se não forem únicas no Dreamweaver, são
bem menos versáteis em outros editores. Este capítulo do tutorial dá apenas uma base, de como é
possível trabalhar com estas ferramentas. Espero acrescentar mais informações ao final.
Um behavior é a combinação de um evento e um ação. Eventos são situações que desencadeiam
ações. Por exemplo, um evento chamado onClick (no clique) pode ocorrer quando o usuário clica um
botão, ou um evento chamado onMouseOver (com o mouse sobre) pode ocorrer quando o ponteiro do
mouse passa sobre um objeto. Ações são pedaços de código JavaScript, já escrito, que fazem tarefas
específicas, como abrir uma janela de browser, tocar um som, ou parar um filme Shockwave.
Quando você une um behavior a um elemento da página, você especifica tanto uma ação quanto o
evento que a chama. O Dreamweaver oferece várias ações pré definidas que você pode unir a
elementos da página. Além disso você pode acrescentar novas ações.
Aqui, vamos aplicar a ação de Swap Image (trocar imagem) para as figuras about, events e catalog de
tal foma que as imagens pareçam clarear quando o mouse passa sobre elas (ou seja, quando o evento
onMouseOver ocorrer). Por exemplo, a figura about aparece na página normalmente assim:
Depois de definido um behavior que inclue a ação de Trocar Imagem durante o evento onMouseOver, a
figura about se tornará como esta (uma versão realçada da imagem original) quando o mouse estiver
sobre ela:
Vamos começar reabrindo a homepage que editamos antes no tutorial e então unindo um behavior a
elementos gráficos específicos na página.
Para reabrir a página no Dreamweaver:
1. Ative a janela Site escolhendo Window > Site Files.
2. Dê um duplo clique sobre o arquivo da homepage DW2_index.htm para reabri-la na janela
Documento.
Para unir um behavior a um elemento gráfico na página:
1. Clique na figura about para selecioná-la na janela Document.
2. Escolha Window > Behaviors para abrir o inspetor Behavior, que lista todos os behaviors definidos
para o elemento selecionado (por enquanto não deve haver nenhum).
39
Tutorial Macromedia Dreamweaver 2
3. Adicione uma nova ação na lista clicando no sinal de Adição (+) e escolhendo Swap Image no
menu pop-up.
4. Na caixa de diálogo Swap Image, selecione a figura about da lista de figuras.
Esta é a figura original, que será substituída com uma imagem realçada quando o mouse estiver
sobre ela.
5. Clique no botão Browse que está próximo ao campo Set Source to e navegue até a imagem
nav_about_roll.gif na pasta Assets. Esta imagem substituirá a imagem ogirinal durante o evento
onMouseOver.
6. Aceite as opções padrão abaixo do campo Set Source to.
A opção Preload Images carrega a imagem que será trocada para o cache do browser quando a
página for carregada, desta forma não haverá uma pausa notável antes que a imagem realçada
apareça na primeira vez que o usuário mover o mouse sobre a figura about.
A opção Restore Images onMouseOut automaticamente insere a ação Swap Image Restore para o
evento OnMouseOut para esta imagem. Com isto quando o ponteiro do mouse sair de cima da
imagem a figura original será restaurada.
7. Clique em OK para fechar a caixa de diálogo Swap Image e aplicar as mudanças que foram feitas.
O inspetor Behavior agora inclue os eventos e as ações que foram definidas para esta imagem. O
evento onMouseOver aparece com a ação Swap Image; acima disto o evento onMouseOut com a
ação Swap Image Restore, que foi definida por você quando você aceitou as opções padrão
enquanto configurava a ação Swap Image.
40
Tutorial Macromedia Dreamweaver 2
8. Repita estes passos para unir a ação Swap Image e o evento onMouseOver para as figuras events e
catalog:
•
Substituia a figura events com a figura de troca nav_events_roll.gif.
•
Substituia a figura catalog com a figura de troca nav_catalog_roll.gif
9. Feche o inspetor Behavior.
Para visualizar as alterações:
1. Pressione F12 para visualizar a página em um browser.
2. Mova o ponteiro do mouse sobre as figuras about, events e catalog. Veja o que acontece.
Quando teminar, feche a janela do browser e salve.
3. Retorne ao Dreamweaver e salve suas alterações escolhendo File > Save.
41
Tutorial Macromedia Dreamweaver 2
Sem o Dreamweaver você teria que escrever todo o código em Java Script para que a troca das imagens
fosse feita. Só para você ter uma idéia do trabalho que o Dreamweaver lhe poupou eu escrevi abaixo
um exemplo de código JavaScript para a troca e destroca das imagens e o carregamento delas para o
cache:
<script language="JavaScript">
<!-function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++)
if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[')
==0 && document.all
==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>
E então? Se você tem um conhecimento médio sobre alguma linguagem de programação não vai ter
dificuldade em entender o código acima. Mas seja você um expert ou um iniciante, terá de admitir que
o Dreamwaver facilita muito o trabalho. Este tipo de interação proporciona um efeito profissional à sua
página.
E se eu disser que existe um jeito ainda mais fácil de fazer isso? Você vai responder: "Por que você não
usou ele logo de uma vez!" Simples, porque este capítulo do tutorial se propos a ensinar como usar
Behaviors. Mas eu vou dar umas dicas sobre este outro modo de fazer. Você deve usá-lo para inserir
uma nova imagem que terá estas características e não para atribuir eventos para uma imagem que já
esteja na página.
42
Tutorial Macromedia Dreamweaver 2
1. Escolha Insert > Rollover Image. Ou clique na última figura da janela
Objects:
2. Na caixa de diálogo Inser Rollover Image, no campo Original Image você deve localizar a imagem
padrão, ou seja, aquela que vai aparecer sem que o mouse esteja sobre ela.
3. No campo Rollover Image, coloque a localização da imagem que aparecerá quando o mouse estiver
sobre.
No campo Link você pode escolher um link para sua imagem quando o usuário clicar sobre ela. A
caixa Preload Images tem a mesma função que anteriormente.
43
Tutorial Macromedia Dreamweaver 2
8) Adicionando um filme Flash
A Versão completa da homepage Olivebranch inclue uma seção sobre produtos especiais da semana, na
qual os itens a serem vendidos aparecem e desaparecem gradualmente no canto direito da página.
; Um filme Flash é um tipo de animação vetorial amplamente utilizado na Internet,
ele permite a criação de vários efeitos, sem que o usuário tenha que esperar muito
tempo até que ele carregue. Se compararmos a mesma animação em uma gif
animada e em um filme Flash, o filme tem melhor qualidade e um tamanho
menor! Um inconveniente é que você tem que ter um plug-in instalado em seu
browser, mas as novas versões dos browsers já vêm com o plug-in necessário. Por
exemplo o Netscape Communicator 4.6 e o Microsoft Internet Explorer 5.0 dão a
opção para esta instalação.
Para saber mais sobre isso você pode dar uma olhada em:
http://www.macromedia.com/, para saber mais sobre os filmes flash e os
aplicativos capazes de criá-los ou, http://www.shockrave.com/para ver alguns
bons exemplos de filmes.
A seção "specials" na verdade contém duas camadas: A primeira contém a imagem estática "this week
specials", e a segunda (que sobrepõem-se a primeira) contém um filme Flash no qual os itens a serem
vendidos aparecem e desaparecem. A versão tutorial da página contém apenas a imagem estática; Por
isso vamos adicionar um filme Flash em uma camada no topo da camada da imagem estática para
recriar a seção "specials" como ela aparece na versão completa.
Como o fime flash estará em uma camada que se situa exatamente no topo da camada da figura week's
special, temos que desligar a opção Prevent Layer Overlaps (Prevenir Sobreposição de Camadas).
Para permitir a sobreposição de camadas:
1. Escolha Windows > Layers para abrir a paleta Layer.
2. Retire a seleção da opção Prevent Overlaps.
Agora vamos criar uma nova camada que receberá o filme Flash:
1. Escolha Insert > Layer.
2. Coloque o cursor dentro da nova camada clicando uma vez dentro dela.
3. Escolha Insert > Flash e selecione home_ticker.swf na pasta Assets.
A camada se expande para ajustar-se ao tamanho do filme Flash, representado por um retângulo
cinza.
44
Tutorial Macromedia Dreamweaver 2
Agora, vamos rodar o filme Flash na janela Document e alinhá-lo sobre a camada week's specials.
Para rodar o filme Flash dentro da janela Document:
Escolha View > Plugins > Play All.
Para alinhar o filme Flash sobre a camada week's specials:
1. Clique sobre a borda da camada para selecioná-la completamente e arrate-a pela aba até alinhá-la
sobre a camada "this week's specials".
O filme contém blocos de cores e uma linha horizontal que encaixa na figura estática. Use estas
características para guiá-lo enquanto você coloca a camada que contém o filme no topo da camada
da imagem estática.
Nota: Talvez o filme flash não seja igual em todas as resoluções de monitores. Se não for possível
alinhar a camada do filme com a camada da imagem estática, escolha Window > Properties para
abrir o Property inspector se ele não estiver aberto, e reconfigure as dimensões do filme Flash para
W 329, H 94.
As duas camadas devem então se parecerem com isto:
2. Escolha File > Save para salvar as alterações.
45
Tutorial Macromedia Dreamweaver 2
9) Confira o Site
Agora que você fez todas as mudanças necessárias às páginas do tutorial, reveja todo o site em um
browse para ver como ele se parece.
1. Com a homepage ainda aberta na janela Document, pressione F12 para abri-la em um browser.
2. Veja o filme Flash e então clique nas figuras about, events e catalog para ver as outras páginas que
foram editadas.
3. Quando você terminar de "contemplar" o site que você construiu, feche a janela do browser, e
retorne ao Dreamweaver. Escolha File > Close para fechar a homepage.
Parabéns, se tudo deu certo você já está pronto para criar totalmente se próprio site. Espero que você
tenha gostado do tutorial. Não deixe de conferir as novidades sobre o Dreamweaver, outras dicas sobre
a design de sites e conceitos sobre a web em: http://nib.unicamp.br/~richard.
46