Imagem de fundo do header
Dreamweaver CS3: melhor integração com o Photoshop
Home  >  Review
REVIEW

Dreamweaver CS3: melhor integração com o Photoshop

O Dreamweaver CS3 oferece integração com outros produtos da Adobe, novas ferramentas para criação, gerenciamento e ajuste Cascading Style Sheets (CSS)

Por David Sawyer McFarland, da Macworld.com*

Foto:

O Dreamweaver CS3 oferece integração com outros produtos da Adobe, novas ferramentas para criação, gerenciamento e ajuste Cascading Style Sheets (CSS)

O Dreamweaver CS3 oferece novas ferramentas fáceis de usar pelos desenvolvedores e mostra como a integração com outros softwares da Adobe Creative Suíte pode beneficiar os usuários do programa.

O que é novo?

O Dreamweaver CS3 oferece novas ferramentas em três áreas chaves: integração com outros produtos da Adobe, novas ferramentas para criação, gerenciamento e ajuste Cascading Style Sheets (CSS); e um novo conjunto de ferramentas JavaScript para construção de menus de navegação pop-ups, validação avançada de formulários (form) e exibição de dados em uma tabela interativa.

Se, atualmente, você usa o Photoshop e o Dreamweaver, deve ficar cansado quando precisa transferir uma imagem para o editor de páginas web. Isso porque o processo demanda muitos passos, sem contar aqueles que você tem de repetir todas as vezes que precisa editar um arquivo de Photoshop.

O Dreamweaver CS3 agora suporta copia e colar diretamente do Photoshop. É possível selecionar uma única camada, um pedaço, ou então fazer uma marcação em torno de uma área do documento e copiar todas as camadas da seleção; feito isso, você pode ir para o Dreamweaver (nada de “Save for web” no Photoshop), salvar o arquivo em seu site e colocar a nova imagem alterada em uma página web.

Você pode ainda iniciar o Photoshop e abrir o arquivo da imagem original para ser editado diretamente no Dreamweaver. Depois de fazer todas as mudanças que você quiser no Photoshop, copie a camada ou uma parte do arquivo de Photoshop que você desejar, cole a imagem editada dentro do Dreamweaver, substituindo pela imagem antiga.

Todas as características de otimização aplicadas anteriormente podem ser recuperadas (inclusive o nome do arquivo otimizado) e reaplicada, tornando a edição fácil e simples.

Infelizmente, o Dreamweaver não é completamente integrado à suíte. Dessa forma, o suporte para smart objects (como animações) não é tão abrangente e simples quanto inserir arquivos do Illustrator nas páginas web.

A maior novidade do programa, no entanto, é o conjunto de ferramentas para adicionar elementos de layout dinâmico e efeitos visuais para suas páginas web. Baseado no “Spry Framework" (uma biblioteca de programas em JavaScript desenvolvidos pela Adobe), essas novas ferramentas facilitam a adição de menus de navegação pop-up, validação de formulários HTML, utilização de efeitos visuais complexos e inclusão de tabelas de dados interativas.

As funcionalidadades Spry são classificadas em três: Efeitos, Widgets e Data sets. Efeitos são recursos visuais, como fade out, shrink, grow, shake, que direcionam sua atenção para imagens ou outros conteúdos da página.

Widgets adicionam elementos do layout.  A barra de menu Spry, por exemplo, é uma barra de navegação que suporta dois níveis de menus pop-up, o caminho perfeito para comprimir o máximo de links em um pequeno espaço; por exemplo, os painéis de widget etiquetados (tab) encaminham para áreas separadas, conforme a etiqueta. Clicando em uma tab, é revelado um conteúdo adicional.

O Spry Data permite que você capture dados por meio de um arquivo XML e exiba-os em uma tabela. As pessoas que visualizarem a página podem selecionar a tabela clicando na coluna de cabeçalho e depois ver a informação detalhada sobre cada item dentro de uma célula da tabela - tudo sem ter de carregar uma página à partir do web server.

O que foi melhorado

O Dreamweaver sempre teve poderosas ferramentas para criação e edição de Cascading Style Sheets (CSS).

O CSS permite que web designers criem páginas web mais bonitase complexas, sem depender exclusivamente dos recursos do HTML mas, infelizmente, essa é uma tecnologia confusa e complexa. O Dreamweaver CS3 adiciona novas ferramentas para trabalhar com CSS mais facilmente.

As novas ferramentas de gerenciamento CSS torna fácil rearranjar folhas de estilo (style sheets) por meio da reordenação de estilos, renomear estilos rapidamente e mover estilos entre folhas de estilo.

Novos modelos de CSS oferecem layouts prontos para uso com HTML básico e CSS para criar uma página com o layout mais comum ( duas colunas, três colunas, largura fixa e auto-ajustável, por exemplo).

Os templates trabalham bem em todos os browsers (navegadores) disponíveis e, como eles são simplesmente esqueletos, você pode modificá-los e adicionar arquivos CSS para criar um layout que seja a sua cara.

A nova ferramenta “Check Browser compatibility” (Verificação de compatibilidade com browsers) deve economizar horas de testes. Esta ferramenta verifica toda a página e identifica se algum código CSS ou HTML não irá funcionar em algum browser em particular. Erros potenciais são assinalados e um simples clique o leva até o site da Adobe, em que o problema é explicado e são apontadas as possíveis soluções, em profundidade.

*Dave McFarland é o autor de Dreamweaver 8: The Missing Manual (O'Reilly, 2006).

Tags

Junte-se a nós e receba nossas melhores histórias de tecnologia. Newsletter por e-mail Newsletter por e-mail
Vai um cookie?

A PCWorld usa cookies para personalizar conteúdo e anúncios, para melhorar sua experiência em nosso site. Ao continuar, você aceitará o uso. Para mais detalhes veja nossa Política de Privacidade.

Este anúncio desaparecerá em:

Ir para o site