Editar na Visualização dinâmica

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.

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.

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.

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 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.

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:

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.

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:

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:

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. 

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.).

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. 

Desativar edição na 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.