Web Desing Prático CS3
Transcrição
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