Com suporte
- 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
Aprenda a criar, editar e visualizar suas páginas da Web na Visualização dinâmica. Reorganize ou insira elementos, aplique seletores, edite atributos de imagem, insira, edite e formate texto sem alternar para a Visualização de código.
A Visualização dinâmica usa um mecanismo de renderização baseado em Chromium para que o seu conteúdo tenha, no Dreamweaver, a mesma aparência que nos seus navegadores da Web favoritos. Durante o desenvolvimento, você pode alternar para Visualização dinâmica a fim de visualizar rapidamente a página. E, para poupar tempo ao alternar entre as diferentes visualizações (de código e de design), você pode editar elementos HTML diretamente na Visualização dinâmica.
A Visualização dinâmica é atualizada imediatamente, mostrando as alterações na página.
Você pode usar os seguintes componentes para editar a página na Visualização dinâmica:
- Painel DOM: (Janela > DOM) mostra a estrutura HTML do documento e permite copiar e colar, duplicar, excluir e reorganizar os elementos na visualização. Consulte Painel DOM para obter mais informações.
- Exibição do elemento: aparece acima do elemento HTML selecionado na Visualização dinâmica. A Exibição do elemento permite associar elementos HTML com classes e IDs. Consulte Associar elementos HTML com classes e IDs para obter mais informações.
- Inspetor de propriedades rápido: aparece quando você clica no ícone de Encaixado em Exibição do elemento ou seleciona texto. O Inspetor de propriedades rápido permite editar os atributos de imagem e formatar texto na Visualização dinâmica. Consulte Inspetor de propriedades rápido para obter mais informações.
- Inspetor de propriedades da visualização dinâmica: aparece abaixo da janela Documento e permite editar várias propriedades HTML e CSS na Visualização dinâmica. Consulte Inspetor de propriedades da visualização dinâmica para obter mais informações.
- Painel Inserir: (Janela > Inserir) permite arrastar os elementos do painel diretamente na Visualização dinâmica. Consulte Inserir elementos diretamente na Visualização dinâmica para obter mais informações.
Se sua página muda dinamicamente (por causa de scripts) ou tem o recurso metarefresh habilitado, talvez você perca as edições feitas na Visualização dinâmica.
Dicas:
- Se a Visualização dinâmica ficar em branco durante a edição da página, desative-a e ative-a novamente.
- Se as edições não estiverem refletidas na página, clique no botão Atualizar na Visualização dinâmica.
O conteúdo que é processado dinamicamente em bancos de dados ou JavaScript, bem como as regiões não editáveis em modelos, não podem ser editados na Visualização dinâmica. Quando você clica nesses elementos na Visualização dinâmica, uma borda cinza ao redor deles é exibida para indicar que não é possível editá-los.
Na Visualização dinâmica, somente as opções aplicáveis ao elemento selecionado são disponibilizadas no menu principal. As opções não aplicáveis ficam esmaecidas quando o elemento é selecionado.
Exibição do elemento
Usando a Exibição do elemento, é possível associar elementos HTML a classes e IDs diretamente na Visualização dinâmica. A Exibição do elemento indica as classes e IDs disponíveis para ajudá-lo a exibir e escolher a opção necessária rapidamente.
Você também pode formatar tabelas usando a Exibição do elemento. Para obter mais informações, acesse o link.
Associar elementos HTML com classes e IDs
Clique no elemento necessário na Visualização dinâmica. A Exibição do elemento aparece e exibe a ID e classe associadas no momento.
Na Visualização dinâmica, você também pode clicar no elemento HTML no Painel DOM para exibi-lo na Exibição do elemento.
- Para dissociar o elemento HTML de uma classe ou ID, clique no “x” adjacente à classe ou à ID.
- Para alterar a classe ou a ID associada ao elemento HTML, clique na caixa. Uma lista de classes e IDs disponíveis é exibida. Clique na opção necessária.
- Para adicionar uma classe ou uma ID e aplicá-la ao elemento, clique em “+” e digite o nome. Para salvar as alterações, clique em “+” ou pressione Enter.
Em seguida, você pode usar o CSS Designer para definir um seletor que inclua essa classe ou ID. Para obter mais informações, consulte Aplicar layout às páginas usando o CSS Designer.
A Exibição do elemento de elementos transicionais não é movida com os elementos quando a transição é acionada. No entanto, as alterações feitas com o uso da Exibição do elemento entrarão em vigor mesmo que essa exibição não esteja no mesmo local do elemento transitional.
Inspetor de propriedades rápido
Inspetor de propriedades rápido para imagens
O Inspetor de propriedades rápido aparece logo em cima dos elementos selecionados na Visualização dinâmica. Usando o Inspetor de propriedades, você pode editar atributos ou formatar texto na Visualização dinâmica.
Para mostrar ou ocultar o Inspetor de propriedades rápido, pressione Ctrl + Alt + H (Win)/CMD + Ctrl + H (Mac).
O ícone do Navegador de código não é exibido na Visualização dinâmica quando você usa o Inspetor de propriedades rápido.
O Inspetor de propriedades rápido também inclui opções para personalizar imagens em documentos do Bootstrap.
- Cortar para ajustar: clique para tornar os cantos de imagens circulares ou arredondados, ou para transformá-los em miniaturas.
- Tornar a imagem responsiva: clique para tornar imagens responsivas e adaptá-las a vários tamanhos de tela.
Inspetor de propriedades rápido de texto
O Inspetor de propriedades rápido para texto na Visualização dinâmica permite formatar, recuar e criar hiperlinks de texto rapidamente. O Inspetor de propriedades rápido para texto é exibido quando você clica no ícone de encaixado para os elementos de texto h1-h6, pre e p.
- A opção de formato permite alterar rapidamente a tag do elemento para uma das seguintes tags: h1-h6, p e pre.
- A opção de link ajuda a criar hiperlink para o elemento de texto.
- Os ícones de Negrito e Itálico ajudam a adicionar as tags <strong> e <em> ao elemento de texto.
- Os ícones de recuo ajudam a adicionar ou remover o recuo do texto. A tag <blockquote> é adicionada ou removida do código conforme necessário.
Em documentos do Bootstrap, o Inspetor de propriedades rápido de texto também permite alinhar e transformar os elementos de texto.
- Alinhar: alinha os elementos de texto do Bootstrap para a esquerda, no centro, para a direita ou justifica aplicando as classes correspondentes.
- Transformar: altera a caixa do texto de um elemento aplicando classes para letras minúsculas, letras maiúsculas ou apenas a primeira letra da frase em maiúscula.
Inspetor de propriedades da visualização dinâmica
Inspetor de propriedades da visualização dinâmica é o Inspetor de propriedades tradicional que está disponível abaixo da janela Documento.
O Inspetor de propriedades da visualização dinâmica permite examinar e editar as propriedades mais comuns do elemento selecionado de página atual, como texto ou um objeto inserido. O conteúdo do Inspetor de propriedades da visualização dinâmica varia de acordo com o elemento selecionado.
O Inspetor de propriedades da Visualização dinâmica não está disponível em páginas de Grade fluida.
Para acessar a Ajuda de um determinado Inspetor de propriedades, clique no botão Ajuda no canto superior direito do Inspetor de propriedades. Ou selecione Ajuda no menu Opções do Inspetor de propriedades.
Aqui estão os elementos que podem ser editados usando o Inspetor de propriedades da visualização dinâmica:
- HTML
- CSS
- Imagem
- Tabela
- Mídia - apenas áudio HTML5 e vídeo HTML5
- Âncora
- Formulário
- FormButton
- FormTextArea
- FormSubmitButton
- FormRange
- FormRadioButton
- FormList
- FormImage
- FormFile
- FormCheckBox
- FormColor
- FormDate
- FormDateTime
- FormDateTimeLocal
- FormMonth
- FormTime
- FormWeek
- FormNumber
- FormLabel
- FormHidden
- FormGeneric
Propriedades da UI do jQuery e propriedades relacionadas a modelos não estão disponíveis para edição no Inspetor de propriedades da Visualização dinâmica.
Editar atributos HTML
Você pode rapidamente adicionar, editar ou remover os atributos HTML de imagens diretamente na Visualização dinâmica usando o Inspetor de propriedades rápido.
O Inspetor de propriedades rápido para imagens é exibido quando você clica no ícone de Encaixado . Dependendo do espaço disponível, o Inspetor de propriedades será exibido à direita, à esquerda, no topo, abaixo ou acima da imagem. Você pode mover o Inspetor de propriedades e colocá-lo na posição que for mais conveniente.
Para editar atributos, clique no ícone de Encaixado no Inspetor de propriedades rápido. Você pode alterar a origem da imagem junto com outros atributos, como “title” e ”alt”, e as alterações serão refletidas imediatamente. Você também pode ajustar a Largura e a Altura da imagem na Visualização dinâmica.
As alterações feitas são salvas quando você executa um dos seguintes procedimentos:
- Clique em qualquer local fora do Inspetor de propriedades
- Pressione Enter
- Pressione Tab para editar outro atributo no Inspetor de propriedades
- Salve o arquivo
Quando as imagens são carregadas dinamicamente, você pode usar o Inspetor de propriedades rápido da imagem para inspecionar rapidamente os atributos definidos para a imagem.
Editar texto diretamente na Visualização dinâmica
Agora você pode editar elementos de texto diretamente na Visualização dinâmica. Basta clicar no elemento de texto para editá-lo. Se você estiver no modo Exibição de elemento, pressione Enter para editar o texto.
Quando você pressiona Enter após entrar no modo de edição, os resultados podem variar dependendo de onde o ponto de inserção estava antes de você pressionar Enter. As alterações são semelhantes ao que acontece quando você pressiona Enter ao editar texto na Visualização de design.
A borda laranja em torno do elemento de texto indica que o modo foi alterado para o de edição.
O ponto de inserção é colocado onde você clica. Para selecionar todo o texto no elemento de texto, clique nele três vezes.
Os recursos para recortar, copiar-colar e desfazer-refazer ficam disponíveis enquanto você edita o texto na Visualização dinâmica. Quando você cola o texto, ele é exibido sem formatação.
O recurso de sincronização automática permite que todas as edições feitas na visualização dinâmica sejam sincronizadas automaticamente com a visualização de código.
A tabela a seguir lista os cenários com e sem suporte durante a edição na Visualização dinâmica:
|
Sem suporte |
Todos os elementos HTML que contêm texto e tags semânticas |
Edição de tags inválidas ou rompidas. Se o HTML contiver tags rompidas ou inválidas, a edição dessas tags dependerá da maneira como os navegadores as percebem:
|
Arquivos HTML derivados de modelos na Visualização dinâmica |
Edição de páginas do jQuery |
Tags estruturais contendo elementos inline. Elas são exibidas juntas em uma única caixa para edição |
Edição de tags que têm conteúdo estático e dinâmico. Embora você possa editar os seletores dessas tags, não é possível editar o texto diretamente na Visualização dinâmica. Se você clicar duas vezes nesses elementos na Visualização dinâmica, uma borda cinza aparecerá ao redor desses itens, indicando que a edição de texto não é aceita. |
Texto estático em páginas dinâmicas |
|
Texto contendo entidades |
|
Formatação de texto
Agora é possível alterar a formatação de texto e o texto do hiperlink diretamente na Visualização dinâmica. Para exibir as opções de formatação de texto, selecione uma palavra ou frase. O Inspetor de propriedades da visualização dinâmica com opções de formatação é exibido logo acima do texto selecionado.
Inserir elementos diretamente na Visualização dinâmica
Usando o painel Inserir, você pode arrastar elementos diretamente para a posição necessária no documento na Visualização dinâmica. Auxílios visuais na Visualização dinâmica, como Guias dinâmicos e ícones DOM, ajudam a posicionar os elementos arrastados em relação a um elemento sobre o qual o mouse é passado.
Os Guias dinâmicos (em verde) aparecem conforme você passa o mouse sobre os diferentes elementos na página antes de soltar o elemento. Esses guias mostram as posições onde o elemento pode ser inserido. Eles podem aparecer acima, abaixo, à esquerda ou à direita do elemento sobre o qual o mouse é passado.
- Acima e abaixo: aparece ao passar o mouse sobre todos os tipos de elementos/tags, exceto tags inline. Quando você passa o mouse na metade superior do elemento, os guias aparecem acima do elemento no qual o mouse foi passado. Quando você passa o mouse na metade inferior do elemento, os guias aparecem abaixo do elemento no qual o mouse foi passado.
- Esquerdo e direito: aparece ao passar o mouse sobre tags inline, por exemplo, <a> ou <span>, ou sobre as tags que têm a propriedade “float” definida.
Ao pausar por um tempo antes de soltar o elemento, o ícone DOM (</>) é exibido. Quando você passa o mouse sobre esse ícone, o painel DOM é aberto e você pode soltar o elemento dentro da estrutura do DOM do documento.
Para inserir elementos diretamente na Visualização dinâmica, execute as seguintes etapas:
-
Alterne para a Visualização dinâmica.
-
No painel Inserir, clique no elemento necessário e arraste-o para o documento. Como alternativa, você pode apenas clicar no elemento necessário no painel Inserir.
Dica: se não for possível arrastar um elemento do painel Inserir até a página, reinicie o computador e tente novamente.
-
Solte o elemento na parte superior, inferior, à direita ou à esquerda de um elemento de acordo com os Guias dinâmicos. Ou, solte o elemento em um local preciso na estrutura do documento clicando em </> e usando o painel DOM.
O elemento é inserido na página e destacado.
Marca de seleção
A marca de seleção permite que você selecione facilmente um bloco de texto clicando e arrastando dentro da tag na Visualização dinâmica. Quando você clica e arrasta o bloco de texto nas versões do Dreamweaver anteriores à versão 2014.1, o elemento move-se como um todo.
A marca de seleção na Visualização dinâmica está restrita às operações compatíveis com o navegador.
Seleção e arrastar e soltar elementos
Na Visualização dinâmica, é possível mover um elemento clicando no nome da tag e, em seguida, arrastando para o local desejado. Ao clicar em um nome de tag, um ícone de cursor mão é exibido para indicar que você pode arrastar a tag desse ponto. Quando começar a arrastar a tag, guias ajudarão a colocá-la no local definido.
Ao clicar no nome da tag na Visualização dinâmica, você pode selecionar todo o conteúdo dessa tag na Visualização de código.
Inspecionar código na Visualização dinâmica
O modo de inspeção funciona junto com a visualização ativa para ajudá-lo a identificar rapidamente os elementos HTML e seus estilos CSS associados. Com o modo Inspeção acionado, você pode passar com o mouse sobre elementos da página para ver os atributos do modelo da caixa CSS para qualquer elemento de nível de bloqueio.
Além de ver uma representação visual do modelo de caixa no modo Inspeção, você também pode usar o CSS Designer conforme passa o mouse sobre os elementos na Visualização dinâmica.
Quando o CSS Designer está aberto no modo Atual e você passa o mouse sobre um elemento da página, as regras e as propriedades no CSS Designer são atualizadas automaticamente para mostrar as regras e as propriedades desse elemento.
Além disso, qualquer visualização ou painel relacionado ao elemento sobre o qual você passa o mouse também é atualizado (por exemplo, a Visualização de código, o Seletor de tags, o Inspetor de propriedades etc.).
-
Com o documento aberto na janela do documento, clique em Exibir > Inspecionar.
Observação:Se ainda não estiver na visualização Ativa, o modo Inspeção a ativará automaticamente.
-
Passe o mouse sobre elementos da página para ver o modelo de caixa de CSS. O modo Inspeção destaca diferentes cores para a borda, a margem, o preenchimento e o conteúdo.
-
(Opcional) Pressione a seta para a esquerda no teclado do computador para destacar o pai do elemento atualmente destacado. Pressione a seta para a direita para retornar o destaque para o elemento filho.
-
(Opcional) Clique em um elemento para bloquear uma seção destacada.
Observação:Clicar em um elemento para bloquear uma seleção destacada desativa o modo Inspeção.
Navegação de teclado na Visualização dinâmica
É possível percorrer os elementos de página ou os seletores na Exibição do elemento usando o teclado para acelerar o processo de edição.
Percorrer elementos de página
As teclas de seta para cima e para baixo ajudam você a percorrer os elementos de página na Visualização dinâmica. O cruzamento é baseado na estrutura do DOM do documento.
A navegação de teclado na Visualização dinâmica facilita o acesso simples aos elementos aninhados e envolvidos.
Quando você acessa um elemento usando a tecla de seta para cima ou para baixo, a Exibição do elemento para esse elemento é exibida. Você pode então navegar para os seletores na Exibição do elemento ou pressionar Enter para editar o texto diretamente na Visualização dinâmica.
Percorrer os seletores
Pressione a tecla Tab para percorrer os seletores na Exibição do elemento. O seletor em foco é exibido com uma borda âmbar como mostrado abaixo:
Se você pressionar a tecla Tab após o último seletor aplicado, a caixa de texto de adição de seletor será exibida.
Use Ctrl+[ ou Cmd+[ para selecionar o elemento pai, ou Ctrl+] ou Cmd+] para selecionar o elemento filho.
Desativar edição na Visualização dinâmica
Se você preferir não usar a Exibição do elemento e o Inspetor de propriedades rápido na Visualização dinâmica, é possível desativar esses recursos de edição.
Atalhos do teclado:
- (Win) Ctrl+Alt+H
- (Mac) Cmd+Ctrl+H
-
Alterne para a Visualização dinâmica e clique em Exibir > Opções de visualização dinâmica.
-
Selecione Ocultar telas Visualização dinâmica.
Cenários não compatíveis
- Os arquivos de modelo do Dreamweaver não podem ser editados na Visualização dinâmica.
- Tags que têm conteúdo estático e dinâmico. Embora você possa editar os seletores dessas tags, não é possível editar o texto na Visualização dinâmica. Se você clicar duas vezes nesses elementos na Visualização dinâmica, uma borda cinza aparecerá ao redor desses itens, indicando que a edição de texto não é aceita.
- Tags que têm pseudoseletores aplicados a elas. Você pode encontrar resultados inesperados ao tentar editar esses elementos na Visualização dinâmica.
- Grades CSS são compatíveis com a Visualização dinâmica apenas no Dreamweaver 2019 e em versões posteriores.