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.

Observação:

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.

Um elemento com uma borda cinza na Visualização dinâmica não pode ser editado
Um elemento com uma borda cinza na Visualização dinâmica não pode ser editado

Observação:

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.

Exibição do elemento para o elemento
Exibição do elemento para o 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.

Observação:

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.

O Inspetor de propriedades rápido, que é exibido logo acima da página de elementos na Visualização dinâmica
O Inspetor de propriedades rápido, que é exibido logo acima da página de elementos na Visualização dinâmica

Para mostrar ou ocultar o Inspetor de propriedades rápido, pressione Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).

Observação:

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.

Inspetor de propriedades rápido de imagens em documentos do Bootstrap
Inspetor de propriedades rápido de 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.

Inspetor de propriedades rápido de texto
Inspetor de propriedades rápido de texto

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

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.

Observação:

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

Observação:

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. 

Inspetor de propriedades rápido para editar atributos
Inspetor de propriedades rápido para editar atributos

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 duas vezes no elemento de texto para editá-lo. Ou clique no elemento de texto para ver a Exibição do elemento e pressione Enter.

Observação:

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. 

Uma borda laranja indica o modo de edição
Uma borda laranja indica o modo de edição

O ponto de inserção está localizado na posição em que estava quando você clicou duas vezes. 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.

A tabela a seguir lista os cenários com e sem suporte durante a edição na Visualização dinâmica:

Com suporte Sem suporte
Todos os elementos HTML que contêm texto

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:

  • Se os navegadores corrigirem o HTML de modo que a tag rompida se feche, você poderá editá-la na Visualização dinâmica.
  • Se os navegadores adicionarem uma nova tag ao renderizar, você não poderá editar as tags rompidas ou inválidas.

 

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
 
Páginas de grade fluida na Visualização dinâmica, sem grades
 
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.

Inspetor de propriedades rápido para formatação de texto
Inspetor de propriedades rápido para formatação de texto

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.
Guias dinâmicos na parte superior e inferior
Guias dinâmicos na parte superior e inferior de elementos sobre os quais o mouse é 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.
Guias dinâmicos à esquerda e à direita dos elementos sobre os quais o mouse é passado
Guias dinâmicos à esquerda e à direita dos elementos sobre os quais o mouse é passado

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:

  1. Alterne para a Visualização dinâmica.

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

  3. Solte o elemento na parte superior, inferior, à direita ou à esquerda de um elemento com base nos Guias dinâmicos. Alternativamente, 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. 

Observação:

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.

Clique no nome da tag na Visualização dinâmica para selecionar todo o conteúdo dessa tag na Visualização de código
Clique no nome da tag na Visualização dinâmica para 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.).

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

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

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

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

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

A imagem está em foco primeiro
Aqui a imagem está em foco primeiro. Quando a tecla de seta para baixo é pressionada, o parágrafo abaixo da imagem é selecionado conforme mostrado na imagem a seguir.

O texto no formato em negrito está selecionado
O texto no formato em negrito está selecionado

O parágrafo está selecionado aqui
O parágrafo está selecionado agora. Quando você pressiona a tecla de seta para baixo novamente, o próximo elemento na estrutura do DOM, o texto no formato negrito, é selecionado conforme mostrado na imagem a seguir.


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: 

O seletor em foco está destacado
O seletor em foco está destacado com uma borda âmbar.

Se você pressionar a tecla Tab após o último seletor aplicado, a caixa de texto de adição de seletor será exibida. 

Observação:

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

  1. Alterne para a Visualização dinâmica e clique em Exibir > Opções de visualização dinâmica.

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

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online