- Acesso direto aos arquivos PSD na Creative Cloud e aos arquivos PSD que são compartilhados com você em uma pasta colaborativa
- Dica de código contextual para definir facilmente fontes, cores e degradês no CSS
- Suporte à função Arrastar e soltar para criar tags de imagens de camadas PSD
- Colagem de estilos diretamente na Visualização dinâmica (por exemplo, CSS Designer e Exibição do elemento)
- Guia do usuário do Dreamweaver
- Introdução
- Dreamweaver e Creative Cloud
- Áreas de trabalho e exibições do Dreamweaver
- Configurar sites
- Sobre sites do Dreamweaver
- Configurar uma versão local do site
- Conectar-se a um servidor de publicação
- Configurar um servidor de teste
- Importar e exportar configurações de site do Dreamweaver
- Trazer sites existentes de um servidor remoto para a raiz do site local
- Recursos de acessibilidade do Dreamweaver
- Configurações avançadas
- Definir preferências de site para transferência de arquivos
- Especificar configurações do servidor proxy no Dreamweaver
- Sincronizar as configurações do Dreamweaver com a Creative Cloud
- Como usar o Git no Dreamweaver
- Gerenciar arquivos
- Criar e abrir arquivos
- Gerenciamento de arquivos e pastas
- Obter e colocar arquivos no servidor
- Devolver e retirar arquivos
- Sincronizar arquivos
- Comparar arquivos em busca de diferenças
- Encobrir arquivos e pastas em seu site do Dreamweaver
- Ativar as Design Notes para sites do Dreamweaver
- Impedir possível ataque ao Gatekeeper
- Layout e design
- CSS
- Noções sobre as folhas de estilos em cascata
- Aplicar layout às páginas usando o CSS Designer
- Usar pré-processadores de CSS no Dreamweaver
- Como definir preferências de estilo CSS no Dreamweaver
- Mover regras de CSS no Dreamweaver
- Converter CSS inline em uma regra de CSS no Dreamweaver
- Trabalhar com tags div
- Aplicação de degradês ao fundo
- Criar e editar efeitos de transição do CSS3 no Dreamweaver
- Formatar código
- Conteúdo e ativos de página
- Definir propriedades da página
- Configurar propriedades de cabeçalho e propriedades de link de CSS
- Trabalhar com texto
- Localizar e substituir texto, tags e atributos
- Painel DOM
- Editar na Visualização dinâmica
- Codificar documentos do Dreamweaver
- Selecionar e exibir os elementos na janela Documento
- Definir propriedades de texto no Inspetor de propriedades
- Verificar ortografia de uma página Web
- Usar regras horizontais no Dreamweaver
- Adicionar e modificar combinações de fontes no Dreamweaver
- Trabalhar com ativos
- Inserir e atualizar datas no Dreamweaver
- Criar e gerenciar ativos favoritos no Dreamweaver
- Inserir e editar imagens no Dreamweaver
- Adicionar objetos de mídia
- Adição de vídeos no Dreamweaver
- Inserir vídeo HTML5
- Inserir arquivos SWF
- Adicionar efeitos de áudio
- Inserir áudio HTML5 no Dreamweaver
- Trabalhar com itens da biblioteca
- Usar texto em árabe e hebraico no Dreamweaver
- Vinculação e navegação
- Efeitos e widgets do jQuery
- Programar sites
- Sobre codificação no Dreamweaver
- Ambiente de codificação no Dreamweaver
- Definir preferências de codificação
- Personalizar codificação por cores
- Escrever e editar código
- Dicas de código e preenchimento de código
- Recolher e expandir código
- Reutilizar código com snippets
- Linting de código
- Otimizar código
- Editar código na Visualização de design
- Trabalhar com conteúdo do cabeçalho das páginas
- Inserir inclusões de servidor no Dreamweaver
- Usar bibliotecas de tags no Dreamweaver
- Importar tags personalizadas para o Dreamweaver
- Usar comportamentos JavaScript (instruções gerais)
- Aplicar comportamentos internos do JavaScript
- Sobre XML e XSLT
- Executar transformações XSL do servidor no Dreamweaver
- Executar transformações XSL do cliente no Dreamweaver
- Adicionar entidades de caracteres para XSLT no Dreamweaver
- Formatar código
- Fluxos de trabalho entre produtos
- Instalar e usar extensões no Dreamweaver
- Atualizações dentro do aplicativo no Dreamweaver
- Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
- Trabalho com o Fireworks e o Dreamweaver
- Editar conteúdo em sites do Dreamweaver usando o Contribute
- Integração do Business Catalyst ao Dreamweaver
- Criar campanhas de email personalizadas
- Modelos
- Sobre os modelos do Dreamweaver
- Reconhecimento de modelos e documentos baseados em modelo
- Criar um modelo do Dreamweaver
- Criar regiões editáveis nos modelos
- Criar regiões e tabelas repetitivas no Dreamweaver
- Usar regiões opcionais em modelos
- Definir atributos de tag editáveis no Dreamweaver
- Como criar modelos aninhados no Dreamweaver
- Editar, atualizar e excluir modelos
- Exportar e importar conteúdo xml no Dreamweaver
- Aplicar ou remover um modelo em um documento
- Editar conteúdo em modelos do Dreamweaver
- Regras de sintaxe para tags de modelo no Dreamweaver
- Definir preferências de realce para regiões de modelo
- Vantagens de usar modelos no Dreamweaver
- Dispositivo móvel e multitela
- Sites dinâmicos, páginas e formulários Web
- Noções sobre aplicativos Web
- Configurar o computador para desenvolvimento de aplicativos
- Solucionar problemas de conexões de banco de dados
- Remover scripts de conexão no Dreamweaver
- Criar páginas dinâmicas
- Visão geral das fontes de conteúdo dinâmico
- Definir origens de conteúdo dinâmico
- Adicionar conteúdo dinâmico a páginas
- Alterar conteúdo dinâmico no Dreamweaver
- Exibir registros de banco de dados
- Fornecer e solucionar problemas de live data no Dreamweaver
- Adicionar comportamentos personalizados de servidor no Dreamweaver
- Criar formulários usando o Dreamweaver
- Usar formulários para reunir informações de usuários
- Criar e ativar formulários do ColdFusion no Dreamweaver
- Criar formulários Web
- Suporte aprimorado a HTML5 para elementos de formulário
- Desenvolver um formulário usando o Dreamweaver
- Criação visual de aplicativos
- Criar páginas mestre e detalhadas no Dreamweaver
- Criar páginas de pesquisa e de resultados
- Criar uma página de inserção de registro
- Criar uma página de registro de atualização no Dreamweaver
- Criar páginas de exclusão de registro no Dreamweaver
- Usar comandos ASP para modificar um banco de dados no Dreamweaver
- Criar uma página de registro
- Criar uma página de logon
- Criar uma página que apenas usuários autorizados podem acessar
- Proteger pastas no ColdFusion usando o Dreamweaver
- Usar componentes do ColdFusion no Dreamweaver
- Testar, visualizar e publicar sites
- Solução de problemas
Saiba como converter rapidamente seus PSDs em designs da Web baseados em HTML para dispositivos móveis e desktops. Extraia CSS, imagens, medidas, fontes, cores, degradês e muito mais do Photoshop diretamente no Dreamweaver.
A partir de 1º de julho de 2022, os recursos do painel Extract serão descontinuados no Dreamweaver 21.2 e versões anteriores. Você pode usar o Adobe Photoshop para extrair informações de estilo e ativos de componentes PSD e reutilizá-los no Dreamweaver.
A integração do Extract com o Dreamweaver permite que os designers e desenvolvedores da Web apliquem as informações de design e extraiam os ativos otimizados para a Web diretamente no ambiente de codificação. O Extract fornece uma solução completa e independente para a extração de ativos e informações de estilo de composições de PSD, reduzindo a necessidade de alternar entre o Photoshop e o Dreamweaver.
Com o painel do Extract no Dreamweaver, você pode extrair CSS, imagens, fontes, cores, degradês e medidas para a sua página da Web. Além desses recursos básicos do Extract, o Dreamweaver também oferece os seguintes recursos exclusivos:
Introdução ao Extract
O Extract no Dreamweaver permite acessar seus arquivos PSD diretamente no painel do Extract do Dreamweaver. Leia os seguintes tópicos para saber mais sobre o painel do Extract e a área de trabalho e sobre como carregar os arquivos PSD no painel do Extract:
Painel e área de trabalho do Extract
A área de trabalho do Extract é projetada para ajudá-lo a usar efetivamente o Extract com o Dreamweaver. Na área de trabalho, o painel do Extract aparece à esquerda e a página da Web à direita na Visualização dividida (Visualizações dinâmica e de código). Você pode personalizar a área de trabalho arrastando, encaixando, recolhendo ou expandindo painéis para atender às suas necessidades. Você também pode salvar a área de trabalho personalizada para uso futuro.
Se fechar o painel do Extract, use o atalho de teclado Ctrl + K no Windows, Cmd + K no Mac ou selecione Janela > Extract para abrir novamente o painel.
Ao abrir o Dreamweaver pela primeira vez, o painel do Extract exibe um tutorial interativo para ajudar você a começar a trabalhar com os fluxos de trabalho. Você pode usar a lista suspensa na parte superior do painel para alternar entre diferentes tutoriais.
Após ter usado o tutorial, clique em Introdução para começar a usar o Extract no Dreamweaver. O painel do Extract exibe uma visualização de miniaturas de pastas e arquivos PSD na sua conta da Creative Cloud. Esses arquivos são aqueles transferidos ou sincronizados de seu desktop, ou aqueles compartilhados com você por meio de uma pasta colaborativa na Creative Cloud.
Para reiniciar o tutorial, clique no menu pop-up no canto superior direito do painel e selecione Iniciar tutorial.
Fazer upload dos arquivos PSD para a Creative Cloud
Para fazer upload de um arquivo PSD em sua Creative Cloud, escolha Janela > Extract e clique em Fazer upload do PSD. Se as composições de PSD forem desenvolvidas por outra pessoa ou equipe, elas podem ser compartilhadas na Creative Cloud. Você pode baixar ou fazer upload de arquivos na sua conta diretamente fazendo logon na Creative Cloud ou por meio do painel do Extract no Dreamweaver.
Se você estiver usando o Dreamweaver 21.2 ou versões posteriores em um dispositivo macOS, habilite o tipo de arquivo PSD na janela do Finder e carregue seu arquivo.
- Clique em Fazer upload do PSD no painel do Extract.
- Na janela do Finder, clique em Opções e selecione *.psd no menu suspenso exibido.
- Selecione o arquivo PSD e clique em Abrir para fazer upload do arquivo.
Abrir arquivos PSD no painel do Extract
Clique na imagem em miniatura do arquivo PSD requerido no painel do Extract. Se uma versão atualizada do arquivo PSD se tornar disponível na Creative Cloud depois que você abri-la, recarregue o arquivo PSD no painel do Extract. Para fazer isso, clique no nome do arquivo PSD ou clique em Recarregar PSD no menu pop-up no canto superior direito. Para voltar à exibição de miniatura e selecionar um arquivo diferente, clique no ícone da Creative Cloud na parte superior esquerda do painel.
Para ampliar a exibição e colocar foco no design, altere o nível de zoom na parte superior do painel do Extract ou use Alt +/-. Use a guia Camadas ou a lista suspensa Composição de camada para mostrar ou ocultar elementos no arquivos PSD.
Você agora está pronto para converter a composição de PSD em um site.
Definir preferências do Extract
Usando as preferências do Extract, é possível especificar o formato de arquivo padrão em que as imagens devem ser extraídas e também a unidade padrão para fontes que deve ser exibida no painel do Extract.
-
Selecione Editar > Preferências (Win) ou Dreamweaver > Preferências (Mac).
-
Selecione Extract na lista Categoria.
-
(Opcional) Altere o formato padrão em que as imagens devem ser extraídas.
-
(Opcional) Na seção Extract para dispositivos, selecione as resoluções necessárias. Essas configurações serão usadas quando você optar por salvar uma imagem em várias versões de resolução.
- Para salvar as versões com sufixos, clique na linha correspondente na coluna Sufixo e digite o texto.
- Para salvar as várias versões de resolução em pastas de saída separadas, clique na linha correspondente na coluna Pasta e especifique o caminho relativo.
-
(Opcional) Clique em Limpar cache para excluir os dados em cache relacionados ao uso do Extract.
-
Clique em Aplicar e feche a caixa de diálogo Preferências.
-
Para ver as alterações no painel do Extract, recarregue o PSD (menu pop-up > Recarregar PSD).
Extrair CSS dos arquivos PSD
Você pode copiar todas ou propriedades CSS específicas de elementos na composição de PSD e colar diretamente os estilos no CSS Designer, na Exibição do elemento na Visualização dinâmica ou em seu código (origem CSS ou documento HTML).
Além disso, as dicas de código são automaticamente preenchidas com as propriedades CSS do elemento selecionado na composição de PSD. Se preferir codificar, você pode usar essas dicas de código para extrair as propriedades CSS no código.
-
No painel do Extract (Janela > Extract), clique no arquivo PSD requerido. A visualização de miniatura do PSD expande, permitindo que você exiba a composição claramente.
-
No arquivo PSD, clique no elemento ou ativo requerido. Um pop-up com uma lista de propriedades CSS do elemento aparece e fornece a opção para selecioná-las e copiá-las. É possível ver a largura e a altura do elemento selecionado em pixels ou porcentagem.
Observação: se optar por porcentagem, as medidas também serão exibidas em unidades de porcentagem.
Para copiar o CSS, selecione as propriedades que você deseja copiar e clique em Copiar CSS.
-
Cole o CSS no documento usando um dos seguintes métodos:
- Para colar o CSS no CSS Designer, clique com o botão direito no seletor requerido e em Colar estilos.
- Para colar o CSS usando Exibição do elemento, clique com o botão direito do mouse em um seletor e clique em Colar estilos.
- Para colar o CSS no código, coloque o ponto de inserção no local requerido, clique com o botão direito e clique em Colar.
Para usar dicas de código para extrair o CSS, execute as seguintes etapas:
-
Abra uma origem CSS anexada ao documento ou alterne para a Visualização de código de um documento HTML.
-
No painel do Extract, clique no arquivo PSD requerido e no elemento requerido na composição.
-
No documento, coloque o ponto de inserção no local requerido no código.
-
Comece a digitar o nome de uma propriedade CSS para ver as dicas de código que contêm as propriedades CSS do elemento selecionado na composição de PSD. Clique na propriedade CSS requerida para inserir o código.
-
Para extrair várias propriedades CSS, selecione as propriedades necessárias no painel pop-up do Extract. Em seguida, nas dicas de código, clique em Inserir selecionados.
Copiar o texto dos arquivos PSD
O texto ou o conteúdo nas composições de PSD pode ser inserido em sua página da Web com um único clique. Para copiar o texto da composição de PSD no painel do Extract, selecione um elemento de texto e clique em Copiar texto. O texto é copiado para a área de transferência. Você pode colar o texto onde for necessário.
Depois que você extraiu o texto, você pode extrair as propriedades, como a fonte e as cores que são associadas ao texto. Para obter mais informações, consulte Extrair fontes, cores e degradês de arquivos PSD.
Extrair imagens de arquivos PSD
Você pode simplesmente arrastar qualquer camada nas composições de PSD do painel do Extract para um local definido na Visualização dinâmica da página da Web. Auxílios visuais na Visualização dinâmica, como Guias dinâmicos e ícone DOM, ajudam a arrastar e posicionar um elemento. Ao pausar por um tempo antes de soltar o elemento, o ícone DOM (</>) é exibido. A estrutura do DOM é exibida quando você passa o mouse sobre o ícone </>, e você pode soltar o elemento dentro da estrutura. Se preferir codificar, você pode usar a dica de código contextual e extrair imagens. Dicas de código permitem a extração de cores e gradientes como imagens.
Se o arquivo PSD contiver várias pranchetas, cada prancheta será exibida como uma pasta no painel camadas. Você pode expandir ou recolher a pasta para exibir ou ocultar seu conteúdo. Para ampliar uma prancheta específica, basta clicar no nome da prancheta. Para aplicar menos zoom, clique em qualquer lugar fora da prancheta e clique em FIT.
Antes de inserir a imagem extraída, o Dreamweaver exibe o nome da imagem, que você pode editar. Por padrão, a imagem é salva na pasta raiz do site. Se desejar salvar a imagem em um local personalizado, você pode incluir o caminho completo de diretório junto com o nome de arquivo.
Observação: se você estiver extraindo uma imagem em um documento que não pertence a um site definido, a imagem será extraída no diretório em que o documento existe. Para documentos não salvos, você será solicitado a salvar primeiro o documento.
Você também pode salvar a imagem em seu disco local e invocá-la em sua página da web posteriormente. Além disso, se estiver criando um site responsivo, você pode salvar várias versões de resolução de uma imagem para dispositivos com um único clique.
-
No painel do Extract, clique no arquivo PSD do qual deseja baixar as imagens.
-
Clique na imagem requerida no arquivo PSD.
Observação:Use a guia Camadas e a lista suspensa Composições de camada no painel do Extract para mostrar ou ocultar imagens na composição de PSD. Se uma imagem consiste em várias camadas, você pode selecionar uma camada individual da imagem para extrair.
Observe que as dicas de código aparecem na Visualização de código no lado direito da área de trabalho.
-
Para importar várias imagens, mantenha a tecla Shift ou Command pressionada e clique nas imagens desejadas. As imagens selecionadas são extraídas como uma única imagem.
-
Execute uma das seguintes ações:
- No pop-up que aparece quando você clica na imagem, clique em . Especifique o caminho, o nome de arquivo, o formato de arquivo e o fator de dimensionamento (se for necessário). Depois, execute uma das seguintes ações:
- Clique em Salvar para salvar a imagem com resolução 1x. Para dimensionar a imagem, selecione Escala em e especifique o fator de dimensionamento.
- Clique em Salvar várias para salvar várias versões de resolução da imagem. O arquivo PSD não precisa necessariamente conter essas versões; o Dreamweaver pode salvar a imagem em várias resoluções durante a extração.
Você pode especificar as versões de resolução necessárias e a pasta de saída correspondente em Preferências.
- Arraste a imagem na Visualização dinâmica do documento. Os guias dinâmicos aparecem na Visualização dinâmica para ajudar você a posicionar a imagem.
Quando você solta a imagem, o Dreamweaver exibe o nome da imagem. Você pode editar o nome da imagem e a extensão. Pressione Enter para salvar a imagem. A imagem é salva na pasta raiz do site por padrão. Para salvar a imagem em um local personalizado, insira o caminho junto com o nome do arquivo.
- Quando você clica na imagem, dicas de código contextual no Dreamweaver são preenchidas. Na Visualização de código do documento HTML ou no documento CSS, posicione o cursor no ponto de inserção. Depois de digitar o nome da propriedade da imagem de fundo ou a tag <img>, o nome da imagem selecionada aparecerá nas dicas de código. Selecione a imagem, altere o nome e a extensão se for necessário e pressione Enter.
Por padrão, a imagem é salva na pasta raiz do site. Para salvar a imagem em um local personalizado, insira um caminho de arquivo personalizado junto com o nome de arquivo.
- No pop-up que aparece quando você clica na imagem, clique em . Especifique o caminho, o nome de arquivo, o formato de arquivo e o fator de dimensionamento (se for necessário). Depois, execute uma das seguintes ações:
Extrair medidas de arquivos PSD
Usando o painel do Extract, você pode facilmente exibir e extrair o valor de medida entre dois elementos na composição de PSD.
-
No arquivo PSD no painel do Extract, clique nos elementos requeridos mantendo a tecla Shift ou Command pressionada.
O painel do Extract exibe as distâncias horizontal e vertical entre os dois elementos.
Observação:Para exibir as medidas em unidades de porcentagem, clique em qualquer elemento e clique em porcentagem.
-
Clique no valor necessário para copiá-lo para a área de transferência.
-
Cole o valor onde necessário, por exemplo, nas propriedades CSS do CSS Designer ou em seu código.
Extrair fontes, cores e degradês de arquivos PSD
Usando o painel do Extract, você pode extrair as propriedades CSS de fontes, cores ou degradês usados na composição PSD.
-
No painel do Extract, clique em Estilos.
-
Para extrair fontes, execute as seguintes ações na seção Fontes.
-
Expanda o tipo de fonte requerida.
Para saber mais sobre a fonte, clique no ícone do Adobe Fonts ().
-
Clique no formato e no tamanho que você deseja copiar, e no pop-up que aparece, clique em Copiar CSS. O Extract marca os elementos de texto que usam a fonte, formato e tamanho que você clicou.
Observação:É possível alterar a unidade da fonte para 'em' ou 'rem' nas preferências do Extract (Preferências > Extract). Clique em Recarregar PSD no menu pop-up no canto superior direito do painel do Extract para ver as alterações.
-
Cole o CSS onde necessário, por exemplo, no código ou no CSS Designer.
Para extrair cores, execute as seguintes ações na seção Cores:
-
Clique na amostra de cor desejada. O Extract marca os elementos que usam a cor selecionada.
Observação: você também pode escolher qualquer outra cor da composição de PSD usando o seletor de cores.
-
No menu pop-up que aparece ao clicar na amostra de cores, selecione o modelo de cor desejada (RGB, Hex ou HSL) e copie (Ctrl+c; Cmd+c) o valor da cor.
-
Cole o valor da cor onde for necessário, por exemplo, no código ou no CSS Designer.
-
-
Para extrair degradês, clique em uma amostra de degradê na seção Degradês. No pop-up que aparece, clique em Copiar CSS. Cole o CSS onde necessário, por exemplo, no código ou no CSS Designer.
Os prefixos do fornecedor selecionados nas preferências (Preferências > Estilos CSS) também são colados com os degradês. Se você extrair um degradê radial, o CSS correspondente será inserido sem um prefixo de fornecedor, pois não há suporte para os degradês radiais.