Web Desing Prático CS3

Web Desing Prático
CS3
Sumário
Introdução ........................................................................................................................................ 1
Instruções Iniciais ............................................................................................................................. 1
Criando Layout ................................................................................................................................. 3
Criando Elementos no Illustrator ................................................................................................... 12
Concluindo o Layout ....................................................................................................................... 14
Exportando o Layout ...................................................................................................................... 16
Adicionando Animação................................................................................................................... 17
Finalizando o Site............................................................................................................................ 22
Publicando o Site ............................................................................................................................ 30
Introdução
O que é Web Design?
É uma extensão da prática do design, onde o foco do projeto é a criação de web sites e
documentos disponíveis no ambiente da web. O Web Design tende à multidisciplinaridade, uma
vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do
design propriamente dito. Áreas como a programação, adoção de webstandards, inovações nos
recursos dos navegadores em conjunto com o design gráfico, estão em constante evolução
afetando diretamente esta atividade.
Produzir e manter um site requer dedicação constante do webmaster, pois a Internet
transforma-se com rapidez. A cada ano surgem novas tendências, padrões e tecnologias que
influenciam no desenvolvimento para web e também na sua utilização.
Instruções Iniciais
Um bom design baseia-se em princípios que permitem que a mensagem que seu site deve
passar seja da maneira mais agradável possível. Aperfeiçoar a percepção visual de uma
mensagem pode ser adquirido seguindo as leis de Gestalt*, resumindo-se em:




Atração: a distribuição coerente dos elementos na página do seu site causa melhor
atração visual.
Harmonia: todos os elementos de cor da página devem ser considerados como parte de
um todo, estabelecendo um relacionamento entre elas.
Equilíbrio: espalhar os componentes pela página de qualquer forma além de gerar
desconforto, deixa o layout horrível; tenha bom senso e distribua-os ordenadamente.
Simplicidade: permite fácil assimilação das informações agregando valor à sua página.
* Escola de Psicologia Experimental que realizou intensas pesquisas sobre percepção do homem
sobre as formas.
1
Forma, Função e Movimento
As imagens, cores e texturas possuem um determinado valor dentro de um contexto. Se você
for projetar um site para uma sorveteria ou lanchonete, certamente optará por usar muitas
cores ou apenas algumas mais vibrantes com boas imagens, que despertem o apetite. E se for o
site de um banco? Usar cores e imagens mais formais seria a saída. Pesquisas em outras mídias
como revistas e vídeos podem ajudar no momento de decidir as formas e cores de um projeto.
Veja a seguir algumas formas e suas características:
Quando se aplicam formas a um layout de página, gera-se movimento visual. Usar isso de
maneira adequada é fundamental para transmitir a mensagem desejada de forma clara e
objetiva.
Tenha isso em mente: Qual a mensagem principal da página e o que o visitante olhará de
imediato? Você consegue que ele olhe para o que você quer utilizando corretamente a
disposição dos elementos.
Estruturando o conteúdo
Ao projetar um site pessoal ou para algum cliente, é importante observar alguns aspectos do
planejamento como:



público (tipo de visitante do seu site).
conteúdo (o que você oferecerá aos visitantes).
suporte (como você ou o cliente administrará o site).
Um site de sucesso passa por uma pesquisa de público para definir com qualidade o seu
conteúdo e traça um plano de como isso será disponibilizado e administrado. Após concluir esse
processo inicial, é hora de "desenhar" a informação.
2
O tema proposto é Música. Sabemos que todos nós gostamos e que existem estilos diferentes,
uma grande indústria por trás dela e inúmeros títulos sendo lançados a cada dia. Criaremos um
site de música que atingirá qualquer pessoa, pois não se restringirá a um estilo ou região. O
conteúdo das páginas deve ser relativo ao tema, então propomos os seguintes assuntos:






notícias do meio musical.
letras de música.
álbum de fotos dos artistas.
vídeos musicais.
eventos musicais.
rádios.
Agora, devemos organizar esses assuntos. Você pode usar caneta e papel ou qualquer programa
para anotar e desenhar uma pré-estrutura de informações, relacionando os vínculos entre os
assuntos e sua ordem de importância. Isso é uma prévia criação dos links do site.
Criando Layout
Nessa lição, trabalhamos inicialmente com o Photoshop para criar a base do layout do site,
desenhando algumas formas, tratando imagens e inserindo uma prévia dos textos.
3
No exemplo acima, temos um layout com o azul como cor predominante, o logotipo do site com
fonte bastão/fantasia, um menu relacionando os principais itens do conteúdo, uma imagem
ilustrativa de uma jovem ouvindo música, uma barra de rádio online, um quadro de notícias, um
quadro com outras informações do conteúdo e um rodapé.
Usando o programa Photoshop criamos um novo arquivo, definindo o tamanho do layout de
778x732 pixels.
A largura de 778 corresponde ao tamanho máximo visível em um monitor com resolução
800x600. Utilizamos esse tamanho, pois é uma resolução mínima. Acima disso, o site sofrerá
cortes e dependerá do uso de barras de rolagem no browser.
O uso de 72 dpi se dá pelo fato das imagens do site ser para Internet sendo uma resolução
suficiente, em se tratando de qualidade. O padrão RGB é usado para qualquer tipo de trabalho
com finalidade de ser publicado na Internet ou usado em computadores. Esse padrão nunca
deve ser usado para impressão.
Clicando em OK, seu arquivo estará pronto para o início do trabalho.
Utilizamos a Gradient Tool para criar um fundo com gradiente entre 2 tons de azul.
Selecionamos essa ferramenta, alteramos a cor de frente (foreground) para 00619c e a cor de
trás (background) para 00273e.
Em seguida, mantenha a cor mais clara como a de frente, clique com o botão esquerdo do
mouse no topo da área de trabalho, segure, arraste até a base e solte o botão.
Foram criadas as seguintes pastas nesse arquivo do Photoshop: logotipo, menu, rádio, notícias,
quadro, rodapé e imagem de fundo.
4
Logotipo
Clique sobre a pasta logotipo e crie uma nova camada. A seguir, use a ferramenta texto
(Horizontal Type Tool) para digitar MusicWave (o nome do site), com fonte Abode, estilo Light,
tamanho 50 e cor branca. Por fim, posicione o texto no topo, do lado esquerdo do layout.
Você ainda pode melhorar a aparência do logotipo, alterando outras propriedades da fonte.
Menu
Cria-se uma nova camada nessa pasta e, com a ferramenta Pencil Tool de espessura 1, faça uma
linha branca na vertical. Com a mesma ferramenta usando agora a espessura 3, faça uma
pequena marca na cor amarela (#ffd800), alinhada à base da linha.
Duplique a camada utilizando as teclas de atalho <Ctrl+J>, fazendo 4 cópias. Não é necessário
renomeá-las.
Para ajudar nesse processo, você pode selecionar todas as camadas e usar as ferramentas de
Alinhamento e Distribuição.
Na camada menu, através da ferramenta de texto digita-se o nome dos itens: galeria, música,
notícias, letras e contato.
5
Utilize fonte Arial, estilo Bold, tamanho 12, cor branca, escala vertical de 80%, Faux Bold e em
maiúsculo.
Utilize linhas-guias para facilitar o alinhamento de definir uma área para a inserção dos outros
elementos do layout.
Barra de rádio
O próximo passo é criar a barra de rádio. Esse espaço é reservado para inclusão de um código de
programação que executa uma programação de rádio para web. Nesse curso isso não será
desenvolvido, pois envolve outra área. Normalmente o web designer cria elementos para o site,
que outros profissionais complementarão. Outro exemplo é a criação de banco de dados para
notícias. Nosso site pode comportar esse tipo de recurso e dependerá do trabalho em conjunto
com o programador para fazer a integração com nosso trabalho.
Nada impede que o web designer possa programar esses códigos. Porém, a proposta desse
curso se baseia em ensinar a construção de um site funcional, mesmo que alguns elementos
dependam de outros tipos de linguagem.
Para a construção dessa barra, selecione a pasta rádio e crie uma nova camada. Nela, utilize a
ferramenta retângulo arredondado (Rounded Rectangle Tool), com raio 10 px e cor azul
(#0065a2).
Agora, aplique um contorno branco nesse objeto. Para isso, selecione a camada e clique no
botão Add a layer style do painel Layers e escolha a opção Stroke.
Na caixa de diálogo Layer Style, opção Stroke, configure o contorno com 2 px de espessura, cor
branca e clique em OK.
6
Para fazer os botões da barra, crie uma nova camada renomeando-a como play. Use a
ferramenta retângulo arredondado (Rounded Rectangle Tool), com raio 4 px e faça um pequeno
quadrado de qualquer cor.
Você aplicará uma colorização gradiente e um contorno azul escuro. Para isso, selecione a
camada e clique no botão Add a layer style do painel Layers e escolha a opção Blending Option
Na caixa de diálogo Layer Style, configure as opções Gradient Overlay e Stroke, conforme a
imagem.
O botão está pronto. Duplique a camada (<Ctrl>+<J>) e dê a ela o nome de stop.
Para completar esses botões, crie os símbolos de play e stop fazendo um triângulo e um
quadrado amarelo (#ffd800). Para isso, crie novas camadas e use a ferramenta Custom Shape
Tool.
Faça mais um botão. Dessa vez com o ícone do Media Player, que servirá como indicação de um
possível link para download do arquivo que reproduz a rádio. Importe-o, através do comando
Place.
Quadro de notícias
Para o quadro de notícias, basta criar um retângulo de cor azul com contorno branco.
Crie uma nova camada na pasta notícias. Use a ferramenta retângulo arredondado (Rounded
Rectangle Tool), com raio 10 px e cor (# 0065a2).
Em seguida, aplique um contorno branco de 3 px de espessura usando o recurso Stroke.
7
Quadro Principal
Para o quadro principal do layout, faça o mesmo procedimento anterior, usando a Rounded
Rectangle Tool, com raio 10 px, cor (# 0065a2) e aplicando um contorno branco de 3 px.
Use as linhas-guias como referência para alinhar os objetos, proporcionando harmonia ao
layout.
O passo seguinte é fazer as divisões dentro desse quadro, usando outros retângulos que serão
os destaques das seções do site.
Crie uma nova camada na pasta quadro. Use o mesmo procedimento do quadro anterior, mas
dessa vez use a Rounded Rectangle Tool, com raio 8 px , cor (#005182) e aplique um contorno
branco de 1 px. Faça como na imagem abaixo:
Repita o procedimento criando outro quadro com as mesmas características do anterior, mas
com o tamanho mostrado abaixo:
Inserindo textos
Volte à pasta notícias. Utilize a ferramenta de texto (Horizontal Type Tool) para digitar o título
ÚLTIMAS NOTÍCIAS, criando uma nova camada acima do quadro de notícias.
Faça o mesmo procedimento, com as mesmas configurações, criando os títulos SHOW &
EVENTOS, LANÇAMENTOS e MÚSICA na pasta quadro.
Volte para a pasta notícias. Selecione a camada notícias, onde está o quadro azul e utilize a
ferramenta de texto (Horizontal Type Tool) para criar uma caixa de texto.
8
Clique sobre a camada recém criada e utilize a paleta de caracteres (menu Window, opção
Character) para formatar o texto.
Então, clique 2 vezes sobre o ícone T da camada de texto que você criou para ativá-la e escreva
algum texto para simular um conteúdo de notícias.
Faremos as outras caixas de texto. Dessa vez, clonaremos essa última camada e posicionaremos
no layout.
Duplique a camada de notícias usando a tecla de atalho <Ctrl+J>. Faça isso 7 vezes e você terá o
número suficiente de quadros de texto para o restante do layout.
Mova essas camadas para a pasta quadro. Posicione e redimensione cada uma delas para
ocupar os espaços.
Agora, vá até a pasta rodapé para criar a linha com textos na base do site. Use a ferramenta de
texto (Horizontal Type Tool) para digitar GALERIA | MÚSICA GRÁTIS | CONTATO | SOBRE O SITE
e na linha de baixo © MusicWave (coloque o ano) - Política de Privacidade - Termos de Uso. Use
as mesmas configurações de texto do passo anterior.
Tratamento de imagens para o layout
Trabalharemos a seguir com a criação e tratamento de imagens para complementar o layout.
Fotos, ilustrações e outros elementos gráficos são importantes num site, pois atribuem um
"valor gráfico", despertando o emocional do visitante. Imagens também facilitam a
percepção/recepção da mensagem que você deseja transmitir.
No Photoshop, abrimos os seguintes arquivos.
9






banda.jpg
cantor.jpg
ensaio.jpg
guitarrista.jpg
musica.jpg
show.jpg
Com exceção da musica.jpg, as outras imagens serão colocadas na pasta quadro em suas
respectivas subpastas, que ilustrarão as seções ali mostradas. Você deverá redimensionar essas
imagens.
Crie um novo arquivo com dimensões de 63x91 pixels, com 72 dpi de resolução e modo de cor
RBG.
Depois vá até a imagem desejada, copie para o novo arquivo. Para isso, basta selecionar toda a
área da imagem (<Ctrl>+<A>) copiar (<Ctrl>+<C>) e colar (<Ctrl>+<V>) no novo arquivo criado.
Para redimensionar, selecione uma das camadas e utilize a transformação livre (Free Transform Ctrl+T) que está localizada no menu Edit. Em seguida, use o mouse para diminuir a imagem e
deixá-la visível dentro da extensão do arquivo. Dê <Enter> para concluir.
Depois que redimensionar as duas imagens, faça novamente o procedimento de selecionar
(<Ctrl>+<A>) copiar (<Ctrl>+<C>) e colar (<Ctrl>+<V>) no arquivo projeto_musica.psd, na
subpasta lançamentos. Copie uma imagem de cada vez e posicione-as no layout.
Finalizando, esta imagem será a principal do layout, transmitindo a idéia principal do site. Você
deverá recortar o fundo da foto, antes de aplicá-la no layout.
No arquivo musica.jpg, duplique a camada Background com <Ctrl>+<J> e oculte a original, para
trabalhar somente com a cópia. Isso permitirá que ao recortar o fundo, ele seja transparente.
Selecione a ferramenta varinha mágica (Magic Wand Tool - W) e clique sobre as regiões que
pertencem ao fundo da imagem. Verifique antes se as opções Anti-alias e Contiguous nas
propriedades da ferramenta estão selecionadas. Use a tecla <Shift> para fazer mais de uma
seleção, mantendo as anteriores.
10
Veja que por causa do pouco contraste de cores, a seleção ultrapassa as regiões do fundo. Você
deve então corrigir isso com a ferramenta laço poligonal (Polygonal Lasso Tool - L).
Selecione essa ferramenta e com a ajuda do zoom (Z), aproxime a visualização das regiões que
você irá trabalhar:
- segure a tecla <Alt> para ativar o modo de subtração e retirar as regiões que você não deseja.
- segure a tecla <Shift> para ativar o modo de adição e selecionar as áreas que não foram
atingidas pela ferramenta Magic Wad Tool.
Depois de fazer isto em toda a imagem, basta apertar a tecla Delete para apagar o fundo.
Por fim, copie a imagem recortada para o arquivo projeto_musica.psd, colando na pasta imagem
de fundo. Redimensione a imagem usando a transformação livre (Free Transform - Ctrl+T).
11
Criando Elementos no Illustrator
Abra o programa acessando o menu Iniciar, Todos os Programas, Adobe Design Premium CS3 e
por fim selecione a opção Adobe Illustrator CS3.
Crie um novo documento.
Utilize a ferramenta linha (Line Segment Tool - \) para criar uma linha na área de trabalho, como
é mostrado abaixo. Em seguida, use a ferramenta seleção direta (Direct Selection Tool - A) e
clique em uma das extremidades da linha para selecionar um dos nós. Ative o botão de suavizar
o nó (Convert selected anchor points to smooth).
Faça o mesmo na outra extremidade. Por fim, use a Direct Selection Tool - A para arrastar os nós
de apoio de curva alterando a forma da linha e deixá-la como é mostrado a seguir:
O passo seguinte é duplicar a linha, movê-la para uma nova posição e fazer pequenas
alterações.
Para isso, segure a tecla <Alt>, clique sobre o objeto, arraste para cima e use a Direct Selection
Tool - A para fazer uma leve mudança nas curvas.
Clique duas vezes sobre a ferramenta Blend Tool (W) e, em sua caixa de diálogo selecione a
opção Specified Steps e altere o valor para 10. Clique em OK e vá até uma das linhas (repare na
mudança do cursor), clique sobre ela e depois sobre a outra linha.
12
Foram criadas 10 linhas entre as duas inicialmente criadas, produzindo um interessante efeito.
Para finalizar, aplique cores sobre a primeira e a última linha usando o painel Color e Swatches.
Em Color, selecione a opção contorno (Stroke), escolha um azul claro e arraste-o para a primeira
linha. Depois, arraste a cor branca para a última linha.
Crie um novo documento com as mesmas configurações do anterior, com o nome de
autofalante.
Use a ferramenta Ellipse Tool para criar 6 círculos com os tamanhos próximos ao mostrado
abaixo:
Aplique preenchimento conforme indicado abaixo:
Nos círculos de colorização gradiente do tipo radial, faça a configuração através da paleta
Gradient.
Depois de aplicar o preenchimento em todos os círculos, selecione-os todos e clique nos botões
de alinhamento na barra de propriedades: Horizontal Align Center e Vertical Align Center.
Observe que surgiu o auto-falante.
Para finalizá-lo, faça pequenas alterações no posicionamento de alguns círculos e na proporção
do grupo utilizando a ferramenta de seleção (Selection Tool - V) e as setas do teclado. Isso
proporcionará um efeito de profundidade e perspectiva. Rotacione também o objeto em 45º.
13
Selecione todas as formas e agrupe com o comando Group (<Ctrl>+<G>). Faça duas cópias do
auto-falante e posicione-os dessa maneira:
Concluindo o Layout
Agora que o layout está praticamente pronto e os últimos elementos foram criados no
Illustrator, inseriremos esses para concluir definitivamente o layout.
Após abrir o Photoshop, abra o arquivo projeto_musica.psd, que você salvou em sua pasta,
clique sobre a camada onde está a foto principal (pasta imagem de fundo) e importe o arquivo
autofalante.ai, também localizado em sua pasta. Use o comando Place, localizado no menu File.
Ao importar o arquivo, uma caixa de diálogo aparecerá. Mantenha a opção Page selecionada e
clique em OK.
O objeto será adicionado na área de trabalho criando uma nova camada.
Pressione a tecla <Enter> para concluir.
Mova a camada para baixo da camada da foto. Redimensione e posicione o elemento.
Duplique a camada e use o comando Free Transform (<Ctrl>+<T>) para espelhar
horizontalmente a imagem, posicionando do outro lado da foto.
14
Aplique agora nas duas camadas do auto-falante e na camada da foto o efeito Outer Glow, com
essas especificações:
O resultado será de um contorno esfumaçado ao redor desses elementos, proporcionando certo
destaque.
15
Exportando o Layout
O layout do site está concluído e agora deverá ser exportado.
Abra o Photoshop e seu arquivo projeto_musica.psd, caso seja necessário.
Você se lembra das linhas-guias que você criou anteriormente com o intuito de ajudar no
alinhamento dos elementos do layout? Pois bem, elas serão imprescindíveis nessa lição.
Com o arquivo aberto, duplique-o clicando com o botão direito do mouse sobre a barra de título
do documento e escolhendo a opção Duplicate.
Deixe visível as linhas-guias através do menu View, Show, Guides. Vá até a camada logotipo faça
a sua fusão, clicando com o botão direito do mouse sobre ela e escolhendo a opção Merge
Group.
Repita o processo com as camadas menu, rádio, quadro e notícias.
O motivo dessa fusão é para facilitar a segmentação do layout pelas linhas-guias.
Adicione linhas-guias separando o layout por partes, de acordo com seus elementos.
A colorização mostra os espaços criados pelas linhas-guias.
Clique sobre a ferramenta fatiar (Slice Tool - K) e faça recortes sobre todas as regiões
demarcadas com as linhas-guias.
16
Depois que todas as regiões forem determinadas pela Slice Tool, o documento poderá ser
exportado, finalmente. Certifique-se antes se todos os recortes estão corretamente
posicionados entre as linhas. Evite deixar espaços.
Use o comando Save for Web & Devices do menu File. Dê <Ctrl>+<A> para selecionar todos os
recortes, selecione depois as opções JPEG - Very High para salvar nesse formato e clique em
Save.
Na caixa de diálogo Save Optimize As, no campo Settings, escolha Other para alterar algumas
configurações. No menu drop-down onde aparece HTML, escolha Saving Files. Altere o nome da
pasta em Put Images in Folder para imagens (que é o nome de sua pasta de imagens). Clique em
OK.
Vá até sua pasta onde estão aquelas que você criou no início do curso (fotos, imagens, letras e
vídeos). Em seguida, altere o campo Salvar como tipo: para HTML and Images. Mude também o
nome do arquivo para musicwave. Clique em Salvar.
Esse procedimento cria um arquivo HTML e gera as imagens recortadas do seu layout dentro da
pasta imagens. Em outras palavras, seu layout já está exportado e transformado em página para
Internet.
Adicionando Animação
Nessa lição você utilizará o Adobe Flash CS3 para adicionar elementos animados em parte do
site, proporcionando atratividade a ele.
Abra o programa, crie um novo documento em Create New, Flash File (ActionScript 2.0) e altere
suas propriedades clicando em Size na barra de propriedades (Properties).
17
Você adaptou a área de trabalho para o tamanho de um dos recortes do layout feito em
Photoshop. É nessa imagem que será adicionada a animação.
Importe o arquivo musicwave_12.jpg da pasta imagens, usando o menu File, Import, Import to
Stage ou as teclas de atalho <Ctrl>+<R>.
Bloqueie a camada Layer 1 e crie uma nova camada (Insert Layer) onde você criará os elementos
animados.
Na Layer 2, crie notas musicais usando as ferramentas retângulo (Rectangle Tool) e oval (Oval
Tool).
Selecione cada uma das notas e converta-as em símbolo usando o menu Modify, Convert to
Symbol (ou <F8>). Escolha a opção Graphic e dê os nomes de nota 1 e nota 2.
Depois, clique em cada uma delas e volte a usar o comando Convert to Symbol. Dessa vez, crie
um Movie clip colocando o prefixo m- antes dos nomes nota 1 e nota 2 para diferenciar dos
outros nomes.
18
Isso coloca os gráficos nota 1 e nota 2 dentro dos Movie clips m-nota1 e m-nota2,
respectivamente.
Use a ferramenta Free Transform Tool para redimensionar as imagens e posicioná-las como é
mostrado abaixo. Dê um duplo clique sobre esses Movie clips para editá-los.
Crie um quadro-chave pressionando a tecla de atalho <F6> no quadro 20 da linha de tempo e
adicione uma interpolação de movimento (Create Motion Tween). Reposicione a figura do
quadro 20 até a extremidade da imagem de fundo.
Veja o resultado executando o comando Test Movie (<Ctrl>+<Enter>). Repare que a animação
está rápida e não apresenta uma boa atratividade.
Feche a janela de teste. Faça as seguintes alterações nos Movie clips: adicione um Ease de 100
no primeiro quadro (isso dará suavidade ao movimento), altere a propriedade Color do objeto
do último quadro para Alpha 0 e adicione quadro em branco (use <F7>) após o quadro 20 (para
criar um espaço de tempo até o reinício da animação).
Ao testar o filme, um SWF é gerado na mesma pasta do arquivo FLA. Esse SWF você usará para
substituir a imagem correspondente no layout utilizando o Dreamweaver. Isso você fará na
próxima lição.
Antes, copie o arquivo para a pasta imagens do seu site.
Observe a seguir outra animação para ser adicionada no site. Dessa vez, você criará uma
animação com o título MusicWave.
No arquivo projeto_musica.psd, utilize a ferramenta Crop Tool para selecionar somente a região
da fatia correspondente ao logotipo do site. Preste atenção nas linhas-guias, pois essa seleção
deve ter o mesmo tamanho da imagem que você gerou na lição Exportando o Layout.
19
Pressione a tecla <Enter> para finalizar a seleção e use o comando do menu File, Save as para
salvar uma cópia do arquivo com o nome de logotipo.psd em sua pasta.
Retorne ao Flash e use File, Open para abrir o arquivo logotipo.psd. Não se esqueça de
selecionar a opção All Files (*.*).
Repare que ao importar o logotipo.psd, uma nova caixa de diálogo aparecerá listando as
camadas do arquivo. Deixe marcada somente as camadas logotipo e Background. Selecione a
camada logotipo e marque a opção Create movie clip for this layer e Set stage size to same size
as Photoshop canvas.
Foi criado automaticamente, um novo documento com o tamanho da imagem PSD, com duas
camadas (logotipo e Background) sendo que a imagem logotipo está em um Movie clip.
Bloqueie a camada Background e entre no Movie clip logotipo, clicando duas vezes sobre o
título MusicWave. Crie uma nova camada chamada mascara e transforme-a com o comando
Mask.
Você criou uma máscara acima da camada Layer 1, que contém o título MusicWave. Com ela,
você pode criar o efeito para essa etapa. Quando uma máscara é criada, a camada abaixo dela
só ficará visível se alguma forma estiver na camada mascara. Então usaremos isso para criar o
efeito que simulará a escrita do texto
Desbloqueie as duas camadas, selecione a camada mascara e utilize a ferramenta Brush Tool
para criar um ponto sobre o texto, conforme é mostrado abaixo:
20
Se você bloquear novamente as camadas, você verá a máscara em ação, exibindo apenas uma
parte do texto da camada Layer 1, que corresponde ao ponto que você criou com a Brush Tool.
Com as camadas desbloqueadas, continue o processo criando novos quadros-chave (tecla de
atalho <F6>) e adicionando pontos com a Brush Tool para cada quadro.
Faça uma letra de cada vez até que todo o título seja coberto.
Adicione o comando Stop no último quadro para que a animação não fique se repetindo.
Saia do Movie clip logotipo clicando em Scene 1 e na barra Properties altere o Frame rate para
36. Isso fará com que a animação seja mais fluente, sendo executada a 36 quadros por segundo.
Teste o filme com o comando <Ctrl>+<Enter>.
Copie o arquivo logotipo.swf para a pasta imagens do site.
21
Finalizando o Site
Nessa lição utilizamos o Dreamweaver para adicionar editar e finalizar o site, adicionando o
arquivo de animação, links e criando outras páginas.
Com o programa aberto, acesse o menu Site, New site para criar um perfil de site dentro do
Dreamweaver e estabelecer uma estrutura de acesso e administração de arquivos.
Configure o site conforme a instrução abaixo, definindo um nome para ele, especificando a
pasta onde estão os arquivo, entre outras configurações.
Automaticamente o Dreamweaver criará uma estrutura do site na paleta Files.
Abra o arquivo musicwave.html através da paleta Files. Você verá seu layout pronto.
Repare que o layout está alinhado à esquerda. Portanto, para que ele seja melhor visualizado no
navegador, alinhe-o ao centro selecionando todo o conteúdo, clicando em sua borda e
escolhendo a opção Align, Center através do painel Properties.
Clique fora do layout para retirar a seleção. Acesse as propriedades da página para alterar
outras configurações clicando no botão Page Properties do painel Properties. Defina o título da
página, as cores das fontes, os links e título.
22
Confirmando essas opções, o Dreamweaver gerará um código CSS de cada componente
configurado (exceto o título da página). Esse código será útil para formatar o conteúdo do site.
Visualizamos essas configurações através da guia Code.
Teste o arquivo usando a tecla de atalho <F12>, que fará a página abrir no navegador padrão do
computador.
Após fechar o navegador e retornar ao Dreamweaver, substitua a imagem dos auto-falantes por
aquela que você criou no Flash. Selecione a imagem, delete-a, execute o comando Flash
<Ctrl+<Alt>+<F> do menu Insert, Media e escolha o arquivo som.swf. Cancele a caixa de diálogo
que aparecerá em seguida e seu arquivo já estará inserido no layout.
Se quiser testar a animação, selecione-a e clique em Play no painel Properties.
Ao adicionar algum arquivo swf no Dreamweaver, ele criará uma pasta Script com um código
para execução do componente. Essa pasta deve ser publicada junto com o site para que a
animação funcione corretamente na Internet.
Normalmente o site precisa de atualizações constantes e alterá-lo usando somente o
Dreamweaver seria o ideal. Por isso, editaremos mais essa página para que possa ser utilizada
no Dreamweaver para futuras atualizações de conteúdo.
Editaremos essa página principal e criaremos outra que servirá de modelo para as seções do
site.
Retire do layout as imagens correspondentes aos textos e fotos das áreas Últimas Notícias,
Shows & Eventos, Lançamentos e Música, deixando somente seus títulos. Se for preciso, altere
essas imagens no Photoshop. Defina o preenchimento dessas áreas com a mesma cor que a
imagem reproduziu.
23
Insira tabelas (menu Insert, Table) de 1 coluna por 1 linha, se necessário, nesses espaços.
Escreva um texto para verificar a funcionalidade. Altere o posicionamento vertical do conteúdo
na célula pelo painel Properties.
A região do rodapé também pode ser editada dessa forma.
Agora, faremos uma cópia do arquivo para servir de modelo para as outras seções.
Salve uma cópia do musicwave.html com o nome de template.html em sua pasta (menu File,
Save as). Depois, retire os textos e imagens da região do quadro maior para que se torne uma
forma única usando o comando Mergers selected cells using spans, na barra Properties. Veja:
Agora você tem o arquivo principal do site (musicwave.html) e outro que serve de modelo para
as seções (template.html) sem divisão do quadro principal.
24
Agora, criaremos os links e as páginas de navegação do site.
No arquivo template.html, crie alguns hotspot maps que são áreas clicáveis com links sobre as
imagens. Para criar essas áreas, selecione a imagem desejada, vá até a barra Properties e clique
sobre o botão Rectangular Hotspot Tool. Em seguida, clique e arraste com o mouse sobre a
imagem, criando uma área sobre o local onde você deseja fazer o link.
Provavelmente uma mensagem aparecerá comunicando que você pode escrever uma legenda
para o link na barra Properties. Ignore a mensagem clicando em OK e crie o link digitando o
endereço do arquivo que você apontará, no caso galeria.html. Dê <Enter> para concluir.
Para adicionar uma legenda ao link, use o campo Alt.
Repita o processo, criando áreas de links para o restante do menu, apontando para musica.html,
noticias.html, letras.html e contato.html, respectivamente. Crie também uma área clicável sobre
o logotipo MusicWave e adicione ali um link para o arquivo index.html. Digite Página Inicial no
campo Alt. Isso servirá como caminho para a página principal de seu site e é normalmente feito
por desenvolvedores de sites.
Seu arquivo template.html agora possui vários hotspots com links:
Crie links também para o rodapé. Se ele estiver como imagem, use Hotspot Maps. Porém, se for
texto, basta selecioná-lo e adicionar o link no campo de mesmo nome na barra Properties.
Crie cópias do template.html com os nomes galeria.html, musica.html, noticias.html, letras.html
e contato.html. Você pode usar o Save as do menu File ou simplesmente usar os comandos
Copiar e Colar no Windows Explorer em sua pasta de aluno ou até mesmo no painel Files do
Dreamweaver. Aproveite para alterar o nome do arquivo musicwave.html para index.html.
Como todas as páginas criadas são cópias do arquivo template.html, elas têm o mesmo título:
MusicWave. Abra esses arquivos e altere seus títulos, de acordo com o nome da página. Use o
campo Title.
Abra agora o index.html e adicione link para a página noticias.html nos textos mais dos quadros
de Shows & Eventos e Notícias. Faça o mesmo procedimento adicionando links nos textos dos
quadros Lançamentos e Músicas para a página musica.html.
25
Ainda com o index.html aberto, aproveite para inserir a animação do logotipo do site, feita em
Flash. Ela deve ser inserida somente nessa página que servirá como uma abertura e
apresentação inicial para o site.
Substitua a imagem GIF do logotipo pelo arquivo SWF que você criou na lição anterior,
localizado na pasta imagem do site. Utilize o comando Flash (<Ctrl>+<Alt>+<F>) do menu Insert,
Media e escolha o arquivo logotipo.swf. Cancele a caixa de diálogo que aparecerá em seguida e
seu arquivo já estará inserido no layout.
Inserindo conteúdo às páginas
Primeiro criaremos uma galeria de fotos para ser exibida em Galeria. Usaremos o Photoshop
que possui um recurso automático de criação de galeria de fotos.
Antes, copie as fotos da pasta Web Design CS3, crie uma nova pasta dentro da pasta fotos do
site com o nome de galeria. Dentro dela, crie outra com o nome 001. Cole as fotos dentro da
pasta 001.
No Photoshop use o comando Web Photo Gallery, no menu File, Automate. Configure o
assistente de criação conforme as imagens abaixo:
26
Clique em OK para iniciar o processo automático. Aguarde, feche a janela do Internet Explorer e
retorne ao Dreamweaver.
Abra o arquivo galeria.html. Insira um IFrame no espaço principal da página com as seguintes
especificações:
Isso criará um quadro que abrirá a página da galeria (index.html) dentro da página galeria.html.
Clicando sobre as fotos, você pode vê-las em tamanho maior.
Você pode criar outros tipos de galeria, pois no Photoshop há outros modelos. Se preferir criar
manualmente uma galeria, basta preparar as fotos no Photoshop, salvá-las na pasta galeria e
adicioná-las no Dreamweaver através do menu Insert, Image.
Para inserir os vídeos, copie os arquivos musica_dance.mp3 e video_dance.flv para a pasta
videos do seu site.
27
No Dreamweaver, abra o arquivo musica.html. Clique no quadro principal da página e vá até o
menu Insert, Media, Plugin. Vá até a pasta vídeos e escolha o arquivo musica_dance.mp3. Ao
confirmar, uma mensagem aparecerá comunicando que outro arquivo javascript foi gerado na
pasta Script. Confirme e altere o tamanho do componente.
No arquivo noticias.html, simularemos o trabalho com textos e fotos.
Insira uma tabela através do menu Insert, Table ou com o comando <Ctrl>+<Alt>+<T>. Ela deve
ter 1 linha e 3 colunas, com extensão de 100% e valor 0 para borda e espaçamentos entre
células.
Altere a largura das colunas utilizando o mouse ou inserindo valores nos campos Width e Height
no painel Properties.
Por padrão, o cursor nas células da tabela recém-criada é posicionado no meio e à esquerda.
Altere o posicionamento vertical para Top no painel Properties.
Devido ao estilo CSS criado no início da lição, qualquer texto que você digitar nessa página terá o
padrão de fonte Verdana, tamanho 10, cor branca.
Digite as informações que desejar na página, simulando notícias. Para inserir imagens, usaremos
aquelas miniaturas criadas na galeria.
Use o menu Insert, Image ou o comando <Ctrl>+<Alt>+<I>. Vá até a pasta fotos, galeria,
thumbnails e selecione uma imagem. Insira uma legenda (campo Alternate text) para a foto e dê
OK ou clique em Cancelar. Sua imagem estará inserida na página.
28
Agora será feito o formulário de contato para servir de meio de comunicação entre o usuário e
dono do site. Informações de contato são indispensáveis em um site, mesmo que seja apenas o
endereço do seu e-mail no rodapé da página.
O formulário usará um método de envio que dependerá do Outlook, ou seja, para que o usuário
consiga enviar os dados do formulário, ele precisa ter o programa instalado em seu computador.
Abra o arquivo contato.html. Altere o alinhamento horizontal do quadro principal para o centro,
usando a barra Properties. Use a barra de ferramentas Forms para adicionar um campo de
formulário clicando em seu primeiro botão: o de Formulário (Form).
Isso criará um campo tracejado que indica a região do formulário.
Dentro desse campo, insira uma tabela com 5 linhas e 3 colunas.
Criaremos um campo para Nome, um para E-mail, outro para a Mensagem e dois botões (Enviar
e Apagar)
Use a barra de ferramentas Form e insira na coluna da direita dois campos de texto, uma na
linha 1 e o outro na 2. Na linha 3 insira uma caixa de texto. Na caixa de diálogo que aparecerá
para cada inserção, escreva no campo ID: nome, email e mensagem, respectivamente.
Na última linha, insira dois botões. Você pode especificar o nome deles na caixa de diálogo que
aparece ou cancelar e configurar pelo painel Properties. Configure um como botão de envio
(Submit) e o outro como de anulação (Reset). Veja:
Para finalizar o formulário, insira na sua linha de código, na tag action o e-mail para onde será
enviada a mensagem (precedido de mailto:) e a função enctype="text/plain" que formatará os
dados enviados.
29
Teste o documento no browser.
Publicando o Site
Independente do serviço que você escolher, a publicação dos arquivos do site será feita por FTP
(File Transfer Protocol). Após o cadastro em algum serviço de hospedagem, você receberá um
login e uma senha de acesso para sua pasta no servidor, (o endereço para ela também será
enviado).
Abra o Internet Explorer e digite na barra de endereços http://www.xpg.com.br.
É necessário que seja feito um cadastro para a publicação do site. Além da criação da conta é
necessário fazer sua ativação através de um e-mail, para que o login seja reconhecido no site.
Após acessar o endereço, informe o site desejado, e-mail, senha e o assunto do site. Em seguida,
clique em Criar meu Site
Caso não exista nenhum endereço igual ao informado, a conclusão do cadastro será efetivada.
30
Em seguida, abra o e-mail cadastrado para a ativação do site e clique na mensagem da Equipe
XPG.
Com a mensagem aberta, clique no link de validação.
Informe o login, senha e clique em Entrar.
É possível enviar os arquivos através do próprio site, opção FTP Web. Em nosso caso
utilizaremos um programa de nome WS_FTP.
Abra o programa WS_FTP através do menu Iniciar.
Logo em seguida, o programa será aberto. Na janela Propriedades de Session informe a seguinte
descrição:
Lembre-se que na opção User ID e Password serão informados o usuário e a senha cadastrados
no site XPG.
No lado esquerdo da janela WS_FTP LE, utilizando a barra de rolagem, selecione com dois
cliques, o local onde se encontra o seu arquivo.
Utilizando a tecla <Ctrl>, selecione os arquivos que fazem parte do site e clique na seta para
adicionar ao lado direito da janela.
31
Com a página do XPG aberta, clique no link localizado ao lado direito da página referente a
publicação. Em nosso exemplo clicamos em www.musicwavesite.xpg.com.br.
Em seguida, o site será exibido.
Na janela XPG, clique no link sair e feche a exibição do site.
32