Raphael Simas Segunda-feira, 21 de outubro de 2002
Navegadores de Imagens - Web Photo Album
Olá pessoal!
Tenho recebido vários emails há um bom tempo
com pedidos e dúvidas sobre vários tipos de
navegadores de imagem. Então, veremos hoje 3 tipos:
o primeiro com iframes, o segundo com camadas e o terceiro,
uma ferramenta do próprio dreamweaver (Web Photo Album).
Vamos lá!
---------------------------------------------------------------
01 - Veja AQUI
o Web Photo Album
02 - Veja AQUI
o Exemplo com iFrames.
03 - Veja AQUI
o Exemplo com Camadas.
04 - Baixe AQUI
os 3 exemplos.
05 - Agora, sobre os emails..... inúmeros
emails que eu respondo estão voltando... principalmente
de emails grátis.... então, vale uma atenção
de quem envia para este detalhe.
---------------------------------------------------------------
Criando o Navegador de Imagens "Web Photo Album":
O Dreamweaver possui uma ferramenta que nos
permite criar um álbum de fotos que consiste em uma
página "index" com amostras
pequenas de cada imagem. Ao clicar em alguma
dessas amostras, ela será mostrada em seu tamanho maior
e já terá um "mini" navegador com
as opções "Next", "Home"
e "Previous".
Para criar um álbum, basta então ir ao menu
COMMANDS>CREATE WEB PHOTO ALBUM. A seguinte tela será
apresentada:
---------------------------------------------------------------
01 - Photo Album Title: Nome do Album de
fotos que aparecerá no cabeçalho da index.
02 - Subheading Info: Um comentário
qualquer sobre o album.
03 - Other Info: Outras informações.
04 - Source Images Folder: Aqui, você deverá
indicar o local das fotos originais (fotos grandes).
05 - Destination Folder: Aqui, você
indicará o a pasta onde será gerada o Album.
Vale lembrar que serão gerados um arquivo index.htm
e 3 pastas (images, pages, thumbnails).
06 - Thumbnail Size: Indica o tamanho da
miniatura da imagem. Um bom valor é 72X72, lembrando
que se a imagem grande não for quadrada, será
diminuida proporcionalmente, ou seja, terá 72px horizontais,
mas a medida vertical dependerá da forma da imagem.
07 - Show Filenames: Com esta opção
marcada, o nome da imagem aparecerá na index, abaixo
de cada figura.
08 - Columns: Este valor indica quantas colunas
terá a index do album.
09 - Thumbnail Format: Aqui você indica
o formato de export a ser feito...
10 - Photo Format: A exemplo do item 09,
indica a qualidade da imagem grande.
11 - Scale: Indica o tamanho da imagem original...
por exemplo. Você tem uma imagem original com medida
100px X 100px. Neste campo Scale, você coloca 70%. Automaticamente,
o album de fotos gerará as imagens grandes com medida
70px X 70px.
12 - Create Navigation Page for Each Photo:
Traduzindo: Criar as páginas de navegação
para cada photo, ou seja, criar para cada foto os ítens
Next, Home e Previous.
---------------------------------------------------------------
Indicando as 12 opções, clique em Ok. Automaticamente,
o Fireworks será aberto e, através de um batch
script, todas as informações serão analisadas
e transformadas no album. Após o fim do processo de
criação das imagens grandes e das miniaturas,
uma mensagem aparece no Dreamweaver confirmando a criação
do album. Você notará que automaticamente será
criado um arquivo index.htm.
---------------------------------------------------------------
SUPER DICA:
Ao criar seu album de photo por
este processo, verá que o visual final será
bem básico. Se forem com poucas imagens, até
daria para passar página por página customizando
fontes, tabelas etc. Porém, se forem muitas fotos,
este processo página por página se torna totalmente
inviável. O que fazer para gerar o album já
com as configurações customizadas?
Basta modificar o arquivo com todo o script da criação.
Como defaut, o arquivo fica na pasta C:Arquivos de programasMacromediaDreamweaver
MXConfigurationCommands. O Arquivo se chama Create
Web Photo Album.js. Para modificá-lo, edite
pelo próprio dreamweaver. Depois, feche o programa
e o abra outra vez. Abaixo, listo algumas linhas onde modificamos
cores e fontes:
LINHA 355 a 358 / 430 a 434: Aqui, você
muda cores de tabelas e fundo; muda também configurações
de fontes etc. Para as fontes, adicione a TAG com a configuração
de fonte desejada.
E por aí vai. Analise o código com muita atenção.
Mas, claro, faça uma cópia do arquivo antes
para evitar qualquer imprevisto.. Afinal, o previnido morreu
de velho...
---------------------------------------------------------------
Com tudo, isso, você terá seu Album de Photo,
quase sem nenhum trabalho. Fica evidente o poder de interação
entre Dreamweaver e Fireworks. Surge um terceiro programa,
o Dreamworks hehehe..
Vamos ver agora, a criação manual de um album
de photos. Primeiro com iFrames.
Criando um Navegador de Imagens com iFrames:
Você deve estar notando na sequência
recente das colunas, várias aplicações
com iFrames.. Este recurso é muito legal e tem muitas
aplicações. Veremos agora mais uma.
Veja no início da coluna o exemplo com iframes. Veja
que à esquerda, temos uma tabela com a miniatura. Nestas
miniaturas temos o link para a foto que se abrirá dentro
do iFrame.
Veja no exemplo toda a tabelação. Com ela pronta,
inserimos o iFrame:
<iframe name="main"
leftmargin=0 topmargin=0 marginWidth=0 marginHeight=0 frameBorder=0
width=207 height=138 scrolling=no>
Veja que não temos o ítem SRC que indica o local
de onde seria carregada uma eventual página. Isso porque,
no exemplo, queremos que a tela se inicie sem mostrar nenhuma
foto. Se, no seu caso, uma foto tivesse que abrir, bastaria
indicar com o SRC o local da imagem ou do html. E outra coisa
que é fundamental!! o nome do iFrame. Sem ele, não
teremos os links abrindo dentro do iframe.
Com as miniaturas e o iFrame montado, linkaremos tudo agora..
Para fazer abrir dentro do iFrame, teremos que colocar no
campo "Target" o nome do iFrame (no exemplo, main).
Veja abaixo a aplicação para a figura 01:
Repetindo este processo para todas as figuras, você
terá seu album de fotos com iFrame. Mas o que acontece
é que, se tiver um grande némero de fotos, também
fica muito trabalhoso, sendo ainda mais prático, a
opção Create Web Photo Album. Veremos agora,
brevemente, a aplicação para as camadas, que
também serão muito trabalhosas. A camada é
a opção menos indicada para este caso, pois
para cada foto, teremos uma camada e, para tal, todas carregarão
da mesma página. Mesmo usando o Behavior Preload Images
para carregar todas as imagens antes, ficará demorado...
Falaremos das camadas apenas para mostrar mais um caminho
para a criação de um album de fotos.
Criando um Navegador de Imagens com Camadas:
Usaremos a mesma tabelação do
exemplo iFrames. Claro, excluiremos o iFrame e os links de
cada foto.
Criamos então, uma camada para cada foto. Lembre-se
de nomear cada camada de forma a não criar nenhuma
confusão com os behaviors.
Com todas as camadas criadas e suas respectivas
fotos inseridas, vamos linkar. Selecione a foto 01 e adicione
o behavior Show-Hide Layers, com "Show" para a camada
com a foto 01. Como evento do mouse, OnClick. Neste momento,
surge mais um problema. As camadas têm uma ordem de
sobreposição.. ou seja, as que estiverem por
baixo, não aparecerão em cima das outras, mesmo
deixando todas as camadas com Z-Index igual. Então,
para cada behavior, teremos que, não apenas indicar
a camada com Show com colocar todas as outras como Hide, para
que, ao clicar, todas as camadas sejam escondidas e só
então, seja mostrada uma delas, independente da ordem
de sobreposição...
Finalizando, dá para concluír que a melhor opção
é a Ferramenta do Dreamweaver Create Web Photo Album.
Se um trabalho exigir um acabamento legal e tiver poucas fotos,
podemos usar também os iFrames...
Bom, é isso pessoal. Um grande abraço à
todos a até a próxima semana.
Dica de Áudio:
Álbum: Venus Isle
Artista: Eric Johnson
Comentários: Um excelente
CD. Ótimas músicas pra criar idéias.
É um CD com muita guitarra... muito bom mesmo...