Guia do Usuário Cancelar

Editar na Visualização dinâmica

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

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 no elemento de texto para editá-lo. Se você estiver no modo Exibição de elemento, pressione Enter para editar o texto.

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 é 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:

Com suporte

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:

  • 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

 

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

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.

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.

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.

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

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.
  • Grades CSS são compatíveis com a Visualização dinâmica apenas no Dreamweaver 2019 e em versões posteriores.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online