Explorando o Macromedia Studio MX

Transcrição

1 Explorando o Macromedia Studio MX macromedia

2 Marcas comerciais Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra são marcas comerciais da Macromedia, Inc. e estão registradas nos Estados Unidos ou qualquer outra jurisdição internacional. Outros nomes de produto, logos, projetos, títulos, palavras ou frases mencionados nesta publicação podem ser marcas comerciais, marcas de serviços ou marcas registradas da Macromedia, Inc. ou de outras entidades e podem estar registrados em certas jurisdições, inclusive internacionalmente. Este guia contém links a sites de terceiros que não estão sob controle da Macromedia, e a Macromedia não se responsabiliza pelo conteúdo de quaisquer sites de terceiros. O acesso um Website de terceiros mencionado neste guia deve ocorrer por sua própria conta e risco. A Macromedia fornece esses links somente como conveniência e a inclusão do link não implica a aceitação ou garantia de qualquer responsabilidade por parte da Macromedia pelo conteúdo nesses sites de terceiros. Limitação da responsabilidade A APPLE COMPUTER, INC. NÃO POSSUI GARANTIAS IMPLÍCITAS OU EXPLÍCITAS COM RELAÇÃO AO PACOTE DE SOFTWARE DE COMPUTADOR INCLUSO, PADRÃO DE QUALIDADE DO PRODUTO OU SUA ADEQUAÇÃO A QUALQUER FINALIDADE EM PARTICULAR. A EXCLUSÃO DAS GARANTIAS IMPLÍCITAS NÃO É PERMITIDA EM ALGUNS ESTADOS. A EXCLUSÃO ACIMA PODE NÃO SE APLICAR A VOCÊ. ESTA GARANTIA OFERECE DIREITOS LEGAIS ESPECÍFICOS. O USUÁRIO PODE TER OUTROS DIREITOS QUE VARIAM DE ESTADO PARA ESTADO. Copyright Macromedia, Inc. Todos os direitos reservados. Este manual pode não ser copiado, reproduzido, traduzido ou convertido a qualquer formato eletrônico ou em linguagem de máquina, ao todo ou em parte, sem a prévia aprovação ou escrito da Macromedia, Inc. Número do componente ZWS60M100PO Agradecimentos Este manual foi escrito e produzido por membros de equipes do ColdFusion, Dreamweaver, Fireworks, Flash e FreeHand. Agradecimentos especiais a todas as equipes de localização pelos arquivos e revisão. Primeira edição: maio de 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA EUA

3 ÍNDICE Parte I Introdução INTRODUÇÃO Guia de introdução Sobre este manual Uma nota para os usuários da versão em português do Macromedia Studio MX Uma nota para usuários da versão internacional do ColdFusion MX Server Instalação do Macromedia Studio MX Aprendendo sobre o Macromedia Studio MX Acessibilidade e a família de produtos Macromedia Studio MX Como entrar em contato com a Macromedia CAPÍTULO 1 Introdução às ferramentas do Macromedia Studio MX Macromedia Dreamweaver MX Macromedia Flash MX Macromedia Fireworks MX Macromedia FreeHand Macromedia ColdFusion MX Server Macromedia Extension Manager Explorar o espaço de trabalho do MX Parte II Desenvolvimento da Web CAPÍTULO 2 Entendimento de aplicativos e tecnologias para Web Entendimento da Internet e de tecnologias correlatas Entendimento dos aplicativos para Web

4 CAPÍTULO 3 Fluxo de trabalho de desenvolvimento da Web Planejar o Website Configuração do ambiente de desenvolvimento Planejamento de página e projeto de tela Criação de propriedades de conteúdo Construir propriedades do aplicativo Montagem, testes e publicação Informações adicionais Parte III Dreamweaver MX CAPÍTULO 4 Bem-vindo ao Dreamweaver MX Novidades do Dreamweaver MX Aprendendo Dreamweaver Recursos de tecnologias da Web e HTML CAPÍTULO 5 Tutoriais do Dreamweaver MX Configurar um site local Criar e salvar uma nova página Ajustar o layout Definir o título da página Adicionar texto formatado Adicionar imagens Como definir cores de fundo Verificar o código Crie uma segunda página Adicionar link de texto entre as páginas Criar imagens cambiáveis para links gráficos Copie a barra de navegação Visualizar no navegador Configurar um site remoto e publicar Informações adicionais Alternar para a área de trabalho de codificação Copiar uma pasta para o seu site Exibir as páginas terminadas Como abrir páginas múltiplas Adicione uma imagem arrastando-a Adicionar um link com o Seletor de tags Editar uma tag Localizar informações sobre uma tag Adicionar uma imagem com dicas de códigos Verifique as alterações feitas Adicionar um link com a barra Inserir Imprimir o código Informações adicionais Índice

5 Antes de começar Iniciar o tutorial Criar um formulário de inserção de registro Copiar arquivos para o servidor Informações adicionais CAPÍTULO 6 Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX Sobre a integração do Fireworks MX e Macromedia Flash MX Como trabalhar com o Dreamweaver e Macromedia Fireworks MX Criar um álbum de fotografias na Web no Dreamweaver MX Trabalhar com Dreamweaver MX e Macromedia Flash MX Parte IV Flash MX CAPÍTULO 7 Bem-vindo ao Macromedia Flash MX Novidades do Macromedia Flash MX Como fornecer experiências de nível para Web com o Macromedia Flash Player Como aprender sobre o Macromedia Flash MX CAPÍTULO 8 Tutorial do Flash MX O que você deve saber Visualizar o filme concluído Analise o arquivo stiletto.fla Definir as propriedades para um novo documento e criar um fundo de dégradé Criar e mascarar uma ilustração vetorial Interpolarizar efeitos de bitmap dentro de um clipe de filme Carregar texto dinâmico em tempo de execução Adicione animação e navegação aos botões Adicionar sons de eventos e fluxo de som Organize o painel Biblioteca Testar o desempenho de download e publicar o filme As próximas etapas CAPÍTULO 9 Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX Macromedia Dreamweaver MX Macromedia FreeHand Macromedia Fireworks MX Macromedia ColdFusion MX Server Índice 5

6 Parte V Fireworks MX CAPÍTULO 10 Bem-vindo ao Macromedia Fireworks MX Novidades do Fireworks MX Aprender a usar o Fireworks MX CAPÍTULO 11 Tutoriais do Fireworks O que você aprenderá O que você deve saber Copiar a pasta Tutoriais Visualizar o arquivo completo Criar e salvar um novo documento Explorar o ambiente de trabalho do Fireworks Criar e editar objetos vetoriais Importar um bitmap e selecionar pixels Adicionar e editar efeitos ao vivo Trabalhar com camadas e objetos Criar e editar uma máscara Criar e editar texto Exportar o documento Prossiga com as etapas seguintes O que você aprenderá O que você deve saber Copiar a pasta Tutoriais Visualizar a página completa de Web Abra o arquivo de origem Importar um elemento gráfico Fatiar o documento Criação de um rollover de arrastar e soltar Criar e editar botões para fazer uma barra de navegação Criar e editar um menu pop-up Otimizar o documento Exportar HTML Testar o arquivo concluído Prossiga com as etapas seguintes CAPÍTULO 12 Integração do Fireworks MX com a família de produtos Macromedia Studio MX Trabalhar com Macromedia Fireworks MX e Macromedia Dreamweaver MX Trabalho com Macromedia Fireworks MX e Macromedia HomeSite Trabalhar com Fireworks MX e Macromedia Flash MX Trabalhar com Fireworks MX e Macromedia FreeHand Índice

7 Parte VI FreeHand CAPÍTULO 13 Bem-vindo ao Macromedia FreeHand Uma observação para os clientes Novidades do FreeHand Aprender sobre o FreeHand CAPÍTULO 14 Tutorial do FreeHand O que você deve saber Visualizar os arquivos tutoriais Criar objetos Usar o painel Ferramentas para aplicar o traço diferente e cores de preenchimento Criar uma mesclagem ao longo do traçado Adicionar efeitos especiais Trabalhar com objetos em camadas Importar objetos Trabalhar com símbolos e instâncias Use o pincel pulverizador Use cores e tonalidades Adicione um dégradé de contorno ao texto Remova as páginas do documento Usar a grade de perspectiva Defina a área de impressão Adicionar navegação a botões Visualize o arquivo na janela do Macromedia Flash Player Exportar o documento Para aprender mais CAPÍTULO 15 Integração do FreeHand com a família de produtos Macromedia Studio MX Animação de objetos e texto no FreeHand Associação das ações do Macromedia Flash MX aos desenhos do FreeHand Exportação de documentos do FreeHand como filmes do Macromedia Flash MX Uso do Controlador ou menu Controlar do FreeHand com os arquivos SWF do Flash MX Índice 7

8 Parte VII ColdFusion MX Server CAPÍTULO 16 Instalação do Macromedia ColdFusion MX Server Developer Edition Requisitos de sistema do ColdFusion MX para Windows Instalação do Macromedia ColdFusion MX Server no Windows Confirmação da instalação e administração do ColdFusion MX Server CAPÍTULO 17 Bem-vindo ao Macromedia ColdFusion MX O ColdFusion MX Server A ColdFusion Markup Language Recursos e benefícios principais do ColdFusion Novidades do ColdFusion MX Server Recursos de integração do ColdFusion MX Como aprender sobre o ColdFusion MX ÍNDICE REMISSIVO Índice

9 Parte I Introdução Parte I O capítulo na Parte I guia-o através da instalação do Macromedia Studio MX, fornecendo informações sobre os recursos da Macromedia e uma apresentação à família de produtos Macromedia Studio MX. Os capítulos a seguir fazem parte desta seção: Introdução, Guia de introdução Capítulo 1, Introdução às ferramentas do Macromedia Studio MX

10

11 INTRODUÇÃO Guia de introdução O Macromedia Studio MX é um conjunto integrado de ferramentas poderosas e fáceis de usar que suportam padrões e tecnologias emergentes para criar Websites e aplicativos de nível rich para a Internet que podem ser publicados através dos dispositivos e plataformas mais importantes. O conjunto inclui o Macromedia Flash MX, Dreamweaver MX, Fireworks MX, FreeHand, o ColdFusion MX Server Developer Edition e o Macromedia Flash Player 6. O Macromedia Studio MX possui recursos para cada parte do processo de produção da Web, incluindo a criação de gráficos, layout de páginas HTML, codificação de lógica de aplicativos, criação de interfaces de usuário ricas e a montagem de soluções completas. Os produtos do Macromedia MX foram projetados para obter um desenvolvimento rápido. Fáceis de aprender e usar, eles fornecem uma variedade de recursos que ajudam a aumentar a produtividade dos desenvolvedores, desde componentes e modelos predefinidos a um fluxo de trabalho integrado e uma interface de usuário compartilhada. O Macromedia Studio MX capacita os desenvolvedores para a criação de aplicativos de nível rich para a Internet com participação maior e mais intuitiva do usuário. Usando o Macromedia Studio MX, os designers e desenvolvedores podem criar aplicativos de resposta que combinam a funcionalidade de soluções tradicionais cliente/servidor com a implementação de amplo alcance e baixo custo de aplicativos para a Web. O Macromedia Studio MX fornece um novo espaço de trabalho e muitos elementos de interface, além de recursos comuns para aumentar a velocidade do seu fluxo de trabalho. Esta versão é um passo importante no compromisso da Macromedia em oferecer uma plataforma de desenvolvimento da Web flexível e mais produtiva. Macromedia Studio MX foi criado com base no poder individual dos produtos e aumenta a capacidade para trabalhar perfeitamente em conjunto. Instale o ColdFusion MX Server Developer Edition localmente na sua máquina para avaliar o desenvolvimento de aplicativos de nível "rich" para a Internet, criando e implementando as aplicações com o uso das ferramentas do Macromedia Studio MX. Veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página 391. Para obter detalhes sobre a família de produtos Macromedia Studio MX, veja Introdução às ferramentas do Macromedia Studio MX na página 21 ou as seções individuais de produtos deste manual. 11

12 Sobre este manual O objetivo deste manual é guiar você na exploração da família de produtos Macromedia Studio MX e ensinar como as ferramentas trabalham em conjunto para oferecer o ambiente de desenvolvimento mais produtivo e poderoso da Web disponível atualmente. Você pode ler a documentação completa de todos os produtos Macromedia Studio MX em formato HTML nos menus de Ajuda individuais dos produtos, em formato PDF (Adobe Acrobat), disponível no CD- ROM e nas seções de produtos no site da Macromedia na Web em Este manual foi organizado para que você se familiarize rapidamente com cada um dos produtos através de um tutorial que apresenta os princípios básicos da criação de um Website, de um filme Flash para Web, de um arquivo de imagem ou da produção de um documento para Web. Se você já é experiente em um ou mais produtos, leia sobre os novos recursos e melhorias desta versão e saiba como integrar os produtos em um fluxo de trabalho de desenvolvimento da Web. O manual está dividido nas seguintes seções: Introdução A parte I deste manual apresenta as ferramentas do Studio MX. Este capítulo, Guia de introdução, apresenta as instruções de instalação, um resumo dos novos recursos, recursos para aprender a usar os produtos e informações de acessibilidade. O capítulo 1 descreve brevemente a família de produtos Studio, os elementos de interface comuns e as ferramentas de produtividade. Aplicativos para a Web e fluxo de trabalho A parte II fornece uma visão geral sobre as tecnologias da Web e apresenta um fluxo de trabalho de desenvolvimento utilizando as ferramentas do Studio MX. O capítulo 2 abrange os conceitos básicos de tecnologias e aplicativos para a Web. O capítulo 3 apresenta um fluxo de trabalho de desenvolvimento detalhado baseado na criação de um aplicativo da Web interativo. Seções de produtos A parte III a VI abrange, em detalhes, cada produto da família Studio MX. Cada parte contém os seguintes capítulos sobre os respectivos produtos: Uma introdução que descreve brevemente o produto, resumindo os novos recursos e fornecendo referências sobre eles, para ensinar mais sobre os produtos. Um tutorial criado para novos usuários do produto Um guia para usar os produtos interativamente A parte VII do manual contém dois capítulos sobre o ColdFusion MX que explicam como instalar o ColdFusion e como usá-lo com outros produtos do Studio MX. Para obter informações sobre os recursos adicionais, veja Aprendendo sobre o Macromedia Studio MX na página Introdução

13 Uma nota para os usuários da versão em português do Macromedia Studio MX O FreeHand não está disponível em português, a versão em inglês será instalada do Macromedia Studio MX. Esteja ciente de que os comandos de menu e as telas de interface mostrados neste manual estão em inglês. Uma nota para usuários da versão internacional do ColdFusion MX Server O ColdFusion MX não está disponível em português, espanhol, italiano, sueco, chinês simplificado e chinês tradicional, a versão em inglês será instalada no Macromedia Studio MX. Esteja ciente de que os comandos de menu e as telas de interface mostradas neste manual estão em inglês. Instalação do Macromedia Studio MX O Macromedia Studio MX é muito fácil de instalar em sistemas Windows e Macintosh. A Macromedia recomenda a instalação completa do Macromedia Studio MX em uma única operação, mas você pode instalar os aplicativos individualmente. O ColdFusion MX Server Developer Edition para Windows é instalado separadamente. Para obter mais informações, veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página 391. Instalação do Macromedia Studio MX no Windows Siga estas etapas para instalar o Macromedia Studio MX no Windows. Para instalar o Macromedia Studio MX no Windows: 1 Insira o CD-ROM do Macromedia Studio MX na unidade de CD-ROM do seu computador para abrir a tela Instalação do Macromedia Studio MX. Se a tela não aparecer ou você o estiver instalando a partir de uma unidade de rede, use o Windows Explorer para localizar o programa de instalação do Macromedia Studio MX no diretório-raiz e clique-duas vezes sobre ele. Guia de introdução 13

14 2 Efetue um dos procedimentos a seguir: Selecione a opção Instalar o Studio MX na tela de seleção de instalação. A Macromedia recomenda selecionar esta opção. Se você deseja instalar apenas um único programa, selecione-o da tela. Repita este processo para instalar os outros produtos individualmente. Antes de instalar o ColdFusion MX, veja Instalação do Macromedia ColdFusion MX Server Developer Edition na página Conclua as telas Contrato de licença e Informações de usuário e clique em OK. Você verá uma tela adicional de informações de usuário, dependendo do número de série inserido e dos aplicativos da Macromedia detectados em seu sistema. Se a tela for exibida, preencha as informações para continuar. 4 Aceite a localização padrão para os aplicativos instalados ou navegue pelas pastas para selecionar um local diferente. 5 Clique em Próximo para instalar os programas selecionados. Uma tela final do assistente aparecerá ao concluir a instalação. 6 Clique em Concluir para terminar a instalação. Se você tiver selecionado a opção Instalação do Studio MX, o arquivo Leiame do Macromedia Studio MX será aberto. Se tiver instalado um único produto, o arquivo de informação deste produto será aberto. A tela de instalação principal permanecerá aberta até que você clique no botão Fechar. Os aplicativos do Macromedia Studio MX instalados estão disponíveis no menu Iniciar do Windows em Programas > Macromedia. 7 Para visualizar os adicionais fornecidos com o Macromedia Studio MX, selecione Procurar conteúdo do CD. Para desinstalar os programas: Selecione Iniciar > Configurações > Painel de controle > Adicionar/remover programas e selecione o programa que deseja desinstalar. Sobre a instalação do ColdFusion MX Server O ColdFusion MX Server Developer Edition é uma versão gratuita que você pode usar para desenvolver aplicativos para a Web no host local e no endereço IP remoto. Esta edição é destinada para fins de avaliação e não está licenciada para publicação. Para obter informações sobre os requisitos de instalação do ColdFusion Server, veja Requisitos de sistema do ColdFusion MX para Windows, na página Introdução

15 Instalação do Macromedia Studio MX no Macintosh Siga estas etapas para instalar o Macromedia Studio MX no Macintosh. Para instalar o Macromedia Studio MX no Macintosh: 1 Insira o CD-ROM do Macromedia Studio MX na unidade de CD-ROM do seu computador para abrir a tela Instalação do Macromedia Studio MX. Se a tela não for exibida, clique duas vezes no ícone Instalar o Macromedia Studio MX no CD-ROM. 2 Efetue um dos procedimentos a seguir: Selecione a opção Instalar o Studio MX na tela de seleção de instalação. A Macromedia recomenda selecionar esta opção. Se você deseja instalar apenas um único programa, selecione-o da tela. Repita este processo para instalar os outros produtos individualmente. 3 Clique em Continuar para ir para a próxima tela. 4 Conclua a tela Contrato de licença. 5 Na tela Localização, aceite a localização padrão para os aplicativos instalados ou navegue pelas pastas para selecionar um local diferente. Clique em Instalar para continuar. 6 Conclua a tela Informações de usuário e clique em OK. Você verá uma tela adicional de informações de usuário, dependendo do número de série inserido e dos aplicativos da Macromedia detectados em seu sistema. Se a tela for exibida, preencha as informações para continuar. Se você tiver selecionado a opção Instalação do Studio MX, o arquivo Leiame do Macromedia Studio MX será aberto. Se tiver instalado um único produto, o arquivo de informação deste produto será aberto. A tela de instalação principal permanecerá aberta até que você clique no botão Fechar. Os aplicativos instalados do Macromedia Studio MX agora estão disponíveis na pasta Aplicativos. Para desinstalar os programas: Arraste uma pasta de produto da pasta Aplicativos para o Lixo. Como evitar infrações de licenças na rede Se a caixa de diálogo Detecção de licenças na rede for exibida quando você tentar abrir um aplicativo da Macromedia, é possível que você tenha excedido o número de cópias licenciadas permitidas para cada número de série. Esta caixa de diálogo é exibida quando os aplicativos da Macromedia detectam outro usuário em uma rede empresarial utilizando o mesmo número de série da licença. É necessário possuir uma licença de software (com um único número de série) para cada cópia do software da Macromedia instalado em um computador. Observação: Esta mensagem aparecerá se você tentar instalar uma cópia do Macromedia Studio incorporado em vários computadores. O Macromedia Studio incorporado é considerado um único produto e é licenciado para instalação em um computador. Guia de introdução 15

16 Para evitar a violação de licença, siga um destes procedimentos: Compre uma cópia licenciada do software da Macromedia para cada computador. Para obter mais informações, consulte um revendedor autorizado da Macromedia ou visite a loja virtual da Macromedia em Trabalhe em conjunto com o departamento de tecnologia de informação para localizar os indivíduos que estejam utilizando o mesmo número de série na rede. Forneça o nome de usuário e endereço IP que aparece na caixa de diálogo Detecção de licenças na rede. Desculpamo-nos pelos inconvenientes causados. Se acreditar que esta caixa de diálogo tenha sido exibida por engano, use o menu do Centro de suporte na página de Suporte em para localizar seu produto e, em seguida, procure os artigos relacionados à detecção de licenças na rede. O Centro de suporte Macromedia fornece as informações mais recentes sobre o software. Se for necessário entrar em contato com o Atendimento ao Consumidor da Macromedia em tenha uma cópia da fatura do produto e do recibo em mãos. Para obter mais informações sobre licenciamento, consulte o End-User License Agreement (Contrato de Licença de Usuário Final), com o nome de arquivo License.htm, localizado no diretório onde o software da Macromedia foi instalado. Como registrar o Macromedia Studio MX Para obter suporte adicional da Macromedia, recomendamos registrar sua cópia do Macromedia MX através da Internet ou pelo correio. Ao registrar o programa, você será inserido na lista de prioridade para receber notícias recentes sobre atualizações e novos produtos da Macromedia. Você receberá avisos de pontuais sobre as atualizações dos produtos e os novos conteúdos exibidos em Para registrar o Macromedia Studio MX: Em qualquer produto Macromedia Studio MX, selecione a Ajuda e, em seguida, a opção de registro on-line ou impressa. Ao registrar um dos produtos Studio MX, os outros são registrados da mesma forma. Aprendendo sobre o Macromedia Studio MX Além deste manual, a Macromedia fornece uma variedade de recursos de aprendizado sobre todos os aspectos da criação, desenvolvimento e integração do conteúdo da Web de maneira mais produtiva com a família de produtos do Macromedia Studio MX. Encontra-se, a seguir, uma lista dos recursos. O arquivo Leiame aberto ao final da instalação contém links às informações mais atualizadas sobre funções e problemas de produtos, assim como outros recursos. O Centro de design e desenvolvimento em fornece uma variedade de informações práticas sobre tecnologias da Web e criação e desenvolvimento de Websites. O Website e o site Técnicas de gerenciamento de produção em resources/techniques/ apresentam uma estrutura comprovada para gerenciar com êxito os problemas organizacionais e criativos mais complexos no lançamento e manutenção de uma presença eficaz na Web. 16 Introdução

17 Os fóruns on-line da Macromedia em fornecem um local para que os desenvolvedores de vários níveis de experiência compartilhem idéias e técnicas para utilizar toda a família de produtos da Macromedia. Estes fóruns também são freqüentados pelo pessoal de suporte técnico da Macromedia e por membros das equipes de desenvolvimento de produtos e da equipe da Macromedia. Acessibilidade e a família de produtos Macromedia Studio MX A Macromedia suporta a criação de grandes experiências na Web acessíveis a qualquer pessoa, e estamos trabalhando para tornar a interface e as ferramentas dos produtos mais acessíveis aos usuários portadores de deficiências. Para obter as últimas informações sobre os recursos e funções dos produtos que suportam o projeto de acessibilidade, veja a página de acessibilidade da Macromedia em As diretrizes do W3C (World Wide Web Consortium) sobre conteúdo da Web encorajam os desenvolvedores a adotarem as práticas de codificação e o design para acessibilidade. Para obter mais informações sobre as diretrizes do W3C, veja Web Content Authoring Guidelines em / Os recursos de acessibilidade, a seguir, estão disponíveis para o trabalho com os produtos e para a utilização destes no desenvolvimento do conteúdo de acessibilidade. Acessibilidade do Macromedia Dreamweaver MX O Dreamweaver MX fornece suporte para os programas dos leitores de tela JAWS e Window Eyes. O suporte para as configurações de tela de alto contraste do Windows ajuda a tornar o Dreamweaver acessível a todos os usuários. O aplicativo também fornece suporte para navegação de teclado da interface. As caixas de diálogo de acessibilidade do Dreamweaver avisam a você para inserir as tags e os atributos de acessibilidade ao inserir imagens, objetos de mídia, tabelas e outros elementos que necessitam de suporte. O Dreamweaver acompanha amostras de páginas da Web projetadas para acessibilidade. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Dreamweaver e acessibilidade. Acessibilidade do Macromedia Flash MX Texto de filme Flash, entrada de campos de texto, botões, clipes de filme e filmes são acessíveis por padrão. Isto significa que estes itens estão incluídos nas informações que o Macromedia Flash Player 6 fornece ao software do leitor de tela se o filme Flash foi criado com o Flash MX ou uma versão anterior. Você pode configurar as propriedades descritivas para cada um dos tipos de objetos e as configurações estão incluídas nas informações que o Macromedia Flash Player 6 fornece ao software do leitor de tela. O Macromedia Flash Player fornece automaticamente nomes para os objetos de texto estático e dinâmico. Guia de introdução 17

18 É possível atribuir rótulos para os botões e campos de entrada de texto para a identificação correta pelo leitor de tela. Você pode usar o método Accessibility.isActive do ActionScript para detectar se um leitor de tela está em execução durante o tempo de execução do filme. Isto é útil se desejar fazer com que o filme se comporte de maneiras personalizadas quando um leitor de tela estiver presente. Você pode personalizar a ordem de uma guia e definir teclas de atalho para objetos acessíveis. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Criando um conteúdo acessível. Acessibilidade do Macromedia Fireworks MX Os comandos para avaliar os gráficos para acessibilidade estão disponíveis no Dreamweaver Exchange. Os comandos Select Blank ALT Tags e Set Blank ALT Tags permitem que os autores localizem rapidamente as tags de imagens que não contêm o texto ALT e fornecem um texto alternativo para as imagens. Os textos alternativos permitem que as imagens sejam interpretadas por dispositivos de assistência de texto. O inspetor de objetos permite associar os atributos de texto alternativo a qualquer ponto ativo ou fatia de imagem. Os designers podem criar e compartilhar os painéis de amostra de cor personalizados para obter o contraste adequado de matiz e saturação para gráficos da Web, como, por exemplo, os botões que requerem o contraste adequado entre o primeiro plano e o fundo para que sejam vistos mais facilmente pelos leitores com limitações visuais. O Fireworks MX fornece uma integração robusta com os recursos de acessibilidade do Macromedia Flash MX e do Dreamweaver MX. Para obter mais informações, veja o site de acessibilidade do Fireworks em Acessibilidade do Macromedia FreeHand 10 O FreeHand 10 suporta atalhos de teclado personalizados e aceleradores de menus. A funcionalidade principal está disponível em caixas de diálogo e os menus de painel podem ser acessados através da tecnologia de assistência. O gerenciamento de cores padrão, assim como o espaçamento de várias cores e o controle aprimorado sobre os valores de cor, ajudam a criar o conteúdo de acessibilidade. As cores e os valores de cor associados podem ser manipulados visualmente e alfa-numericamente. O FreeHand usará uma API de sistema para interpretar o texto, exceto quando o texto tiver sido convertido em caminhos. Os controles padrão de nível do sistema exibem e obtêm os dados dos usuários por padrão. O texto das dicas de ferramentas é fornecido para cada imagem que funciona como um elemento de interface de usuário. 18 Introdução

19 Como entrar em contato com a Macromedia Sede corporativa Suporte técnico Macromedia, Inc. 600 Townsend Street São Francisco, CA EUA Tel.: Fax: Web: A Macromedia oferece uma variedade de opções de suporte por telefone e via Web. Vá para para obter uma descrição completa dos serviços de suporte técnico. Vendas Ligação gratuita: Tel.: Fax: sales@macromedia.com Guia de introdução 19

20 20 Introdução

21 CAPÍTULO 1 Introdução às ferramentas do Macromedia Studio MX O Macromedia Studio MX possui as seguintes ferramentas poderosas e fáceis de usar para desenvolvimento, que dão suporte a uma ampla gama de tecnologias e padrões de Web para criação de aplicativos de nível rich para a Internet: O Dreamweaver MX é a primeira opção para profissionais criarem e administrarem Websites baseados em HTML. O Flash MX é a solução mais poderosa para desenvolver aplicativos e conteúdo de nível rich para a Internet em várias plataformas e dispositivos usando o Macromedia Flash Player. O Fireworks MX é um ambiente de criação poderoso e flexível para criar, editar e animar elementos gráficos de Web. O FreeHand é um aplicativo para criação de ilustrações vetoriais que permite produzir imagens da mais alta qualidade para impressão e para a Web. O ColdFusion MX é um ambiente rápido de criação de scripts de servidor para criar aplicativos de nível rich para a Internet. As seções a seguir contêm breves descrições dos produtos Macromedia Studio MX. Macromedia Dreamweaver MX O Macromedia Dreamweaver MX é a opção profissional para construção de Websites e aplicativos de nível rich para a Internet. É uma ferramenta poderosa de criação fácil de usar. Todos os membros da equipe de desenvolvimento podem usá-la para construir rapidamente Websites e aplicativos de nível rich para a Internet. Pela primeira vez, projetistas, desenvolvedores e programadores podem trabalhar em um ambiente para criar e administrar com facilidade qualquer Website profissional, independente se é criado usando HTML, XHTML, XML, serviços de Web, ColdFusion, ASP.NET, ASP, JSP ou PHP. O Dreamweaver MX combina as ferramentas conhecidas de layout visuais do Dreamweaver, os recursos de aplicativos rápidos para Web do Dreamweaver UltraDev e o amplo suporte a edição de código do HomeSite+ para fornecer uma solução completa para os Websites atuais e aos aplicativos de nível rich para a Internet de amanhã. Independente se você prefere codificar manualmente HTML ou trabalhar em um ambiente de edição visual, o Dreamweaver facilitará a parte inicial de familiarização com o produto e fornecerá ferramentas úteis para melhorar os projetos de páginas da Web. 21

22 O Dreamweaver MX inclui vários recursos e ferramentas de codificação: As referências a HTML, CSS e JavaScript no painel Codificação, um depurador de JavaScript e os editores de código (o visualizador de código e inspetor de código) que permitem que você edite JavaScript, XML e outros documentos de texto diretamente no Dreamweaver MX. A tecnologia Macromedia Roundtrip HTML importa documentos HTML sem formatar o código; você pode definir o Dreamweaver MX para limpar e reformatar o HTML quando desejar. Os recursos de edição visual do Dreamweaver MX permitem adicionar rapidamente estrutura e recursos às suas páginas, sem ter que codificar uma linha sequer. É possível visualizar todos os elementos ou propriedades do site e arrastá-los de um painel de fácil utilização diretamente para um documento. Você pode abrir o HomeSite+ no Dreamweaver MX para usar os recursos de codificação. O Dreamweaver MX pode ser totalmente personalizado. Utilize o Dreamweaver MX para criar os seus próprios objetos e comandos, modificar os atalhos de teclado e escrever código JavaScript para estender os recursos do Dreamweaver MX com novos comportamentos, inspetores de propriedades e relatórios de site. Recursos de integração do Dreamweaver MX O Dreamweaver MX está altamente integrado a outras ferramentas do Macromedia Studio MX para permitir que você simplifique o seu fluxo de trabalho de projeto de Web. O Roundtrip HTML permite que você faça alterações em um arquivo no Macromedia Flash MX, Fireworks MX ou Dreamweaver MX e tenha essas mudanças refletidas sem problemas em outros aplicativos. Ao exportar arquivos do Macromedia Flash MX ou Fireworks MX para um site definido no Dreamweaver MX, as notas de projeto que contêm referências ao arquivo PNG ou ao arquivo de criação do Macromedia Flash (FLA) são exportadas automaticamente para o site com o arquivo pronto para Web (GIF, JPEG ou SWF). Você pode iniciar o processo de produção gráfica usando um marcador de lugar de imagem em um documento do Dreamweaver e, em seguida, iniciar o Fireworks MX para projetar o elemento gráfico. Se você salvar o elemento gráfico como um arquivo PNG e um arquivo gráfico pronto para Web, ao voltar para o Dreamweaver MX, a imagem de substituição será atualizada no documento. O Dreamweaver MX inicia automaticamente o aplicativo associado e o documento de origem para permitir que você edite um arquivo SWF do Macromedia Flash MX ou uma imagem do Fireworks MX de um documento do Dreamweaver. Com o comando Criar álbum de fotografias na Web, você pode criar um Website que disponibiliza um álbum de imagens acionando o Fireworks MX para criar uma miniatura e uma imagem de tamanho maior para cada uma das imagens da pasta selecionada. Em seguida, o Dreamweaver MX cria uma página de Web contendo todas as miniaturas, assim como os links para imagens maiores. Se você alterar o formato de uma imagem, o verificador de links avisa para você atualizar as referências à imagem. Por exemplo, se você mudar o formato da imagem chamada my_image de GIF para JPEG, clicar em OK no aviso fará mudar todas as referências para my_image.gif no site para my_image.jpg. Usando o recurso Botão do Macromedia Flash, você pode converter o tipo em um texto com suavização de serrilhado do Flash. 22 Capítulo 1

23 Você pode visualizar um objeto do Macromedia Flash MX em um documento do Dreamweaver MX em tempo de criação usando o botão Reproduzir/Parar no inspetor de propriedades do Flash. A barra Inserir no Dreamweaver MX permite que você adicione botões do Macromedia Flash para navegação diretamente no Dreamweaver MX. O Dreamweaver MX atualizará os links automaticamente sempre que você mover ou mudar o nome de um arquivo. Você também pode mudar manualmente qualquer link, incluindo de URL, de correio eletrônico, de FTP, links nulos e links de scripts. Para obter detalhes sobre os recursos de integração, veja a Ajuda do Dreamweaver e Capítulo 6, Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX, na página 149. Macromedia Flash MX O Macromedia Flash MX fornece tudo que você precisa para criar e publicar aplicativos e conteúdo de nível rich para a Internet com vários recursos. Se você estiver criando elementos gráficos com movimento ou aplicativos alimentados por bancos de dados, o Macromedia Flash MX tem as ferramentas que você necessita para obter ótimos resultados e proprocionar o maior aproveitamento ao usuário, em várias plataformas e dispositivos. Os novos recursos, como vídeo incorporado, melhorias no fluxo de trabalho para gerenciamento de cores e interação com Linha de tempo, ampliam as capacidades de criação da ferramenta. Os modelos e os elementos de interface construídos previamente permitem que desenvolvedores experientes e iniciantes criem rapidamente interatividade complexa com simplicidade de arrastar e soltar. Os projetistas e criadores podem construir com rapidez interfaces de usuário com o alto nível de controle e os recursos que o Flash Player proporciona. Através de um ambiente de edição melhorado de ActionScript, um depurador com vários recursos e tratamento de dados otimizado que usa XML, os projetistas e criadores podem alavancar o conhecimento existente para produzir aplicativos completos voltados para a Internet usando o Flash como a camada de apresentação. Como o cliente líder de nível rich, o Macromedia Flash MX proporciona uma distribuição de conteúdo mais ampla e o método mais eficaz de criar aplicativos para a Internet poderosos e altamente eficientes. Recursos de integração do Macromedia Flash MX Desde a produção simples de elementos gráficos a tarefas complexas de desenvolvimento, o Macromedia Flash MX funciona sem problemas com outros produtos do Macromedia Studio MX. Você pode delinear qualquer conjunto de parâmetros quando colocar um arquivo do Macromedia Flash MX no Dreamweaver MX usando o inspetor de propriedades ou o botão Parâmetros. Você pode passar dinamicamente os pares nome/valor para um arquivo SWF passando-os através do URL que carrega o arquivo. As variáveis passadas informam o SWF de navegação onde o usuário estava no site e, portanto, quais seções de menu devem ficar em destaque. Você pode usar essa técnica para criar elementos de navegação para um site de HTML. Quando você exportar e salvar um arquivo SWF compactado com um arquivo HTML usando o comando Publicar, poderá iniciar o Macromedia Flash MX a partir de um documento do Dreamweaver para editar o documento de origem. Introdução às ferramentas do Macromedia Studio MX 23

24 O Flash MX permite que você importe imagens PNG do Fireworks MX como objetos editáveis que podem ser modificados no Flash, ou como arquivos nivelados que podem ser editados e atualizados no Fireworks. Ao importar arquivos do FreeHand para o Flash MX, você pode manter camadas, blocos de texto, símbolos de biblioteca e páginas. Você também pode escolher um intervalo de páginas para importar. Para obter detalhes sobre os recursos de integração, veja a Ajuda do Flash e Capítulo 9, Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX, na página 229. Macromedia Fireworks MX O Macromedia Fireworks MX fornece a forma mais fácil para criar, otimizar e exportar elementos gráficos interativos em um ambiente único, baseado na Web. O Fireworks MX inclui as ferramentas para assegurar sucesso para todas as pessoas responsáveis pela criação de elementos gráficos para a Web, do desenvolvedor de HTML que mantém e edita elementos gráficos ao especialista de projetos que exige controle de edição de bitmaps mais profissional. O Fireworks MX produz um ambiente simplificado para criar tudo, desde simples botões gráficos a sofisticados efeitos de rollovers e menus pop-up. Ferramentas criativas poderosas, suporte aos principais formatos de arquivos e padrões HTML e integração com editores HTML populares permitem que os projetistas usem o Fireworks MX de forma confortável em qualquer ambiente de trabalho. O espaço de trabalho único, centralizado em Web, oferece edição robusta de bitmaps, controle preciso de texto, flexibilidade criativa, automação e capacidade de ampliação, permitindo produção rápida e atualizações fáceis. O amplo suporte a formatos diferentes de arquivos, compatibilidade com a seção 508 e padrões emergentes como XHTML asseguram que a saída satisfaça as necessidades de hoje e de amanhã. Usando o Fireworks MX, você pode criar, editar e animar elementos gráficos de Web, adicionar interatividade avançada e otimizar as imagens em um ambiente profissional. No Fireworks, você pode criar e editar elementos gráficos vetoriais e de bitmap em um único aplicativo. Você também pode automatizar o fluxo de trabalho para atender às exigências de atualizações e alterações de consumo de tempo. Recursos de integração do Fireworks MX Você pode criar e editar, com facilidade, elementos gráficos diretamente no Macromedia Fireworks MX ou em outros produtos do Macromedia Studio MX. O Fireworks MX pode ser iniciado para editar os elementos gráficos selecionados no Flash MX, Dreamweaver MX, HomeSite+ e FreeHand. Os comportamentos do Fireworks são preservados na exportação, permitindo que você exporte elementos interativos como botões e rollovers. O Roundtrip HTML permite que você faça alterações no Fireworks MX ou no Dreamweaver MX e tenha essas alterações refletidas sem problemas no outro aplicativo. Você pode integrar elementos gráficos de bitmap otimizados do Fireworks em Websites baseados em vetores do Flash MX. O Fireworks permite criar menus pop-up do JavaScript que você pode editar e usar em documentos do Dreamweaver. 24 Capítulo 1

25 Para obter detalhes sobre todos os recursos de integração, veja a Ajuda do Fireworks MX > Usando o Fireworks > Usar o Fireworks com outros aplicativos e Capítulo 12, Integração do Fireworks MX com a família de produtos Macromedia Studio MX, na página 307. Macromedia FreeHand O Macromedia FreeHand é um aplicativo para criação de ilustrações baseadas em vetores. Com o FreeHand, você pode criar elementos gráficos vetoriais, que podem ser redimensionados e impressos com qualquer resolução, sem perda de detalhe ou nitidez. Você pode usar o FreeHand para criar ilustrações gráficas para Web e para impressão, como logotipos e banners de propaganda. Você também pode usar o FreeHand para transformar as suas ilustrações em animações do Macromedia Flash. A interface do usuário do FreeHand contém um espaço de trabalho e um painel Ferramentas consistentes com os outros aplicativos do Macromedia Studio MX, proporcionando uma solução verdadeiramente integrada de impressão e Web. Recursos de integração do FreeHand O Macromedia FreeHand oferece uma imensa flexibilidade no trabalho com a família de produtos do Macromedia Studio MX. Você pode usar o Macromedia FreeHand para criar storyboard rapidamente para os elementos de projeto e criar layout para o seu Website e, em seguida, desenvolver a estrutura e conteúdo no Macromedia Flash MX e Dreamweaver MX. Os objetos do FreeHand podem ser importados para o Flash MX ou Fireworks MX simplesmente copiando e colando ou arrastando-os entre os aplicativos. O recurso Animar camadas permite que você crie um documento que pode ser exportado para o Flash MX como uma animação. As ações do Flash MX podem ser associadas a documentos FreeHand para criar filmes interativos para exibição de Web. Você pode exportar ilustrações do FreeHand no formato de arquivo do Macromedia Flash (SWF) para ser usado na criação de imagens de vetores dinâmicos para exibição na Web. Usando a janela do Macromedia Flash Player, você pode reproduzir e testar os filmes Flash MX dentro do FreeHand. Para obter detalhes sobre os recursos de integração, veja a Ajuda do FreeHand e Capítulo 15, Integração do FreeHand com a família de produtos Macromedia Studio MX, na página 381. Introdução às ferramentas do Macromedia Studio MX 25

26 Macromedia ColdFusion MX Server O Macromedia ColdFusion MX Server é um ambiente rápido de script de servidor para criar aplicativos de nível rich para a Internet. Combinando scripts altamente amigáveis, conectividade sem esforço a dados empresariais, um poderoso recurso de busca integrado e capacidades de gráficos, o ColdFusion MX permite que os desenvolvedores construam e preparem para funcionamento, facilmente, sites dinâmicos de Web, sistemas de publicação de conteúdo, aplicativos self-service, sites comerciais e outros. O ambiente flexível do ColdFusion MX dá suporte aos sistemas operacionais Windows, Linux e UNIX, integra com os padrões Java e.net e oferece enorme facilidade de uso para XML e serviços de Web. O ColdFusion também fornece conectividade de alto desempenho para clientes do Macromedia Flash e suporte nativo para ActionScript do lado do servidor. Com a possibilidade de ser executado como um servidor independente ou ser instalado em servidores de aplicativos de nível empresarial, como IBM WebSphere, o ColdFusion MX permite que qualquer equipe de desenvolvimento produza, com rapidez, experiências mais interessantes para o usuário com os aplicativos. O Macromedia ColdFusion MX move a facilidade de uso premiada e a produtividade do ambiente de scripts do servidor ColdFusion para a arquitetura com tecnologia Java com base em padrões, altamente redimensionável, e amplia o ambiente com um novo suporte inovador para desenvolvimento de aplicativos de nível rich para a Internet, serviços de Web em XML e tecnologia NET da Microsoft. Recursos de integração do ColdFusion MX Server As ferramentas do Macromedia Studio MX dão suporte a desenvolvimento de aplicativos dinâmicos de Web de várias formas. O ColdFusion MX fornece um suporte completo aos novos recursos no ambiente de desenvolvimento do Dreamweaver MX, incluindo criação de protótipos e layout e visual poderoso, edição aprimorada de código e melhor capacidades de desenvolvimento e depuração integrada. Com a introdução do ActionScript do lado do servidor, os desenvolvedores do Macromedia Flash agora podem usar o mesmo idioma de scripts para a lógica de servidor e de cliente. O ColdFusion MX produz serviços de aplicativos altamente integrados adicionando pesquisa completa de texto, gráficos dinâmicos e conectividade de alto desempenho aos clientes do Macromedia Flash para os seus aplicativos. O ColdFusion MX dá uma capacidade de ampliação praticamente ilimitada para desenvolvimento com bibliotecas de tags personalizadas, componentes reutilizáveis, Java/C++ e milhares de adicionais de terceiros disponíveis que podem ser facilmente incorporados em aplicativos que usam o Dreamweaver MX e Flash MX. Para obter informações sobre como desenvolver aplicativos de ColdFusion com a família de produtos do Macromedia Studio MX, veja a Ajuda do Dreamweaver e a Ajuda do Flash. 26 Capítulo 1

27 Macromedia Extension Manager Uma extensão é uma parte de software que pode ser adicionada a um aplicativo do Macromedia para melhorar as capacidades do aplicativo. O Macromedia oferece vários tipos de extensões, incluindo elementos de interface, extensões de acesso, HTML, JavaScript e fragmentos de código ActionScript e bibliotecas de símbolos adicionais. Todos os aplicativos do Macromedia que dão suporte ao Macromedia Extension Manager podem usar os pacotes de extensão de fontes que instalam uma fonte em seu disco rígido. O Macromedia Extension Manager fornece uma forma fácil e conveniente para instalar e excluir extensões em aplicativos do Macromedia e encontrar informações sobre as extensões que você instalou. Ele também fornece uma forma conveniente para navegar para o site do Macromedia Exchange, onde você pode obter mais extensões, obter informações sobre extensões e escrever revisões de extensões. O Website do Macromedia Exchange em é um local que armazena vários tipos de extensões; algumas criadas pela Macromedia, outras por outros desenvolvedores. Se você descobrir uma extensão no Website, pela qual fique interessado, poderá descarregá-la usando o navegador de Web e instalá-la em um aplicativo usando o Macromedia Extension Manager. Instalação do Macromedia Extension Manager O Macromedia Extension Manager é instalado como parte da instalação completa do Macromedia Studio MX ou com a instalação separada do Dreamweaver MX. Se você selecionar uma opção diferente de instalação, poderá instalá-lo da pasta Extension Manager no CD-ROM do produto Studio MX ou poderá descarregar a última versão do exchange/. Explorar o espaço de trabalho do MX Os produtos do Macromedia Studio MX dão suporte a muitos recursos comuns e elementos de interface, como menus, painéis, procedimentos de iniciar e editar arquivos e atalhos de teclado, para facilitar o trabalho entre eles. Você pode personalizar com facilidade o espaço de trabalho de acordo com o seu estilo de trabalho. Trabalho com recursos compartilhados O projeto da página, produção de elementos gráficos, desenvolvimento de conteúdo e gerenciamento do projeto são algumas das tarefas que se beneficiam do suporte expandido nos produtos Macromedia Studio MX. Edição de objetos e documentos com o inspetor de propriedades O Inspetor de propriedades simplifica a criação de documentos ao tornar mais fácil o acesso à maioria dos atributos da seleção atual utilizados com freqüência. É possível alterar os atributos do objeto ou do documento no Inspetor de propriedades sem ter que acessar qualquer menu ou painel. O Inspetor de propriedades exibe informações e configurações relativas ao documento, texto, símbolo, forma, bitmap, vídeo, grupo, quadro ou ferramenta atual. Quando dois ou mais tipos diferentes de objetos são selecionados, o Inspetor de propriedades exibe o número total de objetos selecionados. Introdução às ferramentas do Macromedia Studio MX 27

28 A tela a seguir mostra o Inspetor de propriedades no Dreamweaver MX para um arquivo de imagem. Essa interface compacta fornece as propriedades da imagem, exibe uma miniatura e permite que você edite e melhore as propriedades. Você pode, inclusive, converter a imagem em um mapa de imagens. Os inspetores de propriedade no Dreamweaver MX, Flash MX e Fireworks MX funcionam da mesma forma a única diferença é que cada uma delas exibe as propriedades específicas e os controles das suas ferramentas. Para acessar a ajuda sensível a contexto para um inspetor de propriedades, clique no ponto de interrogação no canto direito superior. Para obter mais informações sobre o inspetor de propriedades, veja o sistema de ajuda de cada produto. Como obter ajuda do painel Respostas O painel Respostas no Macromedia Flash MX, Dreamweaver MX e no Fireworks MX fornece informações de acesso rápido que ajudam a trabalhar de forma eficaz com os produtos. Isso inclui tutoriais, notas técnicas, extensões e outros conteúdos úteis. A tela a seguir mostra o painel Respostas do Flash MX. Para obter as últimas informações sobre um produto da macromedia.com, clique no botão Atualizar. 28 Capítulo 1

29 Acessar o Macromedia Sitespring para gerência de projeto Se você usa o Macromedia Sitespring para gerenciar projetos de desenvolvimento, pode efetuar login na home-page do Sitespring do Dreamweaver MX, Flash MX ou Fireworks MX. Nessa página, você pode visualizar rapidamente o status de seus projetos. O painel Sitespring exibe as informações de tarefas do projeto selecionado. Para obter mais informações sobre como trabalhar com Sitespring, veja a documentação do Sitespring. Para efetuar o download de uma versão de avaliação de Sitespring, vá para software/sitespring/trial/. Após instalar o Sitespring, veja no arquivo Leiame os links para as informações sobre como trabalhar com esse sistema de gerenciamento de projeto fácil de usar. Usar menus comuns e atalhos de teclado Os menus nos produtos do Macromedia Studio MX estão estruturados de forma que os itens comuns apareçam onde você espera vê-los conforme trabalha nos produtos. Você pode aplicar os atalhos do teclado padrão da Macromedia a todos os produtos ou definir atalhos personalizados com os quais estiver acostumado a trabalhar. Para obter mais informações, veja o sistema de ajuda de cada produto. Compartilhamento do painel Ferramentas O Macromedia Flash MX, o Fireworks MX e o FreeHand fornecem uma interface comum e local padrão para o painel Ferramentas, de forma que você possa trabalhar sem problemas com ferramentas, paletas de cores e outros recursos para construir imagens e movê-los nos produtos. A ferramenta Caneta comum dá os mesmos recursos para criação de ilustrações aos produtos, mas permite que você defina as preferências personalizadas para obter o máximo uso produtivo dessa ferramenta de criação de ilustrações nos produtos individuais. Para obter mais informações sobre as ferramentas e o painel Ferramentas, veja o sistema de ajuda de cada produto. Introdução às ferramentas do Macromedia Studio MX 29

30 Trabalho com os painéis MX Os painéis nos produtos Macromedia Studio MX ajudam a exibir, organizar e alterar os elementos em um documento. Você pode personalizar a interface de um produto exibindo os painéis que precisa para uma tarefa específica, enquanto oculta outros painéis. A ilustração a seguir mostra os elementos disponíveis em todos os produtos do Studio MX para mover e redimensionar os painéis, para acessar menus e para posicionar as guias do painel. Ponteiro mover Seta expansora e título Barra de título Menu Opções Guias A barra de título contém os elementos de interface para mover e redimensionar um painel. Para abrir o menu de contexto de um painel ou grupo de painéis, clique com o botão direito do mouse (Windows) ou clique com Control (Macintosh) na barra de título. O ponteiro de mover pode ser usado para mover um painel para uma parte diferente da tela, clicando no ponteiro e arrastando o painel. A seta expansora e o título do painel permite que você recue ou expanda um painel clicando nessa área. No Dreamweaver MX e no Fireworks MX, clique duas vezes para maximizar o painel e recuar os outros painéis na área ancorada. O menu Opções fornece várias opções relacionadas a cada painel. Para exibi-lo, basta clicar no ícone no canto superior direito do painel. 30 Capítulo 1

31 As guias podem ser usadas para reposicionar um painel. Para afastar um painel de um grupo de painéis, clique na guia e arraste o painel. Para redimensionar um painel e os painéis ao redor, você clica e arrasta o espaço próximo de uma guia. Um painel precisa conter mais de uma guia para que as guias sejam exibidas. O Macromedia Flash MX não usa painéis com guias. Ao criar um novo grupo de painéis no Macromedia Flash MX ou no Dreamweaver MX, o grupo é denominado, automaticamente, com o mesmo nome da guia. O nome do painel é atualizado quando você adiciona ou remove guias. Você pode renomear um grupo de painéis usando o menu Opções. Se o grupo contiver somente um painel, o nome do painel não poderá ser editado. Para obter mais informações sobre painéis, veja o sistema de ajuda de cada produto. Introdução às ferramentas do Macromedia Studio MX 31

32 32 Capítulo 1

33 Parte II Desenvolvimento da Web Parte II Os capítulos da Parte II fornecem uma visão geral sobre as tecnologias da Web e apresentam um fluxo de trabalho de desenvolvimento utilizando as ferramentas Macromedia Studio MX. Os capítulos a seguir fazem parte desta seção: Capítulo 2, Entendimento de aplicativos e tecnologias para Web Capítulo 3, Fluxo de trabalho de desenvolvimento da Web

34

35 CAPÍTULO 2 Entendimento de aplicativos e tecnologias para Web Esse capítulo aborda a terminologia e os conceitos e básicos dos aplicativos para a Internet e Web e apresenta um fluxo de trabalho baseado em cenário para um aplicativo dirigido a dados. Ele conclui com uma olhada nas novas e empolgantes tendências de desenvolvimento de serviços acessíveis de nível rich para os usuários. Entendimento da Internet e de tecnologias correlatas Uma forma de entender a Internet é imaginá-la como uma rede de longa distância espalhada em vários locais geográficos. Cada local nessa enorme rede é composto de um grupo de computadores relativamente próximos uns dos outros, conectados por hardware e cabos. Os usuários se comunicam de um local com o outro usando um protocolo de comunicação conhecido como IP (protocolo de Internet). Esse protocolo, executado em cada computador conectado à Internet, assegura que não ocorram interrupções na comunicação e que os computadores em rede possam se comunicar e trocar dados uns com os outros. Todo computador conectado à Internet tem um endereço de IP exclusivo. Se existirem endereços de IP duplicados, as informações para um desses endereços poderiam terminar no local incorreto. Seria como usar o mesmo endereço para duas residências. Como o remetente da informação, você nunca saberia se o destinatário real recebeu a sua informação. 35

36 Aplicativos para a Internet Os aplicativos que são executados na Internet são conhecidos como aplicativos para a Internet. A tabela seguinte relaciona alguns dos aplicativos para a Internet mais conhecidos: Aplicativo WWW Correio eletrônico FTP Telnet NFS Descrição World Wide Web. A Web é um sistema de informações de hipertexto. Ela permite que você leia e navegue, obtendo informações visuais e de texto, de uma forma não linear com base no que você deseja ler em seguida. Essas informações, disponíveis gratuitamente, estão associadas de forma diversa na Internet e estão disponíveis para você procurá-las sempre que precisar. Um Website é um local na World Wide Web. Quando você quiser visualizar uma página, o navegador se conectará ao Website onde a página está localizada para obter as informações. Correio eletrônico. Os programas de correio eletrônico, como o Microsoft Outlook, permitem que você envie e receba mensagens eletronicamente pela Internet. FTP (protocolo de transferência de arquivos). Esse protocolo permite que você transfira informações entre os hosts, usando um site de FTP. O telnet permite que você efetue login a um computador de um local remoto. Sistema de arquivos em rede (Network File System). O NFS permite que você compartilhe arquivos entre os hosts. Os aplicativos de Internet se comunicam pela Internet usando IP, que transmite os dados do aplicativo em pacotes pequenos para um endereço de IP de destino. O host receptor processa as informações que recebe. Aplicativos para Intranet Uma Intranet é uma LAN (rede local) ou WAN (rede de longa distância) particular que permite que você use e interaja com aplicativos baseados em Internet em um ambiente seguro. Essas redes particulares existem em empresas grandes, empresas pequenas e, inclusive, em escritórios domésticos. As redes particulares permitem que as empresas e organizações determinem quem pode compartilhar as informações e quem pode acessá-las. Um aplicativo para a Intranet é um aplicativo que funciona em uma Intranet particular (rede). Ele difere de um aplicativo para a Internet somente em relação a quem pode acessá-lo e ao local do computador do cliente que o acessa. Um aplicativo para a Intranet também pode ser executado através de uma Internet pública. Quando um aplicativo para a Intranet é executado na Internet, o aplicativo é chamado de aplicativo de Internet. Esses termos, os aplicativos para Internet e aplicativos para intranet, são usados em todo esse livro. Servidores de Web Um servidor de Web é um software que serve páginas de Web para clientes que as solicitam. O software servidor de Web é executado em qualquer computador. Normalmente as pessoas chamam o host que executa o software servidor de Web como servidor de Web e pensam no servidor como o hardware. Entretanto, tecnicamente, o servidor de Web é somente o programa de software e não o hardware. Como um servidor de Web e os hosts em conexão se comunicam Quando um usuário com um endereço de IP específico solicita um arquivo, o servidor de Web recupera o arquivo e o envia ao endereço de IP que o solicita. O conteúdo de um arquivo não é importante para o servidor de Web. É o navegador de Web, não o servidor de Web, que faz a solicitação e interpreta e exibe os dados no campo que foi devolvido do servidor de Web. 36 Capítulo 2

37 Quando você fizer uma solicitação de um servidor de Web, uma conexão de IP é feita na Internet entre o cliente fazendo a solicitação e o host executando o software servidor de Web. Assim que uma solicitação é atendida pelo servidor de Web, a conexão de Internet entre o cliente e o host é interrompida. As imagens ou links de uma única página a outras páginas requerem conexões separadas. Normalmente, são necessárias muitas solicitações para recuperar todas as informações em uma página de Web. Páginas de Web As informações na World Wide Web são apresentadas em páginas de Web. Você pode criar páginas de Web usando algumas tecnologias centralizadas no cliente. Uma página de Web pode incluir várias informações: texto, listas, formulários para obtenção de dados, tabelas para apresentar dados, scripts que realizam uma função, conteúdo multimídia que anima páginas etc. Independentemente do conteúdo da página de Web, o navegador de Web deverá processar e exibir a página. Navegadores de Web Um navegador de Web é um software que reside em um computador que você usa para ver páginas e para navegar pela World Wide Web. Quando você usar um navegador para solicitar uma página em um Website, o navegador fará uma conexão a um servidor de Web. Como mencionado anteriormente, um navegador de Web processa as páginas de Web que recebe de um servidor de Web e as exibe para o usuário. Dependendo dos recursos do navegador, você pode reproduzir arquivos multimídia, visualizar e interagir com applets Java, ler o correio eletrônico ou usar outros recursos avançados. Alguns dos navegadores mais populares de Web atualmente são o Microsoft Internet Explorer, o Netscape Navigator e o Mozilla. Infelizmente, a maioria dos navegadores entende as páginas de Web de forma diferente atualmente. Os projetistas de Web precisam prestar atenção especial à forma como o navegador se comporta ou os usuários poderão não conseguir ver as páginas como os projetistas gostariam. Portanto, os projetistas de Web precisam testar as páginas em vários navegadores antes de publicá-las no Website. HTML Os autores de páginas de Web criam arquivos de texto simples usando a linguagem de marcação de hipertexto (HTML). Essa linguagem, mais conhecida como HTML, consiste de uma série de tags (comandos), fáceis de serem aprendidos, usados em uma página de texto. As tags podem indicar elementos, estrutura, formatação da página, links de hipertexto para outros locais e assim por diante. Os navegadores de Web lêem as tags HTML e formatam o texto e estilos que aparecem na tela de computador. As tags HTML normalmente possuem uma tag inicial e uma final e entre elas está o texto que afetam. A tag inicial ativa um recurso (título, negrito etc.) e a tag final o desativa. Todas as tags finais possuem uma barra (/) que antecede o nome da tag. A maior parte das tags HTML está disposta da seguinte forma: <NomeDaTag>texto</NomeDaTag> O nome da tag está sempre entre sinais de menor e maior (<>) e não diferencia maiúsculas de minúsculas, que significa que você pode especificar o nome da tag em maiúsculas, minúsculas ou misturado. Entendimento de aplicativos e tecnologias para Web 37

38 A maior parte dos navegadores de Web permite ver o código origem de uma página de HTML. Essa opção normalmente está localizada em um menu ou botão. JavaScript Os desenvolvedores de Web escrevem em JavaScript para criar pequenos programas que são executados no navegador. O JavaScript é uma das linguagens de script centralizadas no cliente mais conhecidas atualmente. Ela é aceita por quase todos os navegadores no mercado. Os desenvolvedores de Web usam JavaScript para fazer o seguinte: Validar as ações do usuário Criar mensagens que se movimentam na barra de status do navegador Animar texto ou imagens O JavaScript pode ser inserido no arquivo HTML. A tag <script> informa ao navegador que o pedaço de texto a seguir, limitado pela tag final </script>, não é HTML, mas código do script a ser processado. Apesar do uso de JavaScript poder ser semelhante a tags de HTML, o JavaScript é mais difícil de aprender que HTML. Para obter mais informações sobre JavaScript, consulte algum manual básico sobre JavaScript. ActionScript URLs Os desenvolvedores do Macromedia Flash escrevem em ActionScript para controlar a interação e a reprodução do Flash Player. A sintaxe e o estilo do ActionScript são muito semelhantes aos do JavaScript. O ActionScript é a linguagem de scripts de cliente mais usada atualmente e tem sido uma parte integral do processo de criação do Flash desde o Flash Player 4. As funções a seguir são algumas das funções do ActionScript usadas pelos desenvolvedores de Flash: Criação de interfaces de usuário interativas Controle de elementros gráficos, texto e elementos multimídia Carga e processamento de dados do servidor, incluindo elementos de XML e multimídia (JPG, MP3, vídeo) Para obter mais informações sobre o ActionScript, veja a Ajuda do Flash. Todas as páginas com informações na World Wide Web possuem um endereço exclusivo. Esse endereço é chamado de localizador de recurso uniforme (Uniform Resource Locator), ou URL. Um URL é um ponteiro que aponta para uma parte de dados na Web. Esse endereço poderia incluir um documento de Web, um arquivo em um site de FTP ou mesmo um correio de endereço eletrônico. Além disso, você usa URLs especiais para enviar correio eletrônico e para usar o programa Telnet. Os URLs contêm informações sobre o seguinte: Como obter as informações (qual protocolo usar: FTP, HTTP etc.) O nome do host de Internet a contactar (por exemplo, localhost/mysite ou ftp.mysite.com) O diretório ou outro local onde as informações solicitadas são encontradas 38 Capítulo 2

39 Entendimento dos aplicativos para Web Um aplicativo para a Web é um Website que contém páginas armazenadas em um servidor com conteúdo parcialmente ou totalmente indeterminado. O conteúdo final de uma página de Web será determinado somente quando o usuário solicitar uma página do servidor de Web. Como o conteúdo final da página varia de acordo com cada pedido, com base nas ações do usuário, esse tipo de página é chamado página dinâmica. Os aplicativos para a Web são criados para solucionar diversos desafios e problemas. Esta seção descreve usos comuns de aplicativos para a Web e contém um exemplo simples. Usos comuns de aplicativos para a Web Os aplicativos para a Web possuem diversas utilidades, tanto para usuários como desenvolvedores, incluindo as seguintes: Permite que os usuários localizem informações de forma rápida e fácil em um Website com muito conteúdo. Este tipo de aplicativo para a Web oferece aos usuários a capacidade de procurar, organizar e navegar através do conteúdo do modo que acharem conveniente. Alguns exemplos são intranets das empresas, Microsoft MSDN ( e Amazon.com ( Agrupamento, gravação e análise dos dados fornecidos por usuários. Há alguns anos, os dados inseridos em formato HTML eram enviados como mensagens de correio eletrônico a funcionários ou aplicativos CGI para serem processados. Um aplicativo para a Web pode salvar dados do formato diretamente em um banco de dados, extrair os dados e criar relatórios baseados na Web para análise. Alguns exemplos são páginas de bancos on-line, páginas finais de lojas de compras on-line e formulários de informações pessoais do usuário. Atualiza o conteúdo dos Websites que mudam constantemente o conteúdo. Um aplicativo para a Web elimina a tarefa do projetista de atualizar constantemente o conteúdo HTML do site. Os provedores de conteúdo, como sites de notícias on-line, fornecem o conteúdo para o aplicativo e o aplicativo atualiza o site automaticamente. Por exemplo: Economist ( e CNN ( Exemplo de aplicativo para a Web Clay é um Web-designer e desenvolvedor profissional responsável pela manutenção da intranet e de sites na Internet em uma empresa de médio porte, com 1000 funcionários. Certo dia, Jill, do Departamento de recursos humanos, foi até ele com um problema. O Depto. de RH da empresa administra um programa de ginástica que concede, para os funcionários, pontos para cada quilômetro percorrido a pé, de bicicleta ou correndo. Cada funcionário deve informar o total de quilômetros percorridos mensalmente, enviando um correio eletrônico para Jill. No final do mês, Jill reúne todas as mensagens de correio eletrônico, calcula o número de pontos para cada funcionário e concede aos funcionários pequenos prêmios em dinheiro de acordo com a pontuação total. O problema é que o programa de ginástica se tornou um grande sucesso. Hoje, o número de funcionários participantes cresceu tanto que a caixa postal de Jill fica inundada de correios eletrônicos no final de cada mês. Jill pergunta a Clay se ele pode conseguir uma solução com base na Web. Entendimento de aplicativos e tecnologias para Web 39

40 Clay propõe um aplicativo para a Web, baseado na intranet para executar as seguintes tarefas: Permitir que os funcionários digitem a quilometragem em uma página da Web que usa formato HTML simples Armazenar a quilometragem do funcionário em um banco de dados Calcular os pontos com base nos dados de quilometragem Permitir que os funcionários acompanhem o progresso mensalmente Permitir que Jill acesse o total de pontos ao final de cada mês com um único clique Imediatamente, Clay criou um aplicativo com o Macromedia Dreamweaver MX, que possui as ferramentas necessárias para a criação deste tipo de produto de forma rápida e fácil. Ele decide usar um pequeno banco de dados para armazenar informações sobre cada funcionário e ColdFusion MX para processar as páginas dinâmicas. Além dos recursos listados acima, o aplicativo inclui um conjunto de páginas de busca e resultados, de forma que Jill e os outros funcionários possam procurar registros específicos no banco de dados. Ele também inclui uma página detalhada para cada funcionário, que contém informações extras como ramal de telefone, local do trabalho e quanto tempo cada funcionário participou no programa de ginástica. No ano seguinte, o programa de ginástica da empresa se torna um sucesso tão grande que ganha reconhecimento da comunidade local. O presidente da empresa decide colocar páginas interativas sobre o programa no site da empresa na Internet. Ele pede a Clay para desenvolver um aplicativo que permitisse que os usuários realizassem as seguintes tarefas: Visualizar as informações seletivamente sobre o histórico do programa de ginástica em uma parte da tela Procurar informações sobre o programa em outra parte da tela Comunicar-se com o diretor de programa de ginástica através de uma mensagem instantânea Visualizar clipes de vídeo de atividades de programa de ginástica diferentes Clay informa ao presidente que todas essas tarefas são possíveis com um aplicativo de nível rich para a Internet. Usando Macromedia Flash MX, Clay constrói uma nova interface que incorpora todas as informações solicitadas em uma única página de Web. Ele também amplia a lógica do servidor no Macromedia ColdFusion MX e instala o novo aplicativo acumulando todas as propriedades do aplicativo no Dreamweaver MX e publicando os novos arquivos no servidor da empresa. Os visitantes no site da empresa na Internet agora podem ver muitos tipos diferentes de informações sobre o programa de ginástica em uma tela. Adicionalmente, cada vez que um usuário interage com uma determinada parte da página, somente a seção da interface é atualizada na janela do navegador. Termos mais utilizados de aplicativo para Web Os termos a seguir são usados freqüentemente em conversas sobre aplicativos para a Web. O servidor de aplicativos é um software que auxilia o servidor de Web a processar páginas na Web contendo scritps ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor de Web envia a página ao servidor de aplicativos para processamento antes de enviá-la ao navegador. Para obter mais informações, veja Como funciona um aplicativo para a Web, na página 42. Os servidores de aplicativos mais comuns são Macromedia ColdFusion Server, Macromedia JRun Server, Microsoft.NET Framework, IBM WebSphere e Apache Tomcat. 40 Capítulo 2

41 Um banco de dados é um conjunto de dados armazenados em tabelas. Cada linha de uma tabela consiste de um registro de dados e cada coluna consiste de um campo do registro, da seguinte forma: Campos (colunas) Número Sobrenome Nome Posição Objetivos Registros (linhas) Um driver do banco de dados é um software que atua como um intérprete entre o servidor de aplicativos e o banco de dados. Os dados do banco de dados são armazenados em formato proprietário. O driver de banco de dados permite ao aplicativo para a Web ler e manipular os dados que, de outra maneira, não seriam legíveis. O sistema de gerenciamento de banco de dados (DBMS ou sistema de banco de dados) é um software utilizado para criar e manipular banco de dados. Os sistemas de gerenciamento de banco de dados mais comuns são Microsoft Access, Oracle 9i e MySQL. Uma consulta ao banco de dados é a operação que obtém um conjunto de registros de um banco de dados. Uma consulta consiste de critérios de busca expressos em uma linguagem de acesso a banco de dados chamada SQL (Structured Query Language) ou base de dados estruturada. Por exemplo: a consulta pode especificar que apenas algumas colunas ou somente alguns registros serão inseridos no conjunto de registros. Uma página dinâmica é uma página da Web que é personalizada ao mesmo tempo em que ela é executada por um servidor de aplicativos, antes de ser enviada ao navegador. Para obter mais informações, veja Como funciona um aplicativo para a Web, na página 42. Conjunto de registros é um subconjunto de dados extraídos de uma ou mais tabelas de um banco de dados, como no exemplo a seguir: Número Sobrenome Nome Posição Objetivos Tabela do banco de dados Sobrenome Nome Posição Tabela do conjunto de registros Entendimento de aplicativos e tecnologias para Web 41

42 Um banco de dados relacional é um banco de dados contendo duas ou mais tabelas que compartilham dados. O banco de dados a seguir é relacional porque as duas tabelas compartilham a coluna DepartmentID. A tecnologia do servidor é a tecnologia utilizada pelo servidor de aplicativos para modificar as páginas dinâmicas em tempo de execução. Um página estática é uma página da Web que não sofre alterações quando executada por um servidor de aplicativo antes de ser enviada ao navegador. Para obter mais informações, veja Processamento de páginas estáticas de Web, na página 43. Um aplicativo para Web é um Website que contém páginas armazenadas em um servidor de Web com conteúdo parcialmente ou totalmente indeterminado. O conteúdo final das páginas somente será determinado quando o usuário solicitar uma página do servidor de Web. O servidor de Web é um software que fornece páginas de Web em resposta a pedidos originados de navegadores. Um pedido de página é gerado quando o usuário clica em um link em uma página da web, seleciona um site favorito em um navegador ou digita o endereço de um site (URL) e clica em Ir no navegador. O servidores de Web mais conhecidos são Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server e iplanet Web Server. Como funciona um aplicativo para a Web Um aplicativo para a Web é um conjunto de páginas estáticas e dinâmicas. Uma página estática é uma página que não é modificada quando solicitada pelo usuário: o servidor de Web envia a página ao navegador que a solicitou sem modificá-la. Por outro lado, uma página dinâmica de Web é modificada pelo servidor antes de ser enviada ao navegador. Como a página pode ser alterada, ela é chamada de dinâmica. Por exemplo, é possível criar uma página para exibir resultados do programa de boa forma e deixar que certas informações (nome do funcionário e resultados) sejam determinadas quando a página for solicitada por um funcionário. As seções a seguir descrevem como as páginas de Web são processadas e, em seguida, explicam como você pode desenvolver conteúdo dinâmico para Web usando o Macromedia Dreamweaver MX, o Macromedia Flash MX e o ColdFusion MX. 42 Capítulo 2

43 Processamento de páginas estáticas de Web Um Website compreende um conjunto de páginas e arquivos HTML interelacionados, hospedados em um computador com servidor de Web. Um servidor de Web é um software que fornece páginas da Web em resposta a pedidos vindos de navegadores. Um pedido de página é gerado quando o usuário clica em um link em uma página da web, seleciona um site favorito em um navegador ou digita o endereço de um site (URL) e clica em Ir no navegador. O conteúdo final de uma página de Web estática é determinado pelo projetista da página e não é modificado quando a página é solicitada. Por exemplo: <html> <head> <title>departamento de ligações</title> </head> <body> <strong>departamento de ligações</strong><br> Fale com alguém das Vendas. </body> </html> Cada linha do código HTML da página é escrito pelo projetista antes da página ser colocada no servidor. Como conteúdo HTML não é alterado após ir para o servidor, este tipo de página é chamado de página estática. Observação: Na realidade, é possível que uma página estática não seja estática. Por exemplo: um rollover ou filme Macromedia Flash podem dar vida a uma página estática. Entretanto, esse manual chama uma página de estática se ela é enviada ao navegador sem alterações. Quando o servidor de Web recebe um pedido de uma página estática, o servidor verifica o pedido, localiza a página e a envia ao navegador que a solicitou, conforme demonstrado na figura a seguir: Etapa 1: O navegador de Web solicita uma página estática. Solicitação Navegador da Web Resposta Etapa 3: O servidor de Web envia a página ao navegador que a solicita. SERVIDOR DA WEB Etapa 2: O servidor de Web localiza a página. <HTML> <p>olá </HTML> Página estática Entendimento de aplicativos e tecnologias para Web 43

44 No caso de aplicativos para Web, que contêm tanto páginas de Web estáticas como dinâmicas, certas linhas de código não são determinadas quando o usuário solicita a página. Estas linhas devem ser determinadas por algum mecanismo antes da página ser enviada ao navegador. Este mecanismo é exemplificado na seção seguinte. Processamento de páginas dinâmicas de Web Quando um servidor de Web recebe um pedido de uma página da Web estática, o servidor envia a página ao navegador que a solicitou sem nenhuma alteração. Ao receber o pedido de uma página dinâmica, no entanto, o servidor de Web reage de modo diferente: ele transfere a página a um pequeno software especial responsável por completar a página. Esse software especial é chamado de servidor de aplicativos. Um exemplo de um servidor de aplicativos é o Macromedia ColdFusion MX, que pode ser instalado a partir do CD-ROM do Macromedia Studio MX para ser executado com um servidor de Web. Para obter mais informações sobre como instalar o ColdFusion MX, veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página 391. O servidor de aplicativo lê o código da página, completa a página de acordo com as instruções do código e, em seguida, remove o código da página. O resultado é uma página estática que o servidor de aplicativo retorna ao servidor de Web que, por sua vez, envia a página ao navegador que a solicitou. Ao acessar a página, tudo o que o navegador exibe é simplesmente HTML. Veja a seguir o processo, de uma forma geral: Etapa 1: O navegador de Web solicita uma página dinâmica. Solicitação Navegador da Web Resposta Etapa 5: O servidor de Web envia a página concluída ao navegador que a solicita. Etapa 2: O servidor de Web localiza a página e a encaminha ao servidor de aplicativo. <HTML> <code> </HTML> SERVIDOR DA WEB <HTML> <p>olá </HTML> Etapa 4: O servidor de aplicativo envia a página concluída ao servidor de Web. Etapa 3: O servidor de aplicativo examina a página em busca de instruções e completa a página. Servidor de aplicativos 44 Capítulo 2

45 Acessar um banco de dados Um servidor de aplicativo permite que você trabalhe com recursos centralizados no servidor, como bancos de dados. Por exemplo, uma página dinâmica pode instruir o servidor de aplicativo a extrair dados de um banco de dados e inseri-los no conteúdo HTML da página. As instruções para extrair dados de um banco de dados são chamadas de consulta ao banco de dados. Uma consulta consiste de critérios de busca expressos em uma linguagem de acesso a banco de dados chamada SQL (Structured Query Language) ou base de dados estruturada. A consulta por SQL é determinada por scripts ou tags no servidor da página. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Guia de iniciante para banco de dados. Um servidor de aplicativo não pode se comunicar diretamente com um banco de dados porque o formato proprietário do banco de dados torna os dados indecifráveis, do mesmo modo que um documento do Word não pode ser lido pelo Bloco de notas. O servidor de aplicativo pode se comunicar somente através de intermediário de um driver de banco de dados, que age como um intérprete entre o servidor de aplicativo e o banco de dados. Após o driver ter estabelecido comunicação, a origem de dados é consultada e um conjunto de registros contendo os resultados da consulta é criado. Um conjunto de registros é um subconjunto de dados obtidos de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de aplicativo e os dados são utilizados pela página dinâmica. A seguir uma consulta simples ao banco de dados escrita em SQL: SELECT sobrenome, nome, pontos de aptidão FROM funcionários Esta sentença cria um conjunto de registros de três colunas e o preenche com linhas contendo o sobrenome, nome e pontos de aptidão de todos os funcionários no banco de dados. Para obter mais informações, veja a ajuda do Dreamweaver > Usando o Dreamweaver > Manual básico de SQL. Entendimento de aplicativos e tecnologias para Web 45

46 A ilustração a seguir mostra o processo de consulta a um banco de dados e como retornar os dados ao navegador: Navegador da Web Etapa 1: O navegador de Web solicita uma página dinâmica. Solicitação Resposta Etapa 2: O servidor de Web localiza a página e a encaminha ao servidor de aplicativo. <HTML> <code> </HTML> SERVIDOR DA WEB <HTML> <p>olá </HTML> Etapa 9: O servidor de Web envia a página concluída ao navegador que a solicita. Etapa 3: O servidor de aplicativo examina a página em busca de instruções. Servidor de aplicativos Etapa 8: O servidor de aplicativo insere os dados na página e envia a página para o servidor de Web. Etapa 4: O servidor de aplicativo envia a consulta ao driver do banco de dados. Consulta Conjunto de registros Etapa 7: O driver transfere o conjunto de registros ao servidor de aplicativo. Driver de banco de dados Etapa 5: O driver consulta o banco de dados. Etapa 6: O conjunto de registros retorna ao driver. Banco de dados É possível utilizar quase todos os bancos de dados com aplicativos para a Web, contanto que haja um driver adequado para o banco de dados. Se planeja criar aplicativos pequenos e baratos, utilize um banco de dados com base em arquivos, como os criados no Microsoft Access. Se desejar criar aplicativos mais poderosos para fins profissionais, utilize um banco de dados com base em servidor, como os criados no Microsoft SQL Server, Oracle 8i ou IBM DB2. Se o banco de dados estiver localizado em um sistema diferente do servidor de Web, estabeleça uma conexão rápida entre os dois sistemas para que o aplicativo para a Web possa operar de modo rápido e eficiente. 46 Capítulo 2

47 Criação de páginas dinâmicas A criação de uma página dinâmica consiste em desenvolver o conteúdo HTML primeiro, adicionando os scripts ou tags centralizados no servidor ao HTML para tornar a página dinâmica. Ao visualizar o código resultante, a linguagem aparece incorporada ao HTML da página. Portanto, essas linguagens são conhecidas como linguagens de programação incorporadas ao HTML. O exemplo a seguir utiliza ColdFusion Markup Language (CFML): <html> <body> <b>departamento de ligações</b><br> <!--- as instruções incorporadas começam aqui ---> <cfset departmento="vendas"> <cfoutput> Fale com alguém de #departmento#. </cfoutput> <!--- as instruções incorporadas terminam aqui ---> </body> </html> As instruções incorporadas nessa página executam as seguintes ações: Criam uma variável chamada Departamento e atribuem a seqüência "Vendas" a ela. Gravam o valor da seqüência da variável "Vendas" no código HTML. O servidor de aplicativo retorna a seguinte página ao servidor de Web: <html> <body> <b>departamento de ligações</b><br> Fale com alguém das Vendas. </body> </html> O servidor de Web envia a página ao navegador que a solicitou, que a exibe do seguinte modo: Departamento de ligações Fale com alguém das Vendas. Desenvolvimento de aplicativos de nível rich para a Internet Com o Macromedia Flash MX, os desenvolvedores têm um novo modelo de desenvolvimento estruturado e conjunto de tecnologias centralizadas no servidor para construir aplicativos para a Internet extremamente flexíveis, mais rápidos, mais poderosos e com vários recursos. Com ferramentas para integração de servidor de aplicativo e novas capacidades de comunicação, o Flash MX permite que os desenvolvedores produzam um novo tipo de aplicativo que vai além do modelo de aplicativos de Internet tradicional descrito nas seções anteriores. Os desenvolvedores do Flash MX podem usar essas soluções novas para criar aplicativos de nova geração como um aplicativo de calendário que sincroniza dados automaticamente quando os usuários estão conectados, um aplicativo compartilhado que apresenta um quadro branco no qual um grupo de usuários de todo o mundo contribuem com idéias e um aplicativo de aprendizado eletrônico que permite que os instrutores treinem vários participantes simultaneamente. Entendimento de aplicativos e tecnologias para Web 47

48 A forma mais rápida e eficaz com que o Flash MX se comunica com servidores de aplicativo e serviços de Web é através do Flash Action Message Format (AMF), um protocolo de alto desempenho e otimizado, que é executado em HTTP e permite que o ActionScript invoque e use dados e lógica hospedados em um servidor de aplicativo ou um serviço XML na Internet. O AMF dá suporte à passagem de tipos de dados complexos e simples entre o Flash ActionScript e em qualquer linguagem de programação centralizada no servidor. O AMF é permitido pelo Flash Remoting, um novo componente de servidor incluído no ColdFusion MX e disponível para outros servidores J2EE e.net. A alta integração entre o Flash MX e o ColdFusion MX permite que o ActionScript chame os métodos ou funções do ColdFusion. Na ilustração acima, um usuário interage com um filme Flash incorporado em uma página de HTML. O arquivo SWF usa o AMF para comunicar com o servidor do ColdFusion, onde os serviços do ColdFusion previamente definidos obtêm dados do banco de dados e devolvem os resultados para o Flash Player. O Flash MX introduz um novo modelo componente para comportamento de encapsulamento e dados associados com as interfaces visuais. Esse modelo de componente é complementado pelos componentes do ColdFusion (CFCs), um novo modelo componente no servidor para encapsular scripts e dados usados no ColdFusion MX. Os componentes do Flash podem ser combinados com os componentes de ColdFusion para formar interações de servidores de clientes com vários recursos. Para obter mais informações, veja o Centro de recursos do Macromedia Flash ColdFusion em 48 Capítulo 2

49 CAPÍTULO 3 Fluxo de trabalho de desenvolvimento da Web Esse capítulo demonstra como os componentes individuais do Macromedia Studio MX Dreamweaver, Flash, Fireworks, FreeHand e ColdFusion trabalham juntos para fornecer um ambiente de aplicação e de projeto otimizado para desenvolvedores e projetistas de Web. Como a Internet muda rapidamente, os usuários esperam sempre conteúdo, aplicativos e comunicação com mais recursos. Ao mesmo tempo, os projetistas e desenvolvedores exigem, cada vez mais, ferramentas que permitirão que eles criem o conteúdo e aplicativos com maior facilidade e menor custo, enquanto produzam melhores momentos para os usuários. Juntas, as ferramentas do Macromedia Studio MX criam um ambiente completo que permite o projeto e o desenvolvimento das interfaces no cliente para aplicativos e conteúdo com vários recursos e lógica no servidor para aplicativos que são executados com clientes HTML, clientes do Flash, ColdFusion e várias outras tecnologias de servidores. Um fluxo de trabalho de desenvolvimento de Web típico envolve os seguintes estágios: Planejamento do site, que inclui a definição da estratégia ou objetivos do site, seleção do público alvo e determinação das necessidades de origem de dados do site. A configuração do ambiente de desenvolvimento, que inclui a escolha dos servidores de Web e de aplicativo e a definição das origens de dados. Planejamento do projeto de tela e de páginas, que inclui o mapeamento de suas páginas e das interfaces de aplicativos com uma ferramenta de criação ilustrações, como o FreeHand e criação do layout das páginas HTML com o Dreamweaver MX. Criação das propriedades do conteúdo, que inclui a criação das imagens e mídia de nível rich com Flash, Fireworks e FreeHand. Construção das propriedades do aplicativo, que inclui a criação de páginas dinâmicas e aplicativos de Internet com vários recursos com Dreamweaver e Flash MX. A construção, testes e publicação do site, que inclui a compilação das propriedades, assegurando que você atendeu aos requisitos de acessibilidade, o teste do código e a publicação do site em um servidor com Dreamweaver MX. O Macromedia Studio MX tem as ferramentas que você precisa para trabalhar nesse processo do início ao fim. A combinação do Dreamweaver, Flash, Fireworks, FreeHand e ColdFusion permite que você crie, publique e mantenha, com facilidade, Websites dinâmicos e atraentes e aplicativos em ambientes de codificação e de projeto. Os resultados finais terão interfaces de usuário com mais recursos que aumentam a eficácia da transação, e lógica de aplicativos mais potentes integrada com uma ampla gama de sistemas auxiliares. 49

50 Esse capítulo apresenta um fluxo de trabalho de desenvolvimento de Web de exemplo. Apesar dele sugerir métodos para maximizar os seus esforços de projeto e desenvolvimento, ele não fornece o único fluxo de trabalho possível. O fluxo de trabalho que você e os seus membros de equipe adotarem dependerá dos seus recursos, dos seus hábitos de trabalho pessoais e das necessidades específicas do site na Web. Esse capítulo se destina a fornecer idéias e as melhores práticas para projetar e desenvolver Websites e aplicativos com Macromedia Studio MX. Para obter mais informações sobre qualquer um dos produtos individuais do Macromedia Studio MX, veja os capítulos 4 a 17 desse livro ou o sistema de ajuda de cada produto (Ajuda > Usando o Dreamweaver, Ajuda > Usando o Flash, e assim por diante). Planejar o Website O planejamento e a organização do site envolve muito mais do que determinar como o site parecerá e onde os arquivos estarão: para planejar o site, examine os objetos do site, os requisitos de página dinâmica e estática e os perfis de público. Além disso, você deve considerar certos requisitos técnicos como navegador e acesso do usuário, plug-in e limites de download. O planejamento cuidadoso antes de iniciar o desenvolvimento do site poupará muito tempo posteriormente. Estabelecer os objetivos do site e determinar o seu público Determinar os objetivos do site é a primeira etapa que você deve seguir ao criar um site da Web. Faça perguntas a si mesmo ou para seu cliente sobre o site e anote os objetivos para que lembre deles conforme progredir no processo de projeto. Uma lista de objetivos específicos o ajudará a concentrar e destinar o seu site da Web às suas necessidades particulares. A complexidade dos objetivos afetará a navegação, a mídia utilizada e até mesmo a aparência e impressão causada pelo site. Um site da Web que proporciona notícias sobre um tema específico deve ter uma aparência e navegação muito diferentes de um site da Web destinado a vender produtos. Da mesma forma, um site onde há aplicativos e conteúdo de nível rich para os seus usuários serão muito diferentes de um site que exibe dados dinâmicos usando métodos mais tradicionais, com base em HTML. Após decidir o que deseja alcançar com o seu site da Web, precisa decidir que deseja que sejam os seus visitantes. Isso pode parecer uma pergunta desnecessária, já que a maioria das pessoas quer que qualquer pessoa visite o Website; mas é difícil criar um Website que toda pessoa no mundo possa usar. As pessoas ao redor do mundo usam navegadores diferentes, se conectam em velocidades diferentes, podem ou não ter plug-ins de mídia e usam tipos diferentes de dispositivos para ver o conteúdo de Internet. Como todos esses fatores podem afetar o uso do site, determinar o público alvo é uma etapa fundamental durante a fase inicial do planejamento de Website. Pense nas pessoas que serão atraídas ao seu site da Web ou quem espera atrair. Que tipos de computadores você pensa que usarão? Qual plataforma pode ser a predominante (Macintosh, Windows, Linux etc.)? Qual é a velocidade de conexão média (modem de 33.6 Kbps ou DSL)? Que tipos de navegadores, tamanhos de monitores e outros dispositivos eles usarão? Você está criando um site de intranet onde todos estarão utilizando o mesmo sistema operacional, o mesmo computador e navegador? Todos esses fatores podem afetar muito a forma com que a sua página de Web aparece para visitantes e também afetarão a forma com que você testa o site após criá-lo. 50 Capítulo 3

51 Determinação dos requisitos de origem de dados e criação de um banco de dados Independentemente de estar desenvolvendo um aplicativo de nível rich para a Internet com o Macromedia Flash MX ou um aplicativo para a Web mais tradicional, com base em HTML, com Macromedia Dreamweaver MX, você provavelmente usará um banco de dados para armazenar as informações que o seu Website fornecerá aos usuários. Entretanto, antes de construir o banco de dados, você precisa determinar os requisitos da origem de dados para o seu Website. Se você quiser exibir dados dinâmicos nas páginas de Web, qual tipo de dado será exibido e onde? Se os usuários forem interagir com uma interface de aplicativo, quais tipos de perguntas serão feitas para que o aplicativo responda e quais informações desejarão receber do banco de dados? Assim como em relação aos objetivos de site e audiências alvo, você deve ter uma boa idéia de quais serão os requisitos da origem de dados antes de começar a desenvolver o Website. Após ter determinado os requisitos de origem de dados, pense em como estruturar um banco de dados que apresente, da melhor forma possível, as informações armazenadas para os usuários. Você pode decidir como deseja estruturar o banco de dados antes de começar a formar um conceito dos layouts de página ou enquanto desenvolve a própria interface do aplicativo. As necessidades do seu fluxo de trabalho determinarão exatamente como e quando você criará o banco de dados. A primeira etapa é escolher as tabelas do banco de dados. Uma tabela de banco de dados contém as coleções de entidades relacionadas, como pessoas, objetos ou eventos e divide essas informações em linhas horizontais e colunas verticais. Na terminologia do banco de dados, cada coluna de tabela representa um campo, cada linha de tabela representa um registro. Campos (colunas) Número Sobrenome Nome Posição Objetivos Registros (linhas) Uma vez que você tiver decidido sobre o número e tipos de tabela que irão compor o banco de dados, escolha as colunas de cada tabela. As colunas descrevem as propriedades de cada entidade ou registro da tabela. Por exemplo, você pode ter uma tabela de banco de dados chamada Jogadores com informações sobre os membros de um time de futebol. A tabela Jogadores pode ter uma coluna com o primeiro nome de cada membro da equipe, uma coluna com o sobrenome, outra para a posição, outra para o número de gols e assim por diante (veja a imagem acima). Cada linha horizontal na tabela Jogadores representa um registro de um membro da equipe, semelhante a um cartão de visita contendo informações sobre uma determinada pessoa. Certifique-se de que as tabelas possuem uma coluna de chave primária uma coluna que contém valores exclusivos em cada linha na tabela. Isso permite que você selecione uma linha exata ao pesquisar o banco de dados. A maioria das colunas de chaves primárias consistem em números de identificação, mas é possível utilizar outros tipos de chaves primárias, como números de formulários do governo ou números de série de produtos. Para obter mais informações, veja a documentação do produtor do sistema de banco de dados. Fluxo de trabalho de desenvolvimento da Web 51

52 Esboço da navegação do site no FreeHand e apresentação do plano em HTML Uma vez que você determinou os objetivos do site, a audiência de destino e os requisitos de origem de dados, você está pronto para começar a criar os conceitos do esquema de navegação do site. A navegação do site é um mapa que ilustra como as páginas de Web estão relacionadas umas com as outras. Especificamente, ela mostra como os usuários viajarão pelo site conforme clicam em links e interagem com interfaces de aplicativos. Você pode usar o Macromedia FreeHand para formar conceitos do esquema de navegação do seu site. O FreeHand permite que você crie elementos gráficos vetoriais rapidamente e de forma eficaz, enquanto fornece elementos de interface comuns ao usuário que o ajudam a integrar com facilidade o Macromedia Flash MX e o Fireworks MX no fluxo de trabalho de desenvolvimento de Web. Por exemplo, o painel Ferramentas é um dos muitos recursos de interface de usuário compartilhados por esses produtos do Macromedia Studio MX. Ele contém ferramentas que permitirão que você selecione, desenhe e edite objetos, aplique cores a objetos e crie texto. Após esborçar a navegação do site, você pode apresentar o plano preliminar ao cliente ou aos membros do seu grupo. O FreeHand permite que você coloque ilustrações em páginas HTML em uma única etapa fácil. O recurso Publicar HTML transforma o documento em HTML e abre a ilustração diretamente na janela de um navegador. Para obter mais informações, veja Conceitos básicos do FreeHand e Criação de animação e elementos gráficos para a Web na Ajuda do FreeHand > Usando o FreeHand. 52 Capítulo 3

53 Configuração do ambiente de desenvolvimento Independentemente de você estar desenvolvendo o projeto sozinho ou em equipe, você precisa definir um ambiente de desenvolvimento antes de começar a usar o Macromedia Studio MX para construir o seu Website. No nível mais básico, o seu ambiente de desenvolvimento consistirá de um servidor de Web, um servidor de aplicativo e um site de Dreamweaver MX. Configuração dos servidores de aplicativo e de Web Um servidor de Web é um software que fornece arquivos em resposta a pedidos de navegadores de Web. Quando o servidor de Web recebe um pedido de uma página estática de HTML, o servidor lê o pedido, localiza a página e a envia ao navegador que a solicitou. Os servidores comuns de Web são Microsoft Internet Information Server (IIS), Netscape Enterprise Server, iplanet Web Server, e Apache HTTP Server. Para obter mais informações, veja Entendimento de aplicativos e tecnologias para Web, na página 35. Escolha um servidor de Web e instale-o no computador local ou em um computador em rede. Para obter mais informações, veja a documentação do fornecedor do servidor ou o administrador do sistema. Para executar aplicativos baseados em HTML ou de nível rich para a Internet, o servidor de Web precisa trabalhar com um servidor de aplicativo. Um servidor de aplicativo é um software que ajuda ao servidor de Web a processar as páginas dinâmicas antes que sejam enviadas para os navegadores que as solicitam pelo servidor da Web. O servidor de aplicativo lê o código na página dinâmica, completa a página de acordo com as instruções do código e, em seguida, remove o código. No caso de um aplicativo com base em HTML, o resultado é uma página estática de HTML que o servidor de aplicativo devolve para o servidor de Web, que por sua vez, a envia ao navegador que solicitou. No caso de um aplicativo de nível rich para a Internet, o resultado é um filme Flash que retorna as variáveis solicitadas pelo navegador. A sua escolha pelo servidor de aplicativo dependerá de vários fatores, incluindo do valor que você dispõe para investir nele, da tecnologia de servidor que você deseja usar e do servidor de Web que você escolher. Os servidores Macromedia ColdFusion MX e JRun fornecem soluções fáceis de administrar com relativo baixo custo. A integração melhorada com Flash MX e Dreamweaver MX torna o ColdFusion MX a opção ideal para construir e desenvolver aplicativos poderosos de Internet. Os servidores de aplicativo usam tecnologias diferentes. O Dreamweaver MX suporta cinco tecnologias de servidor: ColdFusion, ASP.NET, ASP, JSP ou PHP. A tabela a seguir mostra os servidores disponíveis dos aplicativos comuns para essas cinco tecnologias de servidor. Tecnologia de servidor ColdFusion ASP.NET ASP JSP PHP Servidor de aplicativos Macromedia ColdFusion MX Microsoft IIS 5 com.net Framework Microsoft IIS ou PWS Sun Chili!Soft ASP Macromedia JRun IBM WebSphere Jakarta Tomcat BEA WebLogic Servidor PHP Fluxo de trabalho de desenvolvimento da Web 53

54 Certifique-se de que o servidor de aplicativos que você quer usar funciona com o seu servidor de Web. Por exemplo, a estrutura de trabalho.net funciona somente com Microsoft IIS. Depois que os seus servidores de aplicativo e de Web estiverem funcionando, crie uma pasta raiz para o seu aplicativo no computador que executa o servidor de Web. Certifique-se de que a pasta seja publicada pelo servidor de Web em outras palavras, que o servidor de Web possa servir qualquer arquivo nessa pasta ou em qualquer uma de suas subpastas em resposta a uma solicitação de HTTP de um navegador de Web. Por exemplo, em um computador que executa PWS ou IIS, qualquer arquivo na pasta Inetpub/wwwroot ou em qualquer de suas subpastas pode ser servido a um navegador de Web. Para obter mais informações, veja Ajuda do Dreamweaver MX > Usando o Dreamweaver > Configuração de um servidor de aplicativo. Definição do site em Dreamweaver MX No Dreamweaver MX, o termo site pode se referir a um site da Web ou a um local de armazenamento para os documentos pertencentes a um site da Web. O último é o que você precisa estabelecer antes de começar a construir o Website. Um site do Dreamweaver MX organiza todos os documentos associados ao Website e permite que você rastreie e mantenha links, gerencie arquivos, compartilhe arquivos e use FTP em seus arquivos de site em um servidor de Web. O Dreamweaver MX não trabalhará adequadamente se você não definir um site. A abordagem preferida para se criar um Website utilizando o Dreamweaver MX é criar e editar páginas no disco local e carregar cópias dos arquivos do site para um servidor de Web remoto para publicá-las. Você usa a janela Definição de site do Dreamweaver MX (Site > Novo site) para definir informações de site local e remoto e, em seguida, usa o painel Site para gerenciar o site. O painel Site permite que você escolha entre quatro visualizações diferentes: Local, Remota, Servidor em teste e Mapa. A Visualização local exibe os arquivos do Website que você está armazenando no computador local. A Visualização remota exibe os arquivos que você publicou no seu servidor de Web. Se você estiver desenvolvendo um aplicativo para a Web, a pasta remota será a pasta raiz que você criou para o aplicativo para a Web no servidor de Web. 54 Capítulo 3

55 A Visualização servidor em teste exibe a estrutura de diretório do servidor em teste. Normalmente, essa também é a pasta raiz que você criou para o seu aplicativo para a Web no servidor de Web. A Visualização mapa exibe um mapa gráfico do site, com base em como os documentos estão vinculados uns aos outros. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Definição de um site do Dreamweaver. Estabelecimento de origens de dados do ColdFusion Uma origem de dados do ColdFusion é um identificador de uma palavra, como Acme, que aponta para o banco de dados com todas as informações necessárias para conectar a ele. As origens de dados do ColdFusion são semelhantes aos nomes de origens de dados do Windows (DSNs) pois incluem automaticamente todos os DSNs configurados no sistema Windows que executa o ColdFusion. Elas diferem de DSNs, porque você pode criar origens de dados para bancos de dados usando servidores de bancos de dados OLE (com objetos incorporados e vinculados) ou drivers nativos. Os DSNs podem apontar para bancos de dados somente se você estiver usando drivers de ODBC instalados em um computador com Windows. Você pode criar uma origem de dados usando o administrador de ColdFusion. Se estiver usando um driver ODBC em um computador com Windows, também é possível configurar um DSN no computador. Os DSNs do sistema são tratados automaticamente como origens de dados do ColdFusion. Quando você abre uma página do ColdFusion no Dreamweaver, as origens de dados do ColdFusion aparecem no painel Bancos de dados (Janela > Bancos de dados). Você pode modificar essas origens de dados diretamente do espaço de trabalho do Dreamweaver MX. Clique no botão Modificar as origens de dados no canto direito superior do painel Bancos de dados e o Dreamweaver MX inicia automaticamente o administrador do ColdFusion. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Conexões de banco de dados para desenvolvedores do ColdFusion. Para obter mais informações sobre ASP.NET, ASP, JSP e conectividade de banco de dados PHP, veja Conexões de banco de dados para desenvolvedores ASP.NET, Conexões de banco de dados para desenvolvedores ASP, Conexões de banco de dados para desenvolvedores JSP e Conexões de banco de dados para desenvolvedores PHP na Ajuda do Dreamweaver MX > Usando o Dreamweaver. Fluxo de trabalho de desenvolvimento da Web 55

56 Estabelecimento de um sistema de controle de origem no Dreamweaver MX Se você estiver trabalhando em um ambiente colaborativo, você poderá retirar e devolver arquivos de servidores locais e remotos. A retirada de um arquivo equivale a declarar: Estou trabalhando com esse arquivo não toque nele!. Quando o arquivo é retirado, o Dreamweaver MX exibe o nome da pessoa que o retirou no painel Site, com uma marca de verificação vermelha (se um dos membros de sua equipe tiver retirado o arquivo) ou marca de verificação verde (se você tiver retirado o arquivo) próximo do ícone do arquivo. A devolução de um arquivo possibilitará que outros membros da equipe possam retirá-lo e editá-lo. Quando você devolve um arquivo após editá-lo, um símbolo de bloqueio aparece do lado da versão local, indicando que é somente leitura. Isso impede que você faça mudanças no arquivo se não o tiver retirado. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Configuração do sistema de retirada e devolução. Planejamento de página e projeto de tela Um projeto de Web inicia normalmente com storyboards ou fluxogramas que os projetistas e desenvolvedores transformam depois em páginas comuns. Utilize o Macromedia Studio MX para criar páginas demonstrativas de amostras de um protótipo quando o objetivo for o projeto final. As páginas demonstrativas geralmente mostram o layout de projeto de páginas, componentes técnicos, temas e cores, imagens gráficas e outros elementos de mídia. A sua demonstração deve ser um plano detalhado que você e os outros membros de equipe seguirão ao projetar o site. Quando tiver a diretriz visual de como gostaria que as suas páginas parecessem, você poderá começar a planejar os layouts de página no Dreamweaver. 56 Capítulo 3

57 Criação de demonstrativos de páginas com FreeHand para determinar a aparência e atmosfera do seu site O planejamento do layout e projeto de páginas antes de você começar a construir as páginas de Web permitirá poupar muito tempo durante o processo de desenvolvimento. É importante manter a coerência no layout e no projeto da sua página. Dê às páginas do site uma aparência, esquema de cores e navegação semelhantes. Isso ajudará a evitar que os usuários se confundam e ajudará a proporcionar momentos melhores aos usuários. O Macromedia FreeHand é ideal para esboçar um projeto preliminar para as páginas principais do site na Web. As ferramentas marcantes de projeto no FreeHand permitem que você maximize as habilidades criativas enquanto projeta ilustrações vetoriais sofisticadas. A ferramenta Caneta do FreeHand parece e se comporta exatamente como a ferramenta Caneta no Macromedia Flash MX e Fireworks MX, oferecendo uma transição perfeita quando você trabalha entre aplicativos. Os modelos de seleção de cores e interfaces do FreeHand também parecem e se comportam de forma idêntica aos vistos no Flash, Fireworks e Dreamweaver. Fluxo de trabalho de desenvolvimento da Web 57

58 Criação de demonstrativos de tela do Flash Você pode usar o Macromedia FreeHand para criar demonstrativos para as suas animações e interfaces de aplicativo de nível rich para a Internet. O FreeHand é a opção ideal para criar demonstrativos do Flash por causa de sua integração elevada com o Macromedia Flash MX. O FreeHand fornece todas as ferramentas tradicionais de Bézier que os usuários esperam obter em um pacote de criação de ilustrações profissional e amplia a relação criativa com o Flash oferecendo capacidades de edição de elementos gráficos vetoriais complexos. O recurso Testar filme permite que você veja como a arte-final do FreeHand aparecerá quando importado para o Flash. Depois que você tiver criado os demonstrativos de tela, importe o trabalho do FreeHand diretamente ao Flash. As ilustrações do FreeHand se tornam os blocos de construção dos filmes Flash, poupando a você e aos membros da equipe o esforço extra de recriar as propriedades de filme no Flash. Você pode preservar as camadas, os blocos de texto, os símbolos de biblioteca e as páginas do FreeHand e escolher um intervalo de páginas para importar. Para obter mais informações, consulte a Ajuda do FreeHand > Usando o FreeHand > Exportar os filmes Flash ou Ajuda do Flash > Usando o Flash > Importação de arquivos do FreeHand. 58 Capítulo 3

59 Criação de layouts de página no Dreamweaver MX O layout de página é uma das partes mais importantes do projeto de Web. O termo layout de página se refere à forma que a página terá no navegador, como a posição de menus, imagens e filmes Flash. O Macromedia Dreamweaver MX proporciona várias maneiras diferentes de criar e controlar o layout da página da Web. Um método comum de se criar um layout de página consiste na utilização de tabelas HTML para posicionar os elementos. No entanto, as tabelas podem ser difíceis de usar, pois foram criadas originalmente para exibir dados tabulares, mas não para layout de páginas na Web. Para simplificar o processo de utilização de tabelas para o layout de página, o Dreamweaver conta com a Visualização de layout. Na Visualização de layout é possível projetar a página utilizando tabelas como a estrutura subjacente, enquanto se evita cometer os erros associados à sua utilização. Por exemplo, é possível criar células de layout na página e mover as células para qualquer local desejado. O layout pode ter uma largura fixa ou se expandir automaticamente até ocupar toda a largura da janela do navegador. Quando você voltar à Visualização padrão, a página terá células e colunas de tabela que correspondem às células de layout que você colocou na página. Abra um novo arquivo do Dreamweaver (Arquivo > Novo) para iniciar o planejamento da página de Web. Na Visualização de layout (Visualização > Visualização da tabela > Visualização de layout), é possível visualizar uma página antes de adicionar qualquer conteúdo. Desenhe as células de layout para conter os elementos gráficos no cabeçalho, as barras de navegação, os filmes Flash e outras propriedades. Fluxo de trabalho de desenvolvimento da Web 59

60 Ao desenhar uma célula de layout que está fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout não pode existir fora de uma tabela de layout. Você pode criar uma página utilizando várias células de layout em uma tabela de layout, que é a abordagem mais comum de layout de página de Web, ou utilizar diversas tabelas de layout para layouts mais complexos. O uso de várias tabelas de layout isolará certas seções do layout, de modo que não possam ser afetadas por modificações feitas em outra seção. Também é possível aninhar tabelas de layout inserindo uma nova tabela de layout em uma tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou colunas em uma parte do layout não estiveram alinhadas com as linhas ou colunas em outra parte. Por exemplo, ao utilizar tabelas de layout aninhadas, seria possível criar facilmente um projeto com duas colunas e quatro linhas na coluna da esquerda e três linhas na coluna da direita. Posteriormente, você pode adicionar texto, imagens e outro conteúdo a células de layout no modo de Visualização de layout, do mesmo modo que o conteúdo é adicionado às células da tabela na Visualização padrão. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Como fazer o layout de páginas na Visualização de layout. Criação de propriedades de conteúdo Depois que souber como serão o projeto e o layout, você poderá criar e reunir as propriedades que você precisará. As propriedades podem ser itens como imagens, texto ou filmes Flash ou outras mídias. O painel Propriedades do Dreamweaver MX (Janela > Propriedades) exibe e fornece acesso a todas as propriedades no site. Criar imagens no FreeHand e no Fireworks MX Você pode usar o Macromedia FreeHand e o Fireworks MX para criar imagens para o seu Website. O Macromedia FreeHand é um aplicativo para criação de ilustrações baseadas em vetores. Com o FreeHand, você pode criar ilustrações gráficas para Web e impressão como logotipos, figuras e banners de propaganda. Você também pode usar o FreeHand para transformar as suas ilustrações em animações do Flash. O espaço de trabalho do FreeHand e o painel Ferramentas são consistentes com os que estão nos outros produtos do Macromedia Studio MX. Você já viu como o FreeHand pode ser usado para criar storyboard de um Website, animação Flash ou aplicativo de nível rich para a Internet. Para obter mais informações, veja Planejamento de página e projeto de tela, na página 56. O Macromedia Fireworks MX é a ferramenta ideal para produção e projeto profissional de elementos gráficos de Web. Ele é o primeiro ambiente de produção a abordar os desafios especiais que são enfrentados pelos desenvolvedores e projetistas gráficos de Web. Usando Efeitos ao vivo no Fireworks, você pode melhorar os elementos gráficos aplicando chanfros, relevo, sombreado, brilhos e outros efeitos a objetos vetoriais, bitmaps e texto. Os efeitos ao vivo não são destrutivos, o que significa que são sempre editáveis. O Fireworks também gera JavaScript, facilitando a criação de rollovers, botões e menus pop-up e os seus recursos de otimização reduzem o tamanho de elementos gráficos sem afetar a qualidade. 60 Capítulo 3

61 Você pode usar o Fireworks para criar, editar e animar os elementos gráficos de Web, adicionar interatividade avançada e otimizar imagens. Você pode editar, com facilidade, configurações de otimização na caixa de diálogo Visualizar exportação (Arquivo > Visualizar exportação). O Fireworks MX combina ferramentas de edição vetorial e de bitmap. No Fireworks, tudo é editável, o tempo todo. E você pode automatizar as tarefas de fluxo de trabalho para atender às exigências de atualizações e alterações. Como o FreeHand, o Fireworks é integrado a outros produtos do Macromedia Studio MX em formas sofisticadas que lhe ajudam a otimizar o fluxo de trabalho. Quando você tiver criado as imagens e as incluiu no site, pode iniciar, editar e trabalhar no Fireworks sem ter que sair dos espaços de trabalho do Dreamweaver ou do Flash. Criação de elementos de mídia de nível rich com o Flash MX Os filmes Flash são constituídos por elementos gráficos, texto, animação e aplicativos para Websites. Eles consistem principalmente em gráficos vetoriais, mas também podem conter vídeo, gráficos de bitmap e sons importados. Os filmes Flash podem incorporar interatividade para permitir interação de quem assiste. Além disso, é possível criar filmes não-lineares que interagem com outros aplicativos para a Web. Os filmes Flash usam elementos gráficos vetoriais compactos; com isso, o download é rápido e os filmes se ajustam ao tamanho de tela do usuário. Provavelmente você já viu e até interagiu com os filmes Flash em diversos sites da Web. Milhões de usuários da Web receberam o Flash Player ao adquirir computadores, navegadores ou software de sistema; outros fizeram o download do site da Macromedia na Web. O Flash Player reside no computador local, onde reproduz filmes em navegadores ou como aplicativos independentes. Exibir um filme Flash no Flash Player é um processo semelhante à exibição de um DVD em um aparelho de DVD o Flash Player é o dispositivo usado para exibir os filmes criados no aplicativo de criação Flash. Fluxo de trabalho de desenvolvimento da Web 61

62 Os documentos do Flash, que têm a extensão.fla no nome de arquivo, apresentam todas as informações necessárias para o desenvolvimento, projeto e testes de material interativo. Entretanto, esses documentos não são os filmes exibidos pelo Flash Player. Na verdade, os documentos FLA são publicados como filmes Flash, que apresentam a extensão.swf no nome de arquivo e contêm apenas as informações necessárias para a exibição do filme. Utilizando o Flash, você pode animar objetos para fazer com que pareçam se mover no Palco e alterar a forma, o tamanho, a cor, a opacidade, a rotação e outras propriedades dos objetos. Você pode criar animações quadro a quadro, nas quais designa uma imagem separada para cada quadro, ou animação interpolada, na qual define o primeiro e o último quadro de uma animação e usa o Flash para criar os quadros entre eles. Além disso, o Flash fornece vários métodos para criar arte-final e importar arte de outros aplicativos. É possível criar objetos com as ferramentas de desenho e de pintura, além de modificar os atributos de objetos existentes. Também é possível importar elementos gráficos vetoriais, de bitmap e vídeo de outros aplicativos (como FreeHand e Fireworks) e modificar os elementos gráficos importados no Flash. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Trabalho no Flash. Criação de modelos e bibliotecas do Dreamweaver MX para reutilizar propriedades Os modelos e bibliotecas do Dreamweaver podem auxiliá-lo a criar páginas da Web com um projeto consistente. A utilização de modelos e bibliotecas também facilita a manutenção do site da Web, já que é possível reprojetar o site e alterar centenas de páginas em segundos. Um modelo é um documento que pode ser utilizado para criar diversas páginas com o mesmo layout. Quando um modelo é criado, é possível indicar quais elementos de uma página deverão permanecer inalterados (não editáveis ou bloqueados), em documentos baseados nesse modelo, e quais poderão ser alterados. 62 Capítulo 3

63 Por exemplo: caso você esteja publicando uma revista on-line, o nome e a aparência geral do layout provavelmente não serão alterados de uma edição para outra, ou até mesmo de uma matéria para outra, mas o título e o conteúdo da matéria serão diferentes. Um projetista poderá criar o layout de uma página de matéria da revista, com texto do marcador de lugar, onde o título da matéria e seu conteúdo estarão (e com aquelas regiões marcadas para a edição); o projetista poderá, então, salvar esse layout como um modelo. A pessoa responsável pela nova edição da revista criará uma nova página com base no modelo e substituirá o texto do marcador de lugar pelo título e texto real da nova matéria. Um modelo pode ser modificado mesmo depois da criação de documentos que tiverem se baseado nele. Ao modificar um modelo, as regiões bloqueadas (não editáveis) nos documentos que se basearem no modelo serão atualizadas para corresponder às alterações no modelo. Os modelos são os melhores instrumentos nas situações em que você desejar impor um layout idêntico a um grupo de páginas, quando você quiser projetar o layout final completo do conjunto de páginas e, posteriormente, adicionar o contéudo às páginas. Se você desejar apenas que as páginas tenham os mesmos cabeçalhos e rodapés, com layouts variáveis, utilize os itens de biblioteca. Os itens de biblioteca são elementos de página como imagens, texto, filmes Flash e outras mídias que você pode reusar ou atualizar freqüentemente em todo o site da Web. Como com modelos, você pode atualizar todas as páginas que usam um item de biblioteca sempre que alterar o conteúdo do item. Por exemplo, suponha que esteja construindo um site grande para uma firma. A firma possui um slogan que deseja que apareça em todas as páginas do site, mas o departamento de marketing ainda está se decidindo quanto aos detalhes do conteúdo do slogan. Se criar um item de biblioteca para conter o slogan e utilizá-lo em todas as páginas, quando o departamento de marketing fornecer o slogan final, você poderá alterar o item de biblioteca e automaticamente atualizar todas as páginas que o utilizarem. Para obter mais informações, veja Ajuda do Dreamweaver MX > Usando o Dreamweaver > Gerenciamento de propriedades, bibliotecas e modelos do site. A biblioteca do Flash MX permite que você reutilize facilmente as propriedades. A biblioteca em um documento do Flash armazena símbolos criados no Flash, além de arquivos importados como videoclipes, clipes de som, bitmaps e elementos gráficos vetoriais. O painel Biblioteca exibe uma lista de rolagem com os nomes de todos os itens da biblioteca, permitindo a exibição e organização desses elementos enquanto você trabalha. Você pode abrir a biblioteca de qualquer documento do Flash ao trabalhar no Flash para disponibilizar os itens da biblioteca desse arquivo para o documento atual. Você pode criar as suas próprias bibliotecas permanentes que estarão disponíveis sempre que você iniciar o Flash ou usar qualquer uma das bibliotecas de amostra que acompanham o Flash. As bibliotecas de amostra contêm botões, elementos gráficos, clipes de filme e sons que você pode adicionar aos seus próprios documentos do Flash. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Uso da biblioteca. Fluxo de trabalho de desenvolvimento da Web 63

64 Construir propriedades do aplicativo Um aspecto importante no desenvolvimento de aplicativos dinâmicos para a Web é a capacidade de apresentar informações armazenadas em banco de dados em formato da Web. Os produtos do Macromedia Studio MX ajudam a construir esses aplicativos com rapidez, fornecendo uma ampla gama de recursos que aumentam a produtividade do desenvolvedor, desde componentes e modelos previamente elaborados a um fluxo de trabalho integrado e interface de usuário compartilhada. Usando o Macromedia Studio MX, os projetistas e desenvolvedores podem criar aplicativos de nível rich para a Internet ou baseados em HTML de resposta rápida que combinam os recursos de soluções cliente/servidor tradicionais com amplo alcance e desenvolvimento de baixo custo de aplicativos para Web. Construção de páginas dinâmicas no Dreamweaver MX Um dos principais benefícios do Macromedia Dreamweaver MX é a capacidade de criar sites dinâmicos de Web sem ter que conhecer muito bem linguagens de programação. As ferramentas visuais de Dreamweaver permitem desenvolver sites dinâmicos para Web sem que você tenha de codificar manualmente a complexa lógica de programação exigida para criar um site com conteúdo dinâmico armazenado em um banco de dados. O Dreamweaver permite que você crie Websites dinâmicos usando qualquer linguagem de programação e tecnologia de servidor, dentre os conhecidos, incluindo ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) e PHP. Para codificadores, o Dreamweaver MX oferece código de tempo de execução melhorado e um espaço de trabalho em código derivado do Macromedia ColdFusion Studio e Macromedia HomeSite+. Você pode trabalhar na Visualização de código, projeto ou código e projeto, que permite que você veja o código e as suas interfaces conforme desenvolve as páginas dinâmicas e os aplicativos. O código ColdFusion que o Dreamweaver gera para as páginas dinâmicas agora é mais fácil de entender e parece mais com o que você escreveu manualmente. O código será familiar para qualquer pessoa que tiver aprendido as técnicas de ColdFusion desde manuais populares e tutoriais on-line. Os sites dinâmicos da Web exigem uma origem de conteúdo a partir da qual extraem os dados a serem exibidos em uma página da Web. No Dreamweaver, essas origens de dados podem ser bancos de dados, variáveis de solicitação, variáveis de servidor, variáveis de formulário ou procedimentos armazenados. Para poder utilizar essas origens de conteúdo em uma página da web, é necessário fazer o seguinte: Criar uma conexão com a origem de conteúdo dinâmico (um banco de dados, por exemplo) e com o servidor de aplicativos que está processando a página. Especificar as informações contidas no banco de dados que deverão ser exibidas ou as variáveis a serem incluídas na página. Utilizar a interface do tipo apontar e clicar de Dreamweaver para selecionar e inserir elementos de conteúdo dinâmico na página selecionada. O Dreamweaver também permite conectar-se de modo fácil a um banco de dados e criar um conjunto de registros a partir do qual será extraído o conteúdo dinâmico. Um conjunto de registros é o resultado de uma consulta ao banco de dados. Ele extrai as informações específicas solicitadas pelo usuário e permite exibir essas informações em uma página específica. Você define o conjunto de registros com base nas informações contidas no banco de dados e no conteúdo que deseja exibir. 64 Capítulo 3

65 Para criar um conjunto de registros no Dreamweaver, é necessário utilizar a caixa de diálogo Conjunto de registros. Você pode iniciar a caixa de diálogo Conjunto de registros usando o painel Aplicativo da barra Inserir ou clicando no botão de adição (+) no painel Ligações e escolhendo Conjunto de registros (Consulta). A caixa de diálogo simples Conjunto de registros permite selecionar uma conexão de banco de dados existente e criar uma consulta de banco de dados selecionando-se a(s) tabela(s), cujos dados serão incluídos no conjunto de registros. Pode-se até mesmo utilizar a seção Filtro da caixa de diálogo para criar critérios simples de pesquisa e retorno para a consulta. É possível testar a consulta na caixa de diálogo Conjunto de registros e fazer quaisquer ajustes necessários antes de adicioná-la ao painel Ligações. Uma vez que a conexão com o banco de dados tiver sido estabelecida e um conjunto de registros tiver sido definido, o conjunto de registros será exibido no painel Ligações. Fluxo de trabalho de desenvolvimento da Web 65

66 Você pode importar as origens de dados daqui para qualquer página de Web no site definido. É possível inserir em uma página de Web qualquer um dos valores mostrados no painel Ligações, selecionando o item e clicando no botão Inserir, na parte inferior do painel. Você também pode selecionar um item e arrastá-lo para a página, exatamente como faria com qualquer imagem ou elemento da mídia do painel Propriedades. Na ilustração acima, você pode ver os marcadores de lugar dinâmicos para as manchetes e as descrições de manchetes que foram arrastadas para a página do painel Ligações. Na frente do arquivo Dreamweaver, você pode ver a saída quando um usuário visualiza a página na janela do navegador. O arquivo do Dreamweaver inclui um comportamento de servidor de repetição de região, que permite que você exiba vários registros em uma única página. Nesse caso, ele exibe os primeiros três registros no banco de dados. Ele também contém um marcador de lugar para uma imagem dinâmica, que o usuário vê como um marcador triangular, repetido para cada item de notícias. Para obter mais informações, veja a Ajuda do Dreamweaver > Usando o Dreamweaver > Como fazer páginas dinâmicas. 66 Capítulo 3

67 Além de exibir dados dinâmicos, o Dreamweaver MX permite que você construa conjuntos de páginas que permitem que os usuários pesquisem, insiram, excluam e atualizem registros no banco de dados. Por exemplo, você pode desenvolver rapidamente um aplicativo poderoso que permitirá que você coloque um diretório de funcionários na intranet de sua empresa, pesquise o diretório usando parâmetros de sua escolha (nome, departamento etc.), adicione e exclua registros no diretório e altere os registros no banco de dados. Você pode fazer tudo isso sem ter que digitar uma linha de código. A maioria dos usuários avançados possuem a opção de usar ambientes de codificação avançada no Dreamweaver MX. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Desenvolvimento rápido de aplicativos. Construção de propriedades de aplicativo de nível rich com o Flash MX O Macromedia Flash MX combina uma ampla gama de capacidades de projeto multimídia e de aplicativo de nível rich para a Internet em um produto. Os desenvolvedores podem construir aplicativos de nível rich para a Internet usando as capacidades de multimídia do Flash com as suas ferramentas sofisticadas, incluindo um editor poderoso do ActionScript, um depurador poderoso e componentes predefinidos do Flash. Enquanto o Flash MX fornece uma estrutura aberta para desenvolvimento de aplicativos com servidores.net e J2EE, a integração melhorada com ColdFusion MX oferece a forma mais rápida para os desenvolvedores construírem aplicativos de nível rich para a Internet. O amplo suporte inclui amostras de código e manual de referência, conectividade com alto desempenho, suporte a linguagens comuns entre o Dreamweaver, Flash e ColdFusion, integração sem problemas com os componentes do Flash e um conjunto de ferramentas integradas para combinar lógica auxiliar com interfaces de usuário do Flash. Você começa a construir aplicativos de nível rich para a Internet com Flash/ColdFusion construindo serviços do Flash em ColdFusion. Os serviços do Flash consistem de qualquer recurso do ColdFusion que você expõe ao Flash. Para obter mais informações, veja a Ajuda do Dreamweaver > Usando o ColdFusion > Construção dos serviços do Flash. Agora, você cria as interfaces de aplicativo do Flash usando elementos gráficos previamente projetados do FreeHand ou elementos de páginas projetados no Flash. O Flash MX oferece ferramentas de projeto aprimoradas, como a ferramenta Transformação livre. Você pode alinhar facilmente os bitmaps, as linhas e os preenchimentos, com precisão, nos limites de pixels no Palco. As melhorias do Misturador de cores no Flash MX tornam mais fácil do que nunca misturar cores e criar amostras de cores. Fluxo de trabalho de desenvolvimento da Web 67

68 Você pode usar os componentes de usuário do Flash, incluindo barras de rolagem, campos de texto com formatação, botões de entrada, botões de rádio, caixas de seleção e caixas de combinação e de listagens, para desenvolver os aplicativos de nível rich para a Internet. Esses componentes asseguram uma experiência comum do usuário com aplicativos de nível rich para a Internet com Flash MX. Você também pode criar componentes personalizados e reutilizáveis para atender as demandas de vários projetos. O recurso Visualização ao vivo dá informações imediatas sobre as interfaces de usuário construídas com componentes através de uma transformação linear ao vivo de como os componentes parecerão em um filme publicado. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Uso de componentes. Os benefícios de desenvolver aplicativos de nível rich para a Internet são numerosos. Com os aplicativos de nível rich para a Internet, você pode alcançar milhões de usuários e reduzir o tempo de download de conteúdo e a carga do servidor, pode incluir animação, áudio, vídeo e entrada e saída de mensagens em uma única interface, pode fornecer conteúdo totalmente acessível para usuários portadores de deficiências, fornecer experiências imediatas de conteúdo de nível rich independentemente da velocidade de conexão e desenvolver para plataformas de vários dispositivos (como aparelhos sem fio, ITV e consoles de jogos), permitindo que os aplicativos e conteúdo de nível rich sejam visutalizados em qualquer lugar. As informações intercambiadas entre o Flash Player e o servidor de aplicativo não requer a atualização de todas as páginas, resultando em menores custos de largura de banda, eficácia aumentada do usuário e melhores experiências gerais para o usuário. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Desenvolvimento de aplicativos no Flash e o Centro de recursos do Macromedia Flash ColdFusion em Capítulo 3

69 Montagem, testes e publicação A última fase do processo de desenvolvimento de Web é montar as propriedades que você criou, testando as páginas de Web que tiver construído e publicar o site em um servidor para que o mundo possa vê-lo. O Macromedia Studio MX fornece vários recursos que auxiliam a simplificar esse processo. Montagem das propriedades no Dreamweaver MX Usando o Dreamweaver MX, é possível adicionar facilmente muitos tipos de conteúdo às páginas da Web. Você pode adicionar propriedades e elementos de projeto, como texto, imagens, cores, filmes, som e outras formas de mídia. O painel Propriedades (Janela > Propriedades) permite organizar facilmente as propriedades em um site; é possível arrastar a maioria das propriedades diretamente do painel Propriedades para um documento do Dreamweaver. Além de arrastar as propriedades salvas para a página a partir do painel Propriedades, você pode fazer o seguinte: Digitar diretamente em um documento do Dreamweaver ou importar texto de outros documentos e, em seguida, formatar o texto utilizando o inspetor de propriedades do Dreamweaver ou o painel Estilos HTML. Inserir imagens, incluindo rollovers, mapas de imagens e imagens compartilhadas do Fireworks. As ferramentas de alinhamento ajudam a posicionar as imagens em uma página. Inserir outros tipos de mídia numa página da Web, como filmes Flash, Shockwave e QuickTime, som e applets. Adicionar o conteúdo nos editores de código do Dreamweaver. Utilizar a Visualização de código e o inspetor de código do Dreamweaver para escrever o próprio código HTML ou JavaScript. Criar links HTML padrão, incluindo links de ancoragem e links de correio eletrônico ou definir, de maneira fácil, sistemas gráficos de navegação, como menus de salto e barras de navegação. Aplicar conteúdo reutilizável em todo seu site usando modelos do Dreamweaver e itens de biblioteca. É possível criar novas páginas de um modelo e, em seguida, adicionar ou alterar o conteúdo nas áreas editáveis. Fluxo de trabalho de desenvolvimento da Web 69

70 Uma vez que tiver montado as propriedades, você pode editá-las diretamente do espaço de trabalho do Dreamweaver. Você pode iniciar o Fireworks para editar as imagens inseridas em um documento do Dreamweaver selecionando a imagem e clicando no botão Editar do Fireworks no inspetor de propriedades. Quando você inicia e edita uma fatia de imagem ou uma imagem que é parte de uma tabela do Fireworks, o Dreamweaver inicia automaticamente o Fireworks e o arquivo de origem de PNG no qual a imagem foi exportada. Na janela do arquivo PNG, o Fireworks informa que você está editando a imagem do Dreamweaver. Quando você termina as edições e fecha o arquivo PNG, as suas alterações salvas aparecerão na imagem no documento do Dreamweaver (GIF, JPG e assim por diante) que você selecionou para edição. Da mesma forma, você pode editar arquivos do Flash selecionando o marcador de lugar de filme Flash no documento do Dreamweaver e clicando no botão Editar do Flash no inspetor de propriedades. O Dreamweaver inicia o arquivo do Flash (FLA) e salva todas as alterações que você faz no arquivo SWF. Para obter mais informações, veja Trabalho com Dreamweaver e Fireworks e Trabalho com Dreamweaver e Flash na Ajuda do Dreamweaver > Usando o Dreamweaver. 70 Capítulo 3

71 Usar Dreamweaver MX e Flash MX para assegurar acessibilidade O Macromedia apóia os esforços para tornar sites e produtos de Web acessíveis a pessoas portadoras de deficiências visuais, auditivas, motoras etc. O Flash MX e o Dreamweaver MX fornecem ferramentas que auxiliam a criação de conteúdo acessível. Os exemplos de recursos de acessibilidade para Websites incluem suporte para leitor de tela, rótulos e descrições para elementos gráficos, atalhos de teclado, contraste elevado na exibição de cores etc. Adicionalmente, o Dreamweaver fornece os recursos que tornam o software acessível a usuários deficientes. Especificamente, o Dreamweaver suporta leitores de tela, recursos de acessibilidade do sistema operacional e navegação de teclado. Para tornar as informações acessíveis a leitores de tela e a usuários de Website, o Dreamweaver suporta texto explicativo para elementos gráficos, incluindo botões de apertar, controles, imagens e tabelas. Isso permite que você adicione rótulos e descrições a elementos para que um leitor da tela possa lê-las para o usuário. Por exemplo, você poderia adicionar a descrição Camisa vermelha para rapaz, tamanho grande à imagem de um produto em seu documento. Em seguida, quando a imagem aparecer em uma página para um usuário portador de deficiência visual, o leitor de tela lê a descrição e o usuário sabe qual produto está sendo exibido na página. O conteúdo de filme acessível do Flash é suportado pelo Flash Player 6. Para aproveitar o conteúdo acessível do Flash, os usuários devem ter sistema operacional Windows com suporte à acessibilidade do Flash, além do software leitor de tela adequado (incluindo o Flash Player 6). O Flash oferece diversos recursos para a criação de acessibilidade que vão além da simples atribuição de nomes aos objetos. Esses recursos permitem fornecer a descrição do texto ou de campos de texto, botões ou clipes de filme e atalhos do teclado para campos de entrada de texto ou botões. Você pode desativar o comportamento de rótulo para o filme, o que impede que as seqüências de texto sejam lidas por leitores de tela. Adicionalmente, você pode preferir ocultar um objeto selecionado do leitor de tela. Por exemplo, é possível optar por ocultar os clipes de filme com animação, caso a descrição oral não melhore a versão acessível do filme. Também é possível optar por ocultar os objetos acessíveis contidos no clipe de filme ou no filme e expor ao leitor de tela apenas o clipe de filme ou o filme em si. Tenha em mente que a tecnologia de leitura de tela foi projetada principalmente para a transmissão de informações em interfaces de usuário estáticas. Mantendo o conteúdo dinâmico mínimo e enfatizando os recursos de texto e de interface de usuário, é possível obter melhores resultados para tornar o filme Flash acessível. Para melhorar a acessibilidade, selecione os objetos do filme a serem expostos ao leitor de tela e omita as animações ou os clipes de filme orientados visualmente. O projeto de Websites acessíveis requer que você entenda os requisitos de acessibilidade e tome muitas decisões subjetivas durante o projeto que não podem ser tomadas por uma ferramenta de desenvolvimento. Por exemplo, um requisito de acessibilidade é que você não transporte significado com cores. A única forma de assegurar que um Website seja acessível é através de planejamento, desenvolvimento, teste e avaliação cuidadosa. Para obter mais informações, veja a Ajuda do Dreamweaver > Usando o Dreamweaver > Ajuda do Dreamweaver e Acessibilidade e Flash MX > Usando o Flash > Criação do conteúdo acessível. Você também pode visitar o Centro de recursos de Acessibilidade da Macromedia em macromedia.com/macromedia/accessibility/ para aprender mais sobre como fazer o conteúdo de Web atender aos requisitos de acessibilidade do governo. Fluxo de trabalho de desenvolvimento da Web 71

72 Testes e validação de HTML e JavaScript no Dreamweaver MX Você pode usar o validador do Dreamweaver para determinar se o seu código contém erros de sintaxe ou de tag. O validador suporta muitas linguagens baseadas em tags, incluindo HTML 2.0, HTML 3.2, HTML 4.0, XHTML 1.0 Strict, extensões do Internet Explorer 3.0, extensões do Internet Explorer 4.0, extensões do Netscape Navigator 3.0, extensões do Netscape Navigator 4.0, Coldfusion, Coldfusion 3.0, Coldfusion 3.1, Coldfusion 4.0, Coldfusion 4.5, Coldfusion 5.0, Synchronized Multimedia Integration Language 1.0, Wireless Markup Language e JavaServer Page Tags. Você também pode validar um documento como XML (ou XHTML). Usando o depurador de Javascript, você pode isolar erros no código de JavaScript no cliente. É possível escrever código na Visualização de código (ou inspetor de código) e, em seguida, executar o depurador, para verificar o código quanto à sintaxe e a erros lógicos. Se a página tiver um ou mais erros de sintaxe, o navegador exibirá uma mensagem de erro; se a sua página contiver um erro lógico, a sua página funcionará incorretamente, mas o navegador não exibe uma mensagem de erro. Inicialmente, o depurador verifica o código quanto a erros de sintaxe e, em seguida, é executado com o navegador, para auxiliá-lo na identificação dos erros lógicos. Se houverem erros lógicos, você poderá usar a janela Depurador do JavaScript para examinar as variáveis e propriedades do documento enquanto o programa estiver em execução. É possível definir pontos de interrupção (semelhantes às instruções de alerta) no código, a fim de parar a execução do programa e exibir os valores dos objetos e propriedades JavaScript em uma lista de variáveis. Também é possível avançar até a instrução seguinte ou até uma chamada de função para examinar a mudança dos valores da variável. Para obter mais informações, veja Validação de seus tags e Uso do depurador do JavaScript em Ajuda do Dreamweaver > Usando o Dreamweaver. Depuração de páginas dinâmicas no Dreamweaver MX Ao desenvolver os aplicativos do Macromedia ColdFusion, você pode configurar o ColdFusion para exibir as informações em um navegador para lhe ajudar a depurar o aplicativo. Por exemplo, se uma página contiver um erro, o ColdFusion exibirá as possíveis causas de um erro na parte inferior de uma página do ColdFusion quando você abrir a página em um navegador. Você pode visualizar essas informações e consertar a página sem deixar o espaço de trabalho do Dreamweaver. Observação: Esse recurso não é aceito no Macintosh. Os desenvolvedores do Macintosh podem usar o comando Visualizar no navegador ou F12 para abrir uma página do ColdFusion em um navegador separado. Se a página contiver erros, as informações sobre as possíveis causas dos erros aparecerão na parte inferior da página. Para depurar uma página do ColdFusion sem deixar o espaço de trabalho do Dreamweaver, abra a página do ColdFusion no Dreamweaver e clique no ícone Depuração pelo servidor na barra de documentos ou selecione Exibir > Depuração pelo servidor. Ícone Depuração pelo servidor 72 Capítulo 3

73 O Dreamweaver pede o arquivo do servidor ColdFusion MX e o exibe em uma janela de navegador interna do Internet Explorer. Se a página contiver erros, as possíveis causas dos erros aparecerão na parte inferior da página. Ao mesmo tempo, um painel Depuração pelo servidor é aberto. O painel fornece uma quantidade grande de informações úteis, como todas as páginas que o servidor processou para transformar a página, todas as consultas de SQL executadas na página e todas as variáveis do servidor e os seus valores, se houver. O painel também fornece um resumo dos tempos de execução. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Usando o depurador do ColdFusion. Depuração de filmes Flash O Depurador do Flash permite encontrar erros em um filme durante a execução no Flash Player. Use o Depurador no modo de teste com arquivos locais ou para testar arquivos em um servidor de Web em local remoto. O Depurador permite definir pontos de interrupção no ActionScript para parar o Flash Player e executar a depuração direta do código durante a sua execução. Depois, você pode voltar para os scripts e editá-los para que produzam os resultados corretos. Para ativar o Depurador no modo de teste, escolha Controlar > Depurar filme. Isso abre o depurador e também abre o filme no modo de teste. Uma vez ativado o Depurador, ele exibe o URL ou o caminho do arquivo local do filme na barra de status, informa se o Depurador está sendo executado no modo de teste ou a partir de um local remoto e mostra uma lista de exibição dinâmica do clipe de filme. Quando os clipes de filme forem adicionados ou removidos do filme, a lista de exibição refletirá as alterações imediatamente. É possível redimensionar a lista de exibição movendo o divisor horizontal. Para obter mais informações, veja a Ajuda do Flash > Usando o Flash > Uso do depurador. Se você estiver construindo complexas interações no cliente com ActionScript, recomendamos que você leia e contribua com a lista crescente de melhores práticas de ActionScript disponíveis no Centro de desenvolvimento de aplicativos do Flash MX: mx/flash. Fluxo de trabalho de desenvolvimento da Web 73

74 Testar o site em Dreamweaver MX Antes de carregar o site em um servidor e declará-lo pronto para a exibição, é recomendável testálo localmente. De fato, é recomendável testar e consertar o site com freqüência durante a construção. Desta forma, é possível descobrir problemas logo e evitar que eles se repitam. Certifique-se de que a aparência e o funcionamento das páginas nos navegadores de destino estejam de acordo com o esperado, que não haja links danificados e que o download das páginas não demore demais. Também é possível testar e reparar o site inteiro através da execução de um relatório de site, antes de publicá-lo. As seguintes diretrizes o auxiliarão a criar melhores experiências para os visitantes do seu site: Visualize previamente as suas páginas no maior número possível de navegadores e plataformas diferentes. Este procedimento possibilitará a observação de diferenças no layout, cores, tamanhos de fonte e tamanho padrão de janelas do navegador, que não podem ser previstos em uma verificação do navegador de destino. Certifique-se de que as páginas funcionem conforme o esperado nos navegadores de destino e de que elas não apresentem muitos problemas nos outros navegadores. Isso significa que as páginas deverão ser legíveis e funcionais nos navegadores que não oferecerem suporte a estilos, camadas, plug-ins ou a JavaScript. No caso das páginas que funcionam mal em navegadores antigos, considere a possibilidade de utilizar o comportamento Verificar o navegador no Dreamweaver, para redirecionar os visitantes automaticamente para outra página. Verifique se há links danificados no site (e ajuste-os). Como os outros sites também sofrem reformas e reorganizações, a página à qual está vinculando o seu site pode ter sido transferida ou excluída. Para obter uma lista simples de links a sites externos, é possível executar uma verificação de links no Dreamweaver. Uma outra alternativa é executar um relatório no site inteiro, que verifica os links externos incorretos e produz um relatório sobre eles. Monitore o tamanho das páginas e o tempo de download delas. Lembre-se que as páginas que consistem de uma tabela grande serão visualizadas pelos visitantes somente depois da tabela inteira ter sido descarregada. Leve em consideração a possibilidade de desmembrar tabelas grandes; se isto não for possível, considere, então, colocar um conteúdo pequeno como uma mensagem de boas-vindas ou uma faixa de propaganda fora da tabela, no alto da página, para que os visitantes possam visualizar esse material enquanto for feito o download da tabela. É possível procurar problemas em todo o site, como, por exemplo, documentos sem títulos, tags vazias e tags redundantes aninhadas, executando os relatórios de site no Dreamweaver. A execução destes relatórios antes da publicação do site garantirá menos problemas mais tarde. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Teste de um site. Publicação dos arquivos de site a um servidor com Dreamweaver MX Você acabou de criar um site da Web simples, mas funcional. O próximo passo é publicá-lo efetuando o upload de arquivos para um servidor de Web remoto. Antes de prosseguir, é preciso obter acesso a um servidor Web remoto (como o seu servidor do provedor de serviços de Internet, um servidor de propriedade do cliente para o qual você está trabalhando ou um servidor de intranet em sua empresa). Caso você ainda tenha acesso a um servidor, contate seu provedor de serviços Internet ou um cliente. 74 Capítulo 3

75 O comando Colocar no Dreamweaver copia os arquivos do site local para o site remoto, geralmente sem alterar o status de retirada dos arquivos. Há duas situações comuns nas quais o comando Colocar é utilizado em vez de Devolver: Qundo você não estiver em um ambiente colaborativo e não estiver usando o sistema Devolver/Retirar. Quando você quiser colocar a versão atual do arquivo no servidor, mas for continuar a editá-lo. Para colocar um arquivo em um servidor remoto, escolha Colocar no botão Gerenciamento de arquivos após salvar o arquivo na janela Documento. Por outro lado, você pode clicar no botão Colocar na barra de ferramentas do painel Site ou escolher Site > Colocar para carregar o arquivo. Se o arquivo não tiver sido salvo, é possível que apareça uma caixa de diálogo (dependendo da definição da preferência, no painel Site, na caixa de diálogo Preferências), que permite salvar o arquivo antes de colocá-lo no servidor remoto. Para obter mais informações, veja Ajuda do Dreamweaver > Usando o Dreamweaver > Colocação de arquivos em um servidor remoto. Fluxo de trabalho de desenvolvimento da Web 75

76 Manutenção e atualização do site Depois que a maior parte do site tiver sido publicado, você precisará continuar a atualizá-lo e a mantê-lo. A publicação do site isto é, publicar o site em um servidor e dar vida a ele é um processo que deve ter continuidade. Na janela do site do Dreamweaver, você obterá várias ferramentas para ajudar a gerenciar o seu site, transferir arquivos de e para um servidor remoto, definir um processo de devolução/retirada, para evitar que os arquivos sejam substituídos, e sincronizar os arquivos nos seus sites local e remoto. É importante definir e implementar um sistema de controle de versão, usando as ferramentas do Dreamweaver MX ou um aplicativo de controle de versão externa. Você também pode encontrar informações nos fóruns de debate do Macromedia Dreamweaver no Website da Macromedia. Esses fóruns são um ótimo recurso para obtenção de informações sobre diversos navegadores, plataformas, dicas de projeto, perguntas sobre codificação e assim por diante. Informações adicionais Para obter mais informações sobre quaisquer das ferramentas do Macromedia Studio MX, incluindo a documentação, tutoriais, notas técnicas e outras mídias instrutivas, visite o Centro de Suporte de cada produto: Dreamweaver: Flash: Fireworks: FreeHand: ColdFusion: 76 Capítulo 3

77 Parte III Dreamweaver MX Parte III Os capítulos da Parte III apresentam o Macromedia Dreamweaver MX, possuem três tutoriais e descrevem como o Dreamweaver trabalha com a família de produtos Studio MX. Os capítulos a seguir fazem parte desta seção: Capítulo 4, Bem-vindo ao Dreamweaver MX Capítulo 5, Tutoriais do Dreamweaver MX Capítulo 6, Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX

78

79 CAPÍTULO 4 Bem-vindo ao Dreamweaver MX O Macromedia Dreamweaver MX é um editor HTML profissional para criação, codificação e desenvolvimento de sites, páginas e aplicativos para a Web. Com o Dreamweaver, você pode escolher se deseja codificar manualmente o HTML ou trabalhar em um ambiente de edição visual. Agora, o Dreamweaver incorpora e expande todos os recursos do Macromedia UltraDev, ajudando-o a criar aplicativos dinâmicos para a Web com suporte de banco de dados utilizando linguagens de servidor como ColdFusion Markup Language (CFML), Action Script, Microsoft Active Server Pages (ASP), ASP.NET, Sun JavaServer Pages (JSP) e PHP. Novidades do Dreamweaver MX O Dreamweaver MX contém uma variedade de novos recursos, como modelos novos melhorados para ajudar os designers visuais e novos recursos de codificação. O Dreamweaver também inclui agora todos os recursos de desenvolvimento de aplicativos do Dreamweaver UltraDev 4 e oferece muitos mais, incluindo um espaço de trabalho centralizado em códigos derivado do Macromedia ColdFusion Studio, melhor codificação em tempo de execução e suporte para as tecnologias mais recentes de aplicativos Web. Controle completo sobre códigos e projeto no Dreamweaver MX Você pode criar o site que desejar, da maneira que desejar, usando as ferramentas de design ou o ambiente de codificação de alta qualidade do Dreamweaver. Um novo layout de espaço de trabalho integrado (apenas Microsoft Windows) oferece um ambiente de trabalho mais familiar com uma interface múltipla de documento (multipledocument interface, MDI), incluindo painéis de encaixe e janelas de documento com guias. O Gerenciamento de painéis no Dreamweaver é consistente com a maneira que os painéis funcionam no Macromedia Flash MX e no Fireworks MX. Você pode agrupar painéis de encaixe que podem ser minimizados e reduzir ou expandi-los conforme necessário para obter um fluxo de trabalho mais suave e altamente configurável. A amostra de componentes da Web predefinidos incluem layouts de qualidade profissional para fornecer um início para os seus projetos, assim como as bibliotecas de função JavaScript que fornecem acesso a interatividades de cliente -sofisticadas sem ter que ler milhares de páginas de livros. Modelos Dreamweaver melhorados permitem configurar regras sofisticadas para que os colaboradores insiram conteúdo sem comprometer o projeto do site. A herança de modelos permite um controle do layout mais personalizado e as regiões editáveis permitem que os colaboradores tenham mais flexibilidade em suas inserções. 79

80 O Assistente de definição do site permite configurar um site rápido e facilmente, mesmo que você esteja criando um site dinâmico pela primeira vez ou configurando uma conta com um provedor de serviços de Internet. Dicas de código fornecem acesso fácil a menus personalizados exibindo atributos de tag apropriados, propriedades de métodos, parâmetros de funções e estilos de CSS enquanto você faz a edição na visualização de código. Uma barra de inserção personalizável permite o acesso rápido a objetos e comportamentos no Dreamweaver e é completamente extensível. A barra de ferramentas do documento agora pode ser personalizada para atender às suas necessidades e preferências, usando XML e JavaScript.. Um explorador de arquivos está integrado no painel Site, permitindo procurar propriedades e arquivos na área de trabalho e em volumes da rede sem ter que sair do Dreamweaver para usar o explorador de arquivos nativo do seu sistema operacional. O painel Respostas conecta você diretamente com os recursos on-line do Centro de Suporte da Macromedia. Você pode recuperar novos conteúdos a qualquer momento para garantir que tenha acesso sempre às dicas e truques mais recentes. A manipulação e edição de tabela melhorada gera um código melhor para edições de tabelas na visualização padrão e na visualização de layout, simplificando a manipulação de atributos e garantindo que todos os layouts estejam o mais confiáveis possível sem comprometer a compatibilidade com os outros navegadores. Os menus pop-up em cascata de JavaScript agora podem ser criados diretamente no Dreamweaver, um recurso disponível anteriormente apenas no Fireworks.. A sinalização da sintaxe por cores é completamente configurável e pode ser personalizada de acordo com as suas necessidades individuais. A barra de ferramentas Padrão permite o acesso rápido aos comandos de arquivo mais comuns utilizados (Abrir, Salvar e Novo) e aos comandos da área de transferência. A impressão a partir da visualização do código agora permite imprimir o código-fonte, com a formatação apropriada aplicada. Suporte robusto no Dreamweaver MX para as tecnologias de servidores mais recentes Com o Dreamweaver MX, você pode criar rapidamente aplicativos dinâmicos para a Web operados por banco de dados através de codificação manual e utilizando comportamentos e objetos visuais. Bibliotecas de código de servidor para ColdFusion, ASP, ASP.NET, JSP e PHP permitem criar visualmente Websites dinâmicos usando todas as tecnologias líderes de servidor. Em um ambiente de desenvolvimento, você pode integrar vários sites e tecnologias de back-end. O painel Trechos permite armazenar partes arbitrárias de código para uso posterior. Você pode facilmente reutilizar funções, layouts e códigos complicados. O editor de bibliotecas de tags fornece um banco de dados de tags integrado para armazenar informações de tags nativas ou personalizadas. Ele permite editar as propriedades de tags existentes e importar novas. 80 Capítulo 4

81 Centenas de editores de tags permitem que você edite rapidamente os atributos relevantes de tags específicas em HTML, CFML e ASP.NET enquanto estiver na visualização de código. O suporte de tag personalizado do ASP.NET permite que você importe controles do servidor ASP.NET personalizados (tags personalizadas) para as páginas do ASP.NET e veja os atributos e a estrutura exibidos no Seletor de tags, Dicas de código e no inspetor de tags. As tags de formulário da Web em ASP.NET agora estão interpretadas nos sistemas Windows e Macintosh, permitindo visualização e edição sofisticadas. Os editores de tag de formulário da Web permitem criar rapidamente formulários da Web em ASP.NET usando controles de servidor e validação. Os objetos DataGrid e DataList em ASP.NET podem ser criados facilmente no Dreamweaver para obter a manipulação e a exibição de dados complexos. Um painel de banco de dados integrado permite olhar rapidamente a estrutura e o conteúdo do seu banco de dados, procurar tabelas, armazenar procedimentos e visualizações antes de criar as suas consultas. O Seletor de tags exibe a estrutura de todas as tags disponíveis no Dreamweaver, incluindo tags personalizadas importadas através do editor de bibliotecas de tags. Você pode utilizá-lo para inserir e editar rapidamente as tags em suas páginas e visualizar as informações de referência para tags individuais. Um banco de dados personalizável de tags baseadas em XML armazena as informações sobre a estrutura de todas as tags disponíveis. Este mecanismo de armazenamento central de informações permite que os recursos, tais como Dicas de código, Seletor de tags e Inspetor de tags funcionem com as tags importadas nativas e personalizadas. A detecção do ColdFusion MX permite que o Assistente de definição do site configure-se automaticamente para configurar um site de ColdFusion usando uma cópia instalada localmente do Macromedia ColdFusion MX Developer Edition. O painel de depuração para ColdFusion MX simplifica o fluxo de trabalho de depuração para ColdFusion MX exibindo a saída de depuração diretamente dentro do Dreamweaver. Ao utilizar este painel, você pode visualizar informações de variáveis, informações de consulta e outras estatísticas de páginas principais, e ir diretamente para as áreas de problemas, tudo isto sem sair do ambiente de desenvolvimento. O código de tempo de execução do ColdFusion gerado pelos objetos e comportamentos de servidor do Dreamweaver foi reconstruído para ser mais orientado a tags, tornando-as quase indistintas do código criado manualmente por um desenvolvedor. Suporte RDS permite transferir os arquivo e pesquisar a estrutura de bancos de dados em servidores do ColdFusion usando as conexões RDS. Bibliotecas de tags JSP ajudam os desenvolvedores abstraindo a lógica dos servidores de páginas JSP. O Dreamweaver importa as informações de biblioteca de tag JSP de arquivos TLD (descritor de biblioteca de tag, tag library descriptor) e disponibiliza-os nas Dicas de código, no Seletor de tags e no Inspetor de tags. A introspecção JavaBeans completa mostra os métodos getproperty e setproperty do JavaBeans no painel DataBindings e pode exibir todos os métodos e propriedades de um JavaBeans no painel Componente do servidor para permitir que os desenvolvedores integrem completamente Beans com aplicações JSP. Bem-vindo ao Dreamweaver MX 81

82 Os objetos de formulário dinâmicos permitem criar listas de seleção orientadas a banco de dados e outros elementos de formulário simplesmente selecionando o objeto de formulário apropriado na barra de inserção. O Criador de comportamentos de servidor do UltraDev 4 foi aprimorado para permitir que os usuários criem comportamentos de servidor com mais elementos complicados de interface de usuário, incluindo caixas de seleção, grupos de botões de opção e menus Conexão. Um HomeSite 5 integrado e ColdFusion Studio 5 incorporado fornece uma versão licenciada do Macromedia HomeSite+, uma combinação do ColdFusion Studio e do HomeSite 5, completamente integrado e incluído com o Dreamweaver. Acesso fácil no Dreamweaver MX aos últimos padrões O Dreamweaver MX permite criar Websites compatíveis com os últimos padrões Web, incluindo XML e serviços da Web, e manter seu conhecimento atualizado com as tecnologias de desenvolvimento mais recentes. A introspecção de serviços da Web para.net, ColdFusion e Java permite introspeccionar e interoperacionalizar com os padrões de serviços da Web baseados em XML em todas as tecnologias de servidores. Você pode incorporar a funcionalidade mais complexa às suas aplicações Web usando o recurso de introspecção de serviço da Web no Dreamweaver. A edição e validação de XML permite importar definições de tipo de documento (DTDs) e esquemas, e garantir que os documentos sejam formados corretamente. O suporte CSS melhorado, incluindo a integração TopStyle, ajuda a criar sites compatíveis com os últimos padrões CSS (Folhas de estilo em cascata, Cascading Style Sheets). O painel CSS do Dreamweaver foi aprimorado para mostrar os estilos definidos interna e externamente e permitir folhas de estilos para design. Muitas construções novas CSS2 também são suportadas. O suporte a XHTML permite garantir que os sites estejam atualizados com os padrões mais recentes em design HTML configurando o Dreamweaver para gerar códigos compatíveis com XHTML. Você também pode converter rapidamente arquivos HTML herdados para XHTML usando o conversor de XHTML. Os relatórios do site de acessibilidade da seção 508 ajudam a determinar se o seu site está de acordo com as diretrizes de acessibilidade e problemas de identificação rápido e facilmente. O conteúdo integrado de referência de acessibilidade no painel Referência fornece a você o contexto e a base das melhores práticas em projeto para acessibilidade. A opção de acessibilidade para a geração do código de compatibilidade auxilia durante o ciclo de edição para garantir que o conteúdo que você está criando está de acordo com as diretrizes de acessibilidade. Você pode configurar o Dreamweaver para solicitar os atributos relacionados às especificações de acessibilidade quando tags e objetos apropriados são inseridos na página. O suporte a componentes do ColdFusion oferece uma modularidade e portabilidade aumentada de lógica de servidor expondo as propriedades através de CFML. O Dreamweaver inclui suporte a introspecção, criação e edição de componentes do ColdFusion. A validação de código garante que seus documentos estejam de acordo com os padrões apropriados fornecendo um relatório de validação em relação a um perfil de navegador específico ou uma versão específica de um padrão, incluindo XHTML transicional e HTML Capítulo 4

83 Os recursos iniciar e editar no Macromedia Flash MX e Fireworks MX aceleram gráficos, animações e edição de HTML entre o Macromedia Flash MX, Dreamweaver e Fireworks MX, permitindo iniciar e otimizar diretamente a partir do Dreamweaver. Um Inspetor de tags para exibição de XML, HTML e CFML permite visualizar a estrutura de um documento rápida e facilmente. Você pode apontar e eliminar rapidamente o aninhamento impróprio e as relações pai sem ter que procurar no código-fonte bruto. O logon de FTP seguro integra-se com MacSSH e PUTTY para Windows para permitir a transferência segura ativada para SSH de informações de logon a partir do cliente de FTP integrado do Dreamweaver. O suporte ao conjunto de caracteres complexos UTF-8 em todos os idiomas permite criar e transformar páginas usando a codificação UTF-8. O suporte a Mac OS X e Windows XP permite que o Dreamweaver seja executado a plena velocidade nos sistemas operacionais mais recentes, enquanto suporta todas as últimas melhorias de interface de usuário. A integração do Macromedia Sitespring ajuda a usar as melhores práticas em produção e gerenciamento de clientes no espaço de trabalho do Dreamweaver. Aprendendo Dreamweaver O Dreamweaver contém vários recursos para ajudá-lo a conhecer o programa rapidamente e tornar-se um experiente desenvolvedor de páginas e sites para a Web. Estes recursos incluem um sistema de ajuda on-line e tutoriais. Além disso, é possível encontrar sugestões atualizadas regularmente, notas técnicas, exemplos e informações no site do Centro de suporte do Dreamweaver no site da Macromedia na Web. Tutoriais do Dreamweaver MX Os princípios básicos de configuração de um Website e edição de códigos são cobertos no Capítulo 5, Tutoriais do Dreamweaver MX, na página 87. Se você já está familiarizado com os recursos de design do Dreamweaver, mas deseja aprender mais sobre como criar aplicações Web, comece com o Tutorial 3 do Dreamweaver: Criar um aplicativo para a Web, na página 126, que ensina como criar páginas interativas conectadas a bancos de dados. Dreamweaver Ajuda A Ajuda do Dreamweaver contém informações abrangentes sobre todos os recursos do Dreamweaver, otimizada para uso on-line. A ajuda do Dreamweaver é exibida no visualizador de ajuda fornecido com seu sistema operacional: Ajuda do Microsoft HTML (Windows) ou Apple Help (Macintosh). Em ambas as plataformas, você pode localizar as informações necessárias de quatro maneiras: Sumário permite ver todas as informações organizadas por assunto. Clique nas entradas de nível -superior para exibir os sub-tópicos. O índice, como um índice impresso tradicional, permite procurar termos ou conceitos específicos. A pesquisa permite localizar qualquer seqüência de caracteres, em qualquer lugar no texto do sistema de ajuda. Bem-vindo ao Dreamweaver MX 83

84 Ajuda contextual fornece uma maneira de abrir um tópico de ajuda relevante a partir de cada caixa de diálogo, painel ou inspetor. Para exibir a ajuda contextual, clique no botão Ajuda na caixa de diálogo ou selecione Ajuda a partir do menu Opções na barra de título em um grupo de painel, clique no ícone de ponto de interrogação em um inspetor ou outro tipo de janela. Clique aqui para abrir a Ajuda Cada tópico da ajuda fornece botões que você pode clicar para mover entre os tópicos. Os botões seta à direita e à esquerda levam-no ao próximo tópico ou ao anterior em uma seção (na ordem que os tópicos são listados no sumário). Extensão Dreamweaver O sistema de ajuda Extensão do Dreamweaver fornece informações sobre o Modelo de objeto de documento (DOM) e as APIs (interfaces de programação de aplicativos) do Dreamweaver que permitem aos desenvolvedores de JavaScript e C criar extensões para o Dreamweaver. Dreamweaver Centro de suporte Para aproveitar ao máximo os recursos do Dreamweaver, você pode consultar o centro de suporte na Web. O site do Centro de suporte do Dreamweaver na Web em support/dreamweaver/ é atualizado regularmente com as informações mais recentes sobre o Dreamweaver, além de conter recomendações de usuários experientes, exemplos, sugestões, atualizações e informações sobre os tópicos avançados. Consulte sempre o Website para obter as últimas novidades sobre o Dreamweaver e como obter o máximo do programa. Dreamweaver fóruns on-line Discuta questões técnicas e compartilhe sugestões úteis com outros usuários do Dreamweaver, visitando os fóruns on-line do Dreamweaver. Você encontrará as informações para acessar os fóruns no Website da Macromedia em dreamweaver_newsgroup. 84 Capítulo 4

85 Recursos de tecnologias da Web e HTML A seguir, estão alguns recursos úteis, disponíveis na Web: A especificação HTML 4.01 ( é o documento oficial para HTML do World Wide Web Consortium. Índice DOT HTML( é uma lista completa de tags, atributos e valores HTML, bem como sua compatibilidade com os diversos navegadores. A especificação XHTML 1.0 ( é a especificação oficial para Extensible HyperText Markup Language. O site XML.com O Reilly ( fornece informações, tutoriais e sugestões sobre XML (Extensible Markup Language), assim como outras tecnologias da Web. A especificação para o nível 1 das Cascading Style Sheets (CSS1) ( CSS1) e especificação para o nível 2 (CSS2) ( são as especificações oficiais para as folhas de estilo do World Wide Web Consortium. Guia de referência das folhas de estilos da WebReview.com ( index.shtml) explica o que são os estilos CSS e em quais navegadores funcionam. As páginas Visão geral das ASP da Microsoft ( ASPover.asp) contêm informações sobre as Active Server Pages (ASP). A página ASP.NET da Microsoft ( fornece informações sobre ASP.NET. A página JSP da Microsoft ( fornece informações sobre JSP (JavaServer Pages). As páginas PHP ( contém informações sobre o PHP: pré-processador de hipertexto. O site MySQL ( fornece informações sobre o MySQL. A tabela de entidades ( apresenta uma lista dos nomes de entidades utilizadas pelo padrão ISO (Latin-1). A página de eventos de HTML dinâmico ( reference/events.asp#om40_event) contém informações sobre os eventos no Microsoft Internet Explorer. A página de produto do ColdFusion Server da Macromedia ( software/coldfusion/) fornece informações sobre o ColdFusion Server. A página de produto do JRun Server da Macromedia ( jrun/) fornece informações sobre o servidor de aplicativo Java JRun. A página WebSphere da IBM ( contém informações sobre o servidor de aplicativos WebSphere da IBM. A página do produto da Chili!Soft ( contém informações sobre o servidor de aplicativo de ASP da Chili!Soft. A JavaScript Bible (Bíblia de JavaScript), de autoria de Danny Goodman (IDG Books), cobre a linguagem JavaScript 1.2. JavaScript: The Definitive Guide (JavaScript: o guia definitivo), de autoria de David Flanagan (O Reilly & Associates), fornece informações de referência para cada função, objeto, método, propriedade e manipulador de evento JavaScript. Bem-vindo ao Dreamweaver MX 85

86 CGI Scripts for Fun and Profit ( index4a.html) é um artigo do site Hotwired Webmonkey sobre a inclusão de scripts CGI (Common Gateway Interface) já prontos nas páginas. O Índice de recursos CGI ( é um repositório de todas as questões relativas a CGI, incluindo scripts prontos, documentação, livros e até mesmo programadores que oferecem seus serviços. O site Common Gateway Interface ( inclui uma introdução à CGI. 86 Capítulo 4

87 CAPÍTULO 5 Tutoriais do Dreamweaver MX Os três tutoriais deste capítulo são uma maneira rápida de aprender os fundamentos do desenvolvimento para Web no Macromedia Dreamweaver MX. Os tutoriais o apresentarão a estes conhecimentos: Criação de um Website Uso de ferramentas de codificação para complementar o ambiente de desenvolvimento visual do Dreamweaver Criação de aplicativos para a Web dinâmicos e orientados a dados A melhor maneira de abordar estes tutoriais é fazê-los em seqüência, adquirindo o conhecimento a medida que se familiariza com o fluxo de trabalho de desenvolvimento da Web e as ferramentas do Dreamweaver. Tutorial 1 do Dreamweaver: Criação do primeiro Website Este tutorial oferece uma série de breves lições para orientá-lo através do processo de criação de um site estático simples utilizando as ferramentas de criação visuais do Macromedia Dreamweaver MX. Para obter mais informações sobre como utilizar as ferramentas de codificação manual do Dreamweaver, consulte o Tutorial 2 do Dreamweaver: Editar códigos, na página 116. Para mais informações sobre criação de um aplicativo para a web dinâmico com a geração de bancos de dados, consulte Tutorial 3 do Dreamweaver: Criar um aplicativo para a Web, na página 126. A ordem das lições neste tutorial segue um possível fluxo de trabalho para a criação de um site. Ao criar seus próprios sites, é possível acompanhar a seqüência que achar mais adequada. Para criar um Website estático: 1 Planejar e elaborar (veja Configurar um site local, na página 88 e Adicionar propriedades ao site, na página 92). 2 Criar páginas (veja Criar e salvar uma nova página, na página 92). 3 Visualizar e configurar as páginas (veja Ajustar o layout, na página 95 e Definir o título da página, na página 100). 4 Adicionar conteúdo às suas páginas (veja Adicionar texto formatado, na página 101 e Adicionar imagens, na página 105). 5 Criar links entre páginas (veja Adicionar link de texto entre as páginas, na página 110 e Criar imagens cambiáveis para links gráficos, na página 111). 87

88 6 Publicar o site (veja Visualizar no navegador, na página 113 e Configurar um site remoto e publicar, na página 113). Configurar um site local O método mais comum para se criar um site utilizando o Dreamweaver é elaborar e editar páginas no disco local e carregar as cópias das páginas a um servidor da Web remoto para publicá-las. É possível utilizar o Dreamweaver de outras formas (como executar um servidor da Web em seu computador local, enviar os arquivos a um servidor temporário (staging server) ou utilizar um disco anexo como o disco local), mas as lições deste tutorial levam em consideração que você esteja trabalhando no computador local e efetuando upload a um servidor remoto. No Dreamweaver, a palavra site é utilizada como abreviação para os seguintes itens: Website: conjunto de páginas em um servidor, que pode ser visualizado pelo visitante através de um navegador da Web. Site remoto: arquivos contidos no servidor que compõe um Website, do ponto de vista de seu autor em vez do ponto de vista de um visitante. Site local: arquivos no disco local que correspondem aos arquivos no site remoto. Os arquivos são editados em seu disco local e carregados no site remoto. Dreamweaver Definição do site: conjunto de características de definição para um site local, mais as informação sobre como o site local corresponde a um site remoto. Normalmente, é preciso planejar um Website antes de criá-lo, calculando o número de páginas, que conteúdo aparecerá em cada página e como as páginas serão vinculadas entre si. Nesta lição, entretanto, o site a ser criado é muito simples, portanto, não necessita de muito planejamento: ele consistirá de apenas duas páginas com links entre elas. Portanto, para este site, é possível omitir o planejamento e prosseguir com a criação de uma definição do site. A definição do site pode ser criada através da caixa de diálogo Definição do site. Esta caixa de diálogo pode ser preenchida de dois modos: Básico ou Avançado. O método básico o orientará através da configuração do site passo a passo. Se preferir editar as informações do site sem ajuda, clique na guia Avançado. O procedimento a seguir descreve como definir as opções na versão básica da caixa de diálogo, que também é conhecido como Assistente de definição do site. Para mais detalhes sobre como definir as opções avançadas, clique na guia Avançado e no botão de ajuda. Para definir um site: 1 Selecione Site > Novo site (ou seja, selecione Novo site no menu Site.) A caixa de diálogo Definição do site é exibida. 2 Se a caixa de diálogo estiver exibindo a guia Avançado, clique em Básico. A primeira tela do Assistente de definição do site aparece solicitando que você digite um nome para o site. 88 Capítulo 5

89 3 Na caixa de texto, digite um nome para identificar o site no Dreamweaver. Escolha o nome de sua preferência. Por exemplo: o site pode ter o nome locadora de veículos Global. 4 Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente surge perguntando se você deseja trabalhar com uma tecnologia de servidor. 5 Selecione a opção Não para indicar que, no momento, este site é um site estático, sem páginas dinâmicas. Para configurar um site para criar um aplicativo para a Web, é preciso selecionar um tipo de documento dinâmico, como Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) ou PHP: Hypertext Preprocessor (PHP), e fornecer as informações sobre o servidor de aplicativos (para obter mais informações, veja Tutorial 3 do Dreamweaver: Criar um aplicativo para a Web, na página 126). 6 Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente aparece perguntando se você deseja trabalhar com seus arquivos. Tutoriais do Dreamweaver MX 89

90 7 Selecione a opção Editar localmente e, em seguida, efetue o upload ao servidor quando estiver pronto (recomendado). Há diversas maneiras de se trabalhar com arquivos durante o desenvolvimento de um site, mas para fins desta lição, selecione esta opção. 8 A caixa de texto permite especificar uma pasta no disco local onde o Dreamweaver deve armazenar a versão local dos arquivos do site. É mais fácil especificar um nome de pasta exato se você pesquisar a pasta em vez de digitar o caminho, portanto, clique no ícone da pasta próximo à caixa de texto. A caixa de diálogo Escolha a pasta raiz local do site será exibida. 9 Na caixa de diálogo Escolha a pasta raiz local do site, comece navegando a uma pasta em seu disco local no qual todos os sites estão armazenados. Não clique em OK ainda. Observação: Esta pasta com os sites eventualmente conterá sites múltiplos, portanto, não escolha a pasta de sites como a pasta raiz local. Esta pasta raiz local será criada em seguida para este site individual dentro da pasta de sites. Se ainda não houver uma pasta de sites, crie uma agora (com o botão de criação de pastas na caixa de diálogo Escolha a pasta raiz local do site). Denomine a pasta como Sites. O local indicado para a pasta de sites depende do sistema operacional: No Windows, se ainda não existir um lugar para armazenar os sites, crie uma pasta no nível superior da unidade C e denomine-a de Sites. Isto significa que o caminho para a pasta é C:\Sites. No Mac OS 9, se você ainda não tiver um local para armazenar os sites, crie uma pasta no nível superior da unidade disco chamada Sites. In Mac OS X, a pasta inicial (/Users/your_user_name) contém uma pasta Documentos. Navegue até esta pasta e crie uma pasta denominada Sites dentro dela. 10 Ainda na caixa de diálogo Escolha a pasta raiz local do site, crie uma nova pasta dentro da pasta Sites. Nomeie a nova pasta de Inicial e clique em OK para sair da caixa de diálogo Escolha a pasta raiz local do site. Esta nova pasta é a pasta raiz local de seu site. 90 Capítulo 5

91 11 Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente surge perguntando se você deseja conectar-se ao servidor remoto. 12 Por enquanto, escolha Nenhum no menu pop-up. Clique em Avançar para prosseguir ao passo seguinte. A próxima tela do assistente aparece mostrando um resumo das configurações. 13 Clique em Concluir. É possível configurar as informações sobre o site remoto posteriormente (veja Configurar um site remoto e publicar, na página 113). No momento, as informações do site locais são suficientes para a criação de uma página. Uma mensagem de alerta informará que o Dreamweaver está prestes a criar o cache do site. Este cache do site é um recurso que o Dreamweaver utiliza para armazenar informações sobre o site para tornas as operações de acesso ao site mais rápidas. 14 Clique em OK para o Dreamweaver criar o cache do site. O painel Site exibirá agora a nova pasta raiz local para o site atual junto com um ícone para que o usuário possa visualizar as unidades locais em forma de árvore hierárquica. O ícone é denominado Área de trabalho no Windows. O painel Site normalmente exibe todos os arquivos e pastas do site, mas por enquanto seu site não contém nenhum arquivo ou pastas. Quando houver arquivos em um site, a lista de arquivos no painel Site atua como um gerenciador de arquivos, permitindo ao usuário copiar, colar, excluir, mover e abrir arquivos da mesma maneira que na área de trabalho do computador. Se já houver um conjunto de arquivos HTML locais que você deseja utilizar para criar um Website, é possível utilizar navegador de arquivos no painel Site para copiar esses arquivos à pasta criada recentemente do site. No entanto, você pode concluir as lições deste guia utilizando os arquivos fornecidos pelo Dreamweaver antes de começar a utilizar seus próprios arquivos Se o site estiver em um servidor remoto e você deseja editar aquele site com o Dreamweaver, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Tutoriais do Dreamweaver MX 91

92 Adicionar propriedades ao site Após criar um site local e criar as propriedades para o site (imagens ou outro tipo de conteúdo), coloque as propriedades em uma pasta dentro da pasta raiz do site local. Em seguida, ao adicionar conteúdo à páginas, as propriedades estarão prontas para serem utilizadas. Os arquivos de imagens e de texto do site Locação de veículos Global são fornecidos com o Dreamweaver. Se você estiver criando páginas para este site, é preciso copiar as imagens para o site na pasta raiz local do site. Para isto, utilize o painel Site. As propriedades estarão contidas em uma pasta denominada Design. Para maior simplicidade e consistência com este Guia de introdução, copie a pasta Design para seu site e trabalhe com o conteúdo daquela pasta. Para copiar uma pasta de imagens para a pasta raiz local de seu site: 1 Se o painel Site não estiver aberto, abra-o selecionando Janela > Site. O painel Site é exibido (se o painel Site já estiver aberto, ele não aparecerá neste passo. Se o painel Site não for exibido, selecione Janela > Site novamente para exibi-lo). 2 No painel Site, expandir o ícone da área de trabalho do Windows para visualizar as unidades disponíveis. 3 Expandir as pastas até encontrar a pasta do aplicativo Dreamweaver. 4 Expandir a pasta Amostras. 5 Expandir a pasta GettingStarted na pasta Amostras. 6 Selecione a pasta Design na pasta GettingStarted e pressione Control+C (Windows) ou Command+C (Macintosh) para copiá-la. A pasta Design contém uma pasta chamada Propriedades, que contém várias propriedades relacionadas ao site, incluindo uma subpasta de imagens. 7 Ainda no painel Site, localize a pasta raiz local do site (a pasta que você criou quando o site foi definido) e selecione aquela pasta. Em seguida, pressione Control+V (Windows) ou Command+V (Macintosh) para colar uma cópia da pasta Design em seu site. Criar e salvar uma nova página Agora que o site foi configurado, é possível criar páginas da Web para preenchê-lo. Ao iniciar o Dreamweaver, um documento HTML é automaticamente criado. Antes de continuar, feche este documento. Para fechar o documento em branco padronizado: Escolha Arquivo > Fechar. 92 Capítulo 5

93 Para criar uma nova página: 1 Escolha Arquivo > Novo. A caixa de diálogo Novo documento é exibida. 2 Na lista de categorias à esquerda, selecione a categoria Projetos de página. A lista na coluna central da caixa de diálogo é renomeada como Projetos de página. Uma lista de páginas pré--formatadas é exibida. 3 Rolar através da lista Projetos de página e selecione o item Text: Article D with Navigation. Observação: Há outro item com nome semelhante. Tenha cuidado para não escolher o item denominado Text: Article D, que não possui barra de navegação. Tutoriais do Dreamweaver MX 93

94 Uma pequena visualização da página surge à direita da caixa de diálogo. Se preferir, é possível criar uma página utilizando qualquer modelos de página fornecidos ou criar uma página sem projeto predefinido selecionando um item da categoria Página básica. O restante desta lição pressupõe que você esteja utilizando o projeto de página Text: Article D with Navigation. 4 Certifique-se de que o botão de opção Documento esteja selecionado no canto direito inferior da caixa de diálogo. 5 Clique em Criar. Uma nova página é exibida com o layout selecionado em uma nova janela do documento. A página aparece preenchida com o alocador de espaço de texto Lorem ipsum, que mostra como será o aspecto da página quando o texto for adicionado. 6 Salve o documento. 94 Capítulo 5

95 Para salvar a nova página: 1 Selecione Arquivo > Salvar. 2 Na caixa de diálogo Salvar como, localize a pasta Projeto dentro da pasta raiz do site. Lembre-se: a pasta raiz do site é a pasta criada ao configurar o site em Configurar um site local, na página Digite o nome de arquivo index.htm. 4 Clique em Salvar. O nome de arquivo agora aparecerá na barra de título da janela do documento entre parênteses, após as palavras Documento sem título. Ajustar o layout As páginas pré-formatadas fornecem um ponto de partida, mas seu layout de página provavelmente não corresponderá exatamente a todas as necessidades do usuário. Para modificar o layout de uma página, utilize as ferramentas de layout do Dreamweaver. Este tutorial descreve brevemente algumas ferramentas, mas para obter mais detalhes, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Primeiro, remova os elementos de layout desnecessários. Para criar o layout da página locação de veículos Global, remova várias tabelas e células desnecessárias (veja a seção a seguir). Em seguida, adicione alocadores de espaço de imagem e ajuste as larguras das colunas da tabela (com a visualização de layout do Dreamweaver) para enquadrar as colunas corretamente. Veja Adicionar um alocador de espaço de imagem, na página 98 e Provocar o alongamento automático da coluna, na página 99. Remover elementos desnecessários Pode haver elementos desnecessários para sua página final em qualquer projeto de página predefinido. É possível selecionar e excluir tais elementos. Se você estiver criando a página de locação de veículos Global, os elementos seguintes no projeto de página padrão serão desnecessários: Dois links de navegação no topo da página A área de título e cabeçalho na coluna de texto principal Uma pequena caixa próxima ao título da coluna lateral A barra de direitos autorais na base da página O procedimento geral para remover um elemento consiste em selecioná-lo e pressionar a tecla de retorno do teclado (backspace). Os procedimentos a seguir mostram como selecionar e excluir cada elemento desnecessário. Depois de concluído, verifique se todos os itens selecionados foram removidos e salve o documento. Tutoriais do Dreamweaver MX 95

96 Para remover links de navegação desnecessários: 1 Selecione Exibir > Visualização de tabelas > Visualização padrão para assegurar que as tabelas sejam visualizadas no modo de visualização padrão. 2 Na barra de navegação do documento, arraste a célula da tabela com o link Sic Amet para a célula da tabela com o link Consectetur. Ambas as células da tabela são realçadas para indicar que foram selecionadas. 3 Pressione a tecla Backspace (Windows) ou Delete (Macintosh). As células da tabela serão removidas. As outras células da tabela (links Lorem, Ipsum e Dolor ) expandem-se automaticamente para preencher a largura da tabela. Para remover o título da coluna de texto desnecessário: 1 Na parte superior das colunas de texto, clique na palavra Título. 2 No seletor de tags na parte inferior da janela do documento, clique na tag <table> mais à esquerda, a tag que aparece imediatamente à direta da tag <body>. (Se a tag <body> não estiver visível na área de trabalho flutuante, amplie a janela do documento.) 3 Pressione a tecla Backspace (Windows) ou Delete (Macintosh) para remover a tabela que contém o título. Observação: Há duas tags <table> no seletor de tags, uma vez que a área do título é uma tabela aninhada dentro de outra tabela. Nesse caso, exclua a tabela externa indicada pela tag <table> mais à esquerda. 96 Capítulo 5

97 Para remover a caixa desnecessária no cabeçalho da barra lateral: 1 Na coluna direita, à esquerda das palavra Notícias, clique na caixa que contém o ponto de exclamação. 2 No seletor de tags, clique na tag <td> mais à direita para selecionar a caixa ao redor do ponto de exclamação. 3 Pressione a tecla Backspace (Windows) ou Delete (Macintosh). Para remover a barra de direitos autorais desnecessária: 1 Role a página até o final. Clique em qualquer lugar na barra de direitos autorais no fundo da página. 2 No seletor de tags, clique na tag <table> mais à esquerda, a tag que aparece imediatamente à direta da tag <body>. Em seguida, pressione Excluir para remover a tabela que contém a informação de direitos autorais. Para verificar e salvar a página: 1 Exiba a página para verificar se os elementos desnecessários foram removidos. Sua página deve ser semelhante à do exemplo: 2 Salve o documento. Tutoriais do Dreamweaver MX 97

98 Adicionar um alocador de espaço de imagem Crie um alocador de espaço para representar a imagem que será adicionada posteriormente. Para adicionar um alocador de espaço de imagem: 1 Clique no início da coluna de texto principal na parte superior esquerda do texto, antes da primeira palavra em negrito do texto. Em seguida, clique na tecla Enter (Windows) ou Return (Macintosh) para inserir uma linha em branco antes do texto. Clique na nova linha em branco. O ponto de inserção deve estar na própria linha. Se não estiver, coloque o ponto de inserção na linha em branco. 2 Escolher Inserir > Alocador de espaço de imagem. 3 Na caixa de diálogo, Alocador de espaço de imagem, digite um nome para o alocador de espaço (como um SplashImage) e uma largura e altura. Para a página Global, digite 523 para largura e 220 para altura. Observação: Os nomes dos alocadores de espaço devem iniciar com uma letra e podem conter somente letras e números. 4 Clique em OK. Uma caixa cinza com as dimensões especificadas é exibida. Este é um alocador de espaço de imagem utilizado para ajudar o usuário a dispor as páginas sem ter de tornar as imagens finais disponíveis. 5 Talvez seja necessário ampliar a janela do documento para exibir a coluna de texto à direita. 98 Capítulo 5

99 Provocar o alongamento automático da coluna A coluna de texto da barra lateral à direita da página index.htm possui uma largura fixa. Para modificar sua largura do mesmo modo que o visitante redimensiona a janela do navegador, provoque o alongamento automático da coluna. Em seguida, ajuste a largura da coluna que contém o alocador de espaço de imagem. Para provocar o alongamento automático da coluna esquerda: 1 Se a barra Inserir não estiver visível, selecione Janela > Inserir para exibi-la. 2 Na barra Inserir, clique na guia Layout. 3 Clique no botão Visualização de layout para alternar ao modo de visualização de layout. 4 Leia as caixa de diálogo informativas e clique em OK. Uma guia verde aparece no canto esquerdo superior de cada tabela da página. A guia é denominada Tabela de layout. 5 Na janela do documento, clique na guia Tabela de layout acima e à esquerda do alocador de imagem inserido para selecionar a tabela que contém ambas as colunas de texto. Um cabeçalho de coluna aparece sobre cada uma das duas colunas de texto mostrando a largura de cada coluna. 6 Se a janela do documento for muito estreita para exibir toda a coluna à direita, amplie a janela. Mesmo após expandir a janela do documento, outras guias de tabelas de layout podem ocultar os números de exibição da largura no cabeçalho da coluna à direita. Não clique nas guias de tabela de layout. 7 Clique com cuidado no cabeçalho da coluna acima da coluna direita (clique acima da parte superior das guias da tabela de layout na coluna direta). O menu pop-up é exibido. 8 No menu pop-up, selecione Provocar o alongamento automático da coluna. A caixa de diálogo Escolha a imagem espaçadora será exibida ao usuário para escolher uma imagem espaçadora. Observação: Se a imagem espaçadora já tiver sido escolhida, esta caixa de diálogo não aparecerá e, neste caso, a coluna direita é definida para alongamento automático. Se a caixa de diálogo não aparecer, ignore o restante deste procedimento. Tutoriais do Dreamweaver MX 99

100 9 Na caixa diálogo Escolha a imagem espaçadora, selecione a opção Utilizar um arquivo existente de imagem espaçadora e clique em OK. Outra caixa de diálogo será exibida denominada Selecione o arquivo de imagem espaçadora. 10 Na caixa de diálogo Selecione o arquivo de imagem espaçadora, vá até a pasta raiz e abra a pasta Propriedades. Em seguida, abra a pasta Imagens, selecione spacer.gif e clique em OK. A coluna direita é definida para alongamento automático. No navegador, a coluna direita deverá ser tão larga quanto possível depois que a coluna esquerda for desenhada com sua largura fixa. Para ajustar a largura da coluna de texto principal: 1 Clique no cabeçalho da coluna acima da coluna esquerda e selecione Tornar consistentes as larguras das células no menu pop-up exibido. A coluna esquerda é definida com uma largura fixa (igual à largura da imagem mais os valores de preenchimento e espaçamento das células). 2 Clique no botão Visualização padrão na barra Inserir para retornar ao modo de visualização padrão. 3 Salve o documento. Definir o título da página É possível definir diversas propriedades para uma página, incluindo título, cor de fundo, cor de texto e assim consecutivamente (para definir as propriedades de uma página, selecione Modificar > Propriedades da página). No entanto, se desejar definir o título da página (o título que se aparece na barra de título do navegador), utilize a barra de ferramentas do documento. Para definir um título de página para seu documento: 1 Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento. A barra de ferramenta do documento do Dreamweaver é exibida. Na área de trabalho integrada, a barra será exibida normalmente na parte superior da área do documento e, na área de trabalho flutuante, aparecerá como parte da janela do documento. Mostrar a visualização do código Mostrar a visualização do projeto Título do documento Gerenciamento de arquivos Visualizar/depurar no navegador Referência Visualização do Live Data Mostrar as visualizações de código e do projeto Opções de visualização Navegação por códigos Atualizar a visualização do projeto 2 Na caixa de texto Título, onde aparece Documento sem título, digite um título para a página, por exemplo: página inicial, Locação de veículos Global. Em seguida, pressione a tecla Enter para visualizar o título da página atualizado na barra de título da janela do documento. 3 Salve o documento. 100 Capítulo 5

101 Adicionar texto formatado É possível inserir texto na janela de documento ou copiar e colar texto de outra fonte (como um arquivo do Microsoft Word). Para obter mais informações, consultar a seguinte seção: Além disso, é possível formatar o texto utilizando o painel Estilos CSS (veja Adicionar estilos ao texto, na página 102). Antes de inserir um texto, certifique-se de alternar ao modo de visualização de projeto selecionando Exibir > Projeto. Adicionar texto Ao inserir e formatar texto na visualização do projeto, o Dreamweaver cria um código HTML básico Para digitar o código diretamente, utilize a visualização de código. Para obter mais informações sobre a visualização de código, veja a Ajuda do Dreamweaver > Usando o Dreamweaver > Como editar códigos no Dreamweaver. As páginas predefinidas fornecidas com o Dreamweaver contêm o texto alocador de espaço Lorem ipsum. Caso você não queira utilizar uma página pré-formatada, substitua o texto alocador de espaço pelo seu próprio texto ao adicionar conteúdo. No entanto, pode ser útil deixar o texto alocador de espaço em seu lugar até completar o projeto e layout, de modo que você ou seu cliente possam visualizar o layout sem se distrair com o texto. Para adicionar texto à página: 1 Clique três vezes no texto alocador de espaço no topo da coluna esquerda (sob o alocador de espaço de imagem) para selecionar todo o parágrafo em negrito. 2 Digite Dicas de segurança (ou, se preferir, seu próprio texto de cabeçalho). 3 Selecione os três parágrafos de texto alocador de espaço sob a régua horizontal. 4 Digite o texto a seguir (ou seu próprio texto se preferir): A segurança de nossos clientes é muito importante. Observe as dicas de segurança para que sua viagem transcorra sem incidentes! 5 Na coluna direita, clique três vezes na palavra Notícias e digite promoção relâmpago para substitui-la. Tutoriais do Dreamweaver MX 101

102 6 No painel Site, localize o texto promoções.txt na pasta Propriedades. Clique duas vezes no ícone do arquivo para abri-lo. Este arquivo contém as cópias das promoções especiais do site Global. Observação: Neste site de amostra, o arquivo que contém a cópia é um arquivo de texto. Para os demais sites, você pode utilizar os documentos HTML gerados pelo Microsoft Word. É possível importar o HTML e limpá-lo com o comando Importar HTML do Word do Dreamweaver. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Observe que o arquivo de texto aparece em uma nova janela de documento com uma barra escura sob o lado esquerdo. Esta janela se encontra no modo de visualização do código e não pode ser alternada para a visualização de projeto, pois o arquivo não está no formato HTML. Observação: Se preferir, utilize seu próprio texto na página em vez do texto fornecido. 7 Na janela de documento promoções.txt, pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar todo o texto e selecione Editar > Copiar para copiar o texto. 8 Na janela do documento index.htm, selecione todo o texto alocador de espaço na célula inferior da coluna direita e escolha Editar > Colar. O texto é colado na tabela. 9 Clique antes da palavra locação (o segundo parágrafo de texto copiado) e selecione Inserir > Régua horizontal para colocar uma linha horizontal entre as duas promoções. 10 Salve o documento. 11 Alterne para o arquivo promoções.txt. Selecione este arquivo com a opção Arquivo > Fechar. Adicionar estilos ao texto Há vários modos de adicionar estilo a um texto HTML. Um método é utilizar folhas de estilo em cascata (CSS) para definir tags HTML à medida que são formatadas de modo específico. Esta lição mostra como criar uma folha de estilo CSS simples de uma folha de estilo predefinida e como aplicar esta nova folha de estilo ao texto e modificar os estilos. Para criar uma folha de estilo CSS: 1 Escolha Arquivo > Novo. 2 Na caixa de diálogo Novo documento, selecione a categoria Folhas de estilos CSS na lista de categorias à esquerda. A lista na coluna central da caixa de diálogo é renomeada como Folha de estilo CSS. Uma lista de folhas de estilo predefinidas é exibida. 102 Capítulo 5

103 3 Na lista Folhas de estilo CSS, selecione uma folha de estilo. Para o site de locação de veículos Global, selecione Básico: Verdana, que redefine as tags body, td e th ao especificar fontes para elas. Em seguida, clique em Criar. O Dreamweaver cria um novo arquivo de texto contendo um pequeno conjunto de estilos CSS predefinidos. 4 Escolha Arquivo > Salvar para salvar o novo arquivo CSS. Salve-o na pasta de propriedades do site, nomeie a pasta texto.css (ou qualquer outro nome desejado). 5 Escolha Arquivo > Fechar para fechar o arquivo CSS. Para adicionar estilo ao texto com as folhas de estilo CSS: 1 No menu Janela, selecione um arquivo HTML (como index.htm). Observação: Se as preferências do sistema estiverem configuradas para não exibir as extensões de arquivo, o arquivo index.htm aparecerá no menu Janela com o nome index. 2 Escolha Janela > Estilos CSS, para exibir o painel Estilos CSS. 3 Na parte superior do painel Estilos CSS, clique no botão de opção Editar estilos para exibir os estilos disponíveis. Se não houver estilos definidos para este documento, nenhum estilo estará disponível. 4 Na base do painel Estilos CSS, clique no botão Anexar a folha de estilos. A caixa de diálogo Vincular a folha de estilos externa é exibida 5 Na caixa de diálogo Vincular a folha de estilos externa, clique em Procurar para localizar a folha de estilo. 6 Na caixa de diálogo Selecione o arquivo de folha de estilos, localize e selecione a nova folha de estilo criada na pasta de propriedades e clique em OK para anexar a folha de estilo. Tutoriais do Dreamweaver MX 103

104 7 Na caixa de diálogo Vincular a folha de estilos externa, clique em OK para anexar a folha de estilo. O nome e conteúdo da folha de estilo serão exigidos no painel Estilos CSS. Os estilos definidos na folha de estilo serão aplicados ao texto no documento HTML. Por exemplo: o corpo do texto aparece no formato Verdana. 8 Salve o documento. Para editar os estilos na folha de estilo: 1 Na parte superior do painel Estilos CSS, clique no botão de opção Editar estilos para exibir os estilos disponíveis. 2 Selecione o nome do arquivo CSS no painel Estilos CSS e clique no botão Editar folha de estilo na base do painel Estilos CSS. Uma caixa de diálogo é exibida mostrando os nomes dos estilos na folha de estilo. 3 Selecione um dos estilos, por exemplo body e clique em Editar. A caixa de diálogo Definição de estilo CSS é exibida. 4 Digite um tamanho para o texto, como 13 pixels. Configure as outras opções conforme desejado. 5 Clique em OK para redefinir o estilo. 6 Edite os outros estilos. Para criar os estilos utilizados no site de locação de veículos, defina os estilos body, td e th com tamanho de 13 pixels. 7 Após completar a edição dos estilos, clique no botão Salvar para salvar as alterações e fechar a caixa de diálogo Folha de estilo. Os estilos alterados são aplicados a seu documento. Por exemplo: o corpo do texto aparece no formato Verdana de 13 pixels. 104 Capítulo 5

105 Adicionar imagens Nesta lição é possível acrescentar imagens à página que você está criando. Utilize suas próprias imagens se desejar, mas ao adicionar uma imagem pela primeira vez, recomendamos utilizar as imagens do site de amostras do Dreamweaver. Caso não tenha seguido o procedimento do capítulo Adicionar propriedades ao site, na página 92 para copiar as propriedades do site Global à pasta raiz local do site, faça-o agora. Para adicionar uma imagem a um documento: 1 Salve o documento primeiro. É possível inserir uma imagem em um documento não salvo, mas para isso uma caixa de diálogo será exibida informando que o URL utilizado para a imagem local é o caminho completo para a imagem. Se este método for utilizado, o Dreamweaver definirá os endereços URL ao salvar o documento, mas é mais fácil salvar o documento antes de adicionar as imagens. 2 Para inserir uma imagem em lugar de um alocador de espaço de imagem existente, clique duas vezes no alocador de espaço. Por exemplo: para inserir o logotipo da empresa na parte superior esquerda da página de locação de veículos Global, clique duas vezes no alocador de espaço pequeno denominado imagem (100 x 50). A caixa de diálogo Selecione a fonte da imagem será exibida. 3 Verifique se o menu pop-up Em relação a esteja definido para Documento próximo à base da caixa de diálogo. Para obter mais informações sobre URLs relativos ao documento e relativos à raiz, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. 4 Localizar uma imagem na pasta propriedades (como logo.jpg). 5 Clique em OK ou Selecionar (Windows) ou Open ou Choose (Macintosh) para inserir a imagem. Na janela do documento, a imagem será exibida no lugar do alocador de espaço. 6 Clique no alocador de imagem grande criado de acordo com as instruções de Adicionar um alocador de espaço de imagem, na página 98 para selecioná-lo (não clique duas vezes de uma só vez). É possível utilizar o mesmo método para o outro alocador de espaço para substituir este alocador de espaço por uma imagem, mas as instruções a seguir oferecem um método alternativo. 7 Certifique-se de que o painel Site e o inspetor de propriedades estejam visíveis (selecione Janela > Arquivos do site e Janela > Propriedades caso não estejam visíveis). Tutoriais do Dreamweaver MX 105

106 8 No inspetor de propriedades, arraste o ícone Indicar o arquivo da caixa de texto Src para o painel Site (arraste o ícone Indicar o arquivo próximo à caixa de texto Src, mas não o ícone seguinte à caixa de texto de Link). Continue a pressionar o botão do mouse enquanto aponta para a pasta Propriedades (se a pasta estiver fechada). A pasta se abre. Continue a pressionar o botão enquanto aponta para a pasta de imagens também para abri-la. Continue a pressionar o botão até que o ponteiro esteja sobre o arquivo vintage.jpg. Solte o botão do mouse para selecionar vintage.jpg. Na janela do documento, a imagem será exibida no lugar do alocador de espaço. Se a imagem incorreta aparecer, verifique o nome de arquivo na caixa de texto Src. Se o arquivo incorreto foi selecionado, arraste o ícone Indicar - arquivo novamente. 9 Para inserir imagens em locais sem alocadores de espaço, clique na visualização do projeto para colocar o ponto de inserção onde deseja adicionar a imagem e escolha Inserir > Imagem. Se uma imagem para a qual o arquivo de imagem não esteja dentro da pasta raiz local do site for inserida, o Dreamweaver oferecerá a opção de copiar automaticamente a imagem ao site. 10 Salve o documento. Como definir cores de fundo Nas páginas predefinidas fornecidas com o Dreamweaver, as cores de fundo das células da tabela aparecem normalmente em cinza. Para a maioria dos sites, será preciso modificar as cores para corresponder ao esquema decores de site. Para configurar as cores de fundo de uma célula da tabela: 1 Se o inspetor de propriedades estiver fechado, selecione Janela > Propriedades para abri-lo. 2 Se o inspetor de propriedades estiver recolhido (mostrando somente a barra de título), clique na seta de expansão na barra de título para expandi-lo. 3 Se o inspetor de propriedade não estiver exibindo todas as propriedades, clique na seta de expansão inferior direito do inspetor de propriedades para exibir todas as propriedades. 4 Pressione a tecla Control (Windows) ou Command (Macintosh) em uma célula para selecionála. Por exemplo: na página de amostras do site Global, há uma célula contendo a imagem do logo da empresa de locação de veículos. Pressione a tecla Control na célula contendo a imagem do logo. A janela inferior do inspetor de propriedades exibe as propriedades da célula. Se janela inferior do inspetor de Propriedade não estiver visível, clique na seta de expansão no canto inferior direito do inspetor de propriedades para exibir todas as propriedades. 106 Capítulo 5

107 5 No inspetor de propriedades, clique no botão Cor do fundo que aparece próximo ao campo Fundo inferior. O seletor de cores será exibido e o ponteiro se transforma em um conta-gotas. 6 Selecione uma cor. É possível selecionar uma cor na paleta do seletor de cores ou clique em qualquer lugar da exibição para selecionar a cor do pixel no qual você clicou. Por exemplo: clique no fundo da imagem do logotipo da empresa para fazer com que a cor de fundo da célula da tabela corresponda à cor de fundo da imagem. A cor de fundo da célula da tabela modifica-se para a cor selecionada. 7 Repita este procedimento para cada célula da tabela que desejar alterar a cor de fundo. Na página de amostras do site locação de veículos Global, modifique as cores de fundo de todas as células da tabela da barra de -navegação e da célula de cabeçalho na segunda coluna de texto (a célula que contém o texto promoção relâmpago ), para fazer com que correspondam à cor de fundo do logo Global. 8 Salve o documento. Verificar o código Reserve algum tempo para ver o que acontece com o Dreamweaver quando você adiciona conteúdo à página. Ao adicionar texto, imagens ou outro conteúdo, o Dreamweaver gera códigos HTML. O Dreamweaver permite exibir seu documento de duas maneiras: Visualização de projeto (em que o formato do documento se parece como exibido no navegador) e visualização de código (em que o código HTML básico pode ser visualizado). Também é possível utilizar a dividida para exibir tanto a visualização de código como a visualização de projeto. Tutoriais do Dreamweaver MX 107

108 Para exibir o código HTML do documento: 1 Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento. 2 Na barra de ferramentas do documento, clique no botão Visualização de código e de projeto. A janela se divide exibindo o código HTML básico. É possível editar o código no modo de visualização de código. As alterações feitas no código não aparecerão na visualização do projeto até que a visualização seja atualizada. Para que as alterações do código sejam exibidas na visualização do projeto, efetue um dos procedimentos a seguir: Clique em qualquer no modo de visualização do projeto. Clique no botão Atualizar na barra de ferramentas do documento. O Dreamweaver oferece diversos recursos avançados para ajudá-lo a exibir os códigos na visualização de código, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como editar códigos no Dreamweaver para obter mais informações. Quando estiver trabalhando com suas próprias páginas, é possível usar o modo de visualização mais adequado. Para o restante deste tutorial, consideramos que você esteja utilizando a visualização do projeto. Para exibir somente a visualização do projeto: 1 Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento. 2 Na barra de ferramentas do documento, clique no botão Visualização do projeto. 108 Capítulo 5

109 Crie uma segunda página Nesta lição, você criará uma segunda página para o site e na lição seguinte, Adicionar link de texto entre as páginas, na página 110, poderá criar links entre as páginas. Há vários modos possíveis de se criar uma segunda página. Nesta lição, você criará uma segunda página fazendo uma cópia da primeira, de modo que a segunda página terá o mesmo layout que a primeira. Observação: Se desejar criar seu próprio layout, é possível utilizar as ferramentas de edição de tabelas do Dreamweaver ou a visualização de layout. Outras opções de layout incluem molduras e camadas. Esta lição, no entanto, não abrange nenhuma dessas opções. Em sites mais complexos, a melhor maneira de assegurar que todas as páginas tenham o mesmo layout seria utilizar um modelo. Para obter mais informações sobre edição de tabelas, visualização de layout, molduras, camadas e modelos, veja Informações adicionais, na página 115. A segunda página a ser criada no site locação de veículos é a página de serviço ao cliente. Crie a página de serviço fazendo uma cópia da página principal (index.htm) e, em seguida, remova o conteúdo que deve ser omitido na página do cliente e adicione novo conteúdo. Para obter mais informações sobre como adicionar e formatar texto, veja Adicionar texto formatado, na página 101. Para criar uma cópia da página inicial (index.htm): 1 No painel Site, clique com o botão direito do mouse no nome de arquivo da página inicial, index.htm (ou qualquer outro nome desejado para o arquivo). 2 No menu de contexto, escolha Duplicar. Uma cópia do arquivo é exibida. Dica: Se a cópia não aparecer imediatamente, clique no botão Atualizar no painel Site para exibi-la. 3 Selecione o novo arquivo duplicado. Aguarde alguns segundo e clique novamente para tornar o nome do arquivo editável (a mesma técnica utilizada pelo Windows Explorer). 4 Dê ao arquivo um novo nome, como servicoaocliente.htm. Para remover algum material desnecessário da nova página: 1 Abra a nova página servicoaocliente.htm clicando duas vezes no painel Site. Verifique a barra de título da janela do documento para certificar-se de que esteja acessando o arquivo servicoaocliente.htm. A barra de título deve indicar página inicial locação de veículos Global e um nome de pasta e de arquivo. O nome de arquivo deve ser servicoaocliente.htm (ou qualquer outro nome escolhido no procedimento anterior). 2 Na página servicoaocliente.htm, clique na imagem grande (a imagem exibindo o carro na coluna de texto principal). 3 No seletor de tags, clique na tag <td>. 4 Pressione a tecla Backspace (Windows) ou Delete (Macintosh). Todas as informações da célula da tabela, incluindo a imagem e o texto, serão excluídas. 5 Salve o documento. Tutoriais do Dreamweaver MX 109

110 Para adicionar texto à nova página: 1 No painel Site, localize o arquivo infocliente.htm na pasta Propriedades. Clique duas vezes no ícone do arquivo para abri-lo. Este arquivo possui o conteúdo a ser acrescentado à página de serviço ao cliente. Se estiver criando seu próprio site, é possível adicionar seu conteúdo aqui, mas para fins desta lição, este conteúdo já vem incluso. 2 Na janela do documento custservinfo.htm, selecione Exibir > Visualização de código para exibir o código HTML. 3 Ainda na janela de documento infocliente.htm, pressione Control+A para selecionar todo o arquivo. Se você não estiver no modo de visualização de código durante a operação, pressione Control+A várias vezes para selecionar tudo. Se o ponto de inserção estiver dentro de uma célula da tabela, a opção Selecionar tudo seleciona somente aquela célula. Para simplificar, alterne para o modo de visualização de código antes de selecionar tudo. 4 Pressione Control + C para copiar todas as informações. 5 Retorne para o documento servicoaocliente.htm. Clique na coluna de texto principal agora vazia (a coluna larga à esquerda). 6 Selecione Editar > Colar HTML. O código HTML copiado do arquivo de infocliente.htm é colado neste documento (se Editar > Colar for selecionado em vez de Editar > Colar HTML, o código HTML será copiado na visualização do projeto em forma de texto. Se o código HTML for exibido na visualização do projeto, selecione Editar > Desfazer e tente novamente). A folha de estilo text.css já está anexada a esta página, assim o texto é formatado automaticamente. Adicionar link de texto entre as páginas É possível criar links em qualquer estágio do processo de criação de sites. Se você estiver seguindo as lições deste guia ordenadamente, você já terá criado suas páginas e adicionado conteúdo a elas. Portanto, nesta lição você criará links entre as páginas que criou. A seguir há dois outros métodos gerais para criar links para um site: Criar um grupo de páginas simuladas primeiramente e, em seguida, adicionar links e conteúdo às páginas. À medida que você cria uma página, os links devem ser especificados a elas. Posteriormente, crie páginas com os nomes de arquivo vinculados. Para criar um link da página de serviço ao cliente à página index.htm: 1 Alterne à página de serviço ao cliente se esta não for a página atual (se a página não estiver aberta, clique duas vezes em seu ícone no painel Site para abri-la). 2 Selecione as palavras Home Page na parte inferior da coluna de texto maior à esquerda. Se você não adicionar texto à coluna esquerda da página de serviço ao cliente quando estiver criando a página, digite as palavras Home Page naquela coluna de texto e selecione aquelas palavras. 110 Capítulo 5

111 3 Se o inspetor de propriedades não estiver aberto, selecione Janela > Propriedades. 4 Clique no ícone da pasta próximo à caixa de texto Link no inspetor de propriedades. Procure pelo arquivo index.htm na pasta raiz local do site. Criar imagens cambiáveis para links gráficos Uma imagem cambiável é uma imagem que parece se modificar quando um visitante passa o ponteiro do mouse sobre a imagem no site. Por exemplo: um botão em uma página parece acender na página quando o visitante aponta o botão do mouse sobre ela. A imagem cambiável consiste de duas imagens: a imagem exibida quando a página for carregada pela primeira vez no navegador e a imagem exibida quando o ponteiro for passado sobre a imagem original. Observação: Ao criar uma imagem cambiável, certifique-se de utilizar duas imagens com o mesmo tamanho. Para criar uma imagem cambiável: 1 Alterne para a página principal (index.htm) se esta não for a página atual (se a página não estiver aberta, clique duas vezes em seu ícone no painel Site para abri-la). 2 Na janela do documento, colocar o ponto de inserção no local onde a imagem cambiável deverá aparecer. Na página principal do site locação de veículos Global, por exemplo, clique duas vezes na célula da tabela da barra de navegação denominada Lorem e pressione a tecla backspace para excluir o texto, deixando o ponto de inserção na célula. 3 Escolha Inserir > Imagens interativas > Imagem cambiável. 4 Na caixa de diálogo Imagem cambiável, digite um nome para a imagem, como imagemprincipal na caixa de texto Nome da imagem. Com isso, a imagem assumirá um nome exclusivo e se tornará facilmente identificável no código HTML. 5 Na caixa de texto Imagem original, clique em Procurar para localizar o arquivo btnhome.jpg na pasta de imagens de seu site (dentro da pasta propriedades). Certifique-se de que o menu pop-up Com relação a seja definido para Documento e, em seguida, clique em OK ou Selecionar no Windows ou Open ou Choose (Macintosh). A caixa de texto Imagem original indica qual imagem será exibida quando a página aparecer primeiro no navegador. Tutoriais do Dreamweaver MX 111

112 6 Na caixa de texto Imagem cambiável, clique em Procurar para localizar btnhome_on.jpg na pasta de imagens do site. Certifique-se de que o menu pop-up Com relação a seja definido para Documento e, em seguida, clique em OK ou Selecionar no Windows ou Open ou Choose (Macintosh). A caixa de texto Imagem cambiável indica qual imagem será exibida quando o ponteiro estiver apontando para a imagem no navegador. 7 Certifique-se de que a opção Pré-carregar a imagem cambiável esteja selecionada, de modo que as imagens cambiáveis sejam carregadas quando a página for carregada no navegador, garantindo uma transição rápida entre as imagens quando o usuário mover o ponteiro do mouse sobre a imagem original. 8 Na caixa de texto Quando clicado, vá para a URL, clique no botão Procurar para localizar index.htm. O arquivo index.htm é o arquivo que está sendo editado, portanto, esta etapa vincula a imagem cambiável à página em que a imagem cambiável está sendo colocada. Pode parecer desnecessário criar um link para a página onde o link está ativo, mas você também utilizará o mesmo conjunto de imagens cambiáveis de navegação em outras páginas, portanto, este link permitirá que os visitantes retornem à página index.htm de outras páginas que contêm esta barra de navegação. 9 Clique em OK para fechar a caixa de diálogo. A imagem original especificada aparece no documento. 10 Salve o documento. Observação: As imagens cambiáveis não funcionarão ao apontar sobre elas com o ponteiro na janela do documento do Dreamweaver. As imagens cambiáveis funcionam somente no navegador. Para verificar o funcionamento das imagens cambiáveis, pré-visualize o documento no navegador. Para obter mais informações sobre visualização, veja Visualizar no navegador, na página 113. Para o site de locação de veículos Global, crie duas imagens cambiáveis adicionais nas outras células da tabela da barra de navegação ( Ipsum e Dolor ): uma imagem cambiável que utiliza as imagens btncustomerservice.jpg e btncustomerservice_on.jpg, vinculadas a servicoaocliente.htm, e outra imagem cambiável que utiliza as imagens btnlocations.jpg e btnlocations_on.jpg, vinculadas a localizacao.htm. Observe que o arquivo localizacao.htm ainda não foi criado, portanto, digite o nome do arquivo na caixa de texto Quando clicado, vá para a URL na caixa de diálogo Imagem cambiável. Copie a barra de navegação Após criar uma barra de navegação funcional, é possível reutilizá-la em todas as páginas. Nesta lição, as células da tabela da barra de navegação serão copiadas e coladas na página secundária. Há diversas maneiras de reutilizar o conteúdo no Dreamweaver, incluindo itens de biblioteca, modelos e trechos de códigos. Para copiar a barra de navegação em outra página: 1 No arquivo index.htm, clique na célula da tabela que contém a imagem cambiável home. 2 No seletor de tags, clique na tag <tr> mais à direita. A linha da tabela que contém as três imagens cambiáveis da barra de navegação será selecionada. 112 Capítulo 5

113 3 Selecione Editar > Copiar. 4 Alternar para o arquivo customerservice.htm. 5 Clique na célula da tabela da barra de navegação Lorem. 6 No seletor de tags, clique na tag <tr> mais à direita. 7 Selecione Editar > Colar. As imagens cambiáveis da barra de navegação são coladas no lugar das células da tabela existentes. 8 Salve o documento. Visualizar no navegador A visualização do projeto dá uma idéia geral de como a página será exibida no navegador, mas a única maneira de verificar a aparência final da página é visualizando-a no navegador. Cada versão de navegador tem suas próprias peculiaridades. Com o Dreamweaver, os códigos HTML são compatíveis em quase todos os navegadores, mas às vezes certas diferenças não podem ser evitadas (é por isso que o Dreamweaver não exibe uma visualização diretamente, pois o Dreamweaver não pode simular todos os comportamentos diferentes de todos os navegadores). A visualização no navegador exibe o formato das páginas após sua publicação. Para visualizar as páginas: 1 Caso index.htm não seja o documento atual, torná-lo o documento atual (abrir o documento se estiver fechado). 2 Pressione a tecla F12. O navegador primário será iniciado caso não ainda esteja funcionando. O navegador exibe a página de índice. Observação: O Dreamweaver deve detectar automaticamente o navegador primário e utilizá-lo para visualização. Se a visualização não aparecer ou se não aparecer no navegador conforme esperado, retorne para o Dreamweaver (se necessário) e selecione Arquivo > Visualizar no navegador > Editar a lista de navegadores. A caixa de diálogo Preferências visualizar no navegador é exibida e adicione o navegador correto à lista. Para obter mais informações, clique no botão Ajuda da caixa de diálogo Preferências. 3 Mova o ponteiro para apontar para as imagens cambiáveis para exibir a mudança das imagens. Clique nos links para verificar se funcionam. Configurar um site remoto e publicar Você acabou de criar um Website simples, mas funcional. O próximo passo é publicá-lo efetuando o upload dos arquivos a um servidor da Web remoto. Antes de prosseguir, é preciso obter acesso a um servidor da Web remoto (como o servidor do provedor Internet ou um servidor proprietário do cliente para o qual você está trabalhando, servidor intranet em sua empresa ou servidor IIS ou PWS em um sistema Windows). Caso você ainda tenha acesso a um servidor, contate seu provedor de serviços Internet, cliente ou administrador do sistema. O procedimento a seguir dará mais resultado se a pasta raiz remota estiver vazia. Se o site remoto já contiver arquivos, crie uma pasta vazia em seu site remoto (no servidor) e utilize esta pasta vazia como pasta raiz remota. Tutoriais do Dreamweaver MX 113

114 O procedimento a seguir pressupõe que um site local já tenha sido configurado. Para obter mais informações, veja Configurar um site local, na página 88. Para conectar-se a um site remoto: 1 Selecione Site > Editar os sites. 2 Selecione um site (como locação de veículos Global) e clique em Editar. 3 Clique na guia Básico no topo da caixa de diálogo. 4 Os primeiros passos da guia Básico são preenchidos ao configurar o site local, portanto clique em Avançar algumas vezes até que o passo Compartilhar arquivos seja realçado na parte superior do assistente. 5 No menu pop-up Como se dá a sua conexão com o servidor remoto?, selecione um método para conectar-se ao site remoto. O método mais comum para conexão a um servidor na Internet é o FTP e o método mais comum para conexão a um servidor via intranet é por meio de Local/Rede. Se você não estiver seguro de qual método escolher, pergunte ao administrador de sistema do servidor. 6 Se escolher FTP, digite as opções a seguir: Digite o nome do host do servidor (como ftp.macromedia.com). Na caixa de texto que solicita a pasta contendo seus arquivos, digite o caminho no servidor da pasta raiz do ftp para a pasta raiz do site remoto. Caso não tenha certeza, veja o administrador do sistema. Na maioria dos casos, esta caixa de texto deve ser deixada em branco. Digite o nome de usuário e senha nas caixas de texto apropriadas e clique em Testar a conexão. Se a conexão falhar, veja o administrador do sistema. 7 Se Local/Rede for selecionado, clique no ícone da pasta próxima à caixa de texto e localize a pasta raiz do site remoto. 8 Clique em Avançar. 114 Capítulo 5

115 9 Não ative a devolução/retirada de arquivos para este site. Se você ou seus colegas de trabalho estiverem trabalhando juntos em um site de nível profissional, usar os recursos de devolução-retirada de arquivos ajudará a evitar que sejam sobregravados por outros arquivos. Para este site, entretanto, este recurso não é necessário. 10 Clique em Avançar. 11 Clique em Concluir para completar a configuração do site remoto. 12 Clique em Concluir novamente para concluir a edição do site. Para efetuar o upload de suas páginas ao site remoto: 1 No painel Site, selecione a pasta raiz local do site. 2 Clique no botão Colocar os arquivos. Todos os arquivos do site são carregados ao site remoto. 3 Abra o site remoto em um navegador para certificar-se de que os arquivos foram enviados corretamente. Informações adicionais O Dreamweaver é um aplicativo com dezenas de recursos poderosos. Este tutorial descreve apenas os recursos básicos. Para obter informações mais detalhadas sobre os tópicos abordados neste tutorial, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Este tutorial está focado no uso da visualização do projeto para criar um site estático. Para obter mais informações sobre visualização de código e codificação manual nodreamweaver, consulte Tutorial 2 do Dreamweaver: Editar códigos, na página 116. Para obter mais informações sobre os aspectos básicos da criação de um aplicativo para a Web ativado por meio de banco de dados, consulte Tutorial 3 do Dreamweaver: Criar um aplicativo para a Web, na página 126. Tutoriais do Dreamweaver MX 115

116 Tutorial 2 do Dreamweaver: Editar códigos Embora muitos desenvolvedores de Websites se beneficiem ferramentas visuais oferecidas pelo Macromedia Dreamweaver MX, um grande número de desenvolvedores preferem utilizar as ferramentas de codificação para criar suas páginas. O Dreamweaver MX possui muitos recursos avançados que oferecem ao usuário o ambiente de codificação profissional de que necessita. Este tutorial fornece uma visão geral do novo ambiente de codificação profissional do Dreamweaver MX. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Como editar códigos no Dreamweaver. Alternar para a área de trabalho de codificação Se você não fizer isto durante instalação, pode fazer com que a área de trabalho se pareça com os ambientes de codificação populares como o Macromedia HomeSite e Macromedia ColdFusion Studio. Observação: Os usuários do Macintosh não podem modificar a área de trabalho. Para utilizar a nova área de trabalho de codificação: 1 Selecione Editar > Preferência e selecione Geral na lista de categorias à esquerda. A categoria Geral será exibida. 116 Capítulo 5

117 2 Clique no botão Alterar a área e trabalho. A caixa de diálogo Configuração da área de trabalho é exibida. 3 Selecione a opção área de trabalho do Dreamweaver MX e a opção Estilo do HomeSite/Coder. 4 Clique em OK duas vezes para fechar a caixa de diálogo Preferências. 5 Feche o Dreamweaver e reinicie o programa. Copiar uma pasta para o seu site Antes de iniciar a lição, é necessário configurar um site e copiar uma pasta para ele. O navegador de arquivos integrado no painel Site permite visualizar o disco e a rede local. Isto será útil quando estiver trabalhando com arquivos do site que não estão visíveis no painel Site. Para copiar páginas a seu site: 1 Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2 No painel Site, do menu pop-up Site, selecione o nome do site definido no primeiro tutorial deste capítulo. Se você ainda não definiu um site, veja Configurar um site local, na página 88. É preciso definir um site antes de continuar. Ao selecionar o nome do site no menu pop-up, o Dreamweaver exibe os arquivos do site. 3 Expandir a área de trabalho do Windows para visualizar as unidades disponíveis. 4 Expandir as pastas conforme necessário para chegar à pasta do aplicativo Dreamweaver e expandir a pasta Samples. 5 Na pasta Samples, selecione a pasta GettingStarted, selecione a pasta Code e pressione Control+C para copiá-la. 6 Retorne ao início do painel Site e selecione a pasta do site. 7 Pressione Control+V no Windows para colar uma cópia da pasta em seu site. Tutoriais do Dreamweaver MX 117

118 Exibir as páginas terminadas Antes de começar, é possível visualizar as páginas terminadas para saber como elas aparecerão no navegador. Obviamente, as páginas podem variar. Para exibir as páginas terminadas: 1 Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2 Expandir a área de trabalho do Windows para visualizar as unidades disponíveis. 3 Expandir as pastas conforme necessário para chegar à pasta do aplicativo Dreamweaver e expandir a pasta Samples. 4 Na pasta Samples, expanda a pasta GettingStarted e, em seguida, expanda a pasta FinalSite. 5 Na pasta FinalSite, clique duas vezes em index.htm para abri-lo e clique duas vezes em location_comp.htm. O Dreamweaver exibe as páginas na janela do documento. 6 Quando tiver terminado, feche as páginas. Como abrir páginas múltiplas Use o painel Site para abrir as páginas necessárias para esta lição. Para abrir as páginas: 1 Selecione Janela > Site para abrir o painel Site caso ainda não esteja aberto. 2 No seu site, expanda a pasta Code. 3 Clique duas vezes em index.htm para abri-lo e clique duas vezes em location_start.htm. Estes são os dois arquivos que você precisará para esta lição. 4 Na janela do docu, clique no botão Mostrar a visualização de código na barra de ferramentas ou selecione Visualizar > Código para alternar para a visualização de código e exibir o código de origem do arquivo. 5 Para alternar entre as páginas rapidamente, pressione Control+Tab ou clique na guia na parte inferior da página (apenas no Windows). Observação: É preciso maximizar a página para ver as guias. 118 Capítulo 5

119 Adicione uma imagem arrastando-a Nesta lição você adicionará um botão à página inicial para a página Locations, similar aos botões inicial e atendimento ao cliente. É possível digitar o código diretamente na página, clicar no ícone imagem na barra Inserir ou utilizar o editor de tags imagem (IMG) (selecione a imagem, clique com o botão direito do mouse e selecione Editar a tag). Outra opção é arrastar a imagem da pasta. Para adicionar uma imagem arrastando-a: 1 Abra index.htm na visualização de código, caso ainda não esteja aberto. 2 No painel de grupo Arquivos, abra o painel Propriedades (Windows > Propriedades). 3 Selecione o arquivo de imagem btnlocations.jpg. 4 Arraste o arquivo de imagem ao código da página e solte-o no código na terceira célula da primeira tabela. Dica: Localize o código para os botões página inicial e atendimento ao cliente. Solte a imagem Locations antes da tag de fechamento /td para a célula da tabela após as duas células desses botões. O Dreamweaver insere o código no ponto de inserção para criar a imagem. 5 Selecione Arquivo > Salvar. Adicionar um link com o Seletor de tags Agora você deve criar um link do botão adicionado à página Locais. Além de digitar códigos manualmente para o link e utilizar a barra Inserir para adicionar o link, é possível utilizar o Seletor de tags. Para escrever códigos com a ajuda do Seletor de tags: 1 Abra index.htm na visualização de código, caso ainda não esteja aberto. 2 No código da primeira tabela, localize e selecione o código para o botão Local inserido na última seção. Observação: Realce toda a tag <img>. 3 Clique com o botão direito do mouse (Windows) ou Control clique (Macintosh) no texto selecionado e selecione Inserir tag no menu pop-up. O seletor de tags é exibido. 4 Selecione Tags HTML, Elementos de página, Geral e, em seguida, selecione A no painel à direita. Observação: Você também pode escolher Tags HTML e selecionar a tag A no painel à direita, sem primeiro selecionar Elementos de página, Geral. Tutoriais do Dreamweaver MX 119

120 5 Clique em Inserir. O editor de tags (<a>) é exibido para a tag âncora. 6 Na caixa de texto HREF, digite location_start.htm ou clique no botão Procurar para localizar o arquivo. Observação: Se desejar criar um link uma página da Web, digite o URL da página. 7 Clique em OK para fechar o editor de tags. 8 Clique em Fechar para fechar o Seletor de tags. O Dreamweaver insere o código em sua página criar o link. 9 Na janela do documento, selecione Arquivo > Salvar. 120 Capítulo 5

121 Editar uma tag Em seguida, você utilizará o Inspetor de tags para localizar uma tag específica na página Locais para efetuar modificações rapidamente. Para editar uma tag com o Inspetor de tags: 1 Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta. 2 Efetue um dos procedimentos a seguir para abrir o Inspetor de tags, caso este ainda não esteja aberto: Selecione Janela > Inspetor de tags. No grupo de painéis Código, clique na guia Inspetor de tags. O Inspetor de tags fornece uma visão estruturada de todas as tags em sua página. Também exibe os atributos de cada tag. 3 No modo de visualização do código da janela do documento, localize o texto de cabeçalho para Rental Locations 4 Selecione a entidade do espaço não separável ( ) entre as tags de parágrafo que seguem o cabeçalho: <p><font SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p> <p> </p> 5 Selecione Inserir > Tabela e clique em OK na caixa de diálogo Inserir tabela par aceitar os valores padrão. O Dreamweaver insere códigos de tabela. Tutoriais do Dreamweaver MX 121

122 6 Clique no botão Atualizar da barra de ferramentas. O painel do inspetor de tags atualiza para que o foco seja a tag de tabela que você inseriu. Uma lista de atributos aparece abaixo da tag. 7 Na janela do documento, clique em algumas tags diferentes para ver como o Inspetor de tags atualiza as tags e os atributos exibidos, em seguida clique na tag da tabela novamente para que os atributos apareçam no inspetor de tags. 8 No painel de Inspetor de tags, clique na caixa de texto vazia ao lado do atributo align. Uma seta aparece para o menu pop-up. 9 Clique na seta do menu pop-up e selecione centralizado. O Dreamweaver modifica o código na janela do documento. 10 Clique no botão Mostrar a visualização do projeto na barra de ferramentas ou selecione Visualizar > Desenho para ver a tabela. 11 Na janela do documento, selecione Arquivo > Salvar. Localizar informações sobre uma tag Se você precisar de ajuda com os atributos de uma tag e valores de atributo, procure por informações de referência no Dreamweaver. Para localizar informações sobre uma tag 1 Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta. 2 Na janela do documento, selecione o texto bgcolor na tag body. 3 Clique com o botão direito do mouse no texto selecionado e selecione Referência no menu pop-up. O painel Referência se abre e exibe informações sobre o atributo bgcolor. Observação: Também é possível selecionar Janela > Referência para acessar o painel de referência. Este painel é integrado no ambiente de desenvolvimento no painel de grupo Código. 122 Capítulo 5

123 4 Para obter mais informações sobre um atributo de tag específico, selecione o atributo no menu pop-up. Adicionar uma imagem com dicas de códigos Nesta lição você aprenderá a adicionar um logotipo à página Locations. Para adicionar um código à página manualmente, apenas clique na janela do documento e comece a digitar. Também é possível utilizar o recurso Dicas de código do Dreamweaver para agilizar o trabalho. Para escrever códigos com a ajuda de Dicas de código: 1 Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta. 2 Localize o código da linha da tabela que contém o texto The International Car Rental Specialists. Selecione a entidade do espaço não-separável ( ) no código para a célula que vem antes do texto: <td rowspan="2" bgcolor="#424973"> </td> 3 Digite o colchete inicial (<) da tag da imagem. Uma lista de tags aparece no ponto de inserção. Observação: É possível selecionar a extensão do atraso ao selecionar Editar > Preferências ou Dreamweaver > Preferências (Mac OS X) e selecionar Dicas de código na lista de categorias à esquerda do painel. É possível abrir a opção Dicas de código pressionando a barra de espaço ou fechá-la a qualquer momento pressionando a tecla Esc. 4 Selecione a tag img na lista e pressione a tecla Enter para inserir a tag. Dica: Para localizar uma tag rapidamente, digite a primeira letra da tag. 5 Pressione a barra de espaço para exibir uma lista de atributos para a tag. 6 Digite src e, em seguida, pressione Enter (Windows) ou Return (Macintosh). O botão Procurar é exibido abaixo do código que você inseriu. Tutoriais do Dreamweaver MX 123

124 7 Selecione o botão do navegador para navegar para o arquivo de imagem ou digite o caminho do arquivo de imagem, Assets/images/logo.jpg. 8 Pressione a barra de espaços, selecione o atributo alt e, em seguida, pressione Enter (Windows) ou Return (Macintosh). 9 Digite Logo, em seguida mova o cursor para a direita das aspas que aparecem após a palavra Logo. 10 Pressione a barra de espaços, selecione o atributo align e, em seguida, pressione Enter (Windows) ou Return (Macintosh). Uma lista de valores conhecidos para o atributo align é exibida. 11 Selecione top na lista e pressione a tecla Enter. 12 Digite um colchete final (>) para completar a tag. 13 Na janela do documento, selecione Arquivo > Salvar. Para adicionar um atributo a uma tag existente, coloque o ponto de inserção antes do colchete final (>) e pressione a barra de espaço. Aparecerá uma lista de atributos. Adicione o atributo e especifique seu valor, se houver. Verifique as alterações feitas Após efetuar qualquer alteração em seu código, é possível visualizar imediatamente a alteração efetuada. Para exibir uma representação visual de seu código, siga um dos procedimentos abaixo: Clique no botão Mostrar a visualização do projeto na barra de ferramentas ou selecione Visualizar > Desenho. Pressione F12 para exibir a página no navegador. Para fechar o navegador e retornar ao código, pressione Alt-F4. Adicionar um link com a barra Inserir Você adicionará em seguida um link à imagem do logo, de modo que, quando o usuário clicar nele, a página inicial se abrirá. Uma maneira de criar o link é simplesmente colocar uma tag âncora (<a>) ao redor da tag da imagem no código e configurar os atributos da tag âncora, com ou sem a ajuda de Dicas de código. Outra maneira é adicionar o link com a barra Inserir. Para escrever códigos com a ajuda da barra Inserir: 1 Abra a página location_start.htm no modo de visualização de código, caso ainda não esteja aberta. 2 Selecione o código da imagem logo.jpg inserida. Observação: Realce toda a tag <img>. 124 Capítulo 5

125 3 Na categoria Comuns da barra Inserir, clique no ícone Hyperlink. A caixa de diálogo Hyperlink se abre com a tag de imagem inserida. 4 Na caixa de texto Link,digite index.htm ou clique no ícone da pasta para localizar a página. Observação: Para criar um link uma página da Web, digite o URL da página. 5 Clique em OK. O Dreamweaver insere o código em sua página para criar o link ao redor da imagem. 6 Selecione Arquivo > Salvar. Imprimir o código É possível imprimir o código para editá-lo, arquivá-lo distribui-lo. Para imprimir o código: 1 Abra uma página em Visualização de código. 2 Selecione Arquivo > Imprimir o código. Dica: Para imprimir com números de linha, selecione Exibir > Opções de visualização de código > Números de linha antes de imprimir. Informações adicionais Para obter informações sobre os recursos de codificação manual no Dreamweaver e como acessar os códigos enquanto estiver trabalhando no ambiente de design visual do Dreamweaver, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Tutoriais do Dreamweaver MX 125

126 Tutorial 3 do Dreamweaver: Criar um aplicativo para a Web Este tutorial mostra como utilizar o Macromedia Dreamweaver MX para desenvolver rapidamente aplicativos para a Web dinâmicos operados por banco de dados. Um aspecto importante no desenvolvimento de aplicativos para a Web dinâmicos é a capacidade de apresentar informações armazenadas em banco de dados em formato da Web. Ao concluir esta lição, você saberá como incorporar informações de banco de dados em um Website. Você desenvolverá aplicativos para a Web para o site locação de veículos Global por meio um banco de dados existente que contém três tabelas de dados: locais, comentários e regiões. Você também utilizará o Dreamweaver para criar uma consulta SQL simples para extrair dados do banco de dados. Nesta lição, você construirá as seguintes páginas dinâmicas: Uma página de inserção que permite ao visitante do site enviar comentários para a empresa Uma página de detalhes que lista os comentários do cliente e informações de contato Antes de começar Para praticar este tutorial, primeiro é necessário concluir as tarefas listadas na próxima seção, assim você poderá trabalhar com as amostras de páginas do ColdFusion incluídas no Dreamweaver MX. As listas de verificação de configuração guiam-no através da instalação e configuração de um servidor da Web e do ColdFusion MX Server Developer Edition incluído no CD-ROM do Macromedia Studio MX (apenas na versão para Windows). Você também pode fazer o download do Developer Edition em Estes procedimentos de configuração descrevem como configurar o aplicativo de amostra se você estiver utilizando o ColdFusion com Microsoft Internet Information Server (IIS) ou Personal Web Server (PWS). Para obter mais informações sobre estes servidores da Web, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como instalar um servidor da Web no Windows. Se estiver utilizando o ColdFusion MX com um servidor da Web diferente, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Configuração de um aplicativo para a Web. Os exemplos de tela neste tutorial mostram as caixas de diálogo do Macromedia ColdFusion. Entretanto, você pode concluir as lições deste capítulo em todos os outros modelos de servidores suportados pelo Dreamweaver MX: PHP, ASP.NET, ASP e JSP. Para obter informações sobre como trabalhar com estes modelos, veja a Ajuda do Dreamweaver. A configuração de um aplicativo para a Web é um processo de três etapas. Primeiro, configure o seu sistema. Em seguida, defina um site no Dreamweaver. Em terceiro, conecte o aplicativo a seu banco de dados. Este guia de instalação segue o processo de três etapas. 126 Capítulo 5

127 Listas de verificação de configuração para desenvolvedores ColdFusion Para configurar um aplicativo para a Web, é preciso configurar seu sistema, definir um site do Dreamweaver e conectar-se a um banco de dados. Esta seção fornece as listas de verificação para cada tarefa. Os procedimentos estão descritos no restante do capítulo. Configurar o sistema 1 Certifique-se de ter um servidor da Web. 2 Instale o Developer Edition do ColdFusion MX Server. Para obter requisitos e instruções de instalação, veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página Crie uma pasta raiz. Como definir um site do Dreamweaver: 1 Copie os arquivos de amostra a uma pasta em seu disco rígido. 2 Defina a pasta como pasta local do Dreamweaver. 3 Estabeleça a pasta do servidor da Web como pasta remota do Dreamweaver. 4 Especifique uma pasta para processar as páginas dinâmicas. 5 Efetue o upload dos arquivos de amostra ao servidor da Web remoto. Conecte-se ao banco de dados: 1 Se você tiver uma configuração do servidor remoto, copie o banco de dados de amostra ao computador remoto. 2 Crie uma fonte de dados do ColdFusion no ColdFusion Administrator. 3 Visualize a conexão no Dreamweaver. Tutoriais do Dreamweaver MX 127

128 Configurar o sistema Esta seção fornece instruções para duas configurações de sistema comuns: uma utilizando Microsoft IIS ou PWS instalado no disco rígido e uma utilizando IIS ou PWS instalado em um computador Windows remoto. Se não desejar utilizar essas configurações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Configuração de um aplicativo para a Web. Você também pode usar o servidor da Web independente instalado no Developer Edition do ColdFusion MX. Veja Instalação do Macromedia ColdFusion MX Server no Windows, na página 392. A ilustração abaixo exibe as duas configurações descritas nesta seção: Configuração local (apenas para os usuários do Windows) Configuração do servidor remoto (usuários do Macintosh ou Windows) COMPUTADOR COM WINDOWS Dreamweaver MX COMPUTADOR COM MACINTOSH ou WINDOWS Dreamweaver MX PWS ou IIS servidor de aplicativos ColdFusion MX Raiz do site da Web c:\inetpub\wwwroot\ Acesso à rede ou ao ftp SERVIDOR DO WINDOWS PWS ou IIS servidor de aplicativos ColdFusion MX Raiz do site da Web c:\inetpub\wwwroot\ 1 Verifique se há um servidor da Web (veja Verificar um servidor da Web, na página 129). 2 Instale o servidor de aplicativos ColdFusion (veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página 391). 3 Crie uma pasta raiz (veja Criar uma pasta-raiz, na página 129). Observação: A instalação do servidor da Web e do servidor de aplicativos é uma tarefa única. 128 Capítulo 5

129 Verificar um servidor da Web Para desenvolver e testar páginas para a Web dinâmicas, é necessário um servidor da Web ativo. Um servidor da Web é um software que fornece páginas da Web em resposta a pedidos originados de navegadores. Verifique se o Microsoft IIS ou PWS estão instalados e funcionando em seu disco rígido ou em um computador Windows remoto (usuários do Macintosh devem instalar o Microsoft IIS ou PWS em um computador Windows remoto). Um modo rápido de saber se o PWS ou IIS está instalado no sistema é verificar a estrutura de pastas. Há uma pasta c:\inetpub ou d:\inetpub? O PWS e o IIS criam esta pasta durante a instalação. Se o PWS ou o IIS não estiver instalado no sistema, instale-o agora. Para obter instruções, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como instalar um servidor da Web no Windows. Instalar o ColdFusion MX Server Para processar páginas da Web dinâmicas, é necessário um servidor de aplicativos. Um servidor de aplicativos é um software que auxilia o servidor da Web a processar páginas na Web contendo scripts ou tags centralizados no servidor. Quando a página é solicitada no servidor, o servidor da Web envia a página ao servidor de aplicativos para processamento antes de enviá-la ao navegador. Para obter os requisitos do sistema e as instruções de instalação, veja Capítulo 16, Instalação do Macromedia ColdFusion MX Server Developer Edition, na página 391. Após concluir a instalação, siga as instruções em Confirmação da instalação e administração do ColdFusion MX Server, na página 393 para certificar-se de que o ColdFusion MX esteja instalado e em execução. A próxima etapa é criar uma pasta-raiz para os aplicativos Web. Criar uma pasta-raiz Após instalar o software do servidor, crie uma pasta raiz para o aplicativo no sistema com Microsoft PWS ou IIS ativo e verifique se a pasta tem as permissões necessárias. 1 Crie uma pasta chamada MySampleApp no sistema com PWS ou IIS ativo. Recomenda-se criar a pasta no diretório C:\Inetpub\wwwroot\. Por padrão, o servidor da Web PWS ou IIS está configurado na pasta Inetpub\wwwroot. O servidor da Web servirá qualquer página nesta pasta ou em qualquer subpasta em resposta a um pedido de HTTP de um navegador. Tutoriais do Dreamweaver MX 129

130 2 Certifique-se de que as permissões de leitura e script estejam ativas na pasta. Se você estiver utilizando o PWS, inicie o Personal Web Manager clicando duas vezes no ícone do servidor da Web na barra de ferramentas do sistema (o ícone representa uma mão segurando uma página na Web). No Personal Web Manager, clique no ícone Avançado. A caixa de diálogo Opções avançadas é exibida. Selecione o diretório Início e clique em Editar as propriedades. A caixa de diálogo Editar o diretório é exibida. Certifique-se de que as opções Leitura e Scripts estejam selecionadas. Por razões de segurança, não selecione a opção Executar. Se você estiver utilizando o IIS, inicie a ferramenta administrativa do IIS (no Windows XP, selecione Iniciar > Painel de controle > Manutenção de desempenho > Ferramentas administrativas > Internet Information Services). Em Websites > Website padrão, clique com o botão direito do mouse na pasta MySampleSite e selecione Propriedades no menu pop-up. Na caixa de texto Permissões de execução, certifique-se de que a opção Scripts esteja selecionada. Por razões de segurança, não selecione a opção Scripts e executáveis. O servidor da Web está configurado para servir páginas para a Web na pasta raiz em resposta a pedidos de HTTP de navegadores na Web. Após configurar seu sistema, você deve definir um site do Dreamweaver. Como definir um site do Dreamweaver Após configurar o sistema, copie os arquivos de amostra a uma pasta local e defina um site do Dreamweaver para gerenciar os arquivos. 1 Copie os arquivos de amostra para uma pasta em seu disco rígido (veja Copiar os arquivos de amostra, na página 130). 2 Estabeleça a pasta como pasta local do Dreamweaver (veja Definir uma pasta local, na página 131). 3 Defina a pasta raiz no servidor da Web como pasta remota do Dreamweaver (veja Definir uma pasta remota, na página 131). 4 Especifique uma pasta para processar as páginas dinâmicas (veja Especificar o local onde as páginas dinâmicas podem ser processadas, na página 132). 5 Efetue o upload dos arquivos de amostra ao servidor da Web (veja Efetuar o upload dos arquivos de amostra, na página 133). Copiar os arquivos de amostra Caso ainda não tenha feito, copie os arquivos de amostra da pasta de aplicativo do Dreamweaver para uma pasta em seu disco rígido. 1 Crie uma pasta nova chamada Sites em seu disco rígido. Por exemplo: crie C:\Sites no diretório (Windows) ou Hard Drive:Documents:Sites (Macintosh). 2 Localize a pasta GettingStarted na pasta de aplicativos do Dreamweaver no disco rígido. O caminho para a pasta é o seguinte: \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copie o conteúdo da pasta GettingStarted para a pasta Sites. Após copiar a pasta da pasta GettingStarted, defina a pasta como uma pasta local no Dreamweaver. 130 Capítulo 5

131 Definir uma pasta local Após copiar a pasta da pasta GettingStarted, defina a pasta contendo os arquivos de amostra do ColdFusion como pasta local no Dreamweaver. 1 No Dreamweaver, selecione Site > Novo site. A caixa de diálogo Definição do site é exibida. 2 Ao aparecer o assistente, clique em Avançado. 3 Na caixa de texto Nome do site, digite GlobalCar - ColdFusion. O nome identifica o site no Dreamweaver. 4 Na caixa de texto Pasta raiz local, especifique a pasta na pasta GettingStarted que contém os arquivos de amostra do ColdFusion. Clique no ícone da pasta próximo à caixa de texto para localizar e selecionar a pasta. No Windows, a pasta deve ser como a do exemplo: C:\Sites\GettingStarted\Develop\coldfusion No Macintosh, a pasta deve ser como a do exemplo: Hard Drive:Documents:Sites:GettingStarted:Develop:coldfusion Mantenha aberta a caixa de diálogo Definição do site. Em seguida, é preciso definir a pasta do servidor da Web como pasta remota do Dreamweaver. Definir uma pasta remota Após definir uma pasta local, defina uma pasta de servidor da Web como pasta Dreamweaver remota. 1 Na caixa de diálogo Definição do site, selecione Informações remotas na lista Categoria. A tela Informações remotas é exibida. 2 Na caixa de texto Acesso, escolha o modo como deseja mover seus arquivos de e para o servidor: diretamente (opção de Local/Rede) ou FTP. 3 Digite o caminho ou configurações de FTP para a pasta do servidor da Web criado na seção Criar uma pasta-raiz, na página 129. A pasta pode estar em seu disco rígido ou em um computador remoto. Mesmo se a pasta tiver sido criada em seu disco rígido, a pasta ainda é a pasta remota válida. A seguir um exemplo de uma página se o acesso Local/Rede for selecionado: Pasta remota: c:\inetpub\wwwroot\mysampleapp Para obter mais informações sobre FTP, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Configuração de opções de informações remotas para acesso por FTP. Mantenha aberta a caixa de diálogo Definição do site. Em seguida, é necessário definir uma pasta para processar páginas dinâmicas. Tutoriais do Dreamweaver MX 131

132 Especificar o local onde as páginas dinâmicas podem ser processadas Após definir a pasta remota no Dreamweaver, especifique uma pasta para processamento das páginas dinâmicas conforme descrito nesta seção. O Dreamweaver utiliza esta pasta para exibir páginas dinâmicas e conectar-se a bancos de dados durante o processo. 1 Na caixa de diálogo Avançado - Definição do site, clique em Servidor de teste na lista Categoria. A tela Servidor de teste é exibida. O Dreamweaver requer os serviços de um servidor de teste para gerar e exibir conteúdo dinâmico enquanto você trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, um servidor temporário (staging server) ou um servidor de produção. Contanto que seja capaz de processar páginas em ColdFusion, a escolha não importa. Neste caso, é possível utilizar as mesmas configurações da categoria Informações remotas (veja Definir uma pasta remota, na página 131), pois indicam um servidor capaz de processar páginas em ColdFusion. 2 Selecione ColdFusion como tecnologia de servidor. 3 Na caixa de texto Acesso, escolha o método (Local/Rede ou FTP) especificado para acesso à pasta remota. O Dreamweaver insere as configurações especificadas na categoria Informações remotas. Deixe as configurações inalteradas. 4 Na caixa de texto Prefixo da URL, digite a URL raiz que seria digitada no navegador para solicitar um aplicativo para a Web. Para exibir os live data nas páginas enquanto você trabalha, o Dreamweaver cria um arquivo temporário, copia os dados para a pasta raiz do Website e tenta solicitá-los através do prefixo da URL. O Dreamweaver tentará localizar o prefixo da URL com base nas informações fornecidas na caixa de diálogo Definição do site. Por exemplo: se a pasta especificada na caixa de texto Pasta remota for c:\inetpub\wwwroot\mysampleapp, então o prefixo da URL deve o seguinte: Dica: O prefixo da URL nunca deve especificar uma página individual no site. No entanto, o prefixo da URL sugerido pode estar incorreto. Corrija ou digite um novo prefixo URL se a sugestão do Dreamweaver estiver incorreta. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Sobre o prefixo de URL. 5 Clique em OK e, em seguida, em Concluída. Após especificar uma pasta para processar páginas dinâmicas, faça o upload dos arquivos de amostra para o servidor da Web. 132 Capítulo 5

133 Efetuar o upload dos arquivos de amostra Após especificar uma pasta para processar as páginas dinâmicas, faça o upload dos arquivos de amostra ao servidor da Web conforme descrito nesta seção. Você deve carregar os arquivos mesmo se o servidor da Web estiver ativo em seu computador local. Se você não carregar os arquivos, é possível que recursos Live Date e Visualizar no navegador não funcionem corretamente com as páginas dinâmicas. Por exemplo: links de imagens podem ser rompidos no modo Live Data, pois os arquivos de imagem ainda não se encontram no servidor. Da mesma forma, ocorrerá um erro ao clicar em um link a uma página de detalhes enquanto estiver visualizando uma página-mestra no navegador se a página de detalhes estiver ausente no servidor. 1 No painel Site (Janela > Site), selecione a pasta raiz na janela Arquivos locais. A pasta raiz deve ser a primeira pasta da lista. 2 Clique na seta azul para cima na barra de ferramentas. O Dreamweaver copiará todos os arquivos à pasta do servidor da Web definida em Definir uma pasta remota, na página 131. O site Dreamweaver foi definido. O próximo passo é conectar-se ao banco de dados de amostra instalado no Dreamweaver. Conectar-se a um banco de dados de amostra Durante a instalação, o Dreamweaver copia um banco de dados de amostra do Microsoft Access para o disco rígido. Esta seção descreve como criar uma conexão ao banco de dados de amostra. Observação: Se desejar conectar-se a outro banco de dados, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Conexões de bancos de dados para desenvolvedores ColdFusion. 1 Se você tiver uma configuração do servidor remoto, copie o banco de dados de amostra ao computador remoto (veja Configurar o banco de dados (configuração do servidor remoto), na página 133). 2 Crie uma fonte de dados do ColdFusion no ColdFusion Administrator (veja Criar uma fonte de dados ColdFusion, na página 134). 3 Visualize a conexão no Dreamweaver (veja Conectar-se a um banco de dados de amostra, na página 134). Configurar o banco de dados (configuração do servidor remoto) Esta seção será aplicável somente se houver uma configuração de servidor remoto, ou seja, se o servidor da Web estiver ativo em um computador remoto. Se o servidor da Web estiver ativo no mesmo computador que o Dreamweaver, ignore e vá até Criar uma fonte de dados ColdFusion, na página 134. Antes de tentar conectar-se ao banco de dados de amostra, copie o banco de dados no disco rígido do computador remoto. Os arquivos de banco de dados, global.mdb, estão localizados na pasta a seguir no disco rígido local: \Macromedia\Dreamweaver MX\Samples\Database\global.mdb É possível colocar o arquivo em qualquer pasta no computador remoto ou criar uma nova pasta nova para ele. Após colocar o banco de dados em seu lugar, crie uma fonte de dados do ColdFusion no ColdFusion Administrator. Tutoriais do Dreamweaver MX 133

134 Criar uma fonte de dados ColdFusion Crie uma fonte de dados ColdFusion chamada connglobal no ColdFusion Administrator indicando o arquivo do banco de dados de amostra. 1 No Dreamweaver, abra uma página ColdFusion. 2 No painel Bancos de dados (Janela > Bancos de dados) clique no ícone Modificar fontes de dados (segundo item à direita da barra de ferramentas do painel). O ColdFusion Administrator abre-se no navegador. 3 Acesse o ColdFusion Administrator e crie uma fonte de dados chamada connglobal indicando o arquivo do banco de dados global.mdb. Se o ColdFusion estiver ativo em seu computador local, crie uma fonte de dados indicando o arquivo do banco de dados na pasta a seguir: c:\program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb Se o ColdFusion estiver ativo em seu computador remoto, crie uma fonte de dados indicando o arquivo do banco de dados colocado no computador remoto, de acordo com as instruções em Configurar o banco de dados (configuração do servidor remoto), na página 133. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Como utilizar o ColdFusion. Após criar uma fonte de dados no ColdFusion, ela pode ser utilizada para conexão ao banco de dados do Dreamweaver. Conectar-se a um banco de dados de amostra Após criar uma fonte de dados no ColdFusion, ela pode ser usada para conexão ao banco de dados do Dreamweaver. Abra qualquer página do ColdFusion no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados). As fontes de dados do ColdFusion são exibidas no painel. Se a fonte de dados criada não aparecer no painel, proceda do seguinte modo: Verifique-novamente os parâmetros de conexão no ColdFusion Administrator. Verifique as configurações da pasta que o Dreamweaver utiliza para processar páginas dinâmicas (veja Especificar o local onde as páginas dinâmicas podem ser processadas, na página 132). Veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como solucionar problemas de conexão no banco de dados. Se a fonte de dados connglobal aparecer no painel, a amostra do aplicativo ColdFusion será configurada para este tutorial. 134 Capítulo 5

135 Iniciar o tutorial Agora você está pronto para criar aplicativos para a Web orientados a dados. Como abrir o documento Um ótimo ponto de partida para desenvolver um aplicativo de banco de dados é criar uma lista dos registros armazenados em um banco de dados. No aplicativo que você está criando neste capítulo, as informações da tabela de comentários do cliente serão listadas no banco de dados. Em seguida, você criará uma página para a Web dinâmica que permite ao cliente inserir comentários ou questões diretamente no banco de dados. Pode-se começar localizando os documentos com os quais você trabalhará para criar as páginas. 1 Siga um dos procedimentos abaixo para abrir o painel Site: No painel de grupo Arquivos, clique na seta de expansão para exibir o painel Site. Selecione Janela > Site. Pressione a tecla F8. O painel Site é exibido. 2 No menu pop-up Site, selecione o site Global Car que você definiu para as páginas do servidor. 3 No painel Sites clique duas vezes no arquivo customercomment para abri-lo. O documento se abre na janela do documento. 4 Se estiver visualizando o documento no modo Visualização de código, clique no botão Mostrar a visualização do projeto ou no botão Mostrar as visualizações de código e do projeto na barra de ferramentas do documento, de modo que seja possível utilizar os exemplos de tela fornecidos como pontos de verificação ao concluir a lição. A página parcialmente completa será editada. Tutoriais do Dreamweaver MX 135

136 Definir um conjunto de registros Agora você criará um conjunto de registros para selecionar os dados a serem exibidos. Um conjunto de registros é um subconjunto de informações extraídas de um banco de dados por meio de uma consulta ao banco de dados (no ASP.NET, o conjunto de registros é conhecido como DataSet). Uma consulta ao banco de dados consiste de critérios de busca que definem o conteúdo do conjunto de registros. É possível utilizar as informações extraídas como fonte de conteúdo para suas páginas dinâmicas. O Dreamweaver MX possui uma interface amigável para a criação de consultas SQL, pois não é necessário ter conhecimentos de SQL para criar um conjunto de registros no Dreamweaver. Você criará um conjunto de registros para selecionar todos os valores da tabela COMMENTS no banco de dados do site Global. 1 No Dreamweaver, abra a caixa de diálogo Conjunto de registros ou DataSet (ASP.NET) efetuando um dos procedimentos a seguir: Na guia Aplicativo da barra Inserir, clique no botão Conjunto de registros ou DataSet (ASP.NET). Selecione Janela > Ligações para abrir o painel Ligações, clique no botão de adição (+) e selecione Conjunto de registros DataSet (ASP.NET). Clique na seta de expansão do painel Aplicativo e, em seguida, clique no botão de adição (+) no painel Ligações e selecione Conjunto de registros ou DataSet (ASP.NET). A caixa de diálogo Conjunto de registros ou DataSet é exibida. Se a caixa de diálogo exibida se parecer mais complexa do que a caixa de diálogo abaixo, clique no botão Simples. 2 Na caixa de texto Nome, digite rscomments. 136 Capítulo 5

137 3 No menu pop-up DataSource (ColdFusion) ou menu Conexões (outros tipos de página de servidor), selecione connglobal. A caixa de diálogo Conjunto de registros ou DataSet é atualizada com os dados do banco de dados. No menu pop-up Tabela, COMMENTS já está selecionado. Em Colunas, Todos já está selecionado. 4 Aceite o valor padrão para solicitar o conjunto de registros completo. 5 No menu pop-up Ordenar, selecione LAST_NAME e no segundo menu pop-up, selecione Ascendente. Os registros recuperados listarão os dados em ordem alfabética de nome de cliente iniciando pelo último nome. Tutoriais do Dreamweaver MX 137

138 6 Clique em Testar para verificar o conjunto de registros ou dataset. Os registros do banco de dados correspondentes aos critérios de seleção do conjunto de registros ou dataset são exibidos na janela Testar a instrução SQL. 7 Clique em OK para fechar a janela Testar a instrução SQL. 8 Clique em OK para fechar a caixa de diálogo Conjunto de registros ou DataSet. O conjunto de registros será exibido no painel Ligações. Dica: Se não for possível visualizar todos os campos de conjuntos de registros, clique no botão de adição (+) ao lado de Conjunto de registros (rscomments) para expandir a exibição do conjunto de registros. 138 Capítulo 5

139 Exibir os registros do banco de dados A seguir, você criará uma página listando os registros existentes na tabela COMMENTS. Você irá gerar a página dinamicamente em vez de digitar as informações manualmente. Você começará criando uma tabela para estruturar a lista de dados. 1 No documento customercomment, coloque o ponto de inserção após Comentários do cliente e pressione Enter para definir onde a tabela será inserida. 2 Inserir uma tabela seguindo um dos procedimentos abaixo: Na barra Inserir, clique na guia Comuns e no botão Tabela ou arraste-o ao documento. Na barra Inserir, clique na guia Layout e no botão Tabela ou arraste-o ao documento. Selecione Inserir > Tabela. A caixa de diálogo Inserir tabela é exibida. 3 Na caixa de diálogo, definir as seguintes opções: Em Linhas, digite 2. Em Preenchimento de célula, digite 2. Em Colunas, digite 4. Em Espaçamento de célula, digite 2. Em Largura, digite 80. A caixa de diálogo completada deverá ter a seguinte aparência: Tutoriais do Dreamweaver MX 139

140 4 Clique em OK. A tabela é inserida no documento. 5 Na linha superior da tabela adicione denominações para as entradas da tabela: Na primeira célula da tabela, digite Nome. Na célula seguinte, digite Sobrenome. Na célula seguinte, digite Endereço de . Na última célula, digite Comentários. 6 Salve o documento (Arquivo > Salvar). Adicione campos dinâmicos à tabela Agora você está pronto para adicionar os campos de conjuntos de registros à tabela. 1 Abra o painel Ligações, caso não esteja aberto, conforme um dos procedimentos a seguir. Selecione Janela > Ligações. Clique na seta de expansão do grupo de painel Aplicativo e selecione o painel Ligações. 2 Adicione o campo FIRST_NAME à tabela efetuando um dos procedimentos a seguir: Coloque o ponto de inserção na célula da tabela sob a denominação Nome e, no painel Ligações, selecione FIRST_NAME e clique em Inserir. Arraste FIRST_NAME do painel Ligações para a célula da tabela. 3 Repita a etapa 2 para adicionar LAST_NAME, e COMMENTS à tabela. A sua página deverá ser semelhante a esta: 4 Salve o documento. 140 Capítulo 5

141 Definir uma região repetida A tabela criada contém apenas uma linha de dados. Para exibir todos os registros, será necessário configurar a linha da tabela como região repetida. A página se repetirá com os registros de dados para cada registro correspondente aos requisitos de busca do conjunto de registros. 1 Na janela do documento, selecione a linha inferior da tabela seguindo um dos procedimentos abaixo: Coloque o ponteiro na primeira tabela e arraste-a para a direita para selecionar todas as células da linha. Clique em uma das células e, no seletor de tags, clique na tag <tr>. Posicione o ponteiro à esquerda da linha da tabela. Ao se transformar em uma seta, clique na borda da linha da tabela para selecionar a linha. 2 Configure uma região repetida seguindo um dos procedimentos abaixo: No painel Comportamentos de servidor, clique no botão de adição (+) e selecione Repetir a região. Na guia Aplicativo da barra Inserir, clique no botão Região repetida. Selecione Inserir > Objetos de aplicativos > Região repetida. A caixa de diálogo Repetir a região é exibida. 3 Na caixa de diálogo, aceite a configuração padrão e clique em OK. A linha da tabela é exibida com um controle com alça. 4 Salve o documento. Tutoriais do Dreamweaver MX 141

142 Como visualizar as páginas Em seguida, salve as páginas e visualize-as para saber como o aplicativo desenvolvido funcionará. Para visualizar as páginas do modo como parecerão quando processadas pelo servidor, abra a página no modo Live Data. 1 Com customercomment ainda selecionado, efetue um dos procedimentos a seguir para visualizar o dados nas páginas: Na barra de ferramentas do documento, clique no botão Visualização do Live Data. Selecione Exibir > Live Data. A página é atualizada com uma lista de dados do cliente extraídos do banco de dados. Criar um formulário de inserção de registro A página seguinte a ser criada para o site Global é uma página de comentários do cliente. Nesta página, os clientes podem inserir comentários diretamente no banco de dados. Você conectará esta página à tabela Comentários no banco de dados do site Global. O Dreamweaver inclui vários objetos de aplicativos que auxiliam o usuário na criação de páginas de aplicativos para a Web de forma rápida e fácil. Você utilizará um objeto de aplicativo para criar a página de inserção. O objeto de aplicativo Inserir registro cria um formulário HTML, campos de dados vinculados (ou ligados) ao banco de dados e os scritps de servidor necessários para criar uma página dinâmica. Adicionar um objeto de aplicativo Formulário de inserção de registro É possível utilizar um objeto de aplicativo Formulário de inserção de registros para criar um formulário com links aos campos de um banco de dados. O objeto de aplicativo permite selecionar os campos a serem incluídos no formulário, campos identificadores e selecionar o tipo de objetos de formulário a serem inseridos. Quando o usuário insere os dados nos campos de formulário e clica no botão de envio, um novo registro é inserido no banco de dados. Também é possível definir uma página para abrir após um registro ter sido enviado com êxito, de modo que o remetente saberá que o banco de dados foi atualizado. 142 Capítulo 5

143 1 No painel Site, localize o arquivo customerinsert e clique duas vezes no arquivo para abri-lo. O documento se abre na janela do documento. 2 Coloque o ponto de inserção no documento após a palavra possível e pressione a tecla Enter ou Return para definir onde o objeto de aplicativo será inserido. 3 Efetue um dos procedimentos a seguir para inserir um objeto de inserção de registro: Na guia Apicativo da barra Inserir, clique no botão Formulário de inserção de registros. Selecione Inserir > Objetos de aplicativos > Formulário de inserção de registros. A caixa de diálogo Formulário de inserção de registros será exibida. 4 No menu pop-up Data Source (ColdFusion) ou Conexão, selecione connglobal. 5 No menu pop-up Tabela, verifique se COMMENTS está selecionado. 6 Na caixa de texto Após a inserção, ir para ou Se tiver êxito, ir para (ASP.NET), clique em Procurar. 7 Na caixa de diálogo exibida, selecione o arquivo denominado insertok e, em seguida, clique em OK para fechar a caixa de diálogo. Você selecionou uma página para exibir para um visitante do site reconhecer o recebimento das informações enviadas. Tutoriais do Dreamweaver MX 143

144 Crie o formulário de inserção Na seção Campos de formulário da caixa de diálogo Formulário de inserção de registro, defina o formulário no qual o visitante irá inserir dados. 1 Na caixa de diálogo Formulário de inserção de registro, remova os campos que você não deseja incluir no formulário do seguinte modo: Selecione COMMENT_ID e clique no botão de subtração (-). Selecione TELEPHONE e clique no botão de subtração (-). Selecione SUBMIT_DATE e clique no botão de subtração (-). Selecione ANSWERED e clique no botão de subtração (-). 2 Se estiver criando uma página para ASP.NET, altere a ordem alfabética dos campos da formulário da seguinte maneira: Na lista Coluna, selecione COMMENTS e, em seguida, clique no botão de seta para baixo para posicionar COMMENTS abaixo de LAST_NAME. Na lista Coluna, selecione e, em seguida, clique no botão de seta para baixo para posicioná-lo abaixo de LAST_NAME. 3 Na lista Campos de formulário, selecione FIRST_NAME para especificar como o campo será exibido no formulário. 4 Na caixa de texto Rótulo, digite Nome. Este é a denominação que aparecerá no formulário HTML próximo ao campo de texto. 5 Configure o tipo de objeto de formulário para o campo da seguinte maneira: Se estiver usando ASP.NET, em Exibir como aceite o Campo de texto de valor padrão e no menu pop-up Enviar como, altere o valor padrão WChar para VARCHAR. Se estiver usando outros tipos de páginas de servidor, em Exibir como aceite os valores padrão de Campo de texto e em Enviar como, aceite o valor padrão de Texto. 6 No campo Valor padrão, digite Digite seu nome para definir o texto inicial no campo que permite ao usuário conhecer o tipo de informação que deverá ser fornecida. Após concluir, a entrada FIRST_NAME deve se parecer como esta ao concluir. 144 Capítulo 5

145 7 Repitas as etapas 3 a 6 para os campos do formulário LAST_NAME e . Na caixa de texto Valor padrão, insira o texto inicial que você deseja que apareça no campo ao ser exibido no formulário. 8 Selecione COMMENTS para definir os valores para este campo. 9 No campo Rótulo, digite Comentários. 10 Defina os valores para o campo do formulário Comentários da seguinte maneira: Se estiver utilizando ASP.NET, no menu pop-up Exibir como selecione Área de texto e, em seguida, no menu pop-up Enviar como, selecione VARCHAR. Se estiver utilizando outros tipos de servidor de páginas, no menu pop-up Exibir como selecione Área de texto e, em seguida, no menu pop-up Enviar como, aceite o valor padrão de Texto. 11 Na caixa de texto Valor padrão, insira o texto que apareceu inicialmente neste campo no formulário ou deixe-o em branco. Após concluir, a caixa de diálogo deve se parecer como a do exemplo. Tutoriais do Dreamweaver MX 145

146 12 Clique em OK para fechar a caixa de diálogo. O objeto de aplicativo Formulário de inserção de registro é inserido no documento. 13 Salve o documento. Copiar arquivos para o servidor Em seguida, salve as alterações e copie os arquivos atualizados para o servidor. Após copiar os arquivos, exiba a página de registro de inserção, adicione um comentário ou pergunta e envie os dados para testar o aplicativo. 1 No painel Site, selecione customerinsert e clique no botão Colocar os arquivos (seta azul para cima) para copiar o arquivo local para o servidor. 2 Quando o Dreamweaver perguntar se você deseja copiar os arquivos dependentes para o servidor, selecione Sim. Observação: Em alguns modelos de servidores, o Dreamweaver cria uma pasta Conexões na sua pasta local. Você deve copiar esta pasta para o servidor remoto para que o aplicativo Web funcione. No painel Site, selecione customerinsert e clique no botão Colocar os arquivos (seta azul para cima) para copiar o arquivo local para o servidor. 3 Com customerinsert selecionado, escolha Arquivo > Visualizar no navegador ou pressione F12 para exibir o documento. 4 Digite os dados de teste no formulário e clique no botão Inserir registro no documento para enviar seus dados. As informações são atualizadas no banco de dados e a página insertok é exibida. 146 Capítulo 5

147 Visualizar a atualização Permite visualizar as alterações feitas ao banco de dados. Você pode visualizar as alterações abrindo o documento customercomment criado na primeira parte desta lição ou visualizando o bando de dados. No Dreamweaver, no painel Site, clique duas vezes no documento customercomment e, em seguida, selecione Arquivo > Visualizar no navegador e selecione um navegador para visualizar a página. O registro inserido deve aparecer na lista de comentários do cliente. No Dreamweaver, no painel Banco de dados (Janela > Banco de dados), localize o ícone do banco de dados connglobal, clique no botão de adição (+) em frente de Tabelas para a lista de tabelas no banco de dados. Clique com o botão direito do mouse (Windows) ou pressione a tecla Control e clique (Macintosh) na tabela COMMENTS e selecione Visualizar dados. Uma lista de registros no banco de dados é exibida, os comentários que você acabou de inserir aparecem como a última entrada na tabela. Informações adicionais Para obter informações mais detalhadas sobre os tópicos cobertos neste tutorial, veja os tópicos a seguir na Ajuda do Dreamweaver: Como armazenar e recuperar dados para a página Como definir fontes de dados dinâmicas Como adicionar conteúdo dinâmico às páginas da Web Como criar links de navegação para conjuntos de registros Como construir uma página de inserção em pouco tempo Como criar uma página de inserção em blocos Tutoriais do Dreamweaver MX 147

148 148 Capítulo 5

149 CAPÍTULO 6 Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX O Macromedia Fireworks MX e o Macromedia Flash MX são ferramentas poderosas de desenvolvimento Web projetadas para criar gráficos e filmes SWF que podem ser visualizados em páginas da Web. O Macromedia Dreamweaver MX é completamente integrado com estas ferramentas permitindo que você simplifique o fluxo de trabalho de projetos da Web. Para configurar a integração entre o Macromedia Flash MX, o Dreamweaver MX e o Fireworks MX certifique-se de ativar o Design Notes ao definir os sites do Dreamweaver. Por padrão, esta opção está selecionada previamente na configuração definição do site. Para obter informações sobre como ativar as Design Notes, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como ativar e desativar as Design Notes. Ao exportar arquivos do Macromedia Flash MX ou Fireworks MX para um site definido no Dreamweaver, as Design Notes que contêm referências ao arquivos PNG ou FLA (Macromedia Flash authoring file) são exportadas automaticamente para o site em conjunto com os arquivos prontos para Web (GIF, JPEG ou SWF). Você pode inserir facilmente imagens ou tabelas do Fireworks e filmes do Macromedia Flash em um documento do Dreamweaver. Você também pode aproveitar os recursos de integração entre o Macromedia Flash MX, o Fireworks MX e o Dreamweaver MX para fazer alterações a uma imagem ou filme após tê-los inserido em um documento do Dreamweaver. Enquanto trabalha com o Dreamweaver MX, você pode iniciar o processo de produção gráfica inserindo e, em seguida, atualizando um alocador de espaço de imagem. Para obter informações sobre alocadores de espaço de imagem, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Inserção de um alocador de espaço de imagem. Após ter inserido um alocador de espaço de imagem no Dreamweaver MX, inicie o Fireworks MX para criar um novo gráfico. No Fireworks, você pode criar gráficos e adicionar pontos ativos, comportamentos e quaisquer outros elementos que desejar. Você pode salvar o gráfico como um arquivo PNG e exportá-lo como um arquivo gráfico-pronto para Web, como um GIF ou JPEG. Você pode exportar um tabela fatiada como HTML e imagens. Ao voltar para o Dreamweaver MX, a imagem de substituição ou tabela do Fireworks é atualizada no documento. 149

150 Sobre a integração do Fireworks MX e Macromedia Flash MX Edição Roundtrip e Design Notes permitem que o Dreamweaver MX integre as operações com o Fireworks MX e o Macromedia Flash MX. A edição Roundtrip garante que as atualizações de código sejam transferidas corretamente entre o Dreamweaver MX e os outros aplicativos por exemplo, para preservar o comportamento das imagens cambiáveis ou links a outros arquivos enquanto que o Design Notes permite que o Dreamweaver MX localize o documento fonte apropriado para uma imagem exportada ou arquivo de filme. Para obter informações sobre como utilizar o Design Notes no Dreamweaver MX, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como utilizar as Design Notes no Fireworks e Flash com o Dreamweaver. Além das informações de localização, as Design Notes contêm outras informações pertinentes sobre arquivos exportados. Por exemplo, ao exportar uma tabela do Fireworks, o Fireworks MX grava uma Design Note para cada imagem exportada na tabela. Se o arquivo exportado contiver pontos ativos ou imagens cambiáveis, o JavaScript para estes elementos está contido no documento HTML exportado pelo Fireworks MX. Para obter melhores resultados, ao desenvolver gráficos e filmes para publicações da Web, salve os arquivos prontos para Web e a fonte do Fireworks MX e Macromedia Flash MX no site definido no Dreamweaver. Isto faz com que qualquer usuário que esteja compartilhando o site possa localizar o documento fonte ao editar imagens ou tabelas do Fireworks ou editar um filme SWF enquanto trabalha no Dreamweaver. A chave para desenvolver um fluxo de trabalho integrado com estes aplicativos é configurar primeiramente o ambiente de trabalho. Para obter informações sobre como configurar o ambiente de trabalho do Dreamweaver e Fireworks MX, veja Como trabalhar com o Dreamweaver e Macromedia Fireworks MX, na página 150. Para obter informações sobre como configurar o ambiente de trabalho do Dreamweaver e Macromedia Flash MX, veja Trabalhar com Dreamweaver MX e Macromedia Flash MX, na página 160. Como trabalhar com o Dreamweaver e Macromedia Fireworks MX O Dreamweaver e o Fireworks reconhecem e compartilham muitos das mesmas edições de arquivo, incluindo mudanças em links, mapas de imagem e fatias de tabelas. Juntos, os dois aplicativos fornecem um fluxo de trabalho facilitado para edição, otimização e posicionamento de arquivos gráficos de Web em páginas HTML. Para configurar um ambiente de trabalho integrado, é necessário concluir algumas tarefas preliminares, como definir um site local no Dreamweaver e verificar se as Design Notes estão ativadas. As Design Notes são ativadas automaticamente a menos que você altere as configurações padrão. Você também deve configurar o Fireworks MX como editor de imagem externa primário para que o Dreamweaver inicie facilmente o Fireworks MX para edição. Para obter informações sobre como configurar o Fireworks MX como editor externo, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Utilização de um editor de imagens externo. Para garantir a integração para início e edição, quando estiver pronto para exportar os arquivos gráficos e HTML do Fireworks, exporte-os para a pasta do site do Dreamweaver. Ao exportar um gráfico GIF ou JPEG do Fireworks MX para uma pasta do site do Dreamweaver, o Fireworks MX cria uma pasta denominada _notes na mesma pasta. Esta pasta contém as Design Notes, pequenos arquivos com extensão de arquivo Macromedia Note (.mno). 150 Capítulo 6

151 As Design Notes contêm informações sobre os arquivos gráficos exportados pelo Fireworks MX. Ao iniciar e editar uma imagem ou tabela do Fireworks no Dreamweaver, o Dreamweaver usa estas informações para localizar o PNG fonte. Para obter informações sobre como especificar se o Dreamweaver inicia automaticamente ou arquivo PNG quando disponível, veja Especificar as preferências de iniciar e editar para os arquivos de origem do Fireworks MX, na página 151. Ao selecionar uma imagem em um documento do Dreamweaver que foi exportado do Fireworks MX e possui um arquivo MNO correspondente, o inspetor de propriedade exibe o caminho de origem do arquivo e um ícone do Fireworks. Configurar o Fireworks MX como editor de imagem externo para o Dreamweaver MX permite alternar entre o Dreamweaver MX e o Fireworks MX sem esforço para editar uma imagem. Nas preferências do Dreamweaver, configure o Fireworks MX como editor primário para tipos de arquivos gráficos, como GIF, PNG e JPEG. Para obter informações sobre como configurar um editor de imagens, veja Utilização de um editor de imagens externo ou Como definir as preferências do editor de imagens externo na Ajuda do Dreamweaver > Como utilizar o Dreamweaver. Especificar as preferências de iniciar e editar para os arquivos de origem do Fireworks MX As preferências de iniciar e editar do Fireworks MX permitem que você especifique como lidar com arquivos PNG de origem ao ativar arquivos do Fireworks de outro aplicativo, como o Dreamweaver. O Dreamweaver MX reconhece as preferências de iniciar e ativar do Fireworks MX somente em certos casos nos quais você inicia e otimiza uma imagem do Fireworks. Especificamente, você precisa estar iniciando e otimizando uma imagem que não seja parte de uma tabela do Fireworks e que não contenha um caminho correto das Design Notes para um arquivo de origem PNG. Em todos os outros casos, com a inclusão de todos os casos de iniciar e editar imagens do Fireworks, o Dreamweaver inicia automaticamente o arquivo PNG de origem, lhe avisando para localizar o arquivo de origem se ele não puder ser encontrado. Para especificar as preferências de iniciar e editar para os arquivos de origem do Fireworks: 1 No Fireworks, selecione Editar > Preferências ou Fireworks > Preferências (Mac OS X). 2 Clique na guia Iniciar e editar (Windows) ou escolha Iniciar e editar no menu pop-up (Macintosh). 3 Especifique as opções de preferência a usar ao editar ou otimizar imagens do Fireworks colocadas em um aplicativo externo: Usar sempre o PNG de origem inicia automaticamente o arquivo de PNG do Fireworks que está definido nas Design Notes como origem para a imagem colocada. As atualizações são feitas no PNG de origem e em sua imagem correspondente colocada. Nunca usar PNG de origem inicia automaticamente a imagem colocada do Fireworks, se um arquivo de origem de PNG existir ou não. As atualizações são feitas somente na imagem colocada. Perguntar ao iniciar permite que você especifique cada vez se deseja iniciar o arquivo de origem de PNG ou não. Ao editar ou otimizar uma imagem colocada, o Fireworks MX exibe uma mensagem informando para tomar uma decisão de iniciar e editar. Você também pode especificar as preferências de iniciar e editar a partir desta caixa de mensagens. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 151

152 Inserir uma imagem do Fireworks MX em um documento do Dreamweaver MX Os elementos gráficos do Fireworks podem ser colocados em um documento do Dreamweaver de várias formas. Você pode colocar um gráfico exportado do Fireworks diretamente no Dreamweaver usando o comando Inserir imagem ou pode criar um novo gráfico do Fireworks a partir de um alocador de espaços de imagem do Dreamweaver. Para inserir uma imagem do Fireworks MX em um documento do Dreamweaver: 1 No documento do Dreamweaver, coloque o ponto de inserção onde deseja que a imagem apareça e, em seguida, siga um dos procedimentos abaixo: Escolha Inserir > Imagem. Na categoria Comuns da barra de inserção, clique no botão Inserir, clique no botão Imagem ou arraste-a para o documento. 2 Navegue para o arquivo exportado do Fireworks e clique em OK (Windows) ou Open (Macintosh). Observação: Se o arquivo do Fireworks não estiver no site atual do Dreamweaver, uma mensagem aparecerá perguntando se você deseja copiar para a pasta raiz. Clique em Sim. Atualizar um alocador de espaços de imagem do Dreamweaver MX no Fireworks MX Você pode criar uma imagem de alocador de espaço em um documento do Dreamweaver e, em seguida, iniciar o Fireworks MX para criar uma imagem gráfica ou tabela do Fireworks para substituí-la. Para obter informações sobre como inserir um alocador de espaços de imagem, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Inserção de um alocador de espaço de imagem. Para criar uma nova imagem de um alocador de espaços de imagem, você deve possuir o Dreamweaver MX e o Fireworks MX instalados em seu sistema. O Fireworks MX reconhece as seguintes configurações de alocador de espaços de imagem que você configurou enquanto estava trabalhando no alocador de espaços de imagem no Dreamweaver: Tamanho de imagem, correlacionado ao tamanho da tela do Fireworks MX ID de imagem, utilizada pelo Fireworks MX como nome padrão de documento para o arquivo de origem e arquivo exportado que você criou Alinhamento do texto Os comportamentos são reconhecidos pelo Fireworks MX, como permutar a imagem, menu pop-up, barra de navegação e definir o texto O Fireworks MX também reconhece os links vinculados ao alocador de espaços de imagem enquanto você trabalha no Dreamweaver. Observação: Embora os links que você adicionou ao alocador de espaços da imagem não possam ser vistos no Fireworks, eles são preservados. Se você desenhar um ponto ativo e adicionar um link no Fireworks MX, ele não excluirá o link adicionado ao alocador de espaços de imagem no Dreamweaver. Entretanto, se você desenhar uma fatia no Fireworks na nova imagem, ele excluirá o link no Dreamweaver. Documento ao substituir o alocador de espaços da imagem. Devido a não serem reconhecidos pelo Fireworks, as configurações de alocador de espaços de imagem a seguir estão desativados no inspetor de propriedades de alocador de espaços de imagem: alinhamento de imagem, cor, Vspace e Hspace, e mapas. 152 Capítulo 6

153 Ao criar uma nova imagem no Fireworks para substituir um alocador de espaços de imagem no Dreamweaver, o Fireworks MX avisa-o para salvar o arquivo como um arquivo PNG (documento de origem) e exportá-lo em um formato pronto para Web, como GIF, JPEG ou, no caso de imagens fatiadas, HTML e imagens. A nova imagem ou tabela do Fireworks substitui automaticamente o alocador de espaços da imagem no documento do Dreamweaver. Para editar um alocador de espaços de imagem do Dreamweaver no Fireworks MX: 1 Certifique-se de já ter configurado o Fireworks MX como editor de imagens para arquivos PNG. Para obter mais informações, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver> Definição das preferências do editor de imagens externo. 2 Na janela do documento, clique no alocador de espaços da imagem para selecioná-lo. 3 Siga o seguinte procedimento para iniciar o Fireworks MX para edição: No inspetor de propriedades, clicar em Criar. Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes no alocador de espaços da imagem. Clique duas vezes no alocador de espaços da imagem e, em seguida, selecione Criar imagem no Fireworks. O Fireworks é iniciado, no modo de edição do Dreamweaver. 4 Use as opções do Fireworks para criar a imagem. 5 Quando terminar, clique em Concluir. A caixa de diálogo Salvar como é exibida. O Fireworks solicita que você salve o arquivo PNG. 6 No campo Salvar em, selecione a pasta definida como sua pasta do site local do Dreamweaver. Se você nomear o alocador de espaços de imagem ao inseri-la no documento do Dreamweaver, o Fireworks preenche o campo Nome de arquivo com este nome. Você pode alterar o nome, se desejar. 7 Para salvar o arquivo PNG, clique em Salvar. A caixa de diálogo Exportar é exibida. Use esta caixa de diálogo para exportar a imagem como um GIF. 8 Na caixa de diálogo, selecione a pasta do site local do Dreamweaver para Salvar como. 9 O campo de texto Nome atualiza automaticamente o mesmo nome usado para o arquivo PNG. Insira um texto para alterar o nome, se desejar. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 153

154 10 Para Salvar como tipo, selecione o tipo de arquivo ou arquivos que você deseja exportar, por exemplo Somente imagens ou HTML e imagens. 11 Clique em Salvar. O arquivo é salvo e o foco retorna ao Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou tabela do Fireworks substitui o alocador de espaços de imagem. Editar uma imagem ou tabela do Fireworks MX Você pode iniciar o Fireworks para editar imagens inseridas em um documento do Dreamweaver. Quando você inicia e edita uma imagem ou fatia de imagem que seja parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks e o arquivo PNG no qual a imagem ou tabela foi exportada. Quando a imagem é parte de uma tabela do Fireworks, você pode ativar toda a tabela do Fireworks para edição, contanto que o comentário <!--fw table--> exista no código HTML. Se o arquivo PNG de origem foi exportado do Fireworks para um site do Dreamweaver usando as configurações de imagem e estilo HTML do Dreamweaver, o comentário de tabela do Fireworks é inserido automaticamente no código HTML. Para acionar e editar uma imagem do Fireworks colocada no Dreamweaver: 1 No Dreamweaver, selecione Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado. 2 Clique na imagem ou fatia de imagem para selecioná-la. O inspetor de propriedades identifica a seleção como uma imagem ou tabela do Fireworks baseado no item selecionado e exibe o nome do arquivo de origem PNG. 3 Para iniciar o Fireworks para edição, siga um dos procedimentos abaixo: No inspetor de propriedades, clicar em Editar. Clique duas vezes (Windows) ou clique duas vezes com Command (Macintosh) na imagem selecionada. Clique com o botão direito do mouse (no Windows) ou com Control (Macintosh) na imagem selecionada e, no menu contextual, escolha Editar com Fireworks. O Fireworks inicia e abre o arquivo PNG associado para edição. Observação: Se o Fireworks não puder localizar o arquivo de origem, você será solicitado a localizar o arquivo de origem PNG. Ao trabalhar com o arquivo de origem do Fireworks, as alterações são salvas para o arquivo de origem e o exportado. Caso contrário, apenas o arquivo exportado é atualizado. 4 No Fireworks, edite o arquivo PNG de origem. 5 Quando terminar de fazer as edições, clique em Concluir. O Fireworks salva as alterações no arquivo PNG, exporta a imagem atualizada (ou HTML e imagens) e volta para o Dreamweaver. No Dreamweaver, a imagem ou tabela atualizada é exibida. 154 Capítulo 6

155 Abrir um menu pop-up do Fireworks MX no Dreamweaver MX O Fireworks suporta menus pop-up baseados em imagens e baseados em HTML. O Dreamweaver suporta apenas menus pop-up baseados em HTML. No Dreamweaver, você pode abrir um menu pop-up do Fireworks e fazer edições em todas as propriedades de item de menu, excluindo as imagens de fundo dos -menus pop-up baseados em imagens. O comportamento Mostrar o menu pop-up no Dreamweaver permite editar ou atualizar o conteúdo de um menu pop-up baseado em HTML do Fireworks. Você pode adicionar, excluir ou alterar menus de imagens, reorganizá-los e configurar onde um menu será posicionado na página. Para obter informações sobre como configurar ou modificar as opções de menu pop-up no Dreamweaver, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Mostrar menus pop-up. Se o menu pop-up que deseja editar é um menu pop-up baseado em imagem e você deseja preservar os fundos de células baseados na imagem, é necessário editar o menu pop-up no Fireworks e não no Dreamweaver. Para editar as imagens de fundo em um menu pop-up baseado em imagem: Selecione a imagem que deseja atualizar e clique em Editar. Para obter informações sobre como editar uma imagem no Fireworks, veja Editar uma imagem ou tabela do Fireworks MX, na página 154. Para abrir o menu pop-up do Fireworks: 1 No documento do Dreamweaver, selecione o ponto ativo ou imagem que dispara o menu popup. 2 Abra o painel Comportamentos (Shift+F3) se ainda estiver fechado e, em seguida, na lista Ações, clique -duas vezes em Mostrar menu pop-up. A caixa de diálogo Mostrar menu pop-up é exibida. 3 Faça as alterações que desejar no menu pop-up. 4 Quando terminar de modificar o menu pop-up, clique em OK. Iniciar o Fireworks MX para otimizar uma imagem Você pode ativar o Fireworks a partir do Dreamweaver para fazer alterações rápidas de exportação, como redimensionar uma imagem ou alterar o tipo de arquivo, para imagens e animações inseridas do Fireworks. O Fireworks permite que você faça alterações para as configurações de otimização, configurações de animação e tamanho e área da imagem exportada. Para alterar as configurações de otimização para uma imagem do Fireworks inserida no Dreamweaver: 1 No Dreamweaver, selecione a imagem desejada e escolha Comandos > Otimizar a imagem no Fireworks. 2 Se for solicitado, especifique se deseja localizar o arquivo de origem do Fireworks para a imagem inserida. 3 No Fireworks, faça as edições desejadas na caixa de diálogo Otimização. Para editar as configurações de otimização, clique na guia Opções. Para obter mais informações, veja a Ajuda do Fireworks. Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 155

156 4 Quando tiver terminado de editar a imagem, clique em Atualizar. A imagem é exportada usando as novas configurações de otimização, o arquivo GIF ou JPEG inserido no Dreamweaver é atualizado e o arquivo de origem PNG é salvo se um arquivo de origem foi selecionado. Se você alterou o formato da imagem, o verificador de links do Dreamweaver solicita a atualização das referências para a imagem. Por exemplo, se você alterou o formato de uma imagem chamada my_image de GIF para JPEG, clicar em OK nesse aviso muda todas as referências para my_image.gif em seu site para my_image.jpg. Inserir um código HTML do Fireworks MX em um documento do Dreamweaver MX O comando Exportar do Fireworks permite exportar e salvar as imagens otimizadas e os arquivos HTML para um local dentro da pasta do site do Dreamweaver desejada. Em seguida, você pode inserir o arquivo no Dreamweaver. Para obter mais informações sobre como exportar arquivos do Fireworks como HTML, veja a Ajuda do Fireworks. O Dreamweaver permite inserir códigos HTML gerados no Fireworks, completar com imagens associadas, fatias e JavaScript em um documento. Este recurso de inserção torna fácil criar elementos de design no Fireworks e incorporá-los em um documento do Dreamweaver existente. Para inserir HTML do Fireworks em um documento do Dreamweaver: 1 No Dreamweaver, coloque o ponto de inserção no documento onde deseja que o código HTML do Fireworks inserido inicie. 2 Efetue um dos procedimentos a seguir: Escolha Inserir > Imagens interativas > HTML do Fireworks. Na categoria Comuns da barra de inserção, clique no botão Inserir HTML do Fireworks. 3 Na caixa de diálogo exibida, clique em Procurar para escolher o arquivo HTML do Fireworks desejado. 4 Escolha Excluir o arquivo após a inserção para mover o arquivo HTML para a Lixeira (Windows) ou Trash (Macintosh) quando a operação tiver sido concluída. Use essa opção se você não precisar mais do arquivo HTML do Fireworks após inseri-lo. Essa opção não afeta o arquivo PNG de origem associado ao arquivo HTML. Observação: Se o arquivo HTML estiver em uma unidade de rede, ele será permanentemente excluído, não mova-o para a lixeira. 5 Clique em OK para inserir o código HTML com as suas imagens, fatias e JavaScript associados no documento do Dreamweaver. 156 Capítulo 6

157 Como colar HTML do Fireworks MX no Dreamweaver MX Uma maneira rápida de inserir imagens e tabelas geradas no Fireworks no Dreamweaver é copiar e colar o código HTML do Fireworks diretamente no documento do Dreamweaver. Para copiar e colar o HTML do Fireworks no Dreamweaver: 1 No Fireworks, selecione Editar > Copiar código HTML. 2 Siga o assistente que guiará você através das configurações para exportar o HTML e as imagens. Quando solicitado, especifique a pasta do site do Dreamweaver como destino para as imagens exportadas. O assistente exporta as imagens para o destino especificado e copia o código HTML para a área de transferência. 3 No Dreamweaver, coloque o ponto de inserção no documento onde deseja colar o código HTML e selecione Editar > Colar. Todos os códigos HTML e JavaScript associados com arquivos do Fireworks exportados são copiados para o documento do Dreamweaver e todos os links de imagens são atualizados. Para exportar e colar o HTML do Fireworks no Dreamweaver: 1 No Fireworks, selecione Arquivo > Exportar. 2 Na caixa de diálogo Exportar, especifique a pasta do site do Dreamweaver como destino para as imagens exportadas. 3 No menu pop-up Salvar como, escolha HTML e imagens. 4 No menu pop-up HTML, selecione Copiar para a área de transferência e, em seguida, clique em Salvar. 5 No Dreamweaver, coloque o ponto de inserção no documento onde deseja colar o código HTML exportado e selecione Editar > Colar. Todos os códigos HTML e JavaScript associados com arquivos do Fireworks exportados são copiados para o documento do Dreamweaver e todos os links de imagens são atualizados. Atualizar o HTML do Fireworks MX inserido no Dreamweaver MX No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa para a técnica iniciar e editar para atualizar os arquivos do Fireworks inseridos no Dreamweaver. Com Atualizar HTML, você pode editar uma imagem PNG de origem no Fireworks e, em seguida, atualizar automaticamente qualquer código HTML exportado e arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite que você atualize os arquivos do Dreamweaver mesmo quando este não estiver sendo executado. Para atualizar o HTML do Fireworks inserido no Dreamweaver: 1 No Fireworks, abra o PNG de origem e faça as alterações desejadas. 2 Selecione Arquivo > Salvar 3 No Fireworks, selecione Arquivo > Atualizar HTML. 4 Navegue para o arquivo do Dreamweaver contendo o HTML que você deseja atualizar e clique em Abrir. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 157

158 5 Navegue para a pasta de destino onde você deseja colocar os arquivos de imagem atualizados e clique em Selecionar (Windows) ou Choose (Macintosh). O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. O Fireworks também exporta as imagens atualizadas associadas ao HTML e insere as imagens na pasta de destino especificada. Se o Fireworks não puder encontrar o código HTML correspondente para atualizar, ele lhe dará a opção de inserir um novo código HTML no documento do Dreamweaver. O Fireworks insere a seção JavaScript do novo código no início do documento e insere a tabela HTML ou link para a imagem no final. Criar um álbum de fotografias na Web no Dreamweaver MX O comando Criar álbum de fotografias na Web no Dreamweaver permite gerar automaticamente um Website para exibir um álbum de imagens de uma determinada pasta. Este comando utiliza JavaScript para invocar o Fireworks, que cria uma miniatura e uma imagem de tamanho maior para cada imagem na pasta. Em seguida, o Dreamweaver cria uma página da Web contendo todas as miniaturas, assim como os links para as imagens maiores. Para usar o recurso Criar álbum de fotografias na Web, você deve possuir o Dreamweaver e o Fireworks 4 ou versão mais recente instalados no seu sistema. Antes de começar, insira todas as imagens do álbum de fotografias em uma única pasta (a pasta não precisa estar em um site). Adicionalmente, certifique-se de que os nomes de arquivo das imagens estejam utilizando extensões reconhecidas pelo comando Criar álbum de fotografias na Web (.gif,.jpg,.jpeg,.png,.psd,.tif ou.tiff). Imagens de extensões de arquivo não reconhecidas não são incluídas no álbum de fotografias. Para criar um álbum de fotografias na Web: 1 No Dreamweaver, selecione Comandos > Criar álbum de fotografias na Web. 2 Na caixa de texto Título do álbum de fotografias, insira um título. O título será exibido em um retângulo cinza na parte superior da página contendo as miniaturas. Se desejar, você pode inserir até duas linhas de texto adicional para que seja exibido diretamente abaixo do titulo, nas caixas Informações do sub-cabeçalho e Outras informações. 3 Selecione a pasta que contém as imagens de origem clicando no botão Procurar próximo à caixa de texto Pasta de origem de imagens. Em seguida, selecione (ou crie) uma pasta de destino na qual inserir todas as imagens exportadas e arquivos HTML clicando no botão Procurar próximo à caixa de texto Pasta de origem de imagens. A pasta de destino não contém necessariamente um álbum de fotografias se contiver, e se as novas imagens possuírem os mesmos nomes das imagens usadas anteriormente, você deverá sobrescrever as miniaturas existentes e os arquivos de imagem. 4 Especifique as opções de exibição para as imagens em miniatura. Selecione um tamanho para as imagens em miniatura a partir do menu pop-up Tamanho da miniatura. As imagens são dimensionadas proporcionalmente para criar miniaturas que se encaixem dentro de um quadrado que possua as dimensões de pixels indicadas. Para exibir os nomes de arquivos de cada imagem original abaixo da miniatura correspondente, selecione Mostrar os nomes dos arquivos. Insira o número de colunas para a tabela que exibe as miniaturas. 158 Capítulo 6

159 5 Selecione um formato para as imagens em miniatura a partir do menu pop-up Formato da miniatura. GIF WebSnap 128 cria miniaturas GIF que utilizam uma paleta adaptada da Web para até 128 cores. GIF WebSnap 256 cria miniaturas GIF que utilizam uma paleta adaptada da Web para até 256 cores. JPEG melhor qualidade cria miniaturas JPEG com qualidade relativamente alta e tamanhos de arquivos maiores. JPEG menor arquivo cria miniaturas JPEG com qualidade relativamente mais baixa e tamanhos de arquivos menores. 6 Selecione um formato para as imagens de tamanho maior a partir do menu pop-up Formato da fotografia. Uma imagem de tamanho maior do formato especificado é criada para cada uma das imagens originais. Você pode especificar um formato para as imagens de tamanho maior que diferem do formato especificado para as miniaturas. Observação: O comando criar álbum de fotografias na Web não permite que você use os arquivos de imagem originais como imagens de tamanho maior, pois os formatos de imagens originais diferentes de GIF e JPEG poderão não ser exibidos adequadamente em todos os navegadores. Observe que se as imagens originais forem arquivos JPEG, as imagens de tamanho maior geradas terão tamanhos de arquivo maiores ou qualidade mais baixa do que os arquivos originais. 7 Selecione o percentual da escala para as imagens de tamanho maior. Configurar a Escala para 100% cria imagens de tamanho maior do mesmo tamanho que as originais. O percentual da escala é aplicado a todas as imagens; se suas imagens originais não forem do mesmo tamanho, dimensioná-las utilizando o mesmo percentual pode não produzir os resultados esperados. 8 Selecione Criar página de navegação para cada fotografia para criar uma página individual da Web para cada imagem de origem, contendo os links de navegação denominados Voltar, Início e Próximo. Se você selecionar esta opção, as miniaturas vinculam às páginas de navegação. Se não selecionar esta opção, as miniaturas vinculam diretamente às imagens de tamanho maior. 9 Clique em OK para criar os arquivos de imagem e HTML para o álbum de fotografias da Web. O Fireworks inicia (se já não estiver em execução) e cria os arquivos de imagem de tamanho maior e as miniaturas. Isto pode levar vários minutos se você incluiu um número grande de arquivos de imagens. Quando o processamento estiver concluído, o Dreamweaver se torna ativo novamente e cria uma página contendo as miniaturas. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 159

160 10 Quando uma caixa de diálogo for exibida informando Álbum criado, clique em OK. Você terá que aguardar alguns segundos para que a página do álbum de fotografias seja exibida. As miniaturas são exibidas em ordem alfabética por nome de arquivo. Observação: Clicar no botão Cancelar na caixa de diálogo do Dreamweaver após o processamento ter iniciado não interrompe o processo de criação do álbum de fotografias; apenas evita que o Dreamweaver exiba a página do álbum de fotografias. Trabalhar com Dreamweaver MX e Macromedia Flash MX Você pode inserir facilmente um filme do Macromedia Flash (arquivo SWF) em um documento do Dreamweaver. Em seguida, você pode usar o inspetor de propriedades para configurar a reprodução na Web e exibir as opções para o arquivo SWF. Para obter informações sobre como inserir um filme do Macromedia Flash no Dreamweaver, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como inserir filmes Flash. O verificador de links no Dreamweaver permite que você edite facilmente os links em arquivos inseridos em um documento do Dreamweaver, incluindo filmes do Macromedia Flash. Você pode atualizar o link no filme SWF e, em seguida, atualizar as alterações no documento de criação do Macromedia Flash. Para obter informações, veja Atualizar links em um arquivo SWF do Flash MX na página 162. Se você possui o Macromedia Flash MX e o Dreamweaver MX, também pode atualizar um filme que foi inserido em um documento do Dreamweaver. Quando ambos os aplicativos estão instalados no seu computador e um filme SWF é selecionado no documento do Dreamweaver, o inspetor de propriedades exibe um botão de edição ativo. Se você não possui o Macromedia Flash MX, o botão Editar está desativado. Ao clicar em Editar, o Dreamweaver inicia o Macromedia Flash MX para localizar o arquivo de criação do Macromedia Flash (FLA) para o arquivo SWF selecionado. Se as Design Notes estiverem ativas para o site do Dreamweaver, as informações sobre o arquivo de origem são armazenadas automaticamente em uma Design Note para o arquivo SWF ao exportá-lo para um site do Dreamweaver. Se o Macromedia Flash MX não puder localizar o arquivo de criação do Macromedia Flash, você será solicitado a localizá-lo. Você não pode atualizar um arquivo SWF diretamente faça as alterações no arquivo de origem e, em seguida, exporte-o como um arquivo de filme SWF. 160 Capítulo 6

161 Após iniciar com êxito um documento de origem para edição, trabalhe no Macromedia Flash MX para fazer alterações ao filme. Ao concluir as alterações, o Macromedia Flash MX atualiza o documento de criação do Macromedia Flash, exporta novamente o arquivo de filme, fecha e, em seguida, retorna para o documento do Dreamweaver. Você pode visualizar o SWF atualizado no documento. Para obter mais informações, veja a próxima seção e Atualizar links em um arquivo SWF do Flash MX na página 162. Editar um filme do Macromedia Flash MX a partir do Dreamweaver MX Você não pode editar diretamente um arquivo SWF no Dreamweaver. Se deseja fazer alterações para um SWF exportado, é necessário selecionar o alocador de espaços de filme do Macromedia Flash no documento do Dreamweaver e iniciar o Flash MX para editar o filme. Para iniciar e editar um filme do Macromedia Flash (arquivo SWF) inserido a partir do Dreamweaver: 1 No Dreamweaver, selecione Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado. 2 No documento do Dreamweaver, siga um dos procedimentos abaixo: Clique no alocador de espaços do filme do Macromedia Flash para selecioná-lo e, em seguida, no inspetor de propriedades, clique em Editar. Clique duas vezes (Windows) ou clique duas vezes com Command (Macintosh) no alocador de espaços do filme que você deseja editar. Clique com o botão direito do mouse (no Windows) ou com Control (Macintosh) no filme desejado e, no menu contextual, escolha Editar com Flash. O Dreamweaver inicia o Macromedia Flash MX e abre o arquivo FLA para edição. Se o Dreamweaver não puder localizar o arquivo FLA, ele solicita que você o abra. Observação: Se o arquivo FLA ou SWF estiver bloqueado, o Dreamweaver solicita que você verifique o arquivo, cancele a solicitação ou visualize-o. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 161

162 3 No Macromedia Flash MX, edite o filme. A janela de documento indica que você está modificando um filme do Dreamweaver. 4 Quando terminar de fazer as edições, clique em Concluir. As alterações do arquivo FLA de origem são salvas e o arquivo SWF é atualizado. 5 Efetue um dos procedimentos a seguir: Para visualizar o arquivo SWF atualizado no documento, clique em Reproduzir no inspetor de propriedades. Para visualizar a página em uma janela do navegador, pressione F12. Atualizar links em um arquivo SWF do Flash MX Você pode atualizar um link em um arquivo SWF na visualização do mapa do site do Dreamweaver. Para obter mais informações sobre a visualização do mapa do site, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como utilizar o mapa do site. Antes de criar um mapa do site, você deve configurar uma página inicial para o seu site. Na visualização de mapa do site, você deve exibir arquivos dependentes a fim de atualizar um link em um arquivo SWF. Por padrão, o mapa do site não mostra arquivos dependentes. Para obter informações sobre como exibir arquivos dependentes, veja a Ajuda do Dreamweaver > Como utilizar o Dreamweaver > Como mostrar e ocultar os arquivos do mapa do site. Quaisquer links atualizados pelo Dreamweaver no arquivo SWF são transmitidos para o documento FLA de origem quando uma ação iniciar e editar é realizada. O Dreamweaver registra automaticamente quaisquer alterações de link ao arquivo SWF nas Design Notes e quando o Macromedia Flash MX envia as alterações ao arquivo FLA, ele as remove das Design Notes. Para atualizar um link a uma URL em um arquivo SWF: 1 Configure uma página inicial para o site, se já não tiver feito. 2 Abra a visualização do mapa do site. 162 Capítulo 6

163 3 Para mostrar os arquivos dependentes, escolha Exibir > Mostrar os arquivos dependentes (Windows) ou Site > Visualização do mapa do site > Mostrar os arquivos dependentes (Macintosh). O link é exibido abaixo do arquivo SWF. 4 Altere o link seguindo um dos procedimentos abaixo: Para alterar o link no SWF selecionado, clique com o botão direito e, em seguida, selecione Alterar link. Na caixa de diálogo exibida na caixa de texto da URL, digite o novo caminho da URL. Para atualizar todas as ocorrências do link, selecione Site > Alterar o link no site inteiro. Na caixa de diálogo exibida, na caixa de texto Alterar todos os links a, procure ou digite o novo caminho do link que você está alterando e, no campo Em links a, procure ou digite o caminho da nova URL. 5 Clique em OK. Integração do Dreamweaver MX com a família de produtos Macromedia Studio MX 163

164 164 Capítulo 6

165 Parte IV Flash MX Parte IV Os capítulos da Parte IV apresentam o Macromedia Flash MX, possuem um tutorial e descrevem como o Flash trabalha com a família de produtos Studio MX. Os capítulos a seguir fazem parte desta seção: Capítulo 7, Bem-vindo ao Macromedia Flash MX Capítulo 8, Tutorial do Flash MX Capítulo 9, Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX

166

167 CAPÍTULO 7 Bem-vindo ao Macromedia Flash MX O Macromedia Flash MX é a ferramenta de criação de padrão profissional para produzir experiências de alto impacto na Web. Se você é um designer que cria logotipos animados, controles de navegação de Website ou animações de formulário longo ou um desenvolvedor de aplicativos que desenvolve Websites ou aplicativos para a Web, encontrará o poder e a flexibilidade do Macromedia Flash MX ideal para sua criatividade. O Macromedia Flash MX aumenta a criatividade fornecendo bibliotecas e modelos predefinidos aos designers. Utilizando símbolos e bibliotecas compartilhadas, os designers podem criar ilustrações poderosas enquanto mantém o tamanho de arquivo pequeno para a Web. Os aprimoramentos da linha de tempo tornam a criação de ilustrações animadas ainda mais fácil e o suporte melhorado para vídeo permite que você adicione clipes de filme aos seus projetos. Os usuários e negociantes da Internet estão demandando mais de seus investimentos na tecnologia de Internet e a capacidade de fornecer o valor real aos usuários está fazendo com que muitas empresas procurem modelos mais ricos para os aplicativos para a Internet modelos que combinam o poder da área de trabalho tradicional com a implementação e a natureza de conteúdo rico dos aplicativos para Web. As empresas também estão antecipando um crescimento no uso dos serviços da Web em relação a um mundo no qual os aplicativos necessitarão compartilhar a funcionalidade e os dados através de vários tipos de dispositivos de clientes. Estas tendências estão conduzindo a indústria em direção à próxima geração de clientes de nível. O Macromedia Flash MX e o Macromedia Flash Player estão liderando esta nova fase de inovação em aplicativos e conteúdo de Internet de clientes. A seção a seguir descreve como os novos recursos do Macromedia Flash MX habilitam os componentes cruciais de tecnologias de clientes de nível. Novidades do Macromedia Flash MX Os designers que exigem um alto nível de controle e uma maior integração com as ferramentas de design consagradas agora têm um aplicativo criativo sem igual para desenvolver materiais com vários recursos de mídia. Recursos novos e poderosos concedem aos desenvolvedores de aplicativos acesso a novos recursos que tornam o Macromedia Flash MX um ambiente de desenvolvimento de aplicativos poderoso e interessante. Os componentes predefinidos fornecem elementos de interface reutilizáveis do tipo arrastar-e-soltar para o conteúdo do Macromedia Flash, como caixas de listagem, botões de opção e barras de rolagem. Os desenvolvedores podem trabalhar com ferramentas avançadas de criação de scripts e depuração e criar referência de código interno para utilizar rapidamente aplicativos destinados à Web. 167

168 Para todos os usuários do Macromedia Flash MX A capacidade de salvar documentos do Macromedia Flash MX no formato Flash 5 permite atualizar agora e ainda colaborar com designers que estejam trabalhando em projetos do Flash 5. Veja a Ajuda do Flash > Usando o Flash > Salvando documentos do Flash. Conteúdos acessíveis que podem ser vistos e ouvidos por pessoas com deficiências agora são fáceis de desenvolver, expandindo o público de aplicativos e filmes do Macromedia Flash. Veja a Ajuda do Flash > Usando o Flash > Criando um conteúdo acessível. O suporte aos idiomas coreano e chinês amplia o alcance mundial do material produzido. Recursos como campos de texto verticais e suporte a Unicode facilitam a criação de material em idiomas asiáticos. Veja a Ajuda do Flash > Usando o Flash > Como criar texto. Para o designer do Macromedia Flash MX O Macromedia Flash MX aprimora a criatividade, fornecendo aos designers maior controle e mais recursos de integração ampliados com um rico conjunto de ferramentas de design. Novos recursos ajudam os designers a criar rapidamente uma ampla gama de conteúdo. Em vez de se preocuparem com o funcionamento do Macromedia Flash MX, eles podem concentrar-se no seu trabalho de criação. Os aprimoramentos da Linha de tempo, como pastas para organizar camadas, uma melhor resposta do ponteiro e a capacidade de redimensionar, recortar e colar vários quadros, facilitam o uso da Linha de tempo, agilizando seu trabalho e exigindo menos esforço. Veja a Ajuda do Flash > Usando o Flash > Sobre a Linha de tempo. A edição avançada de símbolos no local facilita a criação de documentos ao permitir que os designers trabalhem nos símbolos no contexto dos seus filmes. Novos controles acima do Palco tornam mais fácil do que nunca editar símbolos no local. Veja a Ajuda do Flash > Usando o Flash > Editando símbolos. Os aprimoramentos de biblioteca eliminam problemas de produção, simplificando a criação e a manipulação de símbolos de biblioteca. Mover símbolos ou pastas entre documentos do Macromedia Flash ou criar novos símbolos de biblioteca ficou tão fácil como arrastar. Veja a Ajuda do Flash > Usando o Flash > Trabalhando com bibliotecas comuns. A nova caixa de diálogo Resolver conflito de biblioteca simplifica a adição de símbolos de biblioteca a um documento que tenha um símbolo existente com o mesmo nome. Veja a Ajuda do Flash > Usando o Flash > Resolvendo conflitos entre propriedades de biblioteca. Os elementos de bibliotecas compartilhados aprimoram a criação de filmes do Macromedia Flash ao permitir o compartilhamento de elementos de bibliotecas com outros documentos do Macromedia Flash, seja durante a criação ou durante a reprodução de um filme no Macromedia Flash Player. As bibliotecas em tempo de execução compartilhadas ajudam a criar arquivos menores e fazem atualizações fáceis a vários filmes simultaneamente, possibilitando, assim, que seu filme mostre símbolos de biblioteca e objetos compartilhados armazenados em uma intranet ou na Internet. As bibliotecas compartilhadas durante a execução melhoram seu ritmo de trabalho, permitindo o rastreamento, a atualização e a troca de símbolos em um documento do Macromedia Flash disponível no seu computador ou na rede. Veja a Ajuda do Flash > Usando o Flash > Usando propriedades de biblioteca compartilhadas. 168 Capítulo 7

169 Os aprimoramentos do espaço de trabalho tornam o espaço de trabalho do Macromedia Flash MX mais gerenciável e fácil de compreender para designers novos e experientes. Os recursos mais usados agora aparecem em um Inspetor de propriedades relacionado ao contexto, eliminando a necessidade de acessar vários painéis, janelas e caixas de diálogo. Veja a Ajuda do Flash > Usando o Flash > Painéis e o Inspetor de propriedades. Outros recursos usados com freqüência agora aparecem em painéis que podem ser minimizados facilmente e que podem ser fixados ou liberados, conforme a necessidade, para conservar o espaço na tela. Os designers podem até salvar seus próprios layouts do painel para personalizar o espaço de trabalho do Macromedia Flash. Veja a Ajuda do Flash > Usando o Flash > Como utilizar painéis. Novos modelos iniciadores incluídos no Macromedia Flash MX simplificam a criação de novos documentos, eliminando várias tarefas comuns necessárias para iniciar um novo documento. Veja a Ajuda do Flash > Usando o Flash > Como criar um novo documento. Você também pode criar seus próprios modelos a partir de documentos. Veja a Ajuda do Flash > Usando o Flash > Salvando documentos do Flash. Os aprimoramentos do Misturador de cores tornam a criação, a edição e o uso de cores e gradientes mais fáceis que nunca. Veja a Ajuda do Flash > Usando o Flash > Trabalhando com cores sólidas e preenchimentos de gradiente no Misturador de cores. Lições abrangentes que abordam os novos recursos do Macromedia Flash MX facilitam a compreensão de suas ferramentas e seus recursos poderosos. Para obter uma introdução às lições, escolha Ajuda do Flash > Lições > Guia de introdução ao Flash. O suporte a vídeo expande as possibilidades criativas de filmes do Macromedia Flash, permitindo a importação de clipes de vídeo em vários formatos. Veja a Ajuda do Flash > Usando o Flash > Importando vídeo. A ferramenta Transformação livre abre novas possibilidades para a expressão da sua criatividade, permitindo combinar os efeitos de várias transformações de objetos de uma só vez. Veja a Ajuda do Flash > Usando o Flash > Transformando objetos livremente. O Modificador de envelopes permite criar facilmente objetos gráficos que seriam todavia complexos de serem criados, permitindo que você altere e distorça a forma da caixa delimitadora que os envolve. Veja a Ajuda do Flash > Usando o Flash > Modificando formas com o modificador de envelopes. A edição em nível de pixels adiciona precisão e brilho ao seu trabalho, possibilitando o alinhamento de objetos com precisão em nível de -pixels nos documentos do Macromedia Flash. Insira objetos ou pontos de objetos exatamente onde desejar que apareçam no filme final. Veja a Ajuda do Flash > Usando o Flash > Encaixe de pincel. O recurso Desmembrar facilita a criação de edições de caracteres de texto individuais sem precisar converter o texto em símbolos, simplificando a criação de animações e projetos complexos. Veja a Ajuda do Flash > Usando o Flash > Sobre transformação de texto. O comando Distribuir em camadas distribui qualquer número de objetos selecionados em suas próprias camadas de forma rápida e automática. Veja a Ajuda do Flash > Usando o Flash > Distribuindo objetos em camadas para animação interpolada. As camadas de máscara do clipe de filme permitem criar máscaras animadas ao inserir um clipe de filme em uma camada de máscara. Veja a Ajuda do Flash > Usando o Flash > Usando camadas de máscara. Também é possível usar o ActionScript para criar uma máscara animada com um clipe de filme. Veja a Ajuda do Flash > Usando o Flash > Usando clipes de filme como máscaras. Bem-vindo ao Macromedia Flash MX 169

170 Controles de som avançados aprimoram a qualidade de produção dos seus filmes, permitindo sincronizar eventos de filme com o início ou final de clipes de som. Veja a Ajuda do Flash > Usando o Flash > Sobre o evento onsoundcomplete. Para o desenvolvedor do Macromedia Flash MX O ambiente poderoso do Macromedia Flash MX inclui ferramentas avançadas de criação de scripts e depuração, referência de código interno e componentes predefinidos para desenvolver rapidamente aplicativos destinados à Web. O ActionScript avançado permite carregar arquivos de som JPEG e MP3 dinamicamente em tempo de execução e atualizar arquivos a qualquer momento sem a necessidade de publicar o filme novamente. Veja Inserindo uma arte no Flash e Importando sons na Ajuda do Flash > Usando o Flash. Pontos de âncora aperfeiçoam a navegação em filmes do Macromedia Flash, permitindo que os usuários usem os botões Avançar e Voltar dos navegadores para saltar de uma âncora para outra. Veja a Ajuda do Flash > Usando o Flash > Usando âncoras com nomes. O editor aprimorado do ActionScript torna mais fácil tanto para autores novatos quanto experientes acessar todo o potencial do ActionScript. Veja a Ajuda do Flash > Usando o Flash > Sobre scripts no ActionScript. Referências de código agilizam o desenvolvimento de conteúdos do ActionScript, detectando automaticamente o comando que você está digitando e oferecendo indicações para a sintaxe exata do comando. Veja a Ajuda do Flash > Usando o Flash > Usando referências de código. Os componentes do Macromedia Flash aceleram o desenvolvimento de aplicativos para a Web, fornecendo elementos de interface reutilizáveis do tipo arrastar-e-soltar para o conteúdo do Macromedia Flash, como caixas de listagem, botões de opção e barras de rolagem. Veja a Ajuda do Flash > Usando o Flash > Usando componentes. O depurador aprimorado combina os recursos de depuração já existentes a um depurador do ActionScript, permitindo definir pontos de interrupção e uma etapa única através do código durante a execução. Veja a Ajuda do Flash > Usando o Flash > Testando o filme. O modelo de objeto integra clipes de filmes, botões e campos de texto à linguagem de script orientada -a objetos ActionScript. Veja Trabalhando com clipes de filme e botões e Controlando texto com ActionScript na Ajuda do Flash > Usando o Flash. O modelo de evento torna a manipulação de eventos do ActionScript mais poderosa e fácil de compreender. Ele agora permite um controle mais sofisticado sobre eventos do usuário, como a movimentação do mouse e a entrada do teclado. Veja a Ajuda do Flash > Usando o Flash > Controlando o momento em que o ActionScript é executado. O recurso Visualização ao vivo de componentes possibilita exibir ativamente alterações em componentes da interface do usuário dentro do ambiente de criação. Veja a Ajuda do Flash > Usando o Flash > Componentes com visualização ao vivo. O suporte a texto avançado oferece um controle detalhado com o ActionScript sobre todas as propriedades de um objeto de texto, inclusive seu formato, tamanho e layout. Veja a Ajuda do Flash > Usando o Flash > Trabalhando com texto. A nova API de desenho aprimora o poder de programação orientada a objetos do ActionScript, oferecendo um conjunto de recursos de desenho de formas por meio do objeto MovieClip e permitindo um controle programático sobre o mecanismo de processamento do Macromedia Flash MX. Veja a Ajuda do Flash > Usando o Flash > Sobre o objeto MovieClip. 170 Capítulo 7

171 A igualdade estrita e os comandos de alternância permitem uma definição concisa de comandos de controles de fluxo, como if, then, and else, aumentando ainda mais o suporte do ActionScript à ECMA-262. Veja as entradas na Ajuda do Flash > Dicionário do ActionScript. As funções SetInterval e clearinterval permitem que os designers configurem uma rotina genérica que seja chamada em intervalos periódicos em toda a duração de um filme. Veja as entradas na Ajuda do Flash > Dicionário do ActionScript. A conversão dos objetos String, Array e XML em objetos nativos melhora o desempenho ao otimizar os objetos Number, Boolean, Object, String, Array e XML do ActionScript. O desempenho no Macromedia Flash Player é melhorado em até 100 vezes. Veja as entradas na Ajuda do Flash > Dicionário do ActionScript. A compactação SWF usa o código de compactação Z-lib existente para melhorar os tempos de download de material complexo do Macromedia Flash. Veja a Ajuda do Flash > Usando o Flash > Como publicar. Como fornecer experiências de nível para Web com o Macromedia Flash Player O Macromedia Flash Player é um ambiente de tempo de execução de alto desempenho para processamento de códigos, conteúdo gráfico e de áudio e comunicação de dados. Ele trabalha da mesma maneira através de qualquer combinação de sistemas operacionais, arquitetura de chips e navegadores da Web, suportando todos os ambientes populares de área e estação de trabalho. Cerca de 98% de usuários on-line possuem o Macromedia Flash Player instalado e um número crescente de dispositivos, como PDAs e telefones inteligentes, o suportam. Isto torna o Macromedia Flash Player a primeira escolha dos desenvolvedores para fornecer conteúdo de nível na mais variada maneira para o maior número de usuários. Os recursos técnicos avançados do Macromedia Flash MX e do Macromedia Flash Player são combinados para oferecer a você os recursos de implementação e o ambiente de desenvolvimento da Web mais poderosos disponíveis atualmente. A seguir encontra-se um resumo destes recursos: A saída de vetores gráficos resulta em arquivos menores, transmissão mais rápida e saída que pode ser dimensionada mais facilmente para uma variedade de dispositivos e formatos de saída. A entrega de conteúdo de fluxo carrega os primeiros quadros de conteúdo imediatamente, aumentando o desempenho real e percebido do aplicativo. O armazenamento de arquivo no cache, incluindo os dados de áudio e vídeo, permite que um aplicativo seja carregado imediatamente quando o usuário voltar a utilizá-lo durante uma sessão. Os objetos compartilhados no computador cliente armazenam dados complexos para reutilização através ou dentro de uma sessão do aplicativo. As transições visuais dinâmicas carregam novos elementos da interface em tempo de execução sem atualizar toda a página ou a tela. Os comportamentos e componentes personalizados de interface de usuário permitem criar controles de interface e adicionar comportamentos e dados dinâmicos a eles usando o ActionScript. Milhares de componentes de interface de usuário gratuitas estão disponíveis na comunidade de desenvolvedores do Macromedia Flash. Bem-vindo ao Macromedia Flash MX 171

172 Os serviços da Web do Macromedia Flash agora podem ser desenvolvidos usando o Macromedia ColdFusion MX, Java da Sun e Microsoft.Net para chamar a lógica e obter os dados dos serviços criados com o ActionScript de servidor ou CFML e implementada no Macromedia ColdFusion MX Server, assim como os serviços criados com Java Servlets, Java Classes, EJBs e.net Objects padrão. O suporte básico para integração de dados agora está disponível com o comando LoadVariables, assim como o suporte aprimorado para carregar e usar documentos do XML. O Macromedia Flash MX pode trabalhar com dados gerados da maioria dos ambientes de aplicativos de servidores. Os aplicativos independentes e off-line do Macromedia Flash MX podem ser executados fornecendo o aplicativo, seus dados e o Macromedia Flash Player completo. Como aprender sobre o Macromedia Flash MX O pacote do Macromedia Flash MX contém farto material para ajudá-lo a aprender o programa rapidamente e a dominar a criação de filmes do Macromedia Flash. Esse material é composto de uma versão eletrônica do manual, a Ajuda on-line exibida no navegador da Web, um painel de referência -interno do ActionScript, lições interativas e um Website atualizado regularmente. Além disso, há vários recursos de outros fabricantes disponíveis para designers e desenvolvedores. Sobre os manuais impresso e eletrônico do Macromedia Flash MX As informações exibidas na versão impressa do manual Usando o Flash são primeiramente destinadas aos usuários que estão nos primeiros três a seis meses de aprendizado e estão focados no uso das ferramentas e comandos do Macromedia Flash MX. As lições e os tutoriais on-line complementam essas informações. Os capítulos sobre o ActionScript explicam como escrever e criar interações com a linguagem de script do Flash. Uso da Ajuda do Macromedia Flash O Macromedia Flash MX contém dois sistemas de ajuda: Usando o Flash e o dicionário do ActionScript. Para obter o melhor resultado ao usar a Ajuda do Macromedia Flash, a Macromedia recomenda usar o Netscape Navigator 4.0 ou posterior ou o Microsoft Internet Explorer 4.0 ou posterior no Windows e o Netscape Navigator 4.0 ou posterior ou o Microsoft Internet Explorer 4.5 ou posterior no Macintosh. Se você usa um navegador da versão 3.0, todo o conteúdo de filmes e da Ajuda do Macromedia Flash ainda poderão ser acessados, mas alguns recursos (como o de Pesquisa) não funcionarão. A execução simultânea do Macromedia Flash MX e da Ajuda do Macromedia Flash em um Macintosh necessitar de até 32 MB de memória, dependendo das necessidades de memória do seu navegador. 172 Capítulo 7

173 Para usar a Ajuda do Macromedia Flash: 1 Escolha um dos sistemas de ajuda no menu Ajuda. 2 Navegue pelos tópicos da Ajuda utilizando um dos seguintes recursos: Conteúdo organiza as informações por assunto. Clique nas entradas de nível superior para exibir os subtópicos. Índice organiza informações como um índice impresso tradicional. Clique em um termo para saltar para um tópico relacionado. Localizar localiza qualquer seqüência de caracteres em todo o texto do tópico. Localizar requer um navegador 4,0 ou posterior compatível com Java. Para procurar uma frase, digite-a na caixa de entrada de texto. Para pesquisar os arquivos que contêm de duas palavras-chave (por exemplo, camadas e estilos), separe os termos da busca com um sinal de adição (+). Para procurar arquivos que contenham uma frase completa, separe as palavras por um espaço. Os botões Anterior e Próximo permitem a movimentação pelos tópicos de uma seção. O ícone do Macromedia Flash MX o vincula ao site do Centro de Suporte Flash na Web. Bem-vindo ao Macromedia Flash MX 173

174 Como usar as lições e tutoriais do Macromedia Flash MX As lições do Macromedia Flash MX oferecem instruções rápidas e interativas que apresenta você aos principais recursos do programa, permitindo praticar com exemplos isolados. Se você não conhece o Macromedia Flash MX ou usou somente um conjunto limitado de seus recursos, comece com as aulas. Os tutoriais do Macromedia Flash MX oferecem um aprendizado interativo abrangente que o ajuda a conhecer o programa e fornece informações detalhadas sobre determinados recursos poderosos do Macromedia Flash MX. O Tutorial de introdução ao Flash MX apresenta o fluxo de trabalho no Macromedia Flash MX mostrando como criar um filme básico. O tutorial parte do princípio que você conhece os tópicos cobertos nas lições. O Tutorial de introdução ao ActionScript ensina os princípios básicos do ActionScript, a linguagem orientada a objetos que o Macromedia Flash MX utiliza para adicionar interatividade a filmes. O Tutorial de introdução aos componentes tem o objetivo de apresentar componentes aos usuários iniciantes e intermediários do Macromedia Flash MX e de mostrar como é possível usálos para criar rapidamente um aplicativo simples. Antes de fazer esse tutorial, é necessário concluir as lições do Macromedia Flash MX, o Tutorial de introdução ao Macromedia Flash MX e o Tutorial de introdução ao ActionScript ou conhecer o ActionScript. Para iniciar as lições: Escolha Ajuda > Lições > Guia de introdução ao Flash. Para iniciar um tutorial, siga um destes procedimentos: Escolha Ajuda > Tutoriais > Introdução ao Flash MX. Escolha Ajuda > Tutoriais > Introdução ao ActionScript. Escolha Ajuda > Tutoriais > Introdução ao componentes. O primeiro tutorial também está disponível no capítulo 8 deste manual, Introdução ao tutorial do Macromedia Flash MX. Uso de recursos adicionais da Macromedia O site Centro de Suporte Flash na Web é atualizado periodicamente com as últimas informações sobre o Macromedia Flash, além de recomendações de usuários experientes, tópicos avançados, exemplos, dicas e outras atualizações. Visite o Website com freqüência para obter as últimas novidades sobre o Macromedia Flash e informações sobre aproveitar o programa integralmente em O painel Referência do ActionScript fornece informações detalhadas sobre a sintaxe e o uso do ActionScript. A estrutura hierárquica das informações permite localizar com facilidade as informações específicas necessárias. Para exibir o painel Referência do ActionScript: Escolha Janela> Referência. 174 Capítulo 7

175 Recursos de terceiros A Macromedia recomenda vários Websites com links para recursos de terceiros no Macromedia Flash MX. Sites da comunidade Macromedia Flash Livros do Macromedia Flash Conceitos de programação orientada a objetos Bem-vindo ao Macromedia Flash MX 175

176 176 Capítulo 7

177 CAPÍTULO 8 Tutorial do Flash MX Este tutorial o guia através do processo de criação de um exercício prático com Web, que requer atenção, com o Macromedia Flash MX. Ao concluir o tutorial, você terá aprendindo como projetar um filme, desde a abertura de um documento novo até a publicação do filme para reprodução na Web. O tutorial leva aproximadamente três horas para ser concluído, dependendo da sua experiência e você aprenderá como realizar as seguintes tarefas: Analisar um filme completo Definir as propriedades do documento e criar um dégradé Criar e mascarar uma ilustração vetorial Interpolarizar efeitos de bitmap dentro de um clipe de filme Carregar texto dinâmico Modificar botões e adicionar navegação Adicionar sons de eventos e fluxo de som Testar e publicar o filme Recomendamos que conclua, em ordem seqüencial, as oito seções que compreendem os tutoriais, mas você pode preferir olhar somente as seções de seu interesse. Se você realizar as seções do tutorial fora de ordem, tenha em mente que as últimas seções partem do princípio que você domina o que foi apresentado nas seções anteriores. O que você deve saber Antes de iniciar o tutorial, conclua as sete lições encontradas na Ajuda do Flash. Essas lições interativas criadas no Macromedia Flash MX apresentam os conceitos que você precisa saber para concluir o tutorial. Os tópicos das lições incluem os seguintes: Guia de introdução do Flash Ilustrar em Flash Adicionar e editar texto Criar e editar símbolos Entender camadas Criar botões Criar animação interpolada Para assistir uma lição, escolha Ajuda > Lições e, em seguida, selecione-a na lista. 177

178 Visualizar o filme concluído Você pode abrir uma versão concluída do filme tutorial para entender melhor como o seu arquivo concluído aparecerá. Nesta seção, você realizará as seguintes tarefas: Analisar o filme concluído usando o inspetor de propriedades e o Movie Explorer Examinar um clipe de filme e distingüir a sua relação com o filme principal Visualizar os tipos de propriedades incluídas no filme 1 Na pasta do aplicativo Flash, navegue para Tutorials/FlashIntro e clique duas vezes em stiletto.swf para abrir o filme concluído no Macromedia Flash Player independente. Os filmes publicados do Flash possuem a extensão.swf; os documentos no ambiente de criação possuem a extensão.fla. 2 Quando o filme abrir, veja as três imagens do carro aparecerem lentamente (Fade In) e desaparecerem lentamente (Fade out). Você criará esta animação interpolando efeitos de bitmap dentro de um clipe de filme. 3 Ouça o som que é reproduzido continuamente enquanto o filme é reproduzido. Esse é um exemplo de um som com fluxo constante. 4 Passe o cursor sobre os três botões situados na extremidade direita inferior da janela para ver o efeito de rollover e para ouvir os sons de evento incluídos em cada botão. 5 Clique em um botão para ver qual é o seu link e, em seguida, feche o navegador que abriu e volte ao arquivo SWF. 6 Após ver o filme, clique em sua caixa de fechar. 178 Capítulo 8

179 Analise o arquivo stiletto.fla É útil analisar o arquivo FLA concluído para ver como o autor projetou o documento. Para analisar o arquivo, você pode ver as propriedades de um objeto, ver a Linha de tempo e o Palco, ver as propriedades da biblioteca e usar o Movie Explorer. 1 No Macromedia Flash, escolha Arquivo > Abrir. Navegue para a pasta de aplicativos do Flash e abra Tutorials/FlashIntro/stiletto.fla. Agora, você vê o filme do tutorial completo no ambiente de criação. Arraste a barra que separa o Palco da Linha de tempo 2 Para visualizar todas as camadas na Linha de tempo, arraste para baixo a barra que separa o Palco da Linha de tempo. 3 Na Linha de tempo, desbloqueie a camada Copiar e a camada Imagens. Tutorial do Flash MX 179

180 Visualize as propriedades do documento O inspetor de propriedades permite que você visualize as especificações dos objetos selecionados. As especificações dependem do tipo de objeto selecionado. Se você selecionar um objeto de texto, por exemplo, as configurações para visualizar e modificar os atributos de texto aparecem. 1 Se o inspetor de propriedades ainda estiver fechado, escolha Janela > Propriedades. 2 No Palco, se necessário, role para baixo e selecione o bloco retangular onde o texto descritivo apareceu no arquivo concluído SWF. O texto não aparece no arquivo FLA porque é carregado de um arquivo TXT externo para um campo de texto dinâmico. Caixa de texto No inspetor de propriedades, você pode visualizar o tamanho, estilo e cores do texto, entre outros atributos. Se o inspetor de propriedades não estiver totalmente expandido, clique no triângulo branco no canto direito inferior. 3 No Palco, selecione o carro. As configurações de clipe de filme substituem as configurações de texto. Os clipes de filme são símbolos com as suas próprias Linhas de tempo independentes. Pense neles como filmes dentro de filmes. 180 Capítulo 8

181 Visualize o clipe do filme Agora, você abrirá o modo de edição de símbolo para visualizar a Linha de tempo para um clipe de filme. 1 No Palco, clique duas vezes no clipe do filme do carro. Conforme aprendido na lição Criar animação interpolada, você define as mudanças em animação em quadros-chave. Ao rolar pela Linha de tempo, observe quais camadas têm quadros-chave e quais quadros são quadros-chave. Os quadros-chave iniciais e intermediários que incluem conteúdo são indicados na Linha de tempo por círculos sólidos, os quadros-chave finais aparecem como pequenos retângulos delineados. 2 Na Linha de tempo, selecione o indicador de reprodução e arraste-o lentamente ao longo dos quadros. Veja como as mudanças de ação no Palco correspondem às mudanças na Linha de tempo. Conforme você arrasta o indicador de reprodução, o filme é reproduzido seqüencialmente. É possível adicionar o ActionScript, a linguagem de script do Macromedia Flash, a filmes que fazem o indicador de reprodução pularem para quadros específicos. 3 Ao terminar o clipe do filme, realize um dos seguintes procedimentos para voltar ao filme principal: Escolha Editar > Editar documento. Clique no botão Voltar. Clique em Cena 1 acima de Palco. Visualize propriedades da biblioteca O painel Biblioteca contém os símbolos e os objetos importados do seu documento. 1 Se o painel Biblioteca não estiver aberto, escolha Janela > Biblioteca. 2 Se necessário, arraste o painel Biblioteca para ampliá-lo, para visualizar os objetos dentro da biblioteca. 3 Se a pasta Gráficos não estiver expandida, clique duas vezes para visualizar os objetos na pasta. 4 Clique em view1.png para visualizar a imagem na área de visualização na parte superior do painel Biblioteca. 5 Expanda as outras pastas no painel Biblioteca para visualizar as propriedades incluídas no documento, como botões e clipes de filme. Tutorial do Flash MX 181

182 6 Quando você terminar de visualizar as propriedades, feche o painel Biblioteca. Analise a estrutura de filme com o Movie Explorer O Movie Explorer ajuda a organizar, localizar e editar mídia. Com a sua estrutura hierárquica de árvore, o Movie Explorer fornece informações sobre a organização e fluxo de um filme, especialmente úteis quando você analisa um filme criado por outra pessoa. 1 Se o Movie Explorer ainda não estiver aberto, escolha Janela > Movie Explorer. 2 Se necessário, amplie o Movie Explorer para visualizar a estrutura de árvore dentro do painel. Os botões de filtragem do Movie Explorer exibem ou ocultam informações. 182 Capítulo 8

183 3 Clique no menu pop-up na barra de títulos do Movie Explorer e verifique se Mostrar elementos do filme e Mostrar definições de símbolos estão selecionados. 4 Desmarque o botão Mostrar quadros e camadas na parte superior do Movie Explorer. Verifique se os únicos botões de filtro selecionados são Mostrar texto, Mostrar botões, Clipes de filme e gráfico; Mostrar ActionScripts e Mostrar vídeo, sons e bitmaps. 5 Examine a lista para visualizar algumas das propriedades incluídas no filme e para ver a relação delas com outras propriedades. 6 Para expandir um objeto ou categoria, clique no botão Mais (+) à esquerda do nome 7 Selecione o botão Mostrar quadros e camadas de filtro. Role para baixo para a categoria Definições de símbolos. Com a categoria expandida, clique duas vezes no clipe de filme Animação de carro. Agora, você está no modo de edição de símbolos do clipe de filme. Tutorial do Flash MX 183

184 8 No Movie Explorer, com a categoria Animação de carro selecionada e expandida, expanda o ícone Visualização 3 Fade e, em seguida, clique duas vezes no Quadro 60. Na Linha de tempo do clipe do filme, o indicador de reprodução move para o Quadro 60 da camada Visualização 3 Fade. Para visualizar um item listado na árvore hierárquica, clique no ícone correspondente. Se você clicar em um ícone de quadro, o indicador de reprodução move para o mesmo quadro na Linha de tempo. Se você clicar em uma propriedade, como uma imagem bitmap, o inspetor de propriedades exibe as configurações da imagem. Clicar duas vezes em um ícone que representa um símbolo abre o modo de edição de símbolos. 9 Feche o Movie Explorer. Para fechar o documento, escolha Arquivo > Fechar. Se você tiver feito alterações no arquivo, não as salve. Definir as propriedades para um novo documento e criar um fundo de dégradé Para aprender como criar um filme no Macromedia Flash, vamos iniciar no primeiro passo no processo: abrir um novo arquivo. Ao concluir essa seção, você terá aprendido como realizar as seguintes tarefas: Abrir um novo arquivo e definir as propriedades do documento Criar e transformar um fundo dégradé Abrir um novo arquivo Agora, você está pronto para criar a sua própria versão do filme tutorial. 1 Escolha Arquivo > Novo. 2 Escolha Arquivo > Salvar como. 3 Nomeie o arquivo mystiletto.fla e salve-o na pasta do seu aplicativo Flash, na subpasta Tutorials/FlashIntro/My_Stiletto. Observação: Conforme você completa o tutorial, lembre-se de salvar o seu trabalho com freqüência. 184 Capítulo 8

185 Definir as propriedades do documento Configurar as propriedades do documento é a primeira etapa comum na criação. Você pode usar o inspetor de propriedades e a caixa de diálogo Propriedades do documento para especificar as configurações que afetam todo o filme, como a taxa de reprodução dos quadros por segundo (qps) e o tamanho do Palco e cor de fundo. 1 Se o inspetor de propriedades ainda estiver fechado, escolha Janela > Propriedades. No inspetor de propriedades, verifique se 12 é o número na caixa de texto Taxa de Quadros. O filme será reproduzido em 12 quadros por segundo, uma ótima taxa de quadros para reproduzir animações na Web. Observação: Se o inspetor de propriedades não estiver totalmente expandido, clique no triângulo branco no canto direito inferior. 2 A caixa Cor de Fundo indica a cor do Palco. Clique na seta para baixo na caixa Cor de Fundo e, em seguida, mova a ferramenta Conta-gotas sobre as amostras de cores para visualizar os seus valores hexadecimais na caixa de texto Hexadecimal. 3 Localize e clique na amostra de cor cinza com o valor hexadecimal Caixa de texto Hexadecimal Selecione este tom de cinza 4 Para redimensionar o Palco, clique no botão Tamanho, que indica o tamanho do Palco. Na caixa de diálogo Propriedades do documento, digite 640 px na primeira caixa de texto Dimensões e 290 px na segunda caixa de texto Dimensões. Verifique se Pixels está selecionado no menu popup e, em seguida, clique em OK. As dimensões Palco mudam para refletir as novas configurações de 640 x 290 pixels. Tutorial do Flash MX 185

186 Especificar configurações de grade No Palco, você pode alinhar objetos ao longo das linhas de grade horizontais e verticais. Mesmo quando a grade não estiver visível, você pode encaixar objetos nela. Agora, você modificará a distância entre as linhas de grade horizontais e verticais e criará uma grade em alinhamento com as bordas do Palco. 1 Escolha Visualizar > Grade > Editar grade. 2 Na caixa de diálogo Grade, digite 10 px na caixa de texto de largura de grade e 10 px na caixa de texto de altura de grade. 3 Selecione Encaixar na grade e verifique se Mostrar grade não está selecionado. Os objetos agora se encaixarão na grade, mesmo quando a grade não estiver visível. 4 Verifique se Normal está selecionado em Precisão do encaixe e clique em OK. A precisão do encaixe determina a proximidade que um objeto precisa ter de uma linha de grade antes de encaixar nela. Criar um fundo de dégradé Um dégradé exibe variações sutis de uma cor ou transições entre duas ou mais cores. No arquivo tutorial completo, o fundo é um dégradé que mistura preto e azul escuro com uma área transparente que permite que parte da cor cinza do Palco seja exibida. Você consegue esse efeito usando o Misturador de cores. Observação: Enquanto dégradés oferecem efeitos interessantes em filmes, o uso excessivo de dégradés pode reduzir a velocidade do processador do computador e diminuir a velocidade na qual a animação é reproduzida. Ao projetar um filme, considere os seus requisitos artísticos e de desempenho para determinar o melhor uso dos dégradés. Desenhar um retângulo Antes no tutorial, você criou uma grade alinhada no Palco que permitiu que você encaixasse os objetos nas linhas de grade. Agora, você desenhará um retângulo que se encaixa na área externa da grade no Palco. 1 No menu pop-up acima do lado direito do Palco, insira 75% para visualizar todo o Palco. Esta configuração indica a sua visualização ampliada ou reduzida do Palco. A configuração não afeta o tamanho real do Palco no seu filme, que você especificou na caixa de diálogo Propriedades do documento. 186 Capítulo 8

187 2 Na caixa de ferramentas, selecione a ferramenta Retângulo. 3 Na caixa de ferramentas, clique no controle Cor do Traço. Selecione Sem Traço (o botão com a linha diagonal vermelha acima da paleta de cores). A cor de preenchimento selecionada da forma não é importante, você logo mudará a cor. 4 Iniciando do canto superior esquerdo do Palco, arraste para o canto inferior direito do Palco para desenhar um retângulo que cobre o Palco. Quando você solta o ponteiro, o retângulo encaixa nas extremidades do Palco, ao longo da grade oculta. Observação: Ao concluir o tutorial, você poderá considerar útil desfazer uma alteração feita anteriormente. O Flash pode desfazer várias alterações recentes, dependendo do número de níveis de desfazer que você definiu em Preferências. Para desfazer, escolhar Editar> Desfazer ou pressione Control+Z (Windows) ou Command+Z (no Macintosh). Por outro lado, você pode refazer o que desfez escolhendo Editar> Refazer ou pressionar Control+Y (Windows) ou Command+Y (Macintosh). Especifique uma cor para o dégradé O azul escuro é a primeira cor que você adicionará ao seu dégradé. 1 Na caixa de ferramentas, selecione a ferramenta Seta. No Palco, clique dentro do retângulo para selecionar o preenchimento. Quando você desenhou o retângulo, o inspetor de propriedades exibiu as propriedades da ferramenta Retângulo. Quando você selecionar uma forma que já tiver sido criada, o inspetor de propriedades exibe as propriedades da forma. Tutorial do Flash MX 187

188 2 Se o Misturador de cores não estiver aberto, escolha Janela > Misturador de cores. 3 Para expandir o Misturador de cores, clique na seta branca na barra de títulos do painel. Clique aqui para expandir o painel 4 Se o Misturador de cores não estiver totalmente expandido, clique na seta no lado direito inferior do painel. 5 No menu pop-up Estilo de preenchimento, selecione Radial. 6 Clique no controle deslizante de dégradé à esquerda da barra de dégradé para selecioná-lo. Barra de dégradé Controle deslizante de dégradé 188 Capítulo 8

189 7 Clique na caixa de cores no canto superior esquerdo da janela para abrir a paleta de cores. Use um dos seguintes métodos para selecionar azul escuro: Digite na caixa de texto de valor hexadecimal e pressione Enter ou Return. Mova o conta-gotas sobre as amostras de cores até você encontrar o azul escuro com o valor hexadecimal de e, em seguida, clique na amostra para selecioná-la. Clique neste tom de azul Altere o valor alfa No Misturador de cores, a caixa de texto Alfa indica a transparência da cor, com 0% indicando que a cor é completamente transparente e 100% indicando que a cor é completamente opaca. Você especificará um valor alfa de 0% para criar um dégradé que inclui azul escuro e preto com a cor cinza do Palco que é exibida nas áreas transparentes do dégradé. No Misturador de cores, digite 0 na caixa de texto Alfa e pressione Enter ou Return ou mova o controle deslizante Alfa para 0. Tutorial do Flash MX 189

190 Adicione uma segunda cor dégradé Agora, você adicionará preto ao dégradé. 1 No Misturador de cores, clique no controle deslizante de dégradé à direita da barra de dégradé para selecioná-lo. 2 Clique na caixa de cores para abrir a paleta de cores e selecionar o preto, com o valor hexadecimal Lembre-se, você pode digitar o valor hexadecimal na caixa de texto Hexadecimal e pressionar Enter ou Return ou pode encontrar e selecionar a amostra de cor com o mesmo valor hexadecimal. Transformar o preenchimento de dégradé Quando transforma um objeto, você o gira, redimensiona ou o inclina. Você pode transformar um preenchimento usando a ferramenta Transformar preenchimento. 1 Na caixa de ferramentas, selecione a ferramenta Transformar preenchimento. No Palco, clique em qualquer lugar dentro do retângulo. Uma elipse que indica a forma e local do dégradé aparece ao redor do Palco. A elipse tem controles para o local, largura, dimensão e rotação do dégradé radial. Posicionamento central Largura Dimensão Rotação 190 Capítulo 8

191 2 Arraste o controle central para a esquerda do Palco de forma que ele fique em aproximadamente 1/3 da distância da extremidade esquerda do Palco, como mostra a ilustração seguinte. Conforme você altera a forma e posicionamento da elipse, a forma e posicionamento das transições de cor do Palco mudam de acordo. 3 Arraste a alça do quadrado na elipse que controla a largura do dégradé para a esquerda para tornar a elipse mais estreita, a forma aproximada da elipse é mostrada na ilustração seguinte. Tutorial do Flash MX 191

192 4 Arraste a alça média circular, que controla o tamanho do dégradé, para a direita para tornar a elipse maior, como mostrado na ilustração seguinte. 5 Arraste a alça circular inferior, que controla a rotação da elipse, para a esquerda para girar a elipse para o ângulo aproximado mostrado na ilustração seguinte. 192 Capítulo 8

193 Denomine e bloqueie uma camada A forma dégradé aparece na Camada 1 na Linha de tempo, atualmente a única camada em seu documento. Em preparação para a adição e movimentação de objetos adicionais no Palco, você denominará e bloqueará a camada. Na próxima seção do tutorial, você criará uma nova camada. Conforme foi aprendido na lição Entender camadas, através do bloqueio da camada, fica assegurado que você ou outros usuários não façam mudanças por descuido em objetos na camada. 1 Na Linha de tempo, clique duas vezes no nome Camada 1 e digite Fundo para renomear a camada. 2 Clique longe do nome da camada e, em seguida, clique no ícone de cadeado para bloquear a camada. Criar e mascarar uma ilustração vetorial Quando você desenha no Macromedia Flash, cria um desenho vetorial, que é uma representação matemática de linhas, curvas, cores e posição. A ilustração vetorial é independente de resolução, você pode redimensioná-la para qualquer tamanho ou exibi-la com qualquer resolução sem perda de nitidez. Além disso, ilustrações vetoriais são carregadas mais rapidamente em comparação com imagens bitmap. Junto com o dégradé, o arquivo terminado contém formas de fundo. Você usará a ferramenta Oval para criar as formas. Especificamente, nesta seção, você aprenderá como realizar as seguintes tarefas: Adicionar uma camada Criar e cortar formas Mascarar a camada que contém as formas Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos Flash e abrir Tutorials/FlashIntro/stiletto2.fla. Se você usar o arquivo stiletto2.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. Adicionar uma camada Em vez de criar as formas na camada Fundo, você adicionará uma nova camada na qual você pode desenhar as formas. 1 Para adicionar uma nova camada, escolha Inserir > Camada ou clique no botão Inserir camada. Denomine a nova camada Formas. Botão Inserir camada Tutorial do Flash MX 193

194 2 Na caixa de ferramentas, selecione a ferramenta Oval. 3 No inspetor de propriedades, selecione Linha muito fina no menu pop-up Estilo do traço. Clique no controle Cor do traço. Na paleta de cores, selecione o cinza com o valor hexadecimnal Lembre-se, você pode inserir o valor hexadecimal na caixa de texto hexadecimal ou encontre e clique a amostra de cor com o mesmo valor hexadecimal. 4 Se o Misturador de cores não estiver aberto, escolha Janela > Misturador de cores. No menu pop-up Estilo de preenchimento, selecione Sólido. Clique no controle Cor de preenchimento para selecioná-lo. No campo R (vermelho), digite 109. Nas caixas de texto G (verde) e B (azul), digite 45 e, em seguida, pressione Enter ou Return. Você está especificando os valores para a quantidade de vermelho, verde e azul dentro de uma cor. 5 Na Linha de tempo, verifique se a camada Formas está selecionada. No Palco, limite o oval a um círculo mantendo Shift pressionado conforme você arrasta, para desenhar um círculo que se estende da área da tela acima do Palco para a tela abaixo do Palco. Observação: Se tiver cometido um erro, escolha Editar > Desfazer e tente novamente. 6 Selecione a ferramenta Seta na caixa de ferramentas e, em seguida, clique duas vezes no círculo no Palco para selecionar o traço e o preenchimento. 7 Se o painel Transformar não estiver aberto, escolha Janela > Transformar. 194 Capítulo 8

195 8 Para expandir o painel Transformar, clique na seta branca no lado esquerdo superior. Selecione Inclinar e digite 20.0 na caixa de texto Inclinar horizontalmente e, em seguida, pressione Enter ou Return. O círculo que você desenhou muda para um oval inclinado. Criar e transformar uma forma duplicada Agora, você criará e transformará um oval duplicado. 1 Com o preenchimento oval e traço ainda selecionado no Palco, escolha Editar > Duplicado. Tutorial do Flash MX 195

196 2 No inspetor de propriedades, use o controle Cor de preenchimento para selecionar preto. 3 Na caixa de ferramentas, selecione a ferramenta Transformar preenchimento. Um guia com alças aparece ao redor do oval duplicado. 4 Mova o ponteiro sobre a alça de um canto até que apareça um indicador diagonal com setas nas duas extremidades. Arraste a alça de canto para dentro para tornar o oval menor. Verifique se o traço do oval interno não está tocando o traço do oval externo. 196 Capítulo 8

197 5 Mova o seu ponteiro sobre a alça do canto até que o ponteiro mude para um indicador de rotação circular. Arraste o indicador de rotação para a esquerda para girar o oval para a posição aproximada mostrada na ilustração seguinte. Criar um corte com o duplicado Quando você cria uma forma sobre uma outra na mesma camada e as duas formas têm cores diferentes e não estão agrupadas, a forma em cima corta a área da forma de baixo. Você excluirá o oval duplicado para visualizar o efeito de corte. 1 Com a guia da ferramenta Transformação livre ao redor do oval duplicado, clique em qualquer lugar no Palco ou na tela distante das formas e, em seguida, clique no preenchimento do oval interno. Pressione Delete no teclado para excluir o preenchimento. Agora, o oval tem um traço externo e um interno. Tutorial do Flash MX 197

198 2 Com a ferramenta Seta, clique no traço externo no oval para selecioná-lo e, em seguida, clique com Shift para selecionar o traço interno também. Arraste os traços levemente para a direita do preenchimento, como mostra a ilustração a seguir. Cada área da cor de preenchimento dentro da área cortada pelo traço representa agora um segmento discreto que você pode colorir individualmente. 3 Selecione uma área do preenchimento da forma e use o Misturador de cores para alterar a cor de preenchimento para um tom de marrom com o valor de R (vermelho) como 117, o valor de G (verde) como 78 e o valor de B (azul) como 53. Se desejado, repita esta etapa para alterar uma outra área de preenchimento para o tom mais claro de marrom, como mostra a ilustração a seguir: 198 Capítulo 8

199 4 Selecione a ferramenta Transformação livre. Arraste ao redor das formas de fundo ovais para selecionar todas as formas e, em seguida, arraste a alça do canto direito da guia para ampliar as formas, como mostra a ilustração a seguir. 5 Arraste as formas no Palco de forma que parte da curva seja exibida no canto esquerdo superior e no lado direito do Palco. Observação: Conforme você completa o tutorial, lembre-se de salvar o arquivo com freqüência. Tutorial do Flash MX 199

200 Criar uma máscara A ilustração criada na camada Formas sai do Palco, indo para a área da tela. Apesar da área da tela não aparecer no seu filme publicado, o desenho fora do Palco pode causar distração no ambiente de criação. Apesar de você poder apagar parte das formas que entram na tela, uma solução melhor é aplicar uma máscara no Palco para que somente a área sob a máscara todo o Palco, nesse caso continua visível. Desta forma, se você quiser voltar às formas para modificá-las, elas ficarão intactas. 1 Com a camada Formas selecionada, adicione uma nova camada na Linha de tempo e denomine-a Máscara. 2 Na caixa de ferramentas, selecione a ferramenta Retângulo e desenhe um retângulo que se estende do canto esquerdo superior do Palco até o canto direito inferior. Este retângulo é a forma da sua máscara. Qualquer coisa abaixo do retângulo estará visível. 200 Capítulo 8

201 3 Clique com o botão direito do mouse (no Windows) no objeto ou clique com Control (Macintosh) no nome da camada Máscara na Linha de tempo e escolha Máscara no menu contextual. A camada é convertida para uma camada de máscara, indicado por um ícone de seta para baixo. A camada imediatamente abaixo dela está ligada à camada de máscara e o seu conteúdo é exibido em toda a área preenchida na máscara. O nome da camada mascarada é recuado e o seu ícone muda para uma seta apontando para direita. O desenho na tela não fica mais visível no Palco. As camadas de máscara precisam estar bloqueadas para que o efeito Máscara seja exibido. Para editar as formas, você pode desbloquear as camadas Máscara e Formas de fundo. Ao terminar de editar o desenho, bloqueie as camadas novamente para invocar a máscara. 4 Salve o arquivo. Tutorial do Flash MX 201

202 Interpolarizar efeitos de bitmap dentro de um clipe de filme Além de criar desenhos vetoriais no Macromedia Flash, você pode importar imagens bitmap, que usam pixels para exibir imagens gráficas, para o filme Flash e aplicar vários efeitos de cores. Nesta seção, você realizará as seguintes tarefas: Importar imagens bitmap Modificar compactação de bitmap Criar e editar um símbolo de clipe de filme Interpolar efeitos de bitmap para fazer aparecer lentamente (fade in) e desaparecer lentamente (fade out) as imagens do carro. Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos Flash e abrir Tutorials/FlashIntro/stiletto3.fla. Se usar o arquivo stiletto3.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. Importar imagens para a biblioteca Ao importar um arquivo para o Macromedia Flash, você pode importá-lo diretamente para a biblioteca. 1 Na Linha de tempo, adicione uma nova camada e denomine-a Imagens. 2 Escolha Arquivo > Importar para biblioteca. Quando você seleciona Importar para biblioteca em vez de Importar, as imagens precisam ser colocadas no Palco antes de aparecerem. 3 Navegue para a sua pasta Tutorials/FlashIntro/Assets dentro da pasta do aplicativo Flash e selecione view1.png e, em seguida, clique com Shift para adicionar view2.png e view3.png à seleção. Clique em Abrir. 4 Na caixa de diálogo Configurações de importação de PNG, clique em Importar como único bitmap nivelado e, em seguida, clique em OK. As três imagens agora estão na biblioteca. 202 Capítulo 8

203 Modificar compactação de bitmap Ao importar uma imagem, você pode verificar e modificar as configurações que compactam a imagem. Apesar da compactação de imagens reduzir o tamanho do arquivo do filme, a compactação pode afetar a qualidade da imagem; o objetivo é buscar um equilíbrio entre as configurações de compactação e qualidade de imagem. 1 Se o painel Biblioteca não estiver aberto, escolha Janela > Biblioteca. Amplie a janela, se necessário, para ver os três arquivos importados. 2 Clique duas vezes no arquivo view1.png. A compactação JPEG é a seleção padrão. 3 No menu pop-up Compactação, selecione Sem perda (PNG/GIF) para obter maior qualidade de imagem. 4 Para testar como a imagem aparece com a nova configuração, clique em Testar. Se necessário, arraste o carro para que seja visualizado na janela de visualização. Quando você terminar de visualizar a imagem, clique em OK. 5 Volte para o painel Biblioteca. Clique duas vezes em view2.png e repita a etapa 3 e, em seguida, clique em OK. 6 No painel Biblioteca, clique duas vezes em view3.png e especifique Sem perda (PNG/GIF) e, em seguida, clique em OK. Tutorial do Flash MX 203

204 Criar um símbolo de clipe de filme No arquivo concluído, as três visualizações do carro elétrico aparecem lentamente (fade in) e desaparecem lentamente (fade out) na cena de abertura. Este efeito é obtido pela criação do símbolo do clipe de filme que tem uma Linha de tempo independente da Linha de tempo principal. Em seguida, você interpola a transparência alfa entre as três visualizações do carro para criar um efeito de aparecer/desaparecer lentamente (fade in/fade out). Para começar a criar o efeito, você criará o clipe de filme. 1 Com a camada Imagens ainda selecionada na Linha de tempo, arraste o objeto view1.png do painel Biblioteca para o Palco, colocando o carro dentro da área onde o fundo dégradé é mais claro. 2 Escolha Inserir > Converter em Símbolo ou pressione F8. 3 Na caixa de diálogo Converter em Símbolo, denomine o símbolo Animação de Carro. Verifique se o clipe de filme está selecionado e se o quadrado central está selecionado no indicador de Registro e, em seguida, clique em OK. Os bitmaps, como todos os outros objetos Macromedia Flash, têm pontos de registro usados para posicionamento e transformação. Quando você alinha as três visualizações do carro dentro do clipe de filme, todas as três visualizações devem ser alinhadas relativamente a um ponto de registro central. Ponto de registro 204 Capítulo 8

205 Editar um símbolo Para visualizar a Linha de tempo do clipe de filme, você precisa estar no modo de edição de símbolo. Você pode abrir o modo de edição de símbolo clicando duas vezes no símbolo no Palco ou no painel Biblioteca. 1 No Palco, clique duas vezes no carro para abrir o modo de edição de símbolo. O nome do símbolo aparece acima da área da tela, com o vínculo à Cena 1, que faz com que você volte ao filme principal. No modo de edição de símbolo, você visualiza a Linha de tempo do clipe de filme, em vez da Linha de tempo do filme principal. 2 Renomeie a Camada 1 Visualização 1 Fade. 3 O carro que você vê no Palco é uma imagem bitmap, não um símbolo, dentro do símbolo de Animação de carro. Torne o carro um símbolo selecionando-o no Palco e pressionando F8. 4 Na caixa de diálogo Converter em Símbolo, dê nome ao símbolo Visualização 1 Carro e, em seguida, verifique se o Clipe de Filme está selecionado. 5 Verifique se o quadrado central está selecionado no indicador de Registro e clique em OK. 6 Role horizontalmente ao longo da Linha de tempo até ir ao Quadro 105. Selecione o quadro e escolha Inserir > Quadro-chave ou pressione F6 para adicionar um quadro-chave. O indicador Quadro atual exibe o quadro selecionado. Quadro atual 7 Adicionar quadros-chave aos Quadros 25 e Adicione um quadro-chave ao Quadro 34 e, em seguida, clique em qualquer lugar na camada entre os Quadros 36 e 104 e pressione Delete no teclado. Um quadro-chave vazio aparece no Quadro 35 e o carro não aparece no Palco a partir do quadro 35. Observação: Se você cometer um erro ao adicionar quadros-chave e desejar excluí-los, selecione um ou mais quadros e clique com o botão direito (Windows) ou clique com Control (Macintosh) e, em seguida, escolha Limpar quadro-chave no menu contextual. Tutorial do Flash MX 205

206 Interpolar efeitos bitmap Criar um efeito bitmap é semelhante a criar uma interpolação de movimento reto: você especifica as configurações para começar e terminar quadros-chave e, em seguida, especifica a interpolação para os quadros e os quadros entre eles. O Macromedia Flash cria a animação de transição desde o primeiro quadro-chave na animação até o último. 1 Na Linha de tempo Animação de carro, selecione o Quadro 34 e, em seguida, clique em Visualização 1 Carro no Palco para que o inspetor de propriedades apareça exibindo as propriedades de clipe de filme. 2 No menu pop-up Cor do inspetor de propriedades, selecione Alfa. No menu pop-up Quantidade Alfa, digite 0% na caixa de texto e pressione Enter ou Return ou use o controle deslizante pop-up para selecionar 0%. Retângulo delimitador 3 Na Linha de tempo, selecione qualquer quadro entre os Quadros 25 e 34. No inspetor de propriedades, selecione Movimento do menu pop-up Interpolação. Uma seta com uma linha sólida separa os quadros-chave interpolados. Uma linha tracejada entre os quadros-chave indica que a interpolação não está implementada corretamente, o que ocorre freqüentemente quando um quadro-chave de início ou término está faltando. Fazer o segundo carro aparecer lentamente (fade in) Conforme a Visualização 1 Carro desaparece lentamente, uma outra visualização do carro deve aparecer lentamente. 1 Adicione uma nova camada à Linha de tempo Animação de Carro e nomeie-a Visualização 2 Fade. 2 Na camada Visualização 2 Fade, adicione um quadro-chave ao Quadro Com o indicador de reprodução ainda no Quadro 25, arraste view2.png do painel Biblioteca para o Palco. 4 Se o painel Informações não estiver aberto, escolha Janela > Informações. Verifique se o quadrado central está selecionado no indicador de registro e, em seguida, digite 0 na caixa de texto de coordenada X e digite 0 na caixa de texto de coordenada Y. Pressione Enter ou Return. O inspetor de propriedades também tem caixas de texto X e Y, entretanto, essas coordenadas são relativas a um ponto de registro no canto esquerdo superior do clipe de filme. 206 Capítulo 8

207 5 Selecione o view2.png no Palco e pressione F8 para torná-lo um símbolo. Na caixa de diálogo Converter em Símbolo, denomine o símbolo Visualização 2 Carro. Verifique se o Clipe de Filme está selecionado e, em seguida, clique em OK. 6 No inspetor de propriedades do clipe de filme, selecione Alfa no menu pop-up Cor e digite 0% na caixa de texto Quantidade Alfa. 7 Adicione um quadro-chave ao Quadro 35 da camada Visualização 2 Fade. 8 No Palco, clique dentro do retângulo delimitador do carro transparente. No inspetor de propriedades do clipe de filme, digite 100% na caixa de texto Quantidade Alfa. 9 Na camada Visualização 2 Fade, selecione qualquer quadro entre os Quadros 25 e 34. No inspetor de propriedades, selecione Movimento do menu pop-up Interpolação. Fazer o segundo carro desaparecer lentamente (fade out) Agora, você criará a animação que faz desaparecer lentamente (fade out) o segundo carro. 1 Na camada Visualização 2 Fade, adicione um quadro-chave ao Quadro Na camada Visualização 2 Fade, adicione um quadro-chave ao Quadro 70 e outro quadrochave ao Quadro Selecione o quadro-chave ao Quadro 69 da camada Visualização 2 Fade. Selecione a Visualização 2 Carro no Palco e use o inspetor de propriedades para selecionar uma transparência alfa de 0%. 4 Na camada Visualização 2 Fade, selecione qualquer quadro entre os Quadros 60 e 68. No inspetor de propriedades, selecione Movimento no menu pop-up Interpolação. 5 Clique em qualquer quadro na camada Visualização 2 Fade entre os Quadros 71 e 105 e pressione Delete. Observação: Conforme você completa o tutorial, lembre-se de salvar o seu trabalho com freqüência. Tutorial do Flash MX 207

208 Fazer o terceiro carro aparecer lentamente (fade in) Conforme o segundo carro desaparece, o terceiro carro aparece. Você criará a animação agora. 1 Com a camada Visualização 2 Fade selecionada, adicione uma nova camada à Linha de tempo e denomine-a Visualização 3 Fade. 2 Na camada Visualização 3 Fade, adicione um quadro-chave ao Quadro Com o Quadro 60 ainda selecionado, arraste view3.png do painel Biblioteca para o Palco. Use o painel Informações (escolha Janela > Informações se o painel estiver fechado) para especificar 0 para as coordenadas X e Y e para verificar se o ponto de registro está centralizado, como você fez para view2.png. 4 Selecione o view3.png no Palco e pressione F8 para torná-lo um símbolo. Na caixa de diálogo Converter em Símbolo, denomine o símbolo Visualização 3 Carro. Verifique se o Clipe de Filme está selecionado e, em seguida, clique em OK. 5 No inspetor de propriedades, selecione Alfa no menu pop-up Cor e digite 0% na caixa de texto Quantidade Alfa. 6 Adicione um quadro-chave ao Quadro 70 da camada Visualização 3 Fade. 7 No Palco, selecione dentro do retângulo delimitador da Visualização 3 Carro. No inspetor de propriedades, digite 100% na caixa de texto Quantidade Alfa. 8 Na camada Visualização 3 Fade, selecione qualquer quadro entre os Quadros 60 e 69. No inspetor de propriedades, selecione Movimento no menu pop-up Interpolação. Fazer o terceiro carro desaparecer lentamente (fade out) Agora, você criará a animação que faz desaparecer lentamente (fade out) o terceiro carro. 1 Na camada Visualização 3 Fade, adicione um quadro-chave ao Quadro 95 e Com o Quadro 105 selecionado na camada Visualização 3 Fade, selecione a Visulização 3 Carro no Palco e use o inspetor de propriedades para selecionar uma transparência alfa de 0%. 3 Na camada Visualização 3 Fade, selecione qualquer quadro entre os Quadros 95 e 104. No inspetor de propriedades, selecione Movimento no menu pop-up Interpolação. 208 Capítulo 8

209 Fazer o primeiro carro aparecer lentamente (fade in) Conforme o terceiro carro desaparece lentamente (fade out), o primeiro carro aparece lentamente (fade in) para completar a animação. 1 Na camada Visualização 1 Fade, adicione um quadro-chave ao Quadro Com o Quadro 95 ainda selecionado, arraste o clipe de filme de Visualização 1 Carro (não view1.png) do painel Biblioteca para o Palco. 3 No painel Informações, digite 0 na caixa de texto da coordenada X e digite 0 na caixa de texto da coordenada Y. Pressione Enter ou Return. 4 No inspetor de propriedades, selecione Alfa no menu pop-up Cor e digite 0% na caixa de texto Quantidade Alfa. 5 Selecione o Quadro 104 da camada Visualização 1 Fade. 6 Clique dentro do retângulo delimitador do clipe de filme Visualização 1 Carro no Palco. No inspetor de propriedades, digite 100% na caixa de texto Quantidade Alfa. 7 Na camada Visualização 1 Fade, selecione qualquer quadro entre os Quadros 95 e 104. No inspetor de propriedades, selecione Movimento no menu pop-up Interpolação. Observação: Conforme você completa o tutorial, lembre-se de salvar o seu trabalho com freqüência. Testar o filme A qualquer momento durante a criação, você pode testar como o filme será reproduzido como um arquivo SWF. 1 Salve o filme e escolha Controlar > Testar filme. O Macromedia Flash exporta uma cópia SWF de seu filme. No filme SWF, a animação é reproduzida automaticamente em um loop contínuo. 2 Quando você terminar de ver o filme, feche o arquivo SWF clicando em sua caixa de fechar. No seu documento Flash, escolha Editar > Editar documento ou clique em Cena 1 para voltar para a Linha de tempo principal. Carregar texto dinâmico em tempo de execução Na lição Adicionar e editar texto, você praticou a digitação de texto diretamente no Palco. Você também pode projetar o filme para que inclua texto de arquivos externos. Uma das formas mais fáceis de realizar isso é usar a ação loadvariables para carregar texto de um arquivo de texto para um campo de texto dinâmico em tempo de execução. No arquivo FLA, você pode especificar atributos de texto, como estilo de fonte, tamanho e cor, para o campo de texto dinâmico. A vantagem ao manter texto em arquivos externos é que qualquer pessoa que queira modificar o texto poderá trabalhar com o arquivo de texto em vez do arquivo FLA. Nessa seção, você aprenderá como realizar as seguintes tarefas: Importar e alinhar um logotipo Criar um campo de texto dinâmico Usar o inspetor de propriedades para atribuir um nome de variável de texto Usar a ação loadvariables para carregar texto de um arquivo externo Tutorial do Flash MX 209

210 Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos Flash e abrir Tutorials/FlashIntro/stiletto4.fla. Se você usar o arquivo stiletto4.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. Importar o logotipo Antes de criar o campo de texto dinâmico, você importará o logotipo, um arquivo do Macromedia FreeHand no qual o Macromedia Flash adicionará automaticamente uma camada na Linha de tempo. Observe que se você quiser editar o documento original antes de trazê-lo para o Flash, basta apenas copiá-lo e colá-lo ou arrastá-lo e soltá-lo a partir do Macromedia FreeHand. Isso poderia dar um fluxo de trabalho melhor. 1 Na Linha de tempo, selecione a camada Imagens e adicione uma nova camada sobre ela. Denomine a nova camada Cópia. 2 Com a camada Cópia selecionada, escolha Arquivo > Importar. Antes no tutorial, você importou objetos para a biblioteca. Agora, você importará o logotipo para que ele apareça no Palco. 3 Navegue nas pastas do seu aplicativo Flash para a pasta Tutorials/FlashIntro/Assets e clique em logo.fh10 e, em seguida, clique em Abrir. 4 Na caixa de diálogo Importar do FreeHand, verifique se Cenas, Camadas e Todos estão selecionados. Além disso, verifique se Incluir camada de fundo e Manter blocos de texto estão selecionados e, em seguida, clique em OK. 5 Na Linha de tempo, o Flash criou uma camada denominada Logotipo. Arraste o nome do logotipo para mover a camada sob a camada Cópia. 6 Você pode especificar as coordenadas do Palco para o logotipo. No inspetor de propriedades, com o logotipo selecionado, digite 10 na caixa de texto X e 20 na caixa de texto Y. Em seguida, pressione Enter ou Return. 210 Capítulo 8

211 7 Na Linha de tempo, bloqueie a camada Logotipo. Criar um campo de texto dinâmico Agora, você criará um campo de texto dinâmico. Em vez de digitar texto no campo, você especificará o texto da variável que é carregado no campo em tempo de execução. 1 Na Linha de tempo, selecione a camada Cópia. Na caixa de ferramentas, selecione a ferramenta Texto. No inspetor de propriedades, selecione Texto Dinâmico do menu pop-up Tipo de texto. 2 No menu pop-up Fonte, selecione _sans. _sans é uma fonte de dispositivo apropriada para texto pequeno que aparece em várias plataformas de computador. Para obter mais informações sobre fontes de dispositivos, consulte a Ajuda do Flash > Usando o Flash > Usar fontes de dispositivo (somente texto horizontal). 3 Na caixa de texto Tamanho de ponto, digite Clique na caixa Cor (preenchimento) do texto e selecione amarelo, com o valor hexadecimal de FFCC00. 5 No menu pop-up Tipo de linha, selecione Multilinha, que é para várias linhas de texto que serão quebradas. Menu pop-up Tipo de Texto Menu pop-up Fonte Caixa de texto Tamanho do ponto Menu pop-up Tipo de linha Tutorial do Flash MX 211

212 6 No Palco, clique abaixo no logotipo. Arraste o ponteiro para criar um campo de texto com a largura do texto do logotipo e a profundidade aproximada da linha vertical que é agrupada com o logotipo, como mostra a ilustração seguinte. 7 No inspetor de propriedades, digite textfield na caixa de texto Var. O arquivo de texto que será carregado no campo de texto dinâmico, como visto na ilustração seguinte, inclui texto que denomina a variável: textfield=. Ao inserir esse nome na caixa de texto Var, você denomina a variável que o filme deve carregar. Use a ação loadvariables para carregar texto A ação loadvariables inclui um parâmetro para especificar o caminho para o texto da variável. O texto está em um arquivo chamado copy.txt, dentro da sua pasta Tutorials/FlashIntro/Assets. 1 Na Linha de tempo, adicione uma nova camada e denomine-a Ações. Se necessário, arraste a camada Ações para a parte superior da Linha de Tempo. Recomendamos manter as ações na camada superior em uma Linha de Tempo. 2 Se o painel Ações não estiver aberto, escolha Janela > Ações. Amplie o painel Ações, se necessário, clicando na seta branca na barra de título para expandir a janela e arrastando o canto direito inferior do painel para visualizar a caixa de ferramentas Ações e o painel Script. O tipo de painel Ações exibido depende do objeto ao qual você está adicionando uma ação. Se você tiver selecionado um quadro, por exemplo, o painel Ações exibe ações para quadros. Se você tiver selecionado um botão, o painel Ações exibe as ações para botões. 212 Capítulo 8

213 3 Clique no triângulo no canto superior direito da barra de título do painel para exibir o menu pop-up. Verifique se o modo normal, em vez do modo especialista, está selecionado. O modo especialista oferece recursos úteis para os experientes com ActionScript. No modo normal, os controles e campos de parâmetro o guiam na criação do ActionScript. Botão do menu Opções Barra de ferramentas Ações Painel Script 4 Na caixa de ferramentas Ações, feche Ações > Navegador/Rede e, em seguida, clique duas vezes em loadvariables. O ActionScript é adicionado ao painel Script. Os parâmetros para a ação aparecem acima do painel Script. Tutorial do Flash MX 213

214 5 Na caixa de texto URL, digite o caminho para o arquivo de texto:../assets/copy.txt. Testar o filme Salve o filme e escolha Controlar > Testar filme. Você também pode pressionar Control+Enter (Windows) ou Command+Return (Macintosh). Adicione animação e navegação aos botões Quando você especifica que um novo símbolo é um botão, o Macromedia Flash cria a Linha de tempo para os estados do botão. Na lição Criar botões, você aprendeu como alterar a cor de preenchimento de uma forma dentro de um estado de botão. Nessa seção, você aprenderá mais sobre como modificar botões, incluindo adicionar animação a um botão. Especificamente, nesta seção, você aprenderá como realizar as seguintes tarefas: Importar uma biblioteca de outro arquivo FLA Alinhar botões Adicionar animação a um estado de botão Adicionar navegação a um botão para criar um link para um site na Web Usar o recurso Ativar botões simples Adicionar navegação a botão Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos e abrir Tutorials/FlashIntro/stiletto5.fla. Se você usar o arquivo stiletto5.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. 214 Capítulo 8

215 Importar uma biblioteca de outro arquivo FLA Os botões que você usará em seu filme residem na biblioteca de outro arquivo FLA. Para usar os botões, abra o arquivo FLA contendo os botões como uma biblioteca. 1 Com o painel Biblioteca aberto, escolha Arquivo > Abrir como biblioteca. Navegue nas pastas do seu aplicativo Flash para a pasta Tutorials/FlashIntro/Assets e clique duas vezes em buttons.fla. A biblioteca do arquivo buttons.fla aparece em adição à biblioteca para seu documento. Alinhar botões Você pode alinhar os três botões ao longo dos eixos horizontal e vertical usando o painel Alinhar. 1 Na Linha de tempo, com a camada Cópia selecionada, adicione uma nova camada e denomine-a Botões. Bloqueie todas as camadas exceto a camada Botões. 2 No menu pop-up Visualização Palco, à direita acima do Palco, digite 150% para ampliar a visualização do Palco. Em seguida, role para o lado direito inferior do Palco. 3 Arraste o botão 1 do painel Biblioteca de buttons.fla e coloque-o sob o canto direito inferior do campo de texto dinâmico. Quando você arrasta um botão do painel Biblioteca buttons.fla, o botão se torna parte da biblioteca para o documento. Tutorial do Flash MX 215

216 4 Arraste os botões 2 e 3 do painel Biblioteca buttons.fla, colocando-os à esquerda do Botão 1. Use o espaçamento aproximado mostrado na ilustração seguinte. 5 Com a ferramenta Seta, arraste para selecionar todos os três botões. 6 Para abrir o painel Alinhar, escolha Janela > Alinhar. Verifique se No Palco não está selecionado. Você não quer alinhar os botões relativos ao Palco. Clique em Alinhar centro verticalmente e, em seguida, clique em Distribuir centro horizontalmente. Alinhar centro verticalmente No Palco Distribuir centro horizontalmente Os botões são alinhados no Palco. Ativar botões simples Quando o recurso de Ativar botões simples estiver ativo, você poderá ouvir os sons incluídos com os botões 2 e 3 e visualizar as cores usadas para os estados do botão. Os projetos de botão mais complexos, como com animação, não são reproduzidos. 1 Escolha Controlar > Ativar botões simples e, em seguida, passe o cursor do mouse sobre cada um dos botões e clique sobre eles. O botão direito, Botão 1, não está terminado. Você modificará o botão em seguida. 2 Quando terminar o teste dos botões, escolha Controlar > Ativar botões simples para desmarcar o recurso. 216 Capítulo 8

217 Modificar o estado de um botão Você criará um clipe de filme dentro do estado Sobre do botão 1 e, em seguida, criará uma interpolação de forma no clipe de filme. A interpolação da forma cria um efeito que muda a cor de cinza para vermelho. 1 No Palco, clique duas vezes no botão direito, Botão 1, para abrir o modo de edição de símbolo. 2 Na Linha de tempo Botão 1, oculte todas as camadas, exceto a camada Cor. Na Camada Cor, selecione o quadro-chave Sobre. 3 No Palco, selecione a forma oval preta para o botão direito. Pressione F8 para tornar a elipse um símbolo. Na caixa de diálogo Converter em símbolo, denomine o símbolo Animação de botão. Selecione um clipe de filme e clique em OK. 4 No Palco, clique duas vezes no símbolo Animação de botão para abrir o modo de edição de símbolo. 5 Renomeie a Camada 1 Alteração de cor e adicione um quadro-chave ao Quadro Com o indicador de reprodução ainda no Quadro 15, selecione a forma de botão no Palco e escolha um tom claro de vermelho do menu pop-up Cor de preenchimento na caixa de ferramentas. 7 Na Linha de tempo, clique em qualquer quadro entre os Quadros 1 e 13. No inspetor de propriedades, selecione Forma no menu pop-up Interpolação. Arraste o indicador de reprodução dos quadros 1 a 15 para ver a mudança de cor. Adicionar ações a botões Quando o usuário clica no botão e a animação interpolada é reproduzida, você deseja que o indicador de reprodução se mova para o final da Linha de tempo Animação do botão e, em seguida, pare. Você usa ActionScript, a linguagem de script do Macromedia Flash para controlar o movimento do indicador de reprodução em uma Linha de tempo. 1 Adicione uma nova camada à Linha de tempo Animação de Carro e denomine-a Ações. 2 Na camada Ações, adicione um quadro-chave ao Quadro Se o painel Ações não estiver aberto, escolha Janela > Ações. Amplie o painel, se necessário, para visualizar a barra de ferramentas Ações e o painel Script. Tutorial do Flash MX 217

218 4 Com o Quadro 15 da camada Ações selecionada, vá para a categoria Ações > Controle de filme da caixa de ferramentas Ações e clique duas vezes em parar. A ação parar permite que você especifique que o indicador de reprodução pare quando ele alcança o Quadro 15. Na Linha de tempo Animação de botão, Quadro 15 da camada Ações agora exibe um pequeno a, que indica que uma ação está associada ao quadro. Observação: Conforme você completa o tutorial, lembre-se de salvar o seu trabalho com freqüência. 218 Capítulo 8

219 Adicionar navegação a botão Você usa a ação geturl para adicionar navegação a um botão que abre um site na Web. 1 Escolha Editar > Editar documento ou clique em Cena 1 para voltar ao filme principal. 2 No Palco, clique em Botão 1, o botão à direita. 3 No painel Ações, escolha Ações > Navegador/Rede e, em seguida, clique duas vezes em geturl. 4 Na caixa de texto URL, digite qualquer URL completa, como 5 No menu pop-up Janela, selecione _blank para ativar uma nova janela do navegador quando o usuário clica em Botão 1. 6 Salve o arquivo e escolha Controlar > Testar filme. Clique em Botão 1 para ir ao site na Web que você especificou na etapa 4. 7 Feche o navegador e o arquivo SWF e, em seguida, volte para o ambiente de criação do Macromedia Flash. Se desejar, você pode selecionar o Botão 2 no Palco e repetir as etapas 3 a 7 para associá-lo a um site da Web diferente, em seguida, repita as etapas para o Botão 3. Quando terminar de associar os botões, feche o painel Ações. Tutorial do Flash MX 219

220 Adicionar sons de eventos e fluxo de som Quando um filme estiver sendo carregado da Internet, um som de fluxo constante pode começar a ser reproduzido assim que o arquivo de som tiver sido carregado. Estes sons são adequados especificamente para sons reproduzidos continuamente em segundo plano. Os sons de eventos precisam ser carregados completamente e colocados em RAM antes da reprodução, sons de eventos são úteis para botões. Nessa seção, você aprenderá como realizar as seguintes tarefas: Adicionar um som de fluxo constante ao seu filme Adicionar um som de evento a um botão Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos Flash e abrir Tutorials/FlashIntro/stiletto6.fla. Se você usar o arquivo stiletto6.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. Adicionar um som de fluxo constante Você pode incluir som no filme arrastando o som para o Palco. Você adicionará a música de fundo que flui constantemente e é reproduzido um número especificado de vezes. 1 Na Linha de tempo, com a camada Botões selecionada, adicione uma nova camada e denomine-a Sons. 2 Escolha Arquivo > Importar. Dentro da pasta do aplicativo Flash, navegue para a pasta Tutorials/FlashIntro/Assets e clique em track1.mp3. Clique com Control (Windows) ou Command (Macintosh) para adicionar ping.mp3 à seleção e, em seguida, clique em Abrir. Os arquivos são importados para a biblioteca. 3 Com a camada Sons selecionada, arraste o som track1.mp3 do painel Biblioteca para o Palco. Na Linha de tempo, uma pequena representação de ondas de som aparece no quadro. 4 Na Linha de tempo, selecione o primeiro quadro da camada Sons. No inspetor de propriedades, digite 999 na caixa de texto Loop para especificar o número de vezes que o som pode ser reproduzido continuamente. Testar o filme 1 Salve o arquivo e escolha Controlar > Testar filme para ouvir o som. 2 Quando terminar de reproduzir o filme, clique na caixa fechar do filme. 220 Capítulo 8

221 Adicionar um som de evento a um botão Em adição a arrastar o som para o Palco, você pode selecionar um som do inspetor Propriedade. Você usará este método para adicionar um som de evento a um botão. Conforme aprendido na lição Criar botões, quando você cria um símbolo de botão, o Macromedia Flash cria quadros para os estados diferentes de botão em relação ao ponteiro do mouse. O quadro Sobre, por exemplo, representa o estado do botão quando o ponteiro está sobre o botão. Os outros estados/quadros de botão são Para cima, Para baixo e Área. Agora, você adicionará um som de evento a um botão, o que faz com que o som seja reproduzido durante o estado Sobre. Como você está adicionando o som ao símbolo botão na biblioteca, não apenas a uma instância do símbolo, o som será reproduzido para cada instância do botão. 1 No painel Biblioteca, clique duas vezes na instância do Botão 1 para abrir o modo de edição de símbolo. 2 Na Linha de tempo do Botão 1, adicione uma nova camada e denomine-a Som. 3 Selecione o quadro Sobre (Quadro 2) da camada Som e escolha Inserir > Quadro-chave ou pressione F6. 4 Para definir as propriedades de som, clique em Quadro 2 da camada Som. No inspetor de propriedades, selecione Ping.mp3 do menu pop-up Som. Verifique se Evento está selecionado no menu pop-up Sync. 5 Salve o documento e escolha Controlar > Testar filme para ouvir os sons do botão. Quando você terminar de visualizar o arquivo SWF, feche a sua janela para voltar para o documento. Organize o painel Biblioteca Neste momento, há várias propriedades no painel Biblioteca. Para manter essas propriedades organizadas, de forma fácil de encontrá-las e classificá-las por tipo, você criará pastas e, em seguida, moverá as propriedades para as pastas. Dica: Manter o painel Biblioteca organizado é útil para qualquer filme que você cria, especialmente porque outras pessoas trabalhando com o mesmo arquivo podem localizar as propriedades facilmente. 1 Se o painel Biblioteca não estiver aberto, escolha Janela > Biblioteca. Tutorial do Flash MX 221

222 2 Expanda e amplie a janela, conforme necessário, para visualizar todas as propriedades no painel Biblioteca. Na parte inferior do painel Biblioteca, clique no botão Nova Pasta quatro vezes, para criar quatro pastas novas. 3 Clique duas vezes no nome da pasta 1 sem título e renomeie-a como Clipes de filme de animação de carro. 4 Renomeie as outras três pastas como Sons, Gráficos e Botões. 5 Arraste Visualização 1 Carro, Visualização 2 Carro, Visualização 3 Carro e Animação de Carro para a pasta Clipes de filme de animação de carro. 6 Arraste ping.mp3 e track1.mp3 para a placa Sons. 7 Arraste view1.png, view2.png e view3.png para a pasta Gráficos. 8 Arraste Botão 1, Botão 2 e Botão 3 para a pasta Botões. Com a pasta Botões selecionada, clique em Nova Pasta novamente para criar uma subpasta com a pasta Botões. 222 Capítulo 8

223 9 Denomine a nova pasta Clipes de filme de botão e, em seguida, arraste as propriedades restantes do clipe de filme do botão para essa pasta. 10 Feche o painel Biblioteca e salve o documento. Tutorial do Flash MX 223

224 Testar o desempenho de download e publicar o filme Para completar o documento, você usará o comando Publicar para criar um filme compatível com Web com a extensão.swf. Se você usar o comando Publicar com as configurações padrão, o Macromedia Flash prepara o seu arquivo para a Web. O Macromedia Flash publicará o arquivo SWF e criará um arquivo HTML com as tags necessárias para exibir o.swf. Uma vez que as opções necessárias das configurações de publicação são definidas, você pode repetidamente exportar para todos os formatos selecionados de uma só vez simplesmente escolhendo Arquivo > Publicar. O Macromedia Flash armazena as configurações de publicação que você especifica com o documento, de forma que cada filme possa ter as suas próprias configurações. Nesta seção, você aprenderá como realizar as seguintes tarefas: Usar o Perfil de largura de banda para testar o desempenho do download do filme Publicar o filme em uma etapa Renovar e modificar as configurações da publicação Visualizar o filme em um navegador de Web Para concluir essa seção, você pode continuar a trabalhar em seu arquivo mystiletto.fla ou pode navegar para a sua pasta de aplicativos Flash e abrir Tutorials/FlashIntro/stiletto7.fla. Se você usar o arquivo stiletto7.fla, salve o arquivo com um novo nome em sua pasta My_Stiletto para manter uma versão não alterada do arquivo original. Testar desempenho de download de filme Para um filme do Macromedia Flash movie ser reproduzido corretamente via Internet, cada quadro precisa ser carregado antes do filme alcançar o quadro. Se o filme alcança um quadro que ainda não foi carregado, ele pausa até que os dados cheguem. A largura de banda baixa dos arquivos do Macromedia Flash possibilitam downloads rápidos. Você pode usar o Perfil de largura de banda para testar o seu filme e identificar onde podem ocorrer pausas. O Perfil de largura de banda mostra graficamente quantos dados são enviados de cada quadro no filme, de acordo com a velocidade selecionada do modem. 1 Salve o documento e escolha Controlar > Testar filme. 2 No menu Depurar, selecione a velocidade de um modem para determinar a taxa de download que o Macromedia Flash simulará. Você também pode escolher Personalizar para digitar uma taxa de download. 224 Capítulo 8

225 3 Escolha Visualizar > Perfil de largura de banda para ver o SWF com uma tabela de desempenho de download. A barra sombreada representa o primeiro e único quadro em seu filme principal. Os filmes com vários quadros terão várias barras sombreadas. A altura da barra representa o tamanho do quadro em bytes e quilobytes. As barras que se estendem acima da linha vermelha, especialmente se a barra representa um quadro diferente do primeiro quadro, indicam que poderia haver demoras na reprodução do filme. Você pode otimizar o seu filme para obter downloads mais velozes. Para obter detalhes, consulte a Ajuda do Flash > Usando o Flash > Otimizar filmes. 4 Quando você terminar de visualizar o Perfil de largura de banda, escolha Visualizar > Perfil de largura de banda para desmarcá-lo. Feche a janela SWF para voltar para o ambiente da criação. Utilize o comando Publicar. Você pode publicar o documento do Macromedia Flash para reprodução na Web em uma etapa. Com o documento salvo, escolha Arquivo > Publicar. O Macromedia Flash publica o seu filme criando um arquivo SWF e possivelmente arquivos adicionais, com base nos atributos da caixa de diálogo Configurações de publicação. Você encontrará os arquivos publicados, por padrão, na mesma pasta onde salvou o FLA. Tutorial do Flash MX 225

226 Visualizar as configurações da publicação Usando a caixa de diálogo Configurações de publicação, é fácil reconfigurar a forma com que seu arquivo é publicado. 1 Para visualizar as configurações de publicação, escolha Arquivo > Configurações de publicação. O Macromedia Flash é configurado, por padrão, para criar um arquivo HTML de suporte que é exibido no filme do Flash. Quando você seleciona um formato que requer configurações adicionais, uma nova guia aparece. 2 Na guia Formatos, verifique se Flash (.swf) e HTML (.html) estão selecionados. Clique na guia Flash. Por padrão, o filme é publicado para o Flash Player. O processo de publicação também aplica compactação de JPEG e de filme. 3 Clique na guia HTML. Por padrão, o processo de publicação cria um documento HTML que insere o seu arquivo SWF em uma janela de navegador. As configurações na guia HTML da caixa de diálogo Configurações de publicação determinam como o filme aparece no navegador. 226 Capítulo 8

227 Alterar as configurações de publicação Por padrão, o Macromedia Flash dá ao arquivo SWF o mesmo nome do arquivo FLA. Você pode informar ao Flash para alterar o nome. 1 Na guia Formatos da caixa de diálogo Configurações de publicação, desmarque Usar nomes padrão. 2 Na caixa de texto HTML (.html), selecione o texto existente e digite um novo nome, como stilettoelectric.html. Em seguida, clique em Publicar. Quando a janela de status Publicando fechar, clique em OK na caixa de diálogo Configurações de publicação. Visualizar o filme publicado em um navegador Você pode visualizar o arquivo HTML e o filme SWF, que acabou de publicar, em seu navegador. 1 Abra o seu navegador e, em seguida, abra o arquivo HTML que criou. Por padrão, o arquivo HTML está na mesma pasta do seu arquivo FLA. Quando você abre o arquivo HTML, o filme SWF é reproduzido dentro do navegador. 2 No navegador, você pode usar um comando como Visualizar > Código da página ou Visualizar > Código para visualizar o HTML. As tags OBJECT e EMBED asseguram que o filme SWF seja reproduzido dentro do navegador. Para obter informações adicionais sobre os modelos do Macromedia Flash HTML, consulte Ajuda do Flash > Usando o Flash > Sobre os modelos de publicação HTML. Tutorial do Flash MX 227

228 As próximas etapas Com a conclusão de todas as oito seções do tutorial, você terá aprendido muito sobre a criação de filmes do Macromedia Flash, incluindo como realizar as seguintes tarefas: Analisar um filme completo Definir as propriedades do documento e criar um dégradé Criar e mascarar uma ilustração vetorial Interpolarizar efeitos de bitmap dentro de um clipe de filme Carregar texto dinâmico Modificar botões e adicionar navegação Adicionar sons de eventos e fluxo de som Testar e publicar um filme Continue aprendendo mais sobre as capacidades do Macromedia Flash conhecendo a Introdução ao Tutorial do ActionScript em Ajuda > Tutoriais. Projetado para iniciantes no ActionScript, o tutorial lhe apresenta os conceitos de criação de script enquanto permite que você construa um verdadeiro quebra-cabeças com ações. Além disso, você pode procurar artigos e Notas técnicas sobre o Flash no premiado Centro de Suporte damacromedia. Para obter acesso ao site, vá para e clique em Suporte. 228 Capítulo 8

229 CAPÍTULO 9 Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX O poder e flexibilidade do Macromedia Flash MX ampliam a sua capacidade de trabalhar dentro da família Macromedia Studio MX. As tarefas, desde a produção de elementos gráficos simples a projetos de aplicativos complexos e desenvolvimento e implementação de Websites, se beneficiam da facilidade com qual você pode usufruir o poder dos produtos Studio MX. As seções a seguir destacam os muitos recursos disponíveis para se obter o máximo da família Studio MX para simplificar fluxos de trabalho, criar elementos de interface e trabalhar perfeitamente com todos os formatos de elementos gráficos populares de Web. Macromedia Dreamweaver MX O Macromedia Dreamweaver MX oferece tudo que você precisa para criar um Website professional, independente se você prefere trabalhar com ferramentas de layout visual familiares ou exige o controle de um ambiente de edição de texto pleno de recursos. A interface do usuário intuitiva do Macromedia torna fácil criar e administrar o seu site. A combinação do Macromedia Flash MX e do Dreamweaver MX permite, facilmente, que você crie, desenvolva e mantenha Websites e conteúdo dinâmicos e atraentes. Os recursos da integração do Dreamweaver MX com Flash MX O texto a seguir resume os recursos que você poderá usar para assegurar uma integração fácil e com êxito do conteúdo do Macromedia Flash MX em seu site do Dreamweaver. Botões do Macromedia Flash MX Você pode adicionar botões do Macromedia Flash para navegação diretamente no Dreamweaver MX. Através da barra de inserção, você pode selecionar estilos de botão, digitar texto e especificar um destino de URL tudo dentro do Dreamweaver MX. Você pode criar estilos no Macromedia Flash MX ou descarregá-los do Dreamweaver Exchange. Texto do Macromedia Flash MX Você pode inserir texto com suavização do serrilhado do Macromedia Flash MX diretamente no Dreamweaver MX. A fonte será exibida corretamente nos navegadores de seus visitantes, independente da fonte estar instalada nos computadores deles. 229

230 Comportamentos e objetos personalizados do Macromedia Flash MX O Dreamweaver Exchange oferece mais de uma dúzia de objetos e comportamentos personalizados do Macromedia Flash que permitem que você forneça opções específicas aos seus arquivos do Macromedia Flash no Dreamweaver MX. Parâmetros do Macromedia Flash MX Ao colocar um arquivo do Macromedia Flash no Dreamweaver MX, você poderá delinear qualquer conjunto de parâmetros para o arquivo usando o inspetor de propriedades quando seleciona o arquivo na sua página do Dreamweaver. Se você não vir a opção que precisa no inspetor de propriedades, poderá usar o botão Parâmetros no lado direito inferior do inspetor para adicionar quaisquer parâmetros e valores que precisar. Pares nome/valor do Macromedia Flash MX O Macromedia Flash MX permite que você passe dinamicamente pares nome/valor para um filme passando-os através do URL que carrega o filme. Por exemplo, você poderia usar esta técnica para criar um filme que não é usado como elemento de navegação para um site HTML. As variáveis passadas para o filme informam ao filme de navegação do Macromedia Flash onde o usuário está no site e, portanto, quais seções do menu devem ser destacadas. Caracteres especiais do Macromedia Flash MX Se estiver usando caracteres especiais nos URLs para acessar o Macromedia Flash, você pode impedir que o Dreamweaver MX converta os caracteres em seqüências codificadas de URL. Basta desativar os caracteres especiais de codificação nas opções de URLs em Preferências. Kit de integração do JavaScript Macromedia Flash Disponível com o Dreamweaver Exchange, o Kit de integração do JavaScript Macromedia Flash fornece algumas funções essenciais: O Macromedia Flash Player fornece controles semelhantes aos do vídeo-cassete para as animações do Macromedia Flash. Os comportamentos do Dreamweaver permitem que você adicione facilmente controles para reproduzir, parar, avançar rapidamente, voltar e de zoom para qualquer objeto HTML na página. As validações de formulário avançadas permitem que você use o Dreamweaver MX para adicionar 18 validações de formulário criadas previamente do lado do cliente aos seus formulários do Macromedia Flash. Os scripts do navegador do Macromedia Flash permitem que você faça referência fácil a uma biblioteca de JavaScript comum no Macromedia Flash ActionScript. Os scripts do navegador do Macromedia Flash fornecem JavaScript encapsulado para trabalhar com cookies, interação com formulários HTML, abertura de novas janelas e controle de imagens. O Macromedia Flash Deployment Kit é uma ferramenta com diversos recursos que permite que você desenvolva Websites com Macromedia Flash de forma consistente e perfeita. As ferramentas incluem exemplos, scripts, modelos e instruções passo a passo para implementar a detecção do Macromedia Flash Player em qualquer Website. 230 Capítulo 9

231 O Macromedia Flash Dispatcher Behavior é uma ferramenta de detecção composta por vários arquivos incluídos no Macromedia Flash Deployment Kit que, juntos, detectam se há uma versão adequada de Macromedia Flash Player instalada no navegador do usuário. Em seguida, você pode direcionar o usuário para o conteúdo apropriado com base nessa informação. Visualização do arquivo do Macromedia Flash MX no Dreamweaver MX Você pode reproduzir arquivos do Macromedia Flash no Dreamweaver MX conforme os cria. O botão Reproduzir/Parar no inspetor de propriedades do Macromedia Flash permite que você visualize o objeto do Macromedia Flash na janela do documento do Dreamweaver MX no momento de criação. Clique no botão verde Reproduzir para ver o objeto no modo Reproduzir. Clique no botão vermelho Parar para finalizar o filme e editar o objeto. Visualizar arquivos do Macromedia Flash MX com Control Shockwave ou Flash Action O Control Shockwave e o Flash Action permitem reproduzir, parar, rebobinar ou ir para um quadro em um filme Macromedia ou Flash. Para aplicar o comportamento, basta selecionar uma âncora ou uma imagem e, em seguida, selecionar o comportamento Control Shockwave ou Macromedia Flash no painel Comportamentos. Para obter mais informações sobre a integração entre o Macromedia Flash MX e o Dreamweaver MX, veja Atualizar os filmes do Macromedia Flash MX para Dreamweaver MX Se você tiver o Dreamweaver MX instalado no sistema, pode exportar os arquivos de filme Macromedia Flash (SWF) diretamente para um site do Dreamweaver. Para obter mais informações sobre como trabalhar com Dreamweaver MX, veja Ajuda sobre o Dreamweaver. No Dreamweaver MX, você pode adicionar o filme Macromedia Flash a sua página. Com um único clique, você pode atualizar o documento Macromedia Flash (arquivo FLA) para o filme exportado Flash no Flash e reexportar o filme atualizado para o Dreamweaver automaticamente. Para atualizar um filme do Macromedia Flash para o Dreamweaver MX: 1 No Dreamweaver MX, abra a página HTML que contém o filme Macromedia Flash. 2 Efetue um dos procedimentos a seguir: Selecione o filme do Macromedia Flash e clique em Editar no inspetor de propriedades. Na visualização Projeto, mantendo a tecla Control pressionada (no Windows), ou a tecla Command pressionada (no Macintosh), clique duas vezes no filme do Macromedia Flash. Na visualização Projeto, clique com o botão direito (no Windows) ou com Control (no Macintosh) no filme do Macromedia Flash e escolha Editar com Flash no menu contextual. Na painel Site, clique com o botão direito (no Windows) ou com Control (no Macintosh) no filme do Macromedia Flash na visualização Projeto e escolha Abrir com Flash no menu contextual. O aplicativo Macromedia Flash é executado no sistema. 3 Se o documento do Macromedia Flash (FLA) para o filme exportado não abrir, uma caixa de diálogo de localização de arquivo aparece. Navegue para o arquivo FLA na caixa de diálogo Abrir arquivo e clique em Abrir. Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX 231

232 4 Se o usuário tiver usado o recurso Alterar o link no site inteiro no Dreamweaver MX, uma mensagem aparece. Clique em OK para aplicar as alterações do link no filme do Macromedia Flash. Clique em Não me avise novamente para impedir que a mensagem de advertência apareça quando você atualizar o filme do Macromedia Flash. 5 Atualize o documento do Macromedia Flash (FLA) conforme necessário no Macromedia Flash MX. 6 Para salvar o documento do Macromedia Flash (FLA) e exportar o filme Macromedia Flash para o Dreamweaver MX, proceda de uma das seguintes formas: Para atualizar o arquivo e fechar o Macromedia Flash MX, clique no botão Concluído acima do lado esquerdo superior do Palco. Para atualizar o arquivo e manter o Macromedia Flash MX aberto, escolha Arquivo > Atualizar para Dreamweaver. Macromedia FreeHand O Macromedia Flash MX/FreeHand foi projetado para criar materiais impressos bonitos e momentos na Web que impressionem com o mínimo de esforço. O Macromedia FreeHand e o Macromedia Flash MX proporcionam ferramentas poderosas para publicação com mídia cruzada para realizar efetivamente as suas comunicações e visão criativas. Recursos de integração do Macromedia FreeHand com Macromedia Flash MX O seguinte é um resumo de recursos que permitem integração fácil e com êxito do Macromedia Flash MX com FreeHand. Ilustração em FreeHand Usar storyboard em um site com Macromedia Flash é parte integral do processo de criação que o FreeHand possibilita através da sua integração profunda com o Macromedia Flash MX e a sua ampla gama de recursos criativos. O FreeHand fornece todas as ferramentas tradicionais de Bézier que os usuários esperam de um pacote de desenho profissional. Além disso, há cinco recursos essenciais que expandem as relações de criação com o Macromedia Flash MX: Transparência vetorial permite que você crie efeitos bonitos no FreeHand que são impressos bem e são transferidos para o Macromedia Flash como objetos transparentes. Iniciar as transparências no FreeHand permite que você crie um elemento gráfico de alta qualidade, que pode ser impresso, com alto nível de flexibilidade na escolha da mídia de saída. O recurso Liberar para camadas cria rapidamente quatro tipos diferentes de animações com mesclagem, texto e grupos em qualquer camada do FreeHand; essas podem ser usadas para criar animações do Macromedia Flash. Liberar uma mesclagem para camadas move as etapas da mesclagem para camadas individuais para criar uma animação quadro a quadro da mesclagem. A liberação de texto para as camadas move cada caractere para uma camada separada. A liberação de um grupo libera cada objeto para uma nova camada com base em sua ordem de empilhamento. 232 Capítulo 9

233 A biblioteca de símbolos do Macromedia permite que você armazene os objetos usados do FreeHand usados freqüentemente em uma biblioteca de símbolos no FreeHand, semelhante ao Macromedia Flash. Se você modificar um símbolo da biblioteca, todas as instâncias no arquivo serão atualizadas, exatamente como no Macromedia Flash. Se você importar ou copiar os arquivos do FreeHand para o Macromedia Flash, todos os símbolos originais da biblioteca de símbolos do FreeHand serão mantidos. Isso acelera o fluxo de trabalho enquanto otimiza o tamanho do arquivo do filme Macromedia Flash. O recurso Testar filme dá uma visualização prévia de como as ilustrações e projetos parecerão quando exportadas para o formato de arquivo do Macromedia Flash. O FreeHand usa o mecanismo de exibição do Macromedia Flash para esse modo. As grades de perspectiva oferecem possibilidades ilimitadas para criar e importar elementos gráficos vetoriais tridimensionais animados ou estáticos diretamente para o Macromedia Flash. Antes, os projetistas tinham que desenhar as suas próprias grades nas camadas de fundo e, em seguida, desenhar os objetos de perspectiva sobre eles, ocultando as camadas antes da saída final. Projeto flexível com FreeHand O FreeHand é o local ideal para você começar a produzir um site Macromedia Flash, graças às suas ferramentas profissionais de ilustração e à grande capacidade de produção, como várias páginas, estilos e recursos de localizar e substituir elementos gráficos. Várias páginas no FreeHand fornecem flexibilidade permitindo que você faça o seguinte: Usar storyboard em um site completo do Macromedia Flash. Criar um catálogo de várias páginas, com projeto intensivo, e reusá-lo em Macromedia Flash MX. Experimentar aparências diferentes para cenas. Usar estilos para texto e para elementos gráficos para fazer mudanças ultra-rápidas. Efetuar operações de localizar e substituir para fazer mudanças rápidas em elementos gráficos e texto em um documento, com base em seu critério. Comunicação com FreeHand O FreeHand aceita vários formatos de saída com vários tipos de mídia, possibilitando que você apresente o conteúdo a tantas pessoas quanto possível. Você pode projetar layouts de impressão e criar documentos de impressão com FreeHand e, em seguida, exportá-los como arquivos Macromedia Flash com a opção de impressão de alta qualidade ativado para aplicativos de impressão nativos de Web. Com a ajuda dos recursos a seguir, você pode salvar um storyboard do FreeHand como um arquivo interativo do Macromedia Flash e, em seguida, enviá-lo por correio eletrônico para um cliente ou usá-lo como parte de uma apresentação baseado em tela: Usando o painel Navegação do FreeHand, você pode criar links para páginas para adicionar interatividade básica ao seu arquivo do Macromedia Flash. Os objetos transparentes no FreeHand mantêm transparência no Macromedia Flash. Os elementos repetidos são convertidos de forma inteligente como símbolos para manter os arquivos pequenos. As camadas e páginas do FreeHand podem ser convertidos em animações quadro a quadro. Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX 233

234 Com o FreeHand, você pode salvar materiais para impressão PostScript de alta qualidade: Você pode imprimir materiais e facilmente adaptá-los para a Web com o Macromedia Flash. O FreeHand é ideal para imprimir storyboards de sites do Macromedia Flash. As apresentações de impressão profissionais que você cria no FreeHand e podem ser usadas no Macromedia Flash MX após a aprovação do cliente. Os recursos a seguir permitem que você importe com facilidade o seu trabalho do FreeHand para o Macromedia Flash MX: As páginas podem ser mapeadas em cenas ou quadros. As camadas são mantidas ou podem ser mapeadas em quadros. Os símbolos e instâncias nomeados são mantidos para manter os arquivos organizados e pequenos. As lentes transparentes são convertidas em transparências com cor alfa no Macromedia Flash MX. Importar arquivos do FreeHand para o Macromedia Flash MX Você pode importar os arquivos do FreeHand (versão 10 ou anterior) diretamente para o Macromedia Flash MX. O FreeHand é a melhor opção para criar elementos gráficos vetoriais para importá-los para o Macromedia Flash MX, porque você pode preservar camadas do FreeHand, blocos de texto, símbolos de biblioteca e páginas e escolher um intervalo de páginas para importar. Se o arquivo importado do FreeHand estiver no modo colorido CMYK, o Macromedia Flash MX converte o arquivo em RGB. Tenha as seguintes instruções em mente ao importar arquivos do FreeHand: Ao importar um arquivo com objetos sobrepostos que você deseja preservar como objetos separados, coloque os objetos em camadas separadas no FreeHand e escolha Camadas na caixa de diálogo Importar do FreeHand no Macromedia Flash MX. (Se os objetos sobrepostos em uma única camada forem importados para o Macromedia Flash MX, as formas sobrepostas serão divididas em pontos de interseção, exatamente com objetos sobrepostos que você cria no Macromedia Flash). Quando você importa arquivos com preenchimentos dégradé, o Macromedia Flash MX pode ter até oito cores em um preenchimento dégradé. Se um arquivo do FreeHand contiver um preenchimento dégradé com mais de oito cores, o Macromedia Flash MX criará caminhos de corte para simular a aparência de um preenchimento dégradé. Os caminhos de corte podem aumentar o tamanho do arquivo. Para minimizar o tamanho do arquivo, use preenchimentos dégradé com oito cores ou menos no FreeHand. Quando você importa arquivos com mesclagens, o Macromedia Flash MX importa cada etapa em uma mesclagem como um caminho separado. Portanto, quanto mais etapas uma mesclagem tiver em um arquivo FreeHand, maior o tamanho do arquivo importado será no Macromedia Flash MX. Quando você importa arquivos com traços que têm extremidades quadradas, o Macromedia Flash MX converte-as em arredondadas. Quando você importa os arquivos com imagens com tons de cinza colocados, o Macromedia Flash MX converte as imagens em tom de cinza em imagens RGB. Esta conversão pode aumentar o tamanho do arquivo importado. 234 Capítulo 9

235 Ao importar arquivos com imagens colocadas do EPS, você precisa selecionar o Converter EPS editável quando a opção Importado no FreeHand importar as preferências antes de você colocar o EPS no FreeHand. Se você não selecionar essa opção, a imagem EPS não será visualizável quando importada para o Macromedia Flash MX. Além disso, o Macromedia Flash MX não exibe as informações para uma imagem importada do EPS (independente das configurações de preferências usadas no FreeHand). Para importar um arquivo do FreeHand: 1 Escolha Arquivo > Importar. 2 Na caixa de diálogo Importar, escolha FreeHand no menu pop-up Arquivos do tipo (Windows) ou Mostrar (Macintosh). 3 Navegue para um arquivo do FreeHand e selecione-o. 4 Efetue um dos procedimentos a seguir: No Windows ou no sistema operacional do Mac X ou posterior, clique em Abrir. No sistema operacional do Mac 9.X ou anterior, clique em Adicionar para adicionar o arquivo selecionado à lista Importar e clique em Importar para importar o arquivo ou arquivos na lista Importar. 5 Na caixa de diálogo Configurações de importação do FreeHand, escolha uma configuração para páginas de mapeamento: Cenas converte cada página do documento do FreeHand em uma cena no documento do Macromedia Flash. Quadros-chave converte cada página do documento do FreeHand em um quadro-chave do documento do Macromedia Flash. 6 Para Camadas de mapeamento, selecione uma das seguintes opções: Camadas converte cada camada no documento FreeHand em uma camada no documento do Macromedia Flash. Quadros-chave converte cada camada do documento do FreeHand em um quadro-chave do documento do Macromedia Flash. Nivelar converte todas as camadas do documento do FreeHand em uma única camada nivelada no documento do Macromedia Flash. 7 Para Páginas, proceda de uma das seguintes formas: Feche Todos para importar todas as páginas do documento do FreeHand. Digite os números de De e Para para importar um intervalo de páginas do documento do FreeHand. 8 Para Opções, escolhar quaisquer das seguintes opções: Incluir camadas invisíveis importa todas as camadas (visíveis e ocultas) do documento FreeHand. Incluir camada de fundo importa a camada de fundo com o documento do FreeHand. Manter blocos de texto preserva texto no documento do FreeHand como texto editável no documento do Macromedia Flash. 9 Clique em OK. Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX 235

236 Macromedia Fireworks MX O Macromedia Fireworks MX aumenta a eficácia da produção de elementos gráficos para a Web, permitindo que você crie botões rapidamente, animações e compactações de páginas. Tudo permanece editável, incluindo os arquivos dos principais aplicativos gráficos. Você pode poupar tempo de produção com o painel Histórico, com o criador de botões passo a passo e a biblioteca. Somente o Fireworks permite que você faça um script de todo o aplicativo para automatizar o fluxo de trabalho. Produção de elementos gráficos eficazes para a Web no Macromedia Fireworks MX O Macromedia Flash MX e o Fireworks MX dão aos desenvolvedores e projetistas um fluxo de trabalho de ida e volta entre o ambiente da ferramenta de produção de bitmaps e o Macromedia Flash MX. A boa integração entre o Macromedia Flash MX e o Fireworks MX o torna a ferramenta de produção ideal para combinar elementos gráficos de bitmaps otimizados em Websites do Macromedia Flash baseados em vetores. O Fireworks também pode exportar documentos personalizados em HTML para muitos editores de HTML conhecidos. As seguintes capacidades do Macromedia Flash MX facilitam aind mais para que os clientes combinem o poder das duas ferramentas. Executar e editar com Fireworks No menu contextual de um bitmap armazenado na biblioteca do Flash, você pode iniciar e editar diretamente qualquer bitmap no Fireworks. Uma vez que você edita o bitmap, salvá-lo automaticamente atualiza o item da biblioteca no Macromedia Flash MX. Você pode editar o gráfico ou a imagem de origem original. Importar arquivos PNG do Fireworks Você pode importar arquivos nativos PNG do Fireworks para o Macromedia Flash MX. As formas vetoriais, linhas, camadas e guias permanecem editáveis. Você também pode importar bitmaps nivelados. Uma vez que importa os arquivos para o Macromedia Flash MX, você pode adicionar interatividade, efeitos e animação sofisticados. Os arquivos PSD do Adobe Photoshop podem ser importados para o Fireworks e salvos como arquivos PNG com camadas para serem importados para o Macromedia Flash MX. Exportar os filmes do Macromedia Flash do Fireworks O Fireworks permite exportar filmes nativos do Macromedia Flash (arquivos SWF) para que você possa publicar os filmes do Macromedia Flash diretamente do Fireworks. Você pode criar banners com anúncios animados e exportá-los como filmes do Macromedia Flash para arquivos menores e compactos. Importar arquivos PNG do Fireworks para o Macromedia Flash MX Você pode importar arquivos PNG do Fireworks para o Macromedia Flash MX como imagens niveladas ou como objetos editáveis. Quando você importa um arquivo PNG como uma imagem nivelada, todo o arquivo (incluindo qualquer gráfico vetorial) é rasterizado ou convertido em uma imagem bitmap. Quando você importa um arquivo PNG como objeto editável, o gráfico vetorial no arquivo fica preservado no formato vetorial. Você pode escolher preservar os bitmaps, o texto e guias colocados no arquivo PNG ao importá-los como objetos editáveis. Se importar o arquivo PNG como uma imagem nivelada, você poderá executar o Fireworks do Macromedia Flash MX e editar o arquivo PNG original (com os dados vetoriais). Consulte Ajuda do Flash > Usando o Flash > Editar bitmaps em um editor externo. 236 Capítulo 9

237 Ao importar vários arquivos PNG em lote, você escolhe as configurações de importação uma vez. O Macromedia Flash MX usa as mesmas configurações para todos os arquivos em um lote. Observação: Você pode editar imagens bitmap no Macromedia Flash MX convertendo as imagens bitmap em elementos gráficos vetoriais ou desmembrando as imagens bitmap. Veja Converter bitmaps em elementos gráficos vetoriais e Desmembrar um bitmap sob a Ajuda do Flash > Usando o Flash. Para importar um arquivo PNG do Fireworks: 1 Escolha Arquivo > Importar. 2 Na caixa de diálogo Importar, escolha Imagem PNG do menu pop-up Arquivos do tipo (Windows) ou Mostrar (Macintosh). 3 Navegue para uma imagem PNG do Fireworks e selecione-a. 4 Efetue um dos procedimentos a seguir: No Windows ou no sistema operacional do Mac X ou posterior, clique em Abrir. No sistema operacional do Mac 9.X ou anterior, clique em Adicionar para adicionar o arquivo selecionado à lista Importar e clique em Importar para importar o arquivo ou arquivos na lista Importar. 5 Na caixa de diálogo Configuração de importação de PNG do Fireworks, selecione um dos seguintes para Estrutura do arquivo: Importar como clipe de filme e manter camadas importa o filme do PNG como clipe de filme, com todos os seus quadros e camadas intactos dentro do símbolo de clipe de filme. Importar nova camada na cena atual importa o arquivo PNG para o documento atual do Macromedia Flash em uma única nova camada na parte superior da ordem de empilhamento. As camadas do Fireworks são niveladas em uma única camada. Os quadros do Fireworks estão contidos na nova camada. 6 Para Objetos, selecione uma das seguintes opções: Rastrear se necessário para manter aparência preserva o preenchimento, os traços e os efeitos do Fireworks no Macromedia Flash MX. Manter todos os caminhos editáveis mantém todos os objetos como caminhos editáveis do vetor. Alguns preenchimentos, traços e efeitos do Fireworks serão perdidos na importação. 7 Para Texto, selecione uma das seguintes opções: Rastrear se necessário para manter aparência preserva o preenchimento, os traços e os efeitos do Fireworks no Macromedia Flash MX. Manter todos os caminhos editáveis mantém todo o texto editável. Alguns preenchimentos, traços e efeitos do Fireworks serão perdidos na importação. 8 Selecione Importar como uma única imagem nivelada para nivelar o arquivo PNG em uma imagem de único bitmap. Quando esta opção estiver selecionada, todas as outras opções ficam acinzentadas. 9 Clique em OK. Integração do Macromedia Flash MX com a família de produtos Macromedia Studio MX 237

238 Macromedia ColdFusion MX Server O Macromedia ColdFusion é a forma mais rápida para construir e desenvolver aplicações poderosas de Internet. Usado por centenas de milhares de desenvolvedores em todo o mundo, o ColdFusion facilita o desenvolvimento rápido de conteúdo para sistemas de publicação, soluções comerciais inteligentes, aplicativos self-service e outros. Os desenvolvedores do Macromedia Flash encontrarão o ColdFusion MX, incluindo J2EE e suporte ao servidor de aplicativos Microsoft.Net, como o ambiente do lado do servidor mais fácil e mais poderoso para aplicativos com vários recursos. Macromedia ColdFusion MX Server e Macromedia Flash MX O Macromedia ColdFusion MX, com a sua amigabilidade e capacidade de desenvolvimento rápido, sua fácil e poderosa integração com uma ampla variedade de sistemas auxiliares e o seu forte suporte a XML, é o ambiente ideal para criar aplicativos Macromedia Flash MX. Para que os aplicativos que usam diversos recursos captem verdadeiramente a atenção, precisam ser capazes de intercambiar dados com uma ampla gama de sistemas auxiliares. O ColdFusion MX fornece conectividade fácil e integrada a um conjunto completo de sistemas auxiliares, incluindo todos os principais bancos de dados, principais servidores, servidores de arquivos, diretórios empresariais e interfaces membros de plataformas cruzadas. O ColdFusion MX inclui drivers de banco de dados de desempenho elevado para todos os principais bancos de dados e facilita a configuração de origens de dados em minutos através de uma simples interface baseada na Web. Os desenvolvedores do ColdFusion podem enviar e recuperar mensagens com facilidade de servidores de correio eletrônico, conectar-se a diretórios empresariais e intercambiar documentos com servidores de arquivos. O ColdFusion também fornece conectividade aos aplicativos existentes usando as interfaces membros COM, CORBA ou EJB. O ColdFusion MX também aceita intercâmbio de dados baseado em XML com o Flash Player. Através do intercâmbio de dados dinâmicos estruturados com ColdFusion MX, os desenvolvedores de aplicativos com vários recursos Macromedia Flash MX podem aproveitar todo o poder do processamento lógico e conectividade auxiliar que o ColdFusion MX fornece. A parte VIII desse manual lhe dá uma visão geral do desenvolvimento dinâmico de Web e uma introdução ao Developer Edition do ColdFusion MX que pode ser instalado do CD-ROM do Macromedia Studio MX ou obtido por download do Website da Macromedia em Para aprender mais sobre as melhores práticas para integração entre o ColdFusion MX e o Macromedia Flash MX, consulte o Macromedia Flash e o Centro de recursos do ColdFusion em Capítulo 9

239 Parte V Fireworks MX Parte V Os capítulos da Parte V apresentam o Macromedia Fireworks MX, possuem um tutorial e descrevem como o Fireworks MX trabalha com a família de produtos Macromedia Studio MX. Os capítulos a seguir fazem parte desta seção: Capítulo 10, Bem-vindo ao Macromedia Fireworks MX Capítulo 11, Tutoriais do Fireworks Capítulo 12, Integração do Fireworks MX com a família de produtos Macromedia Studio MX

240

241 CAPÍTULO 10 Bem-vindo ao Macromedia Fireworks MX O Macromedia Fireworks MX é a solução para produção e projeto gráfico de Web profissional. Ele é o primeiro ambiente de produção a abordar e resolver os desafios especiais que encontram os desenvolvedores e projetistas de elementos gráficos para a Web. Você pode usar o Fireworks para criar, editar e animar os elementos gráficos de Web, adicionar interatividade avançada e otimizar imagens em um ambiente profissional. No Fireworks, você pode criar e editar elementos gráficos vetoriais e de bitmap em um único aplicativo. Tudo é editável, o tempo todo. E você pode automatizar o fluxo de trabalho para atender às exigências de atualizações e alterações de consumo de tempo. O Fireworks é integrado a outros produtos do Macromedia Studio MX para fornecer uma solução verdadeira integrada de Web. Você pode exportar facilmente os elementos gráficos do Fireworks com código HTML e JavaScript personalizado para o editor de HTML que está usando. Novidades do Fireworks MX Os novos recursos do Fireworks MX o tornam um aplicativo ainda mais amigável com mais recursos para criar elementos gráficos e interatividade para Websites. O Fireworks MX maximiza a produtividade de projetistas de Web e desenvolvedores de HTML experientes que também trabalham com elementos gráficos e desenvolvedores de Web iniciantes com pouco ou nenhum conhecimento sobre codificação ou JavaScript que precisam desenvolver páginas de Web interativas e elementos gráficos de alta qualidade. O Fireworks MX passou por uma melhoria profunda, agora tem uma interface de usuário aprimorada, botões com mais recursos e capacidades de menu pop-up e ferramentas de vetores e bitmap intuitivos. A integração com outros aplicativos da Macromedia como aplicativos de terceiros torna fácil levar vários formatos de arquivo para o Fireworks e enviá-los para outros aplicativos sem problemas, conforme você trabalha. É também uma novidade para o Fireworks a poder criar comandos JavaScript com Macromedia Flash MX que aparecem no Fireworks MX como painéis ou caixas de diálogos. Recursos fáceis de usar no Fireworks MX Um ambiente de trabalho confortável e intuitivo incluindo um inspetor de propriedades e ferramentas que funcionam da forma que profissionais gostariam tornam o Fireworks MX um aplicativo fácil de aprender permitindo que comece a ser usado rapidamente. O Fireworks MX tem uma nova aparência que fica organizada melhor e mais consistente com outros aplicativos no Macromedia MX Studio. 241

242 Gerenciamento de painéisas melhorias incluem a possibilidade de colocar painéis em grupos e, em seguida, reduzir os grupos de forma que somente a barra de títulos do grupo do painel fique visível até que você precise usar os painéis. Você pode acoplar os grupos de painéis em uma área de acoplamento de painel para organizar o seu espaço de trabalho ou arrastar grupos ou painéis individuais para qualquer lugar no espaço de trabalho. Para obter mais informações, consulte a Ajuda do Fireworks MX > Usando o Fireworks > Organizar grupos de painel e painéis. O inspetor de propriedades é um painel dinâmico cheio de opções que mudam conforme você trabalha. Abrir um documento e o inspetor de propriedades exibe as propriedades do documento como cor e tamanho da tela. Escolher uma ferramenta do painel Ferramentas e o inspetor de propriedades exibe as opções de ferramentas. Selecionar um objeto vetorial e ele exibe informações sobre o traço e preenchimento. Você pode alterar estas e outras opções incluindo efeitos ao vivo, modos de mesclagem e opacidade diretamente do inspetor de propriedades, em vez de ter que clicar para abrir ou ativar painel após painel. O inspetor de propriedades conhecido dos usuários do Macromedia Flash e do Dreamweaver reduz o número de painéis no espaço de trabalho. Para obter mais informações, consulte a Ajuda do Fireworks > Usando o Fireworks > Usar o inspetor de propriedades. Edição vetorial e de bitmap sem modo elimina a necessidade de acompanhar constantemente os modos vetoriais e de bitmap. A escolha de uma ferramenta ou a seleção de um tipo de objeto automaticamente determina se você estará criando e editando bitmaps, vetores ou texto. Melhorias de edição de bitmap fornecem capacidade para criar bitmaps por corte ou cópia e cola, para mover as seleções marcadas entre os bitmaps e para melhorar as imagens com um novo grupo de ferramentas de retoque de imagens. Além disso, comandos de seleção comum são organizados em um novo menu Seleção. Seções de painel de ferramentas que separam as ferramentas usadas para criar e editar ferramentas, vetores e objetos de Web oferecem indicações para escolher intuitivamente a ferramenta adequada e obter resultados criativos predizíveis. Outras ferramentas e recursos de ferramentas são separados nas categorias Selecionar, Cores e Visualizar. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Usar o painel Ferramentas. O botão Exportação rápida exibe opções convenientes para exportar uma variedade de formatos de arquivo ou estilos HTML ou executar outros produtos Macromedia da janela do documento, eliminando tempo de configuração e simplificando o fluxo de trabalho. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Usar o botão Exportação rápida. Texto na tela permite que você integre visualmente texto e elementos gráficos sem ter que usar o Editor de texto. Basta escolher a ferramenta Texto, clicar na tela e começar a digitar. No inspetor de propriedades, você pode definir os atributos de texto para a ferramenta Texto antes de começar a digitar ou destacar o texto existente e formatá-lo. O Fireworks MX tem um grupo novo de controles de parágrafo e texto para formatar texto. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Usar texto. Zoom variável permite que você arraste a ferramenta de ampliação para determinar a quantidade desejada de ampliação. Após você arrastar para ampliar o documento, a quantidade de ampliação é exibida na caixa de texto Definir ampliação na parte inferior do documento. A compatibilidade do Windows XP e do sistema operacional Mac X tira vantagem dos sistemas operacionais mais recentes. O Fireworks MX está totalmente preparado para suportar todas as melhorias de interface de usuário do sistema operacional X. 242 Capítulo 10

243 Exportação de XHTML permite exportar, atualizar e enviar e obter XHTML em todos os mesmos estilos que o Fireworks oferece para HTML. Você pode enviar e obter documentos derivados que foram convertidos para XHTML no Dreamweaver MX. O painel Respostas, um novo recurso no Fireworks MX, Macromedia Dreamweaver MX e Macromedia Flash MX, é um vínculo atualizável para conteúdo de Web, localizado convenientemente no espaço de trabalho do Fireworks. Quando você está on-line, pode clicar no botão Atualizar e descarregar informações de referência recente do Macromedia ou procurar bancos de dados on-line para obter documentação como Notas técnicas. O corretor ortográfico procura palavras escritas incorretamente em todo bloco de texto no seu documento. Quando ele encontra uma palavra que não reconhece, oferece sugestões para corrigila ou permite que você adicione-a ao dicionário. Cache de fontes de plataformas cruzadas torna fácil compartilhar os arquivos entre os grupos de trabalho e clientes sem preocupações quanto a questões de fonte de plataforma cruzada. O Fireworks mantém a aparência de todo o texto em um documento em sistemas que não possuem fontes no documento. Recursos de melhoria de energia no Fireworks MX O Fireworks MX tem uma série de recursos poderosos de criatividade e automação que serão consirados fáceis de serem usados por projetistas de Web iniciantes e experientes. Esses recursos tornam o Fireworks uma parte essencial do processo do projetista e desenvolvedor de Web desde o conceito à integração. O Assistente para elementos gráficos dirigido por dados permite que você atribua variáveis a texto, imagens, pontos ativos e fatias e, em seguida, gera vários documentos baseados no original, cada um com informações exclusivas tiradas de um arquivo de banco de dados XML ou separado por vírgulas. O Construtor e barras de navegação no menu Comandos automatiza o processo de criação rápida de barras de navegação usando símbolos de botões convenientes do Fireworks MX. Você pode selecionar uma instância de um símbolo de botão e, em seguida, escolher o número de cópias a serem feitas, escolher orientação vertical ou horizontal e espaçamento e atribuir rótulos de botões e URLs em uma caixa de diálogo integrada. Melhorias do editor de menu pop-up possuem controle criativo adicionado ao novo recurso mais popular no Fireworks 4. Agora, você pode criar um menu pop-up horizontal ou vertical e determinar caracteres de borda, espaçamento de célula e tamanho de célula independente do tamanho do texto. Você também pode definir o posicionamento de menus relativos ao objeto acionador assim como o posicionamento de submenus relativos ao item do menu acionador ou menu pop-up principal. O Fireworks gera automaticamente código JavaScript para você; os menus exportados são totalmente compatíveis com o Dreamweaver MX. Para obter mais informações, consulte a Ajuda do Fireworks MX > Usando o Fireworks > Criar menus pop-up. Edição de símbolo de botão a nível de instância permite que você crie um símbolo de botão e diferencie facilmente botões individuais com texto, URLs e destinos exclusivos usando o inspetor de propriedades. Enquanto isso, você pode editar as outras características gráficas a nível do símbolo e atualizar as edições de todas as instâncias dos botões sem afetar as propriedades de nível de instância. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Criar símbolos de botão. Bem-vindo ao Macromedia Fireworks MX 243

244 Abrir recursos de fluxo de trabalho no Fireworks MX Você não precisa ser confinado pelo fluxo do trabalho de alguma outra pessoa. Usando o Fireworks MX, você pode integrar a produção gráfica em seu processo de desenvolvimento com um fluxo de trabalho aberto e eficaz que reconhece e dá suporte a formatos de arquivo, aplicativos e padrões que você usa. Os comandos JavaScript com interface SWFlevam a criação de comandos JavaScript a um nível superior. Os desenvolvedores podem criar e executar comandos complexos para ampliar e automatizar o Fireworks MX combinando a API de extensibilidade de JavaScript do Fireworks com interfaces desenvolvidas no Macromedia Flash MX usando componentes e ActionScript. Para obter mais informações, consulte Estender o Fireworks MX, disponível como PDF no CD de instalação do Macromedia Fireworks. Suporte ao Exchange do Macromedia significa que os usuários mesmo os que não estão interessados em criar comandos JavaScript podem descarregar comandos criados por usuários do Exchange. Os comandos aparecem no espaço de trabalho do Fireworks MX como painéis ou caixas de diálogo fáceis de serem usados. O Fireworks MX vem com vários comandos criados pelo usuário no menu Comandos, assim como o painel Alinhar criado pelo usuário no menu Janela. O controle de layout de tabela de fatias permite que você defina e otimize layouts de tabelas de fatias arrastando guias de fatias. O Fireworks redimensiona automaticamente as fatias associadas, adicionando e excluindo fatias conforme necessário. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Mover as guias de fatias para editar fatias. O recurso Reconstituir tabelas constrói instantaneamente um novo arquivo fonte PNG do Fireworks PNG quando você aponta para qualquer arquivo HTML contendo tabelas com fatias de imagens. Os comportamentos do Macromedia Fireworks e do Dreamweaver como os mudanças de imagens e menus pop-up são importados e associados às fatias apropriadas. Isso é útil quando você estiver trabalhando em projetos de Website existentes e os únicos arquivos disponíveis forem as páginas HTML enviadas. Você pode colocar os arquivos HTML no Fireworks e criar arquivos origem PNG deles. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Criar arquivos do Fireworks a partir de arquivos HTML. Enviar e obter texto do Photoshop 6 permite que você abra um arquivo do Photoshop 6 ou 7 com texto editável intacto, de forma que o elemento gráfico possa ser editado e, em seguida, exportado de volta para o formato do Photoshop enquanto mantém a aparência correta do texto e capacidade de edição. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Sobre como importar texto do Photoshop. Enviar e obter com Microsoft FrontPage está disponível com um clique do botão Exportação rápida. A ativação e a edição de tabelas funcionam no arquivo original no Fireworks; as tabelas são atualizadas no Microsoft FrontPage sem perder as mudanças no código que foram feitas no FrontPage. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Exportar o HTML do Fireworks para o FrontPage. A integração do Macromedia Sitespring coloca as melhores práticas em produção e gerenciamento de clientes no espaço de trabalho do Fireworks MX. Basta escolher Janela > `Sitespring para abrir a janela Sitespring. Para obter mais informações, consulte a documentação do Sitespring. 244 Capítulo 10

245 Aprender a usar o Fireworks MX Vários recursos estão disponíveis no Macromedia Studio MX para aprender o Fireworks, incluindo um sistema de ajuda que você pode ativar de um aplicativo, uma versão PDF da documentação completa do Fireworks e várias fontes de informação baseadas em Web. A ajuda do Fireworks está disponível sempre que o aplicativo Fireworks estiver ativo e contém a documentação completa do Fireworks. Os tutoriais do Fireworks fornecem uma introdução interativa aos recursos chave no Fireworks que você pode realizar em cerca de uma hora cada. Eles incluem tarefas comuns do Fireworks como o uso de ferramentas de desenho e de edição, a otimização de imagens e a criação de elementos interativos como barras de navegação e imagens que mudam. Os tutoriais estão disponíveis em Capítulo 11, Tutoriais do Fireworks, na página 247. O painel Respostas é um local central onde você pode encontrar tutoriais, notas técnicas e as informações mais atualizadas sobre o Fireworks, tudo em um lugar. O painel Respostas é dinâmico e somente com o clique de um botão você pode obter as atualizações mais recentes e informações sobre o Fireworks diretamente do Macromedia. O próprio aplicativo Fireworkscontém muitas caixas de diálogo e dicas de ferraementas projetadas para lhe auxiliar no uso do programa. As dicas de ferramentas aparecem quando o seu ponteiro pausa sobre um elemento da interface. O PDF Usar Fireworks MX é um documento que pode ser impresso, com recurso de busca, que consiste na documentação completa do Fireworks. Esse PDF está disponível no CD de instalação e no Website da Macromedia em O Website da Macromedia é atualizado regularmente com as informações mais recentes sobre o Fireworks além de conselhos de usuários especialistas, tópicos avançados, exemplos, dicas e atualizações. Visite o Website da Macromedia para obter novidades sobre o Fireworks e como obter o máximo do programa em O grupo de discussão do Fireworks fornece um intercâmbio em tempo real para os usuários do Fireworks, representantes de suporte técnico e a equipe de desenvolvimento do Fireworks. Use um leitor de grupo de notícias para ir para news://forums.macromedia.com/macromedia.fireworks. Estender o Fireworks MX inclui informações sobre como escrever JavaScript para automatizar as tarefas do Fireworks. Todos os comandos ou definições no Fireworks podem ser controlados através dos comandos especiais do JavaScript que o Fireworks pode interpretar. Uma versão PDF do Estender o Fireworks MX está disponível no CD e no Website da Macromedia em Bem-vindo ao Macromedia Fireworks MX 245

246 246 Capítulo 10

247 CAPÍTULO 11 Tutoriais do Fireworks Os dois tutoriais nesse capítulo o guiarão através das tarefas básicas relativas a projetar elementos gráficos e a adicionar elementos interativos em uma página de Web no Macromedia Fireworks MX. Tutorial do Fireworks 1: Conceitos básicos do projeto de um elemento gráfico Esse tutorial o guiará através das tarefas básicas do projeto de elementos gráficos com o Macromedia Fireworks MX. Você obterá conhecimento útil usando o aplicativo gráfico para Web líder do setor e aprenderá os conceitos básicos de projeto de elementos gráficos durante o tutorial. Se você já está familiarizado com o projeto de gráficos no Fireworks, pode desejar ir para Tutorial do Fireworks 2: Conceitos básicos de projeto para Web, na página 275, onde aprenderá sobre o projeto de páginas na Web com Fireworks. O que você aprenderá Através desse tutorial, em menos de uma hora, você realizará as tarefas necessárias para criar um anúncio para aluguéis de carros clássicos usando Fireworks. Você aprenderá a fazer o seguinte: Criar e salvar um novo documento Explorar o ambiente de trabalho do Fireworks Criar e editar objetos vetoriais Importar um bitmap e selecionar pixels Adicionar e editar efeitos ao vivo Trabalhar com camadas e objetos Criar e editar uma máscara Criar e editar texto Exportar o documento 247

248 O que você deve saber Apesar desse tutorial ter sido desenvolvido para usuários iniciantes do Fireworks, ele cobre muitos recursos novos no Fireworks, para que usuários experientes do Fireworks possam se beneficiar dele também. Você não precisará ser um projetista gráfico para realizar esse tutorial, mas deve possuir habilidades básicas de computador e poder usar aplicativos gráficos comuns. Isso inclui conhecer como navegar entre arquivos e pastas no seu disco rígido. Copiar a pasta Tutoriais Antes de começar, você fará uma cópia da pasta Tutorials, para que possa salvar os resultados do seu trabalho enquanto permite que você ou outro usuário conclua o tutorial posteriormente usando os arquivos originais. 1 Navegue para a pasta do aplicativo Fireworks no disco rígido. Observação: Se você não conseguir ver a pasta do aplicativo Fireworks, pode ter acesso limitado aos arquivos no seu sistema. Você pode descarregar os arquivos que precisa para esse tutorial do Centro de Suporte do Fireworks na Web em 2 Arraste uma cópia da pasta Tutorials para a área de trabalho. Visualizar o arquivo completo Visualize o arquivo tutorial completo para ver como o seu projeto concluído parece. 1 Ative o navegador de Web. 2 No disco rígido, navegue para a pasta Tutorials que você copiou para a área de trabalho e navegue para Tutorial1/Complete. Observação: Algumas versões do Microsoft Windows ocultam extensões de tipos de arquivos conhecidos por padrão. Se você não tiver alterado essa configuração, os arquivos na pasta Complete não exibirão extensões. Ao lidar com gráficos na Web, é melhor ver as extensões do arquivo. Consulte a Ajuda do Windows para obter informações sobre como ativar de volta as extensões de arquivo. 3 Selecione o arquivo final.jpg e arraste-o para abrir a janela do navegador. Para esse tutorial, você usará o Fireworks para projetar e exportar uma cópia desse anúncio para carros clássicos de aluguel. Observação: A pasta Complete também inclui o documento Fireworks a partir do qual esse arquivo JPEG foi gerado. Para visualizar o documento, clique duas vezes em final.png. 248 Capítulo 11

249 Criar e salvar um novo documento Agora que você viu o arquivo final.jpg, estará pronto para iniciar o projeto. 1 No Fireworks, selecione Arquivo > Novo. A caixa de diálogo Novo documento abre. 2 Digite 480 para a largura e 214 para a altura. Assegure que as duas medidas estejam em pixels e que a cor da tela seja branca e clique em OK. Uma janela de documento abre, com a barra de título nomeada Sem título-1.png (Windows) ou Sem título-1 (Macintosh). 3 Se a janela de documento não estiver maximizada (isto é, se ela não preencher o centro da tela), maximize-a clicando no botão maximizar (Windows) ou a caixa zoom (Macintosh) na parte superior da janela de documento. Isso lhe dará muito espaço para trabalhar. 4 Escolha Arquivo > Salvar como. A caixa de diálogo Salvar como (Windows) ou Salvar (Macintosh) é aberta. 5 Navegue para a pasta Tutorials/Tutorial1 na área de trabalho. 6 Nomeie o arquivo vintage. Tutoriais do Fireworks 249

250 7 Escolha a opção Adicionar extensão de nome de arquivo se ainda não tiver selecionado (somente Macintosh). 8 Clique em Salvar. A barra de título exibe o nome de arquivo novo com uma extensão.png. PNG é o formato de arquivo nativo do Fireworks. O arquivo PNG é o seu arquivo origem; onde você fará todo o trabalho no Fireworks. No final desse tutorial, você aprenderá como exportar o documento para outro formato para ser usado na Web. Conforme você conclui o tutorial, lembre-se de salvar o seu trabalho com freqüência escolhendo Arquivo > Salvar. Observação: Ao concluir o tutorial, você poderá considerar útil desfazer uma alteração feita anteriormente. O Fireworks pode desfazer várias de suas alterações recentes, dependendo do número de etapas de desfazer que você definiu em Preferências. Para desfazer a alteração mais recente, escolha Editar > Desfazer. Explorar o ambiente de trabalho do Fireworks Antes de continuar, examine os elementos que compõem o ambiente de trabalho do Fireworks: No centro da tela, está a janela de documentos. No centro da janela de documentos, está a tela. É ali que onde o documento do Fireworks e todos os gráficos que você cria são exibidos. Na parte superior da tela, está a barra de menu. A maioria dos comandos do Fireworks são acessíveis da barra de menu. No lado esquerdo da tela, está o painel Ferramentas. Se o painel Ferramentas não estiver visível, escolha Janela > Ferramentas. O painel Ferramentas é onde você encontrará as ferramentas para selecionar, criar e editar uma variedade de itens gráficos e objetos de Web. 250 Capítulo 11

251 Na parte inferior da tela, está o inspetor de propriedades. Se o inspetor de propriedades não estiver visível, escolha Janela > Propriedades. O inspetor de propriedades exibe as propriedades de um objeto ou ferramenta selecionada. Você pode alterar essas propriedades. Se nenhum objeto ou ferramenta estiver selecionado, o inspetor de propriedades exibe as propriedades do documento. O inspetor de propriedades exibe duas ou quatro linhas de propriedades. Se o inspetor de propriedades não estiver na altura média, isto é, exibindo somente duas linhas, você pode clicar na seta expansora no canto direito inferior para ver todas as propriedades. A seta expansora no estado de altura média No lado direito da tela há uma variedade de painéis, como o painel Camadas e o painel Otimizar. Você pode abrir estes e outros painéis no menu Janela. Mova o ponteiro sobre os vários elementos de interface. Se você mantiver o ponteiro sobre um item na interface por muito tempo, uma dica de ferramentas aparece. As dicas de ferramentas identificam as ferramentas, os menus, os botões e outros recursos do Fireworks. As dicas de ferramentas desaparecem quando você afasta o ponteiro do respectivo elemento da interface. Você aprenderá mais sobre cada um desses elementos ao progredir no tutorial. Criar e editar objetos vetoriais Com Fireworks, você pode criar e editar dois tipos de gráficos: objetos vetoriais e imagens de bitmap. Um objeto vetorial é uma descrição matemática de uma forma geométrica. Os caminhos vetoriais são definidos por pontos. Os caminhos vetoriais não apresentam degradação quando você efetua um zoom sobre eles ou os redimensiona. A folha na ilustração abaixo é uma coleção de objetos vetoriais. Note que a suavidade das extremidades da folha aparecerão mesmo quando você a redimensioná-la. Tutoriais do Fireworks 251

252 Por outro lado, uma imagem bitmap é composta de uma grade de pixels coloridos. As imagens com variações coloridas complexas, como fotografias, são na maioria das vezes imagens de bitmap. Enquanto a maioria dos aplicativos oferece ferramentas para editar formas vetoriais ou imagens de bitmap, o Fireworks permite que você trabalhe com os dois tipos de gráficos. Você trabalhará com gráficos vetoriais nessa seção. Criar objetos vetoriais Agora, você criará dois dos elementos gráficos para o seu documento. Em primeiro lugar, você criará um retângulo azul que será posicionado na parte inferior do documento. Em seguida, você criará um retângulo que agirá como uma borda para o conteúdo da tela. 1 Escolha a ferramenta Retângulo na seção Vetor do painel Ferramentas. 2 No inspetor de propriedades, clique na caixa Cor de preenchimento. A janela pop-up Cor de preenchimento abre. 252 Capítulo 11

253 3 Digite na caixa de texto na parte superior da janela e, em seguida, pressione Enter. A caixa Cor de preenchimento muda para uma cor azul escura para refletir a sua escolha de cor. 4 Na janela de documento, posicione o ponteiro com forma de cruz sobre a tela e arraste-o para baixo e para a direita para criar um retângulo. Você pode arrastar o retângulo para qualquer lugar na tela. Você o redimensionará e o reposicionará neste procedimento. 5 Ao soltar o botão do mouse, aparecerá um retângulo azul escuro selecionado na área que você definiu. Você pode saber quando um objeto está selecionado porque ele exibe pontos azuis nos cantos. A maior parte dos objetos também têm um destaque azul ao redor de suas extremidades externas, mas os retângulos são uma exceção. 6 No canto inferior esquerdo do inspetor de propriedades, digite 480 na caixa de largura e 15 na caixa de altura e, em seguida, pressione Enter. O retângulo é redimensionado para encaixar nas dimensões especificadas. 7 Escolha a ferramenta Ponteiro na seção Selecionar do painel Ferramentas. 8 Arraste o retângulo de forma que ele fique posicionado na parte inferior da tela, como mostrado abaixo. Use as teclas de seta para posicioná-lo com exatidão. 9 Escolha a ferramenta Retângulo novamente e desenhe um segundo retângulo. Desenhe-o em qualquer lugar na tela e faça-o do tamanho que desejar. Você alterará as suas propriedades e posição na próxima seção. Tutoriais do Fireworks 253

254 Definir as propriedades do objeto Aqui, você editará o segundo retângulo que criou alterando o seu tamanho, posição e cor no inspetor de propriedades. 1 Com o retângulo ainda selecionado, clique na caixa Cor do traço no inspetor de propriedades e digite CCCCCC como o valor da cor. Pressione Enter para aplicar a alteração. 2 Defina o Tamanho da dica como 1 arrastando o controle deslizante pop-up ou digitando na caixa de texto. 3 Clique na caixa Cor de preenchimento no inspetor de propriedades e clique no botão Transparente. 4 No inspetor de propriedades, digite os valores seguintes para a largura e altura e as caixas de coordenadas. Em seguida, clique fora do inspetor de propriedades para aplicar as suas alterações. Largura: 480 Altura: 215 X: 0 Y: 0 O retângulo se torna uma borda cinza ao redor da extremidade da tela. Se o seu sistema usa cinza como cor para o fundo da janela, pode ser difícil ver o retângulo nesse ponto. Mas não se preocupe, ele ainda está lá. 5 Escolha a ferramenta Ponteiro e clique em qualquer lugar longe do retângulo para desmarcá-lo. As propriedades são alteradas no inspetor de propriedades. Como não há objetos selecionados, você verá as propriedades do documento em vez das propriedades do objeto. 254 Capítulo 11

255 Importar um bitmap e selecionar pixels Em seguida, você importará uma imagem bitmap e criará uma seleção flutuante de seus pixels. Importar uma imagem Você modificará uma imagem de um automóvel clássico. Em primeiro lugar, você precisará importar a imagem. 1 Escolha Arquivo > Importar e navegue para a pasta Tutorials na área de trabalho. Navegue para a pasta Tutorial1/Assets. 2 Selecione car.jpg e clique em Abrir. 3 Alinhe o ponteiro de inserção com o canto esquerdo superior da tela e clique, como mostrado na ilustração seguinte. A imagem aparece selecionada na tela. 4 Clique em qualquer lugar fora da imagem selecionada para desmarcá-la. Criar uma seleção de pixel A seguir, você selecionará os pixels que compõem o carro na imagem importada e os copiará e colará como um novo objeto. 1 Escolha a ferramenta Zoom na seção Visualizar no painel Ferramentas. Ferramenta Zoom 2 Clique uma vez na imagem. A visualização é ampliada para 150%. A ampliação permite que você veja melhor o que está selecionando e dá maior controle sobre a seleção. Tutoriais do Fireworks 255

256 3 Clique e mantenha o botão do mouse selecionado na ferramenta Laço na seção Bitmap do painel Ferramentas. Escolha a ferramenta Laço polígono do menu pop-up que aparece. A ferramenta Laço polígono permite que você desenhe uma seleção ao redor dos pixels usando uma série de linhas retas. Você usará a ferramenta Laço polígono para selecionar os pixels que compõem a imagem do carro. 4 No inspetor de propriedades, defina a opção Borda como Suavização do serrilhado. 5 Clique com o ponteiro de ferramenta Laço polígono na extremidade superior do carro e, em seguida, clique repetidamente ao redor da extremidade do carro para continuar a seleção. 6 Complete a seleção movimentando o ponteiro sobre o local onde você iniciou a seleção. Um pequeno quadrado cinza aparece ao lado do ponteiro Laço polígono para indicar que você está prestes a completar a seleção. Clique para completar a seleção. Uma borda de marcação aparece ao redor dos pixels que você selecionou. 7 Selecione Editar> Copiar. A seleção é copiada para a Área de trabalho. 8 Selecione Editar > Colar. A imagem do carro é colada no documento como um novo objeto de bitmap. 256 Capítulo 11

257 9 Escolha a ferramenta Ponteiro e clique duas vezes em qualquer lugar fora do bitmap para desmarcá-lo. 10 Clique no menu pop-up Definir ampliação na parte inferior da janela do documento e volte a visualização para 100%. Adicionar e editar efeitos ao vivo Em seguida, você abrirá Efeitos ao vivo na imagem de bitmap original. Você alterará a saturação e o matiz da imagem e aplicará um embaçamento. 1 Clique em qualquer lugar na imagem do deserto. (Seja cuidadoso para não clicar no carro, entretanto). 2 No inspetor de propriedades, clique no botão Adicionar efeito (o botão com o sinal de mais (+)). Botão Excluir efeitos Botão Adicionar efeitos 3 Escolha Ajustar cor > Matiz/Saturação no menu pop-up Efeitos. A caixa de diálogo Matiz/Saturação abre. Tutoriais do Fireworks 257

258 4 Escolha a opção Colorir e clique em OK. A imagem fica colorida na tela e o efeito é adicionado à lista Efeitos ao vivo no inspetor de propriedades. Os efeitos ao vivo são editáveis; você pode sempre adicionar essa lista, excluir o efeito ou editar o efeito. 5 Clique duas vezes no efeito Matiz/Saturação para editá-lo. Dica: Alternativamente, você pode clicar no botão informações do lado do efeito. A caixa de diálogo Matiz/Saturação abre novamente. 6 Altere o Matiz para 25 e a Saturação para 20 e clique em OK. Os níveis de saturação e matiz da imagem mudam para exibir uma aparência sépia, como em uma fotografia antiga. 7 Clique no botão Adicionar efeitos novamente para adicionar um outro Efeito ao vivo. 8 Escolha Embaçar > Embaçar mais no menu pop-up Efeitos. Os pixels do bitmap selecionado ficam embaçados e o novo efeito é adicionado à lista Efeitos ao vivo no inspetor de propriedades. Trabalhar com camadas e objetos As camadas dividem um documento do Fireworks em planos discretos. Um documento pode ser composto por muitas camadas e cada camada pode conter muitos objetos. No Fireworks, o painel Camadas lista as camadas e os objetos contidos em cada camada. Usando o painel Camadas, você pode nomear, ocultar, mostrar e alterar a ordem de empilhamento de camadas e objetos, assim como mesclar bitmaps e aplicar máscaras de bitmap. Você também pode adicionar e excluir camadas usando o painel Camadas. Nessa parte do tutorial, você usará o painel Camadas para mesclar as duas imagens de bitmap. Em seguida, você nomeará os objetos no documento. Você também usará o painel Camadas para alterar a ordem de empilhamento dos objetos. Posteriormente no tutorial, você usará o painel Camadas para aplicar uma máscara na imagem mesclada. 258 Capítulo 11

259 Mesclar bitmaps Agora que aplicou Efeitos ao vivo à imagem de fundo, você a mesclará com a imagem de carro em tom de cinza para criar um único bitmap. 1 Se o painel Camadas estiver minimizado ou não estiver visível, clique em sua seta expansora ou escolha Janela > Camadas. Seta expansora 2 Clique na miniatura da imagem do carro em tons de cinza no painel Camadas. 3 Com a imagem do carro selecionada, clique no ícone de menu pop-up Opções no lado superior direito do painel Camadas. Ícone do menu pop-up Opções 4 Escolha Mesclar para baixo. No painel Camadas, os dois objetos de bitmap são mesclados em um bitmap. No inspetor de propriedades, não há mais efeitos na lista Efeitos ao vivo. Isso ocorre porque mesclar para baixo combina os pixels de cada bitmap e os torna ineditáveis como imagens separadas. O Efeito ao vivo que você aplica a um objeto ou bitmap não é mais editável após você realizar uma mesclagem para baixo com outro bitmap. Tutoriais do Fireworks 259

260 Nomear objetos É sempre uma boa idéia nomear os seus objetos de forma que você possa facilmente identificá-los posteriormente. Se um documento ficar grande e contiver muitos objetos, pode ser difícil gerenciá-lo se os seus objetos não tiverem nomes exclusivos. Aqui você nomeiará os objetos no seu documento usando o painel Camadas e o inspetor de propriedades. 1 Clique duas vezes na palavra Bitmap ao lado da miniatura da imagem no painel Camadas. Uma caixa de texto aparece. 2 Digite Carro Clássicona caixa de texto e pressione Enter. O novo nome é aplicado ao objeto de bitmap. 3 Na janela do documento, selecione o retângulo cinza que é a borda ao documento. Se for muito difícil vê-lo na tela, selecione-o no painel Camadas. Agora, você nomeará um objeto usando o inspetor de propriedades. 4 Digite Borda na caixa Nome do objeto do inspetor de propriedades e pressione Enter. O nome que você digita também é exibido ao lado da miniatura do objeto no painel Camadas. 5 Digite um nome para o objeto de retângulo restante usando o painel Camadas ou o inspetor de propriedades. Use qualquer nome que você quiser, mas escolha um nome com significado, para que você possa identificar e administrar facilmente os objetos no documento posteriormente. 260 Capítulo 11

261 Alterar a ordem de empilhamento do objeto A imagem de bitmap mesclada sobrepõe o objeto da borda e o retângulo azul. A borda e o retângulo azul precisam estar na parte superior, para que você possa usar o painel Camadas para alterar a ordem de empilhamento dos objetos no documento. 1 Clique na miniatura do retângulo azul no painel Camadas para selecioná-lo. 2 Arraste-o para a parte superior da Camada 1, acima da miniatura Carro Clássico. Observação: A camada no topo no painel Camadas é sempre a Camada Web. Você aprenderá mais sobre a Camada de Web em Tutorial do Fireworks 2: Conceitos básicos de projeto para Web, na página 275. Ao arrastar, o ponteiro muda para refletir que você está arrastando um objeto (apenas Windows). Uma linha escura no painel Camadas indica onde o objeto estará se você soltar o botão do mouse naquele momento. 3 Solte o botão do mouse. O retângulo azul é soltado exatamente acima do objeto de bitmap no painel Camadas. A ordem de empilhamento dos objetos também muda na tela. O retângulo azul está agora sobre o objeto de bitmap e o objeto da borda. 4 Se você quiser que o objeto da borda seja o objeto no topo, selecione a miniatura e arraste-a para o topo do painel Camadas, sobre o retângulo azul. Tutoriais do Fireworks 261

262 Criar e editar uma máscara Agora que tiver feito várias modificações na imagem do carro clássico, você realizará um último procedimento para dar a ela a aparência de ficar gradativamente transparente. No Fireworks, você pode aplicar dois tipos de máscaras: máscaras vetoriais e máscaras de bitmap. Nesse tutorial, você aplicará uma máscara de bitmap simples à imagem do carro. Em seguida, você a modificará dando um preenchimento dégradé. Os pixels na máscara exibirão ou ocultarão a imagem do carro, dependendo do valor dos tons de cinza. Aplicar uma máscara Em primeiro lugar, você aplicará uma máscara vazia e branca à imagem do carro. Uma máscara branca exibe um objeto ou imagem selecionada, enquanto que os pixels pretos em uma máscara ocultam um objeto ou imagem selecionado. Você também pintará na máscara para fazer a imagem do carro desaparecer no fundo. 1 Com a ferramenta Ponteiro, selecione a imagem de bitmap. 2 Clique no botão Adicionar máscara na parte inferior do painel Camadas. Uma máscara vazia e transparente é adicionada à imagem selecionada. Você pode ver a máscara que foi adicionada vendo a miniatura da máscara no painel Camadas. O destaque amarelo em volta da miniatura da máscara indica que ela foi selecionada. Miniatura de máscara Objeto da máscara 262 Capítulo 11

263 Editar a máscara Agora, você dará uma aparência transparente à imagem de bitmap adicionando um preenchimento dégradé à máscara. 1 Com a miniatura da máscara selecionada no painel Camadas, clique e mantenha o botão do mouse pressionado na ferramenta Lata de tinta na seção Bitmap do painel Ferramentas. Escolha a ferramenta Dégradé no menu pop-up que aparece. 2 Clique na caixa Cor de preenchimento no inspetor de propriedades. A janela pop-up Editar dégradé abre. 3 Escolha Branco, Preto na parte inferior do menu pop-up Predefinição. A gama de cores e as amostras de cores mudam para refletir a nova configuração. As amostras de cor localizadas exatamente sob a gama de cores permitem que você modifique as cores no dégradé. Gama de cores Amostras de cor 4 Arraste a amostra de cor esquerda (branca) até cerca de 1/4 do caminho para a direita para ajustar o dégradé. 5 Clique fora da janela pop-up Editar dégradé para fechá-la. 6 Na tela, arraste o ponteiro Dégradé ao longo da imagem de bitmap, como mostrado na ilustração a seguir. Informações sobre o visual aparece na tela conforme você arrasta, permitindo que você defina o ângulo e a distância na qual o dégradé será aplicado. Tutoriais do Fireworks 263

264 7 Solte o botão do mouse. A máscara é modificada com o preenchimento dégradé que você criou. A máscara afeta a imagem do carro dando a ela uma aparência transparente de dégradé. A miniatura da máscara no painel Camadas exibe o preenchimento de dégradé que você aplicou. 8 Escolha a ferramenta Ponteiro e clique na miniatura da máscara no painel Camadas. O inspetor de propriedades mostra que a máscara foi aplicada usando a aparência de tons de cinza. Os pixels mais escuros na máscara obscurecem a imagem do carro, enquanto que os pixels mais claros na máscara mostram o carro. Criar e editar texto Em seguida, você adicionará texto ao documento e aplicará as propriedades de texto usando o inspetor de propriedades. Você criará quatro blocos de texto, dois para o título do anúncio e dois para o texto do corpo. Criar o texto do título Em primeiro lugar, você criará o texto do título para o anúncio de aluguel de carro. 1 Escolha a ferramenta Texto na seção Vetor do painel Ferramentas e mova o ponteiro sobre a janela do documento. O ponteiro muda em um I e o inspetor de propriedades exibe as propriedades do texto. Tamanho Cor de preenchimento Fonte Botões de estilo À esquerda Escala horizontal Botões de alinhamento 264 Capítulo 11

265 2 No inspetor de propriedades, siga um dos procedimentos abaixo: Escolha Times New Roman no menu pop-up Fonte. Digite 85 como o tamanho da fonte. Clique na caixa Cor de preenchimento. O ponteiro muda para um ponteiro conta-gotas. Clique no ponteiro conta-gotas no retângulo azul na tela. A janela pop-up colorida fecha e a caixa Cor de preenchimento muda para refletir a cor escolhida. Assegure que nenhum dos botões de estilo (Negrito, Itálico, Sublinhado) estejam selecionados. Clique no botão Alinhamento à esquerda. 3 Com o ponteiro na forma de I, clique uma vez no meio da tela. Um bloco de texto vazio é criado. A circunferência no canto superior direito do bloco de texto indica que o bloco de texto está se redimensionando. Um bloco de texto com dimensão automática no Fireworks ajusta a sua largura com base na linha mais longa de texto no bloco. Indicador de redimensionamento automático 4 Digite Vintage no bloco de texto. A largura do bloco de texto se expande conforme você digita. 5 Clique uma vez fora do bloco de texto para aplicar a entrada de texto. O bloco de texto continua selecionado e a ferramenta Texto ainda é a ferramenta selecionada. A circunferência no bloco de texto não é mais visível. O indicador fica visível somente enquanto você está digitando ou editando texto. Tutoriais do Fireworks 265

266 6 Escolha a ferramenta Ponteiro e arraste o texto para a posição conforme mostrado na ilustração a seguir. 7 Clique fora do bloco de texto para desmarcá-lo e escolha a ferramenta Texto novamente. 8 No inspetor de propriedades, escolha Arial como a fonte e 12 como o tamanho da fonte. 9 Clique na tela novamente, em algum lugar sob o bloco de texto recém-criado e digite ALUGUÉIS DE CLÁSSICOSem letras maiúsculas. 10 Escolha a ferramenta Ponteiro para aplicar a entrada de texto. Alternar para outra ferramenta no painel Ferramentas aplica as entradas de texto e edições exatamente como clicar fora do bloco de texto faz. Pressionar a tecla Esc produzirá o mesmo resultado. 11 Arraste o novo bloco de texto para posicioná-lo exatamente sob o bloco de texto Vintage, como mostrado na ilustração a seguir. 12 Clique fora do bloco de texto para desmarcá-lo. 266 Capítulo 11

267 Criar o texto do corpo Em seguida, você criará dois blocos de texto que irão compor o texto do corpo para o anúncio. 1 Escolha a ferramenta Texto. 2 Essa vez, em vez de simplesmente clicar na tela, arraste para desenhar uma marcação com o ponteiro em forma de I, como mostrado na ilustração a seguir. Um bloco de texto aparece. O quadrado oco no canto direito superior indica que o bloco de texto é um bloco de texto com largura fixa, definido pelas marcações que você desenhou. Os blocos de texto de largura fixa mantêm a largura que você especificou, não importa a quantidade de texto que você digita. A alça do canto oco pode estar ativada ou desativada. Clicar duas vezes nela alternará entre o redimensionamento automático e a largura fixa para o bloco de texto. 3 Digite o texto a seguir sem digitar nenhuma quebra de linha conforme você digita: Abandone-se passeando em um automóvel clássico Vintage, com um chofer para levá-lo a qualquer lugar. O texto flui para o bloco de texto que você criou. O bloco de texto cresce verticalmente mas não horizontalmente. 4 Escolha a ferramenta Ponteiro e clique fora do bloco de texto para desmarcá-lo. Em seguida, escolha a ferramenta Texto novamente. 5 No inspetor de propriedades, clique na caixa Cor de preenchimento e escolha branco como a cor de texto. 6 Clique no canto esquerdo inferior da tela. Um novo bloco de texto aparece na parte superior do retângulo azul. Tutoriais do Fireworks 267

268 7 Digite o seguinte em letras maiúsculas digitando quaisquer quebras de linha: ESPORTE - DE LUXO - CONVERSÍVEIS - LIMOSINES - ANTIGOS - NEO- CLÁSSICOS - EXÓTICOS - ROADSTERS 8 Escolha a ferramenta Ponteiro e reposicione o bloco de texto conforme mostrado abaixo. Qualquer texto que você cria no Fireworks pode ser editado como editaria texto em um processador de texto. Para editar o texto, clique duas vezes em um bloco de texto com a ferramenta Ponteiro, destaque o texto que deseja mudar e digite sobre ele. Ou clique no ponteiro em forma de I em qualquer lugar no bloco de texto para adicionar novo texto. Definir as propriedades do texto Agora que os blocos de texto foram criados, você usará o inspetor de propriedades para mudar as várias propriedades de texto. 1 Selecione o bloco de texto Vintage. As propriedades do bloco de texto aparecem no inspetor de propriedades. Essas propriedades são semelhantes às exibidas quando a ferramenta Texto é selecionada. 2 No inspetor de propriedades, siga um dos procedimentos abaixo: Escolha Suavizar serrilhado do menu pop-up Nível de suavização de serrilhado, se ainda não estiver selecionado. A suavização do serrilhado suaviza as extremidades do texto, tornando-o mais claro e legível. Em geral, as fontes com serifa como Times New Roman têm melhor aparência se definidas como Suavizar serrilhado quando o tamanho delas é superior a 45 pontos. Da mesma forma, as fontes sem serifa como Arial têm melhor aparência se definidas como Suavizar serrilhado quando o tamanho delas é superior a 32 pontos. Dica: O termo serifa se refere aos traços pequenos (também chamadas de remate ) nas extremidades dos caracteres de texto de fontes como Times New Roman. O Arial é considerado uma fonte sem serifa ou não serifada porque os seus caracteres de texto não contêm serifas. Defina a opção Escala horizontal no inspetor de propriedades como 89% e pressione Enter. Os caracteres no bloco de texto Vintage se tornam mais finos. A Escala horizontal estica ou encolhe os caracteres no texto selecionado horizontalmente. A definição padrão é 100%. Qualquer coisa maior esticará o texto horizontalmente e qualquer coisa menor reduzirá a sua largura. 268 Capítulo 11

269 3 Arraste o bloco de texto Vintage de forma que ele seja posicionado como mostrado na ilustração a seguir. 4 Selecione o bloco de texto Aluguéis de clássicos. 5 No inspetor de propriedades, siga um dos procedimentos abaixo: Clique na caixa Cor de preenchimento, digite FF6600 como valor da cor e pressione Enter. Clique no botão Negrito. Escolha Ondular suavização de serrilhado do menu pop-up Nível de suavização de serrilhado. Em geral, as fontes sem serifa, como Arial, têm melhor aparência se definidas como Ondular suavização de serrilhado quando o tamanho delas está entre 12 e 18 pontos. Da mesma forma, as fontes serifadas têm melhor aparência se definidas como Ondular suavização de serrilhado quando o tamanho delas está entre 24 e 32 pontos. 6 Arraste o bloco de texto para reposicioná-lo como mostrado abaixo. 7 Selecione o bloco de texto Abandone-se. Tutoriais do Fireworks 269

270 8 No inspetor de propriedades, siga um dos procedimentos abaixo: Defina o tamanho da fonte como 13. Escolha preto como a cor do texto. Clique no botão Alinhamento à direita. Escolha Ondular suavização de serrilhado do menu pop-up Nível de suavização de serrilhado. Defina a opção de escala horizontal como 88%. Defina a opção Entrelinhamento como 150% e pressione Enter. O entrelinhamento define o espaço entre as linhas de texto. O entrelinhamento normal do texto é 100%. Um valor superior a 100% aumenta o espaço entre as linhas e um valor inferior aproxima as linhas. 9 Arraste uma das alças dos cantos do bloco de texto para redimensioná-lo, para que o texto flua como mostrado abaixo. Se necessário, arraste o bloco de texto inteiro para reposicioná-lo também. 10 Selecione o bloco de texto da parte inferior do documento. 11 No inspetor de propriedades, siga um dos procedimentos abaixo: Defina o tamanho da fonte como 13. Escolha Ondular suavização de serrilhado do menu pop-up Nível de suavização de serrilhado. Defina a opção Escala horizontal como 75% e pressione Enter. 12 Reposicione o bloco de texto se necessário. 270 Capítulo 11

271 Adicionar um sombreado Você pode aplicar Efeitos ao vivo ao texto. Aqui você adicionará um sombreado ao texto Vintage usando os controles Efeitos ao vivo no inspetor de propriedades. 1 Selecione o bloco de texto Vintage. 2 Clique no botão Adicionar efeitos no inspetor de propriedades. Escolha Sombra e brilho > Aplicar Sombra do menu pop-up Efeitos. As opções para o novo efeito aparecem em uma janela pop-up. 3 Digite 5 para Distância e 60% para Opacidade. Clique fora da janela pop-up para fechá-la. Um efeito de sombreado é adicionado ao bloco de texto Vintage. 4 Clique em uma área vazia da janela do documento para desmarcá-lo no bloco de texto. Exportar o documento Você criou um objeto vetorial e editou as suas propriedades, importou uma imagem de bitmap e fez modificações para os seus pixels e criou e formatou texto. Você está pronto para otimizar e exportar o documento. Otimizar o gráfico Antes de você exportar qualquer documento do Fireworks, deve sempre otimizá-lo. A otimização assegura que um elemento gráfico seja exportado com o melhor equilíbrio possível entre compactação e qualidade. 1 Proceda de uma das seguintes formas para abrir o painel Otimizar se ele ainda não estiver aberto. Escolha Janela > Otimizar. Se o painel estiver minimizado no lado direito da tela, clique na seta expansora para ver todo o painel. Tutoriais do Fireworks 271

272 2 Escolha JPEG Melhor qualidade no menu pop-up Configurações. As opções no painel mudam para refletir a nova configuração. Essas configurações podem ser mudadas, mas para esse tutorial você usará as configurações padrão. 3 Clique na guia Visualizar próximo da parte superior da janela do documento. A guia Visualizar exibe o seu documento como ele aparece quando exportado com as configurações atuais. Tamanho do arquivo Tempo de download No lado direito superior da janela, o Fireworks exibe qual será o tamanho do arquivo para o arquivo exportado e o tempo estimado que será levado para exibir o gráfico quando ele for visualizado na Web. 272 Capítulo 11

273 Exportar o gráfico Você otimizou o gráfico, assim você está pronto para exportá-lo como um arquivo JPEG. 1 Selecione Arquivo > Exportar. A caixa de diálogo Exportar abre. O nome de arquivo listado tem uma extensão.jpg. O Fireworks escolheu esse formato de arquivo porque você o selecionou no painel Otimizar. 2 Navegue para a pasta Tutorials/Tutorial na área de trabalho e navegue para Tutorial1/Export. 3 Assegure que o menu pop-up Salvar como tipo (Windows) ou Salvar como (Macintosh) apresente Somente imagens e clique em Salvar. O arquivo JPEG é exportado para o local especificado. Lembre-se que o arquivo PNG é o seu arquivo de origem ou o arquivo de trabalho. Apesar de você ter exportado o documento no formato JPEG, você também precisará salvar o PNG para que todas as mudanças sejam refletidas no arquivo de origem também. 4 Escolha Arquivo > Salvar para salvar as mudanças no arquivo PNG. 5 Escolha Arquivo> Fechar. Tutoriais do Fireworks 273

274 Visualizar o documento exportado O novo arquivo criado durante o processo de exportação está localizado na pasta que você especificou. 1 No Fireworks, escolha Arquivo > Abrir e navegue para a pasta Exportar. O Fireworks criou um arquivo nesse local chamado vintage.jpg. 2 Selecione vintage.jpg e clique em Abrir. O gráfico abre em uma nova janela de documento no Fireworks. No painel Camadas, todos os objetos foram nivelados. Quando os objetos são nivelados, eles mesclam em um único objeto e ficam ineditáveis como objetos separados. O inspetor de propriedades exibe as propriedades de um bitmap. Todos os atributos de Efeitos ao vivo e outros que você aplicou usando o inspetor de propriedades não estão mais disponíveis para o bitmap selecionado. O documento parece dessa forma porque o Fireworks teve que nivelar a imagem e todas as suas propriedades quando você escolheu exportar para o formato JPEG. Entretanto, você ainda tem o seu arquivo origem PNG, portanto, se ainda precisar fazer mais trabalho no projeto, pode sempre abrir o arquivo PNG e todos os objetos ainda serão editáveis. 3 Escolha Arquivo > Abrir e selecione vintage.png na pasta Tutorial1. Clique em Abrir. No painel Camadas, todos os objetos ficam disponíveis novamente como objetos separados. Cada objeto é editável, com as suas propriedades. 4 Clique em cada objeto. O inspetor de propriedades exibe as várias opções para cada objeto que você seleciona. 5 Selecione o texto Vintage na tela. O Efeito ao vivo Aplicar sombra para esse objeto de texto aparece no inspetor de propriedades. Agora você pode ver o benefício de usar o PNG do Fireworks como o seu arquivo de origem. Você pode fazer mudanças em um documento e ele sempre continuará editável, mesmo se você escolher exportar o documento para outro formato como um JPEG. 274 Capítulo 11

275 Prossiga com as etapas seguintes Você realizou as tarefas necessárias para criar elementos gráficos no Fireworks. Você aprendeu como criar e salvar um novo documento e como adicionar objetos vetoriais e gráficos de bitmap ao seu documento. Você também aplicou Efeitos ao vivo, trabalhou com camadas, criou uma máscara e adicionou texto. Finalmente, você aprendeu como exportar o gráfico completo. Para obter informações detalhadas sobre quaisquer dos recursos cobertos nesse tutorial e para obter informações sobre recursos adicionais do Fireworks, consulte o índice de Usar Fireworks ou pesquise os tópicos da Ajuda do Fireworks. Para obter mais tutoriais do Fireworks, visite o site da Macromedia na Web em Além disso, certifique-se de visitar o Centro de Suporte premiado da Macromedia em fireworks. Para aprender como você pode usar o Fireworks para criar páginas interativas de Web, veja o próximo tutorial: Você usará a imagem do JPEG que exportou nesse documento e a importará para uma página da Web. Você também aprenderá como criar interatividade na Web com botões, rollovers e menus pop-up. Tutorial do Fireworks 2: Conceitos básicos de projeto para Web Esse tutorial o guiará através das tarefas básicas do projeto de elementos gráficos e interatividade com o Macromedia Fireworks MX. Você obterá conhecimento útil usando o aplicativo gráfico para Web líder do setor e aprenderá os conceitos básicos de projeto para Web durante o tutorial. O que você aprenderá Através desse tutorial, você reproduzirá um fluxo de trabalho de produção do Fireworks típico para projetar uma página da Web. Você aprenderá a fazer o seguinte: Abrir o arquivo de origem Importar um elemento gráfico Fatiar o documento Criar um rollover de arrastar e soltar Criar e editar botões para fazer uma barra de navegação Criar e editar um menu pop-up Otimizar o documento Exportar HTML Testar o arquivo concluído Tutoriais do Fireworks 275

276 O que você deve saber Antes de realizar esse tutorial, você deve estar familiarizado com o projeto de elementos gráficos no Fireworks ou em outros aplicativos gráficos de bitmap e vetoriais. Você deve possuir o conhecimento básico coberto no Tutorial 1. Especificamente, você deve saber como realizar as seguintes tarefas no Fireworks: Salvar um documento Selecionar objetos Editar as propriedades do objeto Exibir e usar painéis Trabalhar com camadas e objetos Criar e editar texto Exportar um elemento gráfico Copiar a pasta Tutoriais Antes de começar, você fará uma cópia da pasta Tutorials, para que possa salvar os resultados do seu trabalho enquanto permite que você ou outro usuário conclua o tutorial posteriormente usando os arquivos originais. Observação: Se você completou o tutorial de conceitos básicos de projeto de elementos gráficos, já fez uma cópia da pasta Tutorials, assim você pode pular essa etapa. 1 Navegue para a pasta do aplicativo Fireworks no disco rígido. Observação: Se você não conseguir ver a pasta do aplicativo Fireworks, pode ter acesso limitado aos arquivos no seu sistema. Você pode descarregar os arquivos que precisa para esse tutorial do Centro de Suporte do Fireworks na Web em 2 Arraste uma cópia da pasta Tutorials para a área de trabalho. Visualizar a página completa de Web Em seguida, você visualizará o arquivo completo do tutorial para ver como o seu arquivo projetado aparecerá após você exportá-lo como um arquivo HTML. 1 Ative o navegador de Web. 2 No disco rígido, navegue para a pasta Tutorials que você copiou para a área de trabalho e navegue para Tutorial2/Complete. Observação: Algumas versões do Microsoft Windows ocultam extensões de tipos de arquivos conhecidos por padrão. Se você não tiver alterado essa configuração, os arquivos na pasta Complete não exibirão extensões. Ao lidar com páginas de Web e elementos gráficos de Web, é melhor ver as extensões do arquivo. Consulte a Ajuda do Windows para obter informações sobre como ativar de volta as extensões de arquivo. 3 Selecione o arquivo final.htm e arraste-o para abrir a janela do navegador. Para esse tutorial, você completará uma versão parcialmente terminada dessa página para Global, uma empresa de aluguel de carros. 4 Mova o ponteiro sobre a imagem grande Vintage. Quando o ponteiro move sobre a imagem Vintage, uma outra imagem na página muda. Isso é chamado de rollover disjunto. 276 Capítulo 11

277 5 Mova o ponteiro para a barra de navegação ao longo da página de Web. Os botões mudam em resposta ao ponteiro passando sobre eles. Clique no botão Taxas para testar o link. O link o leva para a página do Fireworks em mas você digitará a sua própria URL para esse e outros itens conforme completa o tutorial. 6 Use o botão Voltar do navegador para voltar à página final.htm. 7 Mova o ponteiro sobre a imagem Worldwide Airports. O menu pop-up será exibido. Passe o ponteiro do mouse sobre cada item do menu, incluindo o primeiro item, que contém um submenu. 8 Clique em Estados Unidos para testar o link e, em seguida, volte para a página final.htm. 9 Quando você terminar de ver a página na Web, você pode fechá-la ou deixá-la aberta para referência conforme avança no tutorial. Observação: A pasta Complete também inclui o documento Fireworks a partir do qual o arquivo HTML é gerado. Para visualizar o documento, clique duas vezes em final.png. Abra o arquivo de origem Você viu o arquivo final.htm em um navegador, portanto está pronto para começar. 1 No Fireworks, selecione Arquivo > Abrir. 2 Navegue para a pasta Tutorials na área de trabalho. Navegue para Tutorial2/Start e abra global.png. Observação: Conforme você completa o tutorial, lembre-se de salvar o seu trabalho com freqüência escolhendo Arquivo > Salvar. Importar um elemento gráfico Agora que abriu o projeto não terminado para a página de Web Global, você importará um elemento gráfico. Se você completou o tutorial de conceitos básicos de projeto do Fireworks, usará o JPEG que você criou. Se não seguiu o tutorial, uma imagem concluída é fornecida para você. 1 Escolha Arquivo > Importar e siga um dos procedimentos: Se você concluiu o tutorial de conceitos básicos do projeto gráfico, navegue para a pasta Tutorial1/Export. Se você não concluiu o tutorial de conceitos básicos do projeto gráfico, navegue para a pasta Tutorial2/Export. 2 Selecione vintage.jpg e clique em Abrir. 3 Clique em qualquer lugar na área branca vazia da tela. A imagem aparece, selecionada. Tutoriais do Fireworks 277

278 4 Arraste a imagem de forma que ela esteja posicionada como mostra a ilustração a seguir. Fatiar o documento Os projetistas de Web usam um processo chamado fatiar para cortar documentos de Web em pequenas partes, por várias razões. As imagens menores são descarregadas mais rapidamente pela Web, para que usuários possam ver uma página carregar progressivamente em vez de esperar uma imagem grande descarregar. Além disso, o fatiamento torna possível otimizar várias partes de um documento diferentemente. O corte também é necessário para adicionar interatividade. Aqui, você criará fatias para alguns dos elementos gráficos na página de Web. Posteriormente, você adicionará interatividade a essas fatias assim como definirá a otimização e a compactação delas. 1 Com a imagem Vintage ainda selecionada, escolha Editar > Inserir > Fatiar. Uma fatia é inserida na parte superior da imagem. As fatias possuem uma cobertura verde por padrão. 2 Clique em qualquer lugar fora da fatia para desmarcá-la. As guias vermelhas da fatia a definem, medindo a largura e a altura do documento. Quando você cria a fatia, o Fireworks corta automaticamente o resto do documento para você. Observação: Se você não vir as guias vermelhas da fatia, escolha Visualizar > Guias da fatia. 278 Capítulo 11

279 3 Clique com Shift no elemento gráfico Worldwide Airports e no elemento gráfico Great Weekend Rates no lado esquerdo do documento para selecioná-los ao mesmo tempo. 4 Escolha Editar > Inserir > Fatia. Na caixa de mensagem que aparece, escolha Múltiplas. Isso permite que inserir várias fatias ao mesmo tempo. As fatias são inseridas na parte superior de cada um dos elementos gráficos selecionados. Adicionar outras fatias muda o layout de fatias automáticas no resto do documento. 5 Clique em qualquer lugar fora das fatias para desmarcá-las. Agora, há espaço entre a fatia Vintage e a fatia Great Weekend Rates. Esta é uma fatia automática fina. 6 Coloque o ponteiro sobre a guia da fatia esquerda da imagem. O ponteiro muda para o ponteiro de movimento de guia, indicando que você pode pegar a guia de fatias e arrastá-la. Arrastando uma guia de fatias, você pode alterar a forma de uma fatia. Tutoriais do Fireworks 279

280 7 Arraste o guia da fatia para a esquerda até que ele se encaixe na fatia direita do elemento gráfico Great Weekend Rates, como mostra a ilustração a seguir. 8 Solte o botão do mouse. A fatia Vintage agora se estende até a extremidade da fatia Great Weekend Rates e a pequena fatia automática é excluída. Pense nas fatias como células da tabela em um aplicativo de planilha ou processador de texto. A fatia Vintage agora se estende até a extremidade da fatia Great Weekend Rates e a pequena fatia automática é excluída. Se você arrastar uma guia de fatia sobre e além das fatias automáticas, as guias de fatia são mescladas e as fatias automáticas desnecessárias são excluídas. 9 Se o painel Camadas estiver minimizado ou não estiver visível, clique em sua seta expansora ou escolha Janela > Camadas. Na parte superior do painel, está a Camada Web. Ela contém todos os objetos de um documento da Web. As três fatias que você criou estão listadas aqui. A Camada Web é sempre a camada mais superior em qualquer documento. Ela não pode ser movida, renomeada ou excluída. 280 Capítulo 11

281 Criação de um rollover de arrastar e soltar Agora que você fatiou o documento, estará pronto para adicionar interatividade. Você usará duas das fatias que inserir na etapa anterior para criar um rollover de arrastar e soltar. Há dois tipos de rollovers. rollovers simples e disjuntos. Um rollover simples exibe uma imagem diferente sempre que o ponteiro passa sobre ela em um navegador de Web. Um rollover disjunto faz com que uma outra imagem, em uma parte diferente da tela, mude quando o ponteiro passa sobre ela. Você criará um rollover disjunto aqui. 1 Selecione a fatia que cobre a imagem Vintage. O ícone redondo no centro da fatia é chamado de alça de comportamento. Ele permite que você adicione comportamentos ou interatividade a uma fatia. Se você estiver familiarizado com comportamentos no Macromedia Dreamweaver, você reconhecerá muitos dos mesmos comportamentos no Fireworks. Alça de comportamento Os comportamentos também podem ser aplicados através do painel Comportamentos. Mas para obter interatividade simples como rollovers, o uso da alça de comportamento da fatia é o método mais fácil e simples de aplicar um comportamento. Tutoriais do Fireworks 281

282 2 Arraste a alça de comportamento para a fatia Great Weekend Rates e solte o botão do mouse. Uma linha de comportamento azul se estende da alça do comportamento para o canto da fatia e a caixa de diálogo Trocar imagem aparece. 3 Assegure que o Quadro 2 esteja selecionado no menu pop-up Trocar imagem de e clique em OK. Quando o ponteiro passar sobre a fatia Vintage em um navegador, uma imagem no Quadro 2 substituirá o elemento gráfico Great Weekend Rates. A imagem Vintage é considerada a acionadora do efeito de rollover e a imagem que substitui o elemento gráfico Great Weekend Rates é considerada a imagem substituta. 4 Se o painel Quadros estiver minimizado ou não estiver visível, clique na seta expansora para o grupo do painel Quadros e Histórico e clique na guia Quadros ou escolha Janela > Quadros. O painel Quadros lista os quadros disponíveis no documento atual. Atualmente, há somente um quadro no documento. O painel Quadros é tipicamente usado para animação. No caso de rollovers, ele é usado para manter imagens substitutas. 282 Capítulo 11

283 5 Clique no botão Quadro novo/duplicado na parte inferior do painel. Um novo quadro é criado no painel Quadros, chamado Quadro 2. O espaço de trabalho agora está vazio exceto pelas fatias que você inseriu. Nenhum objeto foi listado no painel Camadas, exceto o conteúdo da Camada Web. Isso ocorre porque as camadas no Fireworks não são compartilhadas em todos os quadros por padrão, com a exceção da Camada Web, que é sempre compartilhada. Os objetos na Camada Web aparecem em todo quadro do documento, de forma que todas as mudanças feitas nos objetos da Web, como fatias, afetam todos os quadros. 6 Escolha Arquivo > Importar e navegue para a pasta Tutorial2/Assets. Selecione o arquivo chamado rates.gif e clique em Abrir. 7 Coloque o ponteiro de inserção sobre a fatia onde o elemento gráfico Great Weekend Rates foi localizado no Quadro 1. Alinhe o ponteiro da melhor forma possível com o canto esquerdo superior da fatia. Tutoriais do Fireworks 283

284 8 Clique para inserir o elemento gráfico. O elemento gráfico Vintage Classic Rates aparece. 9 Clique na guia Visualizar na parte superior da janela do documento e oculte as fatias no documento clicando no botão Ocultar fatias e pontos ativos na seção Web do painel Ferramentas. Mova o ponteiro sobre a imagem Vintage. A imagem Great Weekend Rates muda quando o ponteiro passa sobre a imagem Vintage. Dica: Se a imagem parece pular um pouco ou a transição entre os elementos gráficos não parecer suave, ajuste a posição da rollovers no Quadro 2 enquanto estiver na visualização Original. Para posicionamento preciso, ative Opções de transparência no painel Quadros ou verifique se as coordenadas X e Y da imagem Vintage Classic Rates são as mesmas da imagem Great Weekend Rates no inspetor de propriedades. Quando tiver terminado, volte ao Quadro 1 e desative Técnicas de transparência se necessário. Para obter mais informações sobre essas opções, consulte o índice de Usando o Fireworks ou pesquise a Ajuda do Fireworks. 10 Quando tiver terminado, clique na guia Original na parte superior da janela do documento para voltar para a visualização normal e reative as fatias clicando no botão Mostrar fatias e pontos ativos no painel Ferramentas. Você criou um rollover disjunto com êxito. Os rollovers simples são criados de forma semelhante: ao arrastar uma alça de comportamento de fatia conforme você fez na etapa 2, você simplesmente a arrasta de volta para a mesma fatia. Geralmente, os projetistas de Web adicionam um efeito de rollover a uma imagem para fornecer aos usuários uma indicação visual que a imagem gráfica é clicável. Se o site Global na Web for um site real na Internet, você provavelmente desejará que as imagens Vintage e Rates façam link para outras páginas que forneçam mais informações. Para os propósitos desse tutorial, você deixará o rollover como está. Você irá adquirir muita prática vinculando links a outros objetos de Web na seção a seguir. Criar e editar botões para fazer uma barra de navegação Os botões são objetos de Web com link para outras páginas de Web. Normalmente, a aparência deles muda de acordo com o movimento do mouse do usuário ou de acordo com uma ação, como um clique, funcionando como uma indicação visual indicando interatividade. Por exemplo, um botão exibe um efeito de rollover diferente quando o ponteiro move sobre ele ou quando ele tiver sido clicado. Uma barra de navegação também conhecida como barra nav consiste em uma série de botões que aparecem em uma ou mais páginas de um site na Web. Normalmente, todos os botões dentro de uma barra de navegação são parecidos, exceto quanto ao texto. Aqui, você criará uma barra de navegação para o site Global de Web. 284 Capítulo 11

285 Criar um símbolo de botão O elemento gráfico inicial e o texto de um botão foram criados para você. Você converterá esse elemento gráfico em um símbolo de botão. 1 No Fireworks, selecione o elemento gráfico do botão (rotulado BOTÃO TEXTO) na parte superior esquerda do documento. 2 Escolha Modificar > Símbolo > Converter em símbolo. A caixa de diálogo Propriedades do símbolo abre. 3 Digite Meu botão na caixa de texto Nome, escolha Botão como o tipo do símbolo e clique em OK. Uma fatia aparece na parte superior do elemento gráfico do botão e um ícone de atalho aparece no lado esquerdo da fatia. Isso indica que a seleção no espaço de trabalho é uma instância do símbolo que você acabou de criar. Os símbolos são como cópias mestre de seus elementos gráficos. Quando você muda um símbolo, todas as instâncias do símbolo no documento mudam automaticamente. Os símbolos residem na biblioteca. 4 Se o painel Biblioteca estiver minimizado ou não estiver visível, clique na seta expansora do grupo do painel Propriedades e clique na guia Biblioteca ou escolha Janela > Biblioteca. O seu símbolo está listado no painel Biblioteca. Tutoriais do Fireworks 285

286 Criar estados de botão Em seguida, você criará vários estados para o símbolo de botão. Os estados de botão são formas diferentes que um botão assume quando o mouse passa por cima ou é clicado em um navegador de Web. 1 Clique duas vezes em uma instância de botão que você criou. Dica: Alternativamente, você pode clicar duas vezes na visualização prévia do botão no painel Biblioteca ou no ícone de símbolo do lado dele na lista de símbolos do painel Biblioteca. O Editor de botão abre com um elemento gráfico exibido na área de trabalho. 2 Clique nas guias na parte superior do Editor de botão. As primeiras quatro guias representam os estados do botão. A última guia, Área ativa, representa a área acessível em um botão, ou onde um usuário precisa clicar ou passar o mouse por cima para ativar os estados do botão. A área ativa também é a área substituta do botão ou a área que muda com cada estado de botão. Atualmente, não há estados para o símbolo do botão diferentes do estado Acima, o estado do botão antes que ele seja rolado ou clicado. 3 Clique na guia Sobre na parte superior do Editor de botão e, em seguida, clique no botão Copiar gráfico Acima. O elemento gráfico do botão é copiado da guia Acima. O estado Sobre de um botão é a sua aparência quando o ponteiro rola sobre ele. Para dar um retorno visual aos usuários, você mudará a cor do retângulo atrás do texto. 4 Selecionar o retângulo. Certifique-se de selecionar o retângulo e não o texto, se não tiver certeza sobre qual está selecionando, verifique o painel Camadas para ver qual está selecionado. 286 Capítulo 11

287 5 Clique na caixa Cor de preenchimento no inspetor de propriedades e escolha preto como a cor. Agora o retângulo está preto. 6 Clique na guia Abaixo na parte superior do Editor de botão e clique no botão Copiar gráfico Sobre. O elemento gráfico do botão é copiado da guia Sobre. O estado Abaixo de um botão é a sua aparência quando o usuário clica nele. Dessa vez, você não mudará a cor do retângulo, você o deixará como ele é. 7 Clique em Concluído no Editor de botão para aplicar as suas alterações ao símbolo do botão. 8 Clique na guia Visualização na janela do documento e teste os estados do botão. Desative as fatias, se necessário. Quando terminar, clique na guia Original e ative as fatias novamente. Criar várias instâncias de botão Em seguida, você criará mais instâncias do símbolo do botão. 1 Selecione o botão no espaço de trabalho se ele não tiver sido selecionado. 2 Selecione Editar > Clonar. Uma nova instância do botão aparece na parte superior do botão original. 3 Mantenha a tecla Shift pressionada enquanto pressiona a tecla com a seta para direita para mover repetidamente a nova instância para a direita. Isso move a instância em incrementos de 10 pixels. Se necessário, use somente as teclas de setas para mover a seleção um pixel por vez. Posicione a instância à direita imediata da instância original, mas sem sobreposição, como mostra a ilustração a seguir. 4 Clone duas outras instâncias do botão e posicione cada uma à direita da instância anterior. Dica: Como um atalho, pressione Alt (Windows) ou Option (Macintosh) enquanto arrasta a instância selecionada com o ponteiro para fazer uma cópia dela. Após posicionar a nova instância à direita imediata da instância anterior, escolha Editar > Repetir duplicado para criar e colocar automaticamente outra cópia da instância. Tutoriais do Fireworks 287

288 Alterar o texto da instância do botão Agora que você tiver criado todos os botões para a sua barra de navegação, precisa dar um texto exclusivo a cada botão. Você pode alterar facilmente o texto em uma instância de botão usando o inspetor de propriedades. 1 Selecione a instância do botão no lado esquerdo mais afastado. As propriedades da instância do botão aparecem no inspetor de propriedades. Com a exceção do menu pop-up Configurações de exportações, essas propriedades são aplicadas somente à instância selecionada. Fazer alterações aqui não afetará o símbolo original do botão na biblioteca. 2 No inspetor de propriedades, substitua o texto na caixa Texto com a palavra INÍCIO em letras maiúsculas. Em seguida, pressione Enter. O texto no botão muda para refletir a sua entrada. 3 Para os três botões restantes, mude o texto do botão para VEÍCULOS, PREÇO e ENTRE EM CONTATO, respectivamente. Associe URLs aos botões Em seguida, você associará uma URL exclusiva ou um link a cada instância de botão. Um URL, ou Uniform Resource Locator, é o endereço ou local de uma página na Web. Você pode associar URLs facilmente a botões usando o inspetor de propriedades. 1 Selecione a instância do botão rotulado Início. 2 Digite index.htm na caixa de texto Link do inspetor de propriedades. Quando clicado em um navegador de Web, o botão Início pulará para uma página chamada index.htm. Você descobrirá no tutorial porque associou o botão Início a essa página. 288 Capítulo 11

289 3 Selecione a instância do botão Veículos e digite o seu URL favorito na caixa de texto Link do inspetor de propriedades. Para os propósitos desse tutorial, basta qualquer URL que funcione. Se você estiver criando um site real de Web, digite o URL para o qual deseja que o botão Veículos pule. Observação: Certifique-se de digitar o URL de um site real de Web, de forma que você possa testar os links do botão posteriormente. 4 Atribua um URL a cada uma das instâncias dos botões restantes. Mais uma vez, qualquer URL que funcione servirá. 5 Escolha Arquivo> Visualizar no navegador > Visualizar no seu navegador preferido. Para testar os links de botão, você precisa visualizar o documento em um navegador. Observação: Se o navegador não estiver listado, você precisa selecionar primeiro um navegador escolhendo Arquivo > Visualizar no navegador > Definir navegador primário. Quando o documento abrir no navegador, teste os botões que criou. Exceto para o botão Início, que está associado a um arquivo que você ainda não criou, cada botão deve pular para o link especificado em Fireworks. Editar o símbolo de botão Em seguida, você modificará o símbolo original do botão. As mudanças que você fizer serão automaticamente aplicadas a todas as instâncias do botão na barra de navegação. Você pode estar imaginando qual a aparência do símbolo do botão original agora que mudou o texto em várias das instâncias. 1 Clique duas vezes nas instâncias do botão no espaço de trabalho. O Editor de botão abre com o símbolo do botão original e o texto é exibido no espaço de trabalho. O símbolo do botão original ainda fica intacto e exibe o texto original. Quando você alterou o texto de cada botão no espaço de trabalho, somente editou cada instância do botão. Se fizer quaisquer mudanças aqui na aparência do retângulo ou do texto, você estará editando o símbolo original, para que as mudanças sejam refletidas em todas as instâncias do espaço de trabalho. 2 Clique na guia Sobre. 3 Selecionar o retângulo preto. 4 Clique na caixa Cor de preenchimento no inspetor de propriedades e digiteff6633 como o valor da cor. Pressione Enter para aplicar a alteração na cor. O retângulo está laranja agora. 5 Clique em Concluído no Editor de botão para aplicar a alteração no símbolo do botão. 6 Clique na guia Visualização na janela do documento e teste os botões. Cada estado Sobre do botão agora está laranja. Você alterou somente o símbolo do botão, mas a alteração foi aplicada a todas as instâncias do botão na barra de navegação. Tutoriais do Fireworks 289

290 7 Clique na guia Original e clique duas vezes em qualquer instância do botão no espaço de trabalho. Dessa vez, você mudará o texto no símbolo do botão. 8 Selecione o texto do botão no Editor de botão e no inspetor de propriedades, escolha Arial como a fonte. Faça isso para cada estado do botão. 9 Clique duas vezes no bloco de texto no Editor de botão e exclua a palalvra BOTÃO. 10 Clique em Sim na caixa de mensagem que pergunta se você deseja alterar o texto nos outros estados de botão. Examine os vários estados do botão no Editor de botão. As mudanças de texto em um estado são refletidas em todos os estados do botão. Compare isso com quando alterou a fonte, você teve que alterá-la em cada estado. Isso ocorre porque você pode aplicar atributos diferentes de gráficos e texto a cada estado de um botão. Isso é útil se você desejar que a cor do texto mude quando um usuário passa sobre um botão, por exemplo. 11 Clique em Concluído para sair do Editor de botão. A fonte de cada instância de botão muda para refletir a nova seleção de fonte, mas o texto continua o mesmo. As instâncias do botão refletem somente as alterações que você fez na aparência gráfica do símbolo do botão, incluindo atributos de texto, mas não as alterações feitas no próprio texto. Os símbolos de botão tornam possível alterar a aparência gráfica de todas as instâncias de botão em uma barra de navegação rapidamente, preservando cada texto exclusivo da instância. 290 Capítulo 11

291 Criar e editar um menu pop-up Um menu pop-up aparece quando você move o ponteiro sobre uma imagem acionadora em um navegador. Ele contém uma lista de itens que fazem link para outras páginas de Web. Aqui, você criará e editará um menu pop-up que exibe uma lista com os locais com aeroportos em Global. Criar itens de lista em menu pop-up Em primeiro lugar, você criará itens de lista de menu pop-up usando o Editor de menu pop-up. 1 Selecione a fatia que cobre o elemento gráfico Worldwide Airports. 2 Escolha Modificar > Menu pop-up > Adicionar menu pop-up. O Editor de menu pop-up abre. 3 Clique duas vezes na caixa de texto no canto esquerdo superior (somente Windows). 4 Digite América do Norte na caixa de texto e pressione Enter. A próxima caixa de texto fica em destaque, pronta para que você crie uma outra entrada. 5 Digite Europa e pressione Enter. Tutoriais do Fireworks 291

292 6 Crie três outras entradas para África, Oriente Médio e Ásia/Pacífico. 7 Clique duas vezes na caixa de texto Link para a entrada América do Norte. 8 Digite uma URL que funcione para a sua escolha e pressione Enter. Para os propósitos desse tutorial, qualquer URL servirá. Certifique-se que é um URL real para que você possa testar os links posteriormente. 9 Digite os URLs das entradas restantes. Nota: Há sempre uma linha extra na parte inferior da lista de entrada no Editor de menu pop-up. Está lá, portanto você pode facilmente adicionar novas entradas sem ter que clicar no botão Adicionar menu. 10 Clique em Concluído para fechar o Editor de menu pop-up. No espaço de trabalho, um contorno do menu pop-up aparece associado à fatia. 11 Para testar o menu pop-up, escolha Arquivo > Visualizar no navegador > Visualizar no seu navegador preferido para visualizar o documento. Nota: Os menus pop-up precisam ser visualizados em um navegador; estão invisíveis usando a guia Visualizar no Fireworks. Quando o documento abre no navegador, mova o ponteiro sobre o elemento gráfico Worldwide Airports. O menu pop-up que você criou aparece. Clique em cada entrada para testar os links. 292 Capítulo 11

293 Personalizar o menu pop-up Em seguida, você voltará para o editor do menu pop-up para modificar a aparência do menu pop-up. 1 No Fireworks, clique duas vezes no contorno do menu pop-up. O Editor de menu pop-up abre com as suas entradas exibidas. 2 Clique no botão Próximo. A guia Aparência aparece. É nela que você pode mudar as cores e fontes usadas em menus pop-up. 3 Escolha HTML como o tipo de célula e Menu vertical como o alinhamento. 4 Escolha Arial, Helvetica, sem serifa, como a fonte e 12 como o tamanho da fonte. 5 Na seção Estado Acima, defina a cor do texto como preta, se preto ainda não estiver selecionado. Em seguida, clique na caixa Cor de preenchimento. Se CCCCCC ainda não estiver exibido na caixa de texto na parte superior da janela pop-up de cor, digite CCCCCC e pressione Enter. Esses valores de cor são as cores padrão selecionadas no Editor de menu pop-up se você não tiver nunca criado um menu pop-up antes. Uma vez que você muda essas cores, elas serão usadas cada vez que você criar um menu pop-up, até que você escolha outras cores. Tutoriais do Fireworks 293

294 6 Na seção Estado Acima, defina a cor do texto como branca, se ainda não estiver selecionada e clique na caixa Cor da célula. Clique no ponteiro conta-gotas no retângulo azul na tela que rodeia o gráfico Worldwide Airports, como mostrado abaixo. 7 Clique no botão Próximo. A guia Avançada aparece. A guia Avançada permite que você mude várias propriedades da célula e da borda. Aqui, você aumentará a largura da célula, tornando a aparência do menu pop-up mais largo. 8 Escolha Pixels do menu pop-up Largura de célula. Isso ativa a caixa Largura de célula. 9 Digite 137 como a largura da célula. 294 Capítulo 11

295 10 Escolha Automático no menu pop-up Altura da célula no menu pop-up e clique no botão Próximo. A guia Posição aparece. É nela que você pode especificar a posição na tela onde o menu pop-up aparecerá. As coordenadas de 0.0 indicam que o canto esquerdo superior do menu pop-up será alinhado com o canto esquerdo superior da fatia que o aciona. Há também várias posições predefinidas dentre as quais você pode escolher. 11 Digite 3 nas caixas Posição X e Y do menu e, em seguida, clique em Concluído. Nota: Você também pode reposicionar um menu pop-up arrastando o seu contorno no espaço de trabalho. 12 Visualize as alterações do menu pop-up em um navegador. Mova o ponteiro sobre o gráfico Worldwide Airports. O menu pop-up está posicionado de forma diferente e está mais largo. Passe sobre cada entrada no menu para ver as suas alterações de cor. Editar o menu pop-up Em seguida, você usará o editor do menu pop-up para adicionar uma outra entrada ao menu popup. Você também mudará a ordem das entradas e adicionará um submenu. 1 No Fireworks, clique duas vezes no contorno do menu pop-up. 2 Clique na entrada Europa para selecioná-la. 3 Clicar no botão Adicionar menu, acima da lista de entrada. Uma linha branca é inserida. Tutoriais do Fireworks 295

296 4 Clique duas vezes no campo Texto da nova entrada e digite América Latina/do Sul. Clique em qualquer lugar fora do campo Texto para aplicar a entrada. As Américas não estão juntas na lista. 5 Arraste a América Latina/do Sul uma entrada para cima uma linha e solte o botão do mouse. Conforme você arrasta, uma linha preta indica onde a entrada será solta se você soltar o botão do mouse naquele momento. A entrada é solta onde você especificou. 6 Selecione a entrada da América do Norte e clique no botão Adicionar menu. 7 Clique duas vezes no campo Texto da nova entrada e digite Estados Unidos. Em seguida, clique for a dos campos de entrada, tomando cuidado para não selecionar outra entrada. 8 Selecione a entrada Estados Unidos se ela não estiver selecionada e clique no botão Recuar menu. A entrada é recuada sob a entrada América do Norte. 296 Capítulo 11

297 9 Clique no botão Adicionar menu novamente e crie uma nova entrada para Canadá. Você acabou de criar um submenu que aparecerá quando você rolar sobre a entrada América do Norte em um navegador. 10 Associe URLs a todas as novas entradas. Opcionalmente, você pode excluir o link para América do Norte, porque os usuários estarão escolhendo itens do submenu. 11 Clique em Concluído para fechar o Editor de menu pop-up e, em seguida, visualize as alterações no menu pop-up em um navegador. Otimizar o documento O documento já está pronto para a Web. A única coisa que você precisa fazer antes de exportá-lo é otimizá-lo. Antes de você exportar qualquer documento do Fireworks, deve sempre otimizá-lo. A otimização assegura que um elemento gráfico será exportado com o melhor equilíbrio possível entre compactação e qualidade. Quando tipos diferentes de elementos gráficos estão no mesmo documento, é uma boa idéia escolher uma configuração apropriada de formato de arquivo e compactação para cada um deles. A página de Web Global é composta de vários elementos: bitmaps, objetos vetoriais e texto. 1 Se o painel Otimizar estiver minimizado ou não estiver visível, clique em sua seta expansora ou escolha Janela > Otimizar. O Fireworks escolhe GIF como o formato de arquivo de exportação padrão e Websnap adaptativo como a paleta de cores padrão. A maior parte dos elementos gráficos na página Global Rental Cars na Web funcionará bem com essas configurações. A imagem bitmap Vintage, entretanto, contém uma fotografia e um dégradé. Devido às suas variações complexas de cores, ela será exportada melhor em outro formato. Tutoriais do Fireworks 297

298 2 Clique na guia de visualização 2 para cima na janela do documento. A guia 2 para cima permite que você visualize os resultados das suas configurações de otimização e as compare com o original. Agora, você provavelmente notou a camada de fatia branca cada vez que você vê uma das guias de visualização. A camada permite que você focalize exatamente a área que deseja otimizar. 3 Clique na fatia da imagem Vintage na visualização à direita. A camada de fatia desaparece de forma que você possa visualizar a imagem sob a fatia. A parte inferior da visualização, o formato do arquivo de exportação para a fatia selecionada é exibida, assim como o tamanho do arquivo de exportação estimado e a quantidade de tempo que o elemento gráfico precisará para efetuar download da Web. Sugestão: Use a ferramenta Mão na seção Visualizar do painel Ferramentas para visualizar mais da imagem se não estiver totalmente visível. 4 Oculte as fatias por um momento clicando nas fatias Ocultar e no botão Pontos ativos na seção da Web do painel Ferramentas. Isso permite que você compare a visualização com o original e veja a diferença entre os dois elementos gráficos. A visualização na direita tem bandas no dégradé. 5 Ative as fatias novamente e clique na imagem Vintage com a ferramenta Ponteiro. 298 Capítulo 11

299 6 No painel Otimizar, escolha JPEG menor arquivo no menu pop-up Configurações. As bandas de dégradé agora se foram e o tamanho do arquivo diminuiu de forma significante. Isso ocorreu porque as fotografias e imagens com variações de cores complexas são melhores otimizadas e compactadas como JPEGs do que como GIFs. Agora que o tamanho do arquivo foi reduzido, a imagem ficou confusa. 7 Para melhorar a aparência do bitmap, arraste o controle deslizante Qualidade no painel Otimizar para 77 e defina a opção Suavização como 0. O bitmap é muito mais claro, mas o tamanho do arquivo também aumentou. Entretanto, ainda é uma melhoria quanto ao tamanho do arquivo quando a imagem foi otimizada como um GIF. 8 Clique na guia Original para voltar à visualização normal. Tutoriais do Fireworks 299

300 Exportar HTML HTML ou HyperText Markup Language, é o principal método usado na Internet para criar e exibir páginas de Web. Você não precisa entender HTML para usar o Fireworks, mas conhecê-lo ajuda a ter em mente que as fatias do Fireworks se tornam células em uma tabela HTML quando exportadas. Aqui, você exportará e visualizará o seu documento terminado em um navegador de Web. Você também examinará o código HTML que o Fireworks exporta. Definir as preferências de HTML Antes de exportar o documento, você precisa definir as preferências de exportação de HTML. 1 Escolha Arquivo > Configuração do HTML. A caixa de diálogo Configuração do HTML abre. As opções definidas nessa caixa de diálogo afetarão todos os documentos futuros do Fireworks que você cria, exceto as opções na guia Específico do documento. 2 Na guia Geral, escolha um estilo de HTML. Se você usar um editor HTML como Macromedia Dreamweaver ou Microsoft FrontPage, escolha-o desse menu pop-up. Fazer isso permite que você abra facilmente e edite o arquivo exportado no editor HTML. Se você não usar um editor HTML ou usar um que não estiver nessa lista, escolha HTML genérico. 3 Escolha.htm como extensão de arquivo. 300 Capítulo 11

301 4 Clique na guia Tabela. A guia Tabela permite que você mude as propriedades da tabela HTML. 5 No menu pop-up Espaçar com, escolha Espaçador transparente de 1 pixel. Quando essa opção tiver sido escolhida, o Fireworks exportará um arquivo chamado spacer.gif, que é uma imagem transparente de 1 pixel. Os espaçadores são usados por projetistas da Web para ajudar no layout de página. Eles mantêm células de tabela HTML vazias abertas. Sem elas, as células de tabela HTML vazias encolhem, alterando o layout de página desejado. Você vê o arquivo spacer.gif posteriormente quando vê os seus arquivos exportados. Você não precisa entender espaçadores, mas é útil saber sobre essa opção se você desejar usá-los no futuro. Tutoriais do Fireworks 301

302 6 Clique na guia Específico do documento. A guia Específico do documento permite que você escolha várias preferências específicas do documento, incluindo uma convenção de denominação personalizada para os seus arquivos exportados. Lembre-se que as opções que você definiu aqui se aplicam somente ao documento atual do Fireworks. Sugestão: Você pode aplicar as configurações na guia Específico do documento para todos os documentos novos clicando no botão Definir padrões. 7 Clique em OK para aceitar as configurações na guia Específico do documento e feche a caixa de diálogo Configuração do HTML. 302 Capítulo 11

303 Exportar o documento no formato HTML O documento já está pronto para exportar. 1 Selecione Arquivo > Exportar. A caixa de diálogo Exportar abre. 2 Na caixa de diálogo, navegue para a pasta Tutorial2/Export. 3 Assegure que HTML e Imagens sejam selecionados como tipo de arquivo e digite index.htm como nome de arquivo. Chamar a home page de index.htm é uma convenção comum usada na Web. Muitos navegadores automaticamente exibirão a página index.htm quando um URL listar um local mas não um nome de página. Adicionalmente, antes no tutorial você associou um botão Início a um URL de index.htm. Atualmente, há somente uma única página no site de Web Global assim, fazer um link dessa página para ela própria pode não fazer sentido nesse ponto. Mas se você criar outras páginas para esse site no futuro, poderá usar essa barra de navegação em todas as páginas, fornecendo aos usuários um método de navegação consistente. 4 Assegure que o Exportar arquivo HTML seja escolhido no menu pop-up HTML e que Exportar fatias seja escolhido no menu pop-up Fatias. 5 Escolha as seguintes opções e deixe todas as outras desmarcadas: Incluir áreas sem fatias Colocar imagens na subpasta Quando você escolhe essa opção, o Fireworks permite que você escolhe uma pasta na qual você armazena os arquivos gráficos exportados. O Fireworks cria a pasta para você se ela não existir. Se você não escolher uma pasta, o Fireworks escolhe uma pasta chamada imagens por padrão. Para esse tutorial, aceite a configuração padrão. Tutoriais do Fireworks 303

304 6 Clique em Salvar. Os arquivos são exportados para o local especificado. 7 Escolha Arquivo > Salvar para salvar o arquivo PNG. Testar o arquivo concluído Os arquivos foram exportados, assim é hora de verificar o que você criou. Visualize a lista de arquivos exportados Em primeiro lugar, você examinará a lista de arquivos que o Fireworks exportou. Os novos arquivos criados durante o processo de exportação aparecerá na sua pasta Exportar. 1 Na sua área de trabalho, navegue para a pasta Exportar e abra-a. O Fireworks criou um arquivo HTML chamado index.htm. Esta é a home page do site Global na Web. Ele também criou um arquivo chamado mm_menu.js, que contém o código necessário para exibir menus pop-up. 2 Abra a subpasta de imagens. O Fireworks também exportou arquivos gráficos para todos os gráficos. Cada fatia no Fireworks é exportada como o seu próprio arquivo gráfico separado. Há vários arquivos GIF e um arquivo JPEG. O JPEG é a imagem bitmap que você otimizou anteriormente.o arquivo chamado spacer.gif é o resultado da opção de espaçamento que você selecionou na caixa de diálogo Configuração do HTML e será usado para ajudar no layout de página. Visualize o arquivo HTML do Fireworks em um navegador Agora que você examinou os arquivos exportados, você estará pronto para estar a página da Web em um navegador. 1 Na pasta Exportar, arraste o arquivo index.htm para um navegador de Web aberto. 2 No navegador, clique nos botões que você adicionou para testar os links e, em seguida, volte para o arquivo index.htm. 3 Teste os outros recursos que você adicionou. 304 Capítulo 11

305 4 A maioria dos navegadores de Web permitem que você visualize o código fonte com um comando como Visualizar>Origem. Localize e execute o comando que permite que você visualize o código. 5 Role através do código origem. Se você conhecer HTML e JavaScript, reconhecerá o código que o Fireworks criou para você. Se não conhecer HTML e JavaScript, poderá apreciar que o Fireworks não dá razão que o obrigue a aprendê-lo. Prossiga com as etapas seguintes Você realizou as principais tarefas no fluxo de trabalho da produção para criar uma página de Web com Fireworks. Você aprendeu como abrir um documento, importar gráficos para ele e fatiar o documento. Você também criou uma imagem cambiável de arrastar e soltar, criou botões e criou um menu pop-up. Finalmente, você aprendeu a otimizar e a exportar o documento completo. Para obter informações detalhadas sobre quaisquer dos recursos cobertos nesse tutorial e para obter informações sobre recursos adicionais do Fireworks, veja o índice de Usar Fireworks ou pesquise a Ajuda do Fireworks. Para obter mais tutoriais, visite Além disso, certifique-se de visitar o Centro de Suporte premiado da Macromedia em Tutoriais do Fireworks 305

306 306 Capítulo 11

307 CAPÍTULO 12 Integração do Fireworks MX com a família de produtos Macromedia Studio MX Independente se você estiver criando conteúdo para multimídia ou Web, o Macromedia Fireworks MX é um compoenente essencial da caixa de ferramentas de qualquer projetista. O Fireworks oferece vários recursos poderosos de integração com os outros produtos do Macromedia Studio MX para simplificar o processo de projeto: O Fireworks pode ser executado para editar os elementos gráficos selecionados de dentro do Macromedia Dreamweaver, Macromedia Flash, Macromedia HomeSite e Macromedia FreeHand. Os comportamentos do Fireworks são preservados na exportação para muitos aplicativos do Macromedia, permitindo que você exporte elementos interativos como botões e rollovers. O Dreamweaver e o Fireworks compartilham uma total integração conhecida como Roundtrip HTML. O Roundtrip HTML permite que você faça alterações em um aplicativo e tenha essas alterações refletidas perfeitamente no outro. O Flash e o Fireworks também compartilham uma integração total. Você pode importar arquivos de origem PNG do Fireworks diretamente para o Flash sem ter que exportar para qualquer outro formato gráfico. O Flash oferece várias opções que permitem que você controle como os objetos e as camadas do Fireworks são importados. Trabalhar com Macromedia Fireworks MX e Macromedia Dreamweaver MX Os recursos exclusivos de integração tornam fácil de trabalhar com arquivos de forma intercambiável no Macromedia Dreamweaver MX e no Macromedia Fireworks MX. O Dreamweaver e o Fireworks reconhecem e compartilham muitas das mesmas edições em arquivos, incluindo alterações para links, mapas de imagens, fatias de tabela e mais. Juntos, os dois aplicativos fornecem um fluxo de trabalho facilitado para edição, otimização e posicionamento de arquivos gráficos de Web em páginas HTML. Se quiser modificar as imagens e tabelas do Fireworks colocadas em um documento do Dreamweaver, você pode ativar o Fireworks para fazer as edições e, em seguida, voltar ao documento atualizado no Dreamweaver. Se quiser fazer edições de otimização rápida em imagens e animações posicionadas do Fireworks, você pode ativar a caixa de diálogo Visualizar exportação do Fireworks e digitar as configurações atualizadas. Em qualquer caso, as atualizações são feitas nos arquivos colocados no Dreamweaver, assim como em arquivos de origem do Fireworks, se esses arquivos foram ativados. 307

308 Para facilitar ainda mais o fluxo de trabalho do projeto de Web, você pode criar marcadores de lugar de imagem no Dreamweaver para as futuras imagens do Fireworks. Posteriormente, você pode selecionar os marcadores de lugar e ativar o Fireworks para criar os gráficos desejados nas dimensões especificadas pelas imagens do marcador de imagem do Dreamweaver. Uma vez no Fireworks, você pode alterar as dimensões da imagem se desejado. Colocar imagens do Fireworks MX nos arquivos do Dreamweaver MX Os elementos gráficos do Fireworks podem ser colocados em um documento do Dreamweaver de duas formas. Você pode colocar um elemento gráfico terminado do Fireworks usando o menu Inserir no Dreamweaver ou criar um novo documento do Fireworks de um marcador de lugar de imagem do Dreamweaver. Inserir imagens do Fireworks MX no Dreamweaver MX Você pode inserir imagens GIF ou JPEG geradas pelo Fireworks diretamente em um documento do Dreamweaver. Você precisa exportar as imagens do Fireworks primeiro. Para obter informações sobre como exportar as imagens GIF e JPEG, veja a Ajuda do Fireworks > Usando o Fireworks > Exportar uma única imagem. Para inserir uma imagem do Fireworks em um documento do Dreamweaver: 1 Posicione o ponto de inserção onde você deseja que a imagem apareça na janela do documento do Dreamweaver. 2 Efetue um dos procedimentos a seguir: Escolha Inserir > Imagem. Clique no botão Inserir imagem na categoria Comum da barra Inserir. 3 Navegue para a imagem que você exportou do Fireworks e clique em Abrir. Se o arquivo de imagem não estiver no site atual do Dreamweaver, uma mensagem aparecerá perguntando se você deseja copiar para a pasta do site. Criar novos arquivos do Fireworks MX a partir dos marcadores de lugar do Dreamweaver MX Os marcadores de lugar de imagem combinam o poder do Fireworks e Dreamweaver permitindo que você experimente vários layouts de página na Web antes de criar o trabalho gráfico para a sua página. Os marcadores de imagem permitem que você especifique o tamanho e a posição das imagens futuras do Fireworks que serão colocadas no Dreamweaver. Quando você cria uma imagem no Fireworks de um marcador de lugar de imagem do Dreamweaver, um novo documento Fireworks é criado com a tela com as mesmas dimensões do marcador de lugar selecionado. No Fireworks, você pode usar quaisquer ferramentas do Fireworks para criar o seu gráfico. Você pode, inclusive, fatiar o documento e adicionar interatividade usando botões, rollovers e outros comportamentos. Observação: Todos os comportamentos aplicados no Fireworks são preservados na exportação de volta para o Dreamweaver. Da mesma forma, a maior parte dos comportamentos do Dreamweaver aplicados a marcadores de lugar de imagem também são preservados durante a ativação e edição com Fireworks. Há uma exceção, entretanto: os rollovers disjuntos aplicados a marcadores de lugar no Dreamweaver não são preservados quando ativados e editados no Fireworks. 308 Capítulo 12

309 Uma vez que a sessão do Fireworks tenha terminado e você tiver voltado para o Dreamweaver, o novo elemento gráfico do Fireworks que você criou pega o lugar do marcador de lugar da imagem que você selecionou originariamente. Para criar uma imagem do Fireworks de um marcador de lugar no Dreamweaver. 1 No Dreamweaver, salve o documento desejado de HTML em um local na pasta de site do Dreamweaver. 2 Posicione o ponto de inserção na posição desejada no documento e escolha Inserir > Marcador de lugar da imagem. Um marcadode lugar da imagem é inserido no documento do Dreamweaver. 3 Efetue um dos procedimentos a seguir: Selecione o marcador de lugar da imagem e clique em Criar no inspetor de propriedades. Clique duas vezes (Windows) ou clique duas vezes com Command (Macintosh) no marcador de lugar da imagem. Clique com o botão direito do mouse (Windows) ou com Control (Macintosh) e escolha Criar imagem no Fireworks. O Dreamweaver ativa o Fireworks, se ainda não estiver aberto. A janela de documento indica que você está editando uma imagem do Dreamweaver. 4 Crie uma imagem no Fireworks e clique em Concluído quando tiver terminado. 5 Especifique um nome e local para o arquivo PNG de origem na caixa de diálogo Salvar como e clique em Salvar. Observação: Se você digitou um nome para o marcador de lugar da imagem no inspetor de propriedades no Dreamweaver, o nome será usado como nome de arquivo padrão no Fireworks. Para obter mais informações sobre como salvar arquivos PNG do Fireworks, veja a Ajuda do Fireworks > Usando o Fireworks > Salvar arquivos do Fireworks. 6 Especifique um nome para o arquivo de imagem exportado ou arquivos na caixa de diálogo Exportar. Esses são os JPEGs ou GIFs que serão exibidos no Dreamweaver. Integração do Fireworks MX com a família de produtos Macromedia Studio MX 309

310 7 Especifique um local para o(s) arquivo(s) de imagem exportado(s). O local escolhido deve estar dentro da pasta de site do Dreamweaver. Para obter mais informações sobre exportação, veja a Ajuda do Fireworks > Usando o Fireworks > Exportar do Fireworks. 8 Clique em Salvar. Quando você volta ao Dreamweaver, o marcador de imagem que você selecionou originariamente é substituído pela nova imagem do Fireworks ou tabela que você criou. Colocar HTML do Fireworks MX no Dreamweaver MX Há algumas formas de colocar HTML do Fireworks no Dreamweaver. Você pode exportar o HTML ou pode copiar o HTML do Fireworks para a Área de transferência. Você também pode abrir um arquivo HTML exportado do Fireworks no Dreamweaver e copiar e colar as seções selecionadas de código. Você pode atualizar facilmente o código que tiver exportado para o Dreamweaver usando o comando Atualizar HTML no Fireworks. Você pode, inclusive, exportar HTML como um item de biblioteca do Dreamweaver. O HTML do Fireworks também pode ser exportado como camadas CSS (Cascading Style Sheet). Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Exportar HTML. Observação: Antes de exportar, copiar ou atualizar o HTML do Fireworks para uso no Dreamweaver, certifique-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo Configuração do HTML. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks >Definir opções de exportação do HTML. Exportar o HTML do Fireworks MX para o Dreamweaver MX Exportar os arquivos do Fireworks para o Dreamweaver é um processo de duas etapas. No Fireworks, você exporta os arquivos diretamente para uma pasta de site do Dreamweaver. Isso colocará um arquivo de HTML e os arquivos associados da imagem no local especificado. Em seguida, você colocará código de HTML no Dreamweaver usando o recurso Inserir. Observação: Antes de exportar, certifique-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo Configuração do HTML. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks >Definir opções de exportação do HTML. Para exportar HTML do Fireworks: Exportar o documento para o formato HTML Veja a Ajuda do Fireworks > Usando o Fireworks > Exportar HTML do Fireworks. Para inserir HTML do Fireworks em um documento do Dreamweaver: 1 No Dreamweaver, salve o documento em um local definido. 2 Coloque o ponto de inserção no documento onde você deseja que o código HTML inserido inicie. 310 Capítulo 12

311 3 Efetue um dos procedimentos a seguir: Escolha Inserir > Imagens interativas > HTML do Fireworks. Clique no botão Inserir HTML do Fireworks na categoria Comum da barra Inserir. 4 Na caixa de diálogo que aparecer, clique em Navegar para escolher o arquivo desejado HTML do Fireworks. 5 Escolha Excluir o arquivo após a inserção para mover o arquivo HTML para a Lixeira (Windows) ou Lixo (Macintosh) quando a operação tiver sido concluída. Use essa opção se não precisar mais do arquivo HTML do Fireworks após inseri-lo. Essa opção não afeta o arquivo PNG de origem associado ao arquivo HTML. Observação: Se o arquivo HTML estiver em uma unidade de rede, ele será permanentemente excluído, não será movido para a Lixeira. 6 Clique em OK para inserir o código HTML com as suas imagens, fatias e JavaScript associados no documento do Dreamweaver. Cópia do HTML do Fireworks MX para a Área de transferência para uso no Dreamweaver MX Uma forma rápida de colocar o HTML gerado pelo Fireworks em Dreamweaver é copiá-lo para a Área de transferência do Fireworks e, em seguida, colá-lo diretamente em um documento do Dreamweaver. Todo o código associado do HTML e JavaScript ao documento do Fireworks é copiado para o documento do Dreamweaver, as imagens são exportadas para um local que você especifica e o Dreamweaver atualiza o HTML com links relativos ao site para escolher imagens. Observação: Antes de copiar para a Área de transferência, certifique-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo Configuração do HTML. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks >Definir opções de exportação do HTML. Para copiar o HTML do Fireworks MX para a Área de transferência para uso no Dreamweaver: Copie o HTML para a Área de transferência no Fireworks e, em seguida, cole-o em um documento do Dreamweaver. Veja a Ajuda do Fireworks > Usando o Fireworks > Copiar HTML para a Área de transferência. Cópia de código de um arquivo exportado do Fireworks e colagem no Dreamweaver Você pode abrir um arquivo HTML exportado do Fireworks em Dreamweaver e, em seguida, copiar manualmente e colar somente as seções desejadas em outro documento do Dreamweaver. Observação: Antes de exportar do Fireworks, certifique-se de escolher o Dreamweaver como o tipo de HTML na caixa de diálogo Configuração do HTML. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks >Definir opções de exportação do HTML. Para copiar código de um arquivo exportado do Fireworks e colá-lo no Dreamweaver: Exporte um arquivo HTML do Fireworks e, em seguida, copie e cole o código em um documento existente do Dreamweaver. Veja a Ajuda do Fireworks > Usando o Fireworks > Copiar e colar HTML de um arquivo exportado do Fireworks. Integração do Fireworks MX com a família de produtos Macromedia Studio MX 311

312 Atualizar o HTML exportado do Fireworks MX para o Dreamweaver MX O comando Atualizar HTML no Fireworks permite que você faça alterações em um documento HTML que tiver sido exportado previamente para Dreamweaver. Observação: Apesar de Atualizar HTML ser um recurso útil para atualizar HTML que você tiver exportado anteriormente para o Dreamweaver, o Roundtrip HTML fornece ainda mais benefícios. Para obter mais informações, consulte Editar arquivos do Fireworks MX no Dreamweaver MX, na página 314. Com Atualizar HTML, você pode editar uma imagem PNG de origem no Fireworks e, em seguida, atualizar automaticamente qualquer código HTML exportado e arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite que você atualize os arquivos do Dreamweaver mesmo quando o Dreamweaver não estiver sendo executado. Observação: Antes de atualizar o HTML, certifique-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo Configuração do HTML. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks >Definir opções de exportação do HTML. Para atualizar o HTML do Fireworks colocado no Dreamweaver: 1 Modifique os atributos no documento PNG desejado no Fireworks. 2 Escolha Arquivo > Atualizar HTML ou clique no botão Exportação rápida e escolha Atualizar HTML do menu pop-up do Dreamweaver. 3 Navegue para o arquivo do Dreamweaver contendo o HTML que você deseja atualizar e clique em Abrir. 4 Navegue para a pasta destino one você deseja colocar os arquivos de imagem atualizados e clique em Abrir. O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. O Fireworks também exporta as imagens atualizadas associadas ao HTML e coloca as imagens na pasta destino especificada. Se o Fireworks não puder encontrar código HTML correspondente para atualizar, ele dá a opção de inserir novo código HTML no documento do Dreamweaver. O Fireworks coloca a seção do JavaScript do novo código no início do documento e coloca a tabela HTML ou link para a imagem no final. Exportar os arquivos do Fireworks MX para as bibliotecas do Dreamweaver MX Os itens de biblioteca do Dreamweaver simplificam o processo de edição e atualização de componentes de Websites usados freqüentemente, como logotipos de empresas ou outros elementos gráficos que aparecem em todas as páginas de um site. Um item de biblioteca é uma parte de um arquivo HTML localizado em uma pasta chamada Biblioteca no seu site raiz. Os itens da biblioteca aparecem no painel Biblioteca do Dreamweaver. Você pode arrastar uma cópia do painel Biblioteca para qualquer página no seu Website. Você não pode editar um item de biblioteca diretamente no documento do Dreamweaver; pode editar somente o item mestre da biblioteca. Em seguida, você pode fazer com que o Dreamweaver atualize todas as cópias do item conforme ele é colocado em todo o seu Website. Os itens de biblioteca do Dreamweaver são semelhantes a símbolos do Fireworks; as mudanças no documento mestre da biblioteca (LBI) são refletidas em todas as instâncias da biblioteca no site. 312 Capítulo 12

313 Para exportar um documento do Fireworks como um item de biblioteca do Dreamweaver: 1 Selecione Arquivo > Exportar. 2 Escolha Biblioteca do Dreamweaver no menu pop-up Salvar como tipo. Escolha a pasta Biblioteca no site do Dreamweaver como o local no qual colocar os arquivos. Se essa pasta não existir, use a caixa de diálogo Selecionar pasta para criar ou localizar a pasta. A pasta precisa ser renomeada Biblioteca; use cada maiúscula em seu lugar, porque o Dreamweaver diferencia maiúsculas de minúsculas. Observação: O Dreamweaver não reconhecerá o arquivo exportado como um item de biblioteca a menos que ele seja salvo na pasta Biblioteca. 3 Na caixa de diálogo Exportar, digite um nome de arquivo. 4 Se a imagem contiver fatias, escolha as opções de fatias. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Exportar um documento fatiado. 5 Selecione Colocar imagens na subpasta para escolher uma pasta separada para salvar imagens. 6 Clique em Salvar. Integração do Fireworks MX com a família de produtos Macromedia Studio MX 313

314 Editar arquivos do Fireworks MX no Dreamweaver MX O Roundtrip HTML é um recurso poderoso que integra totalmente o Fireworks e o Dreamweaver. Ele permite que você faça alterações em um aplicativo e tenha essas alterações refletidas perfeitamente no outro. Com Roundtrip HTML, você usa integração de iniciar e editar para editar imagens e tabelas geradas pelo Fireworks colocadas em um documento do Dreamweaver. O Dreamweaver ativa automaticamente o arquivo PNG de origem do Fireworks para a imagem ou tabela colocada, permitindo que você faça as edições desejadas no Fireworks. As atualizações que você faz no Fireworks são aplicadas na imagem ou na tabela colocada quando você volta para o Dreamweaver. Observação: Antes de trabalhar com Roundtrip HTML, você deve realizar algumas tarefas preliminares. Para obter mais informações, veja Definir as opções de iniciar e editar do Fireworks MX, na página 319. Sobre o Roundtrip HTML O Fireworks reconhece e preserva a maior parte dos tipos de edições feitas em um documento no Dreamweaver, incluindo links alterados, mapas de imagem editados, texto editado e HTML em fatias de HTML e comportamentos compartilhados entre o Fireworks e o Dreamweaver. O inspetor de propriedades no Dreamweaver ajuda a identificar as imagens, as fatias de tabela e tabelas geradas pelo Fireworks- em um documento. Apesar do Fireworks aceitar a maioria dos tipos de edições do Dreamweaver, as mudanças radicais feitas na estrutura de uma tabela no Dreamweaver podem criar diferenças irreconhecíveis entre os dois aplicativos. Se você fizer mudanças radicais em um layout de tabela no Dreamweaver e, em seguida, tentar iniciar e editar a tabela no Fireworks, uma mensagem aparece advertindo que as mudanças feitas no Fireworks sobrescreverão todas as edições feitas anteriormente na tabela no Dreamweaver. Se você quiser fazer mudanças consideráveis em um layout de tabela, use o recurso de iniciar e editar do Dreamweaver para editar a tabela no Fireworks. Editar imagens do Dreamweaver MX no Fireworks MX Você pode executar o Fireworks para editar imagens individuais colocadas em um documento do Dreamweaver. Observação: Antes de editar os elementos gráficos do Dreamweaver no Fireworks, você deve realizar algumas tarefas preliminares. Para obter mais informações, veja Definir as opções de iniciar e editar do Fireworks MX, na página 319. Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver: 1 No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades, se necessário. 2 Efetue um dos procedimentos a seguir: Selecione a imagem desejada. O inspetor de propriedades identifica a seleção como uma imagem do Fireworks e exibe o nome do arquivo de origem PNG conhecido para a imagem. Em seguida, clique em Editar no inspetor de propriedades. Clique duas vezes (Windows) ou clique duas vezes com Command (Macintosh) na imagem que você deseja editar. Clique com o botão direito do mouse (Windows) ou com Control (Macintosh) na imagem desejada e, no menu contextual, escolha Editar com Fireworks. O Dreamweaver ativa o Fireworks, se ainda não estiver aberto. 314 Capítulo 12

315 3 Se for pedido, especifique se deseja localizar o arquivo de origem do Fireworks para a imagem colocada. Para obter mais informações sobre os arquivos PNG de origem do Fireworks, veja a Ajuda do Fireworks MX > Usando o Fireworks > Salvar arquivos do Fireworks. 4 No Fireworks, edite a imagem. A janela de documento indica que você está editando uma imagem do Dreamweaver. O Dreamweaver reconhece e preserva todas as edições aplicadas à imagem no Fireworks. 5 Quando você tiver terminado de marcar edições, clique em Concluído na janela do documento. A imagem é exportada usando as configurações de otimizações atuais, o arquivo GIF ou JPEG usado pelo Dreamweaver é atualizado e o arquivo de origem PNG é salvo se um arquivo de origem foi selecionado. Observação: Quando você abre uma imagem do painel Site do Dreamweaver, os recursos de integração do Fireworks descritos acima não estarão em vigor e o Fireworks não abrirá o arquivo PNG original. Para utilizar os recursos de integração de Fireworks, abra as imagens na janela Documento do Dreamweaver. Editar tabelas do Fireworks MX Quando você iniciar e editar uma fatia de imagem que é parte de uma tabela colocada do Fireworks, o Dreamweaver ativa automaticamente o arquivo de origem de PNG para toda a tabela. Observação: Antes de editar as tabelas do Fireworks do Dreamweaver, você deve realizar algumas tarefas preliminares. Para obter mais informações, veja Definir as opções de iniciar e editar do Fireworks MX, na página 319. Para iniciar e editar uma tabela do Fireworks colocada no Dreamweaver: 1 No Dreamweaver, escolha Janela > Propriedades para abrir o inspetor de propriedades, se necessário. 2 Efetue um dos procedimentos a seguir: Clique dentro da tabela e clique no rótulo TABELA na barra de status para selecionar toda a tabela. O inspetor de propriedades identifica a seleção como uma tabela do Fireworks e exibe o nome do arquivo de origem PNG conhecido para a tabela. Em seguida, clique em Editar no inspetor de propriedades. Clique no canto esquerdo superior da tabela para selecioná-la e, em seguida, clique em Editar no inspetor de propriedades. Selecione uma imagem na tabela e, em seguida, clique em Editar no inspetor de propriedades. Clique duas vezes (Windows) ou clique duas vezes com Command (Macintosh) na imagem que você deseja editar. Clique com o botão direito do mouse (no Windows) ou com Control (Macintosh) na imagem desejada e, em seguida, no menu contextual, escolha Editar com Fireworks. O Dreamweaver ativa o Fireworks, se ainda não estiver aberto. O arquivo PNG de origem para toda a tabela aparece na janela de documento. Observação: Para obter mais informações sobre os arquivos PNG de origem do Fireworks, veja a Ajuda do Fireworks > Usando o Fireworks > Salvar arquivos do Fireworks. Integração do Fireworks MX com a família de produtos Macromedia Studio MX 315

316 3 No Fireworks, faça as edições desejadas. O Dreamweaver reconhece e preserva todas as edições aplicadas à imagem no Fireworks. 4 Quando você tiver terminado de marcar edições, clique em Concluído na janela do documento. Os arquivos HTML e os com fatias de imagem da tabela são exportados usando as configurações de otimização atual, a tabela colocada no Dreamweaver é atualizada e o arquivo PNG de origem é salvo. Sobre os comportamentos do Dreamweaver MX Se um único elemento gráfico do Fireworks sem fatias for inserido em um documento do Dreamweaver e um comportamento do Dreamweaver for aplicado, o elemento gráfico terá uma fatia na parte superior dele quando for iniciado e editado no Fireworks. Inicialmente, a fatia não será visível porque as fatias ficam desativadas automaticamente quando você inicia e edita elementos gráficos simples, nos quais os comportamentos do Dreamweaver são aplicados. Você pode visualizar a fatia ativando a sua visibilidade da Camada Web no painel Camadas. Quando você vê propriedades de uma fatia no Fireworks que tem um comportamento Dreamweaver associado, a caixa de texto Link no inspetor de propriedades pode exibir javascript:;. Excluir esse texto é perigoso. Você pode digitar sobre ele para inserir uma URL se desejar e o comportamento ainda estará intacto quando você voltar ao Dreamweaver. O Dreamweaver aceita todos os comportamentos aplicados no Fireworks, incluindo os necessários para botões e rollovers. Os seguintes comportamentos do Dreamweaver são aceitos pelo Fireworks em uma sessão de início e edição: Rollover simples Substituir a imagem Restaurar a imagem substituída Definir o texto da barra de status Definir a imagem da barra de navegação Menu pop-up 316 Capítulo 12

317 Otimizar as imagens do Fireworks MX e as animações colocadas no Dreamweaver MX Você pode iniciar o Fireworks do Dreamweaver para fazer alterações de exportação rápidas, como alterar a dimensão ou tipo do arquivo, para imagens e animações colocadas do Fireworks. O Fireworks permite que você altere as configurações de otimização, as configurações de animação e o tamanho e área da imagem exportada. Para alterar as configurações de otimização de uma imagem do Fireworks colocada no Dreamweaver: 1 No Dreamweaver, selecione a imagem desejada e escolha Comandos > Otimizar a imagem no Fireworks. 2 Se for pedido, especifique se deseja localizar o arquivo de origem do Fireworks para a imagem colocada. Uma caixa de diálogo abre. Apesar da barra de título não exibir esse nome, essa é na verdade a caixa de diálogo Visualizar exportação do Fireworks. 3 Faça as edições desejadas na caixa de diálogo Visualizar exportação: Para editar as configurações de otimização, clique na guia Opções. Para obter mais informações, veja a Ajuda do Fireworks > Usando o Fireworks > Usar Visualizar exportação. Para editar o tamanho e a área da imagem exportada, clique na guia Arquivo e altere as configurações desejadas. Se você alterar as dimensões da imagem em Fireworks, também precisará redefinir o tamanho da imagem no inspetor de propriedades ao voltar para o Dreamweaver. Para editar as configurações de animação para a imagem, clique na guia Animação e altere as configurações desejadas. Integração do Fireworks MX com a família de produtos Macromedia Studio MX 317