Use este tópico para saber como usar o Inspetor de propriedades para editar código na Visualização de design no Adobe Dreamweaver.

O Dreamweaver permite criar e editar visualmente páginas da Web sem que você precise se preocupar com o código-fonte subjacente. No entanto, haverá momentos em que provavelmente será necessário editar o código para ter maior controle ou para solucionar problemas da página da Web. O Dreamweaver permite que você edite alguns códigos enquanto trabalha na Visualização de design.

Esta seção foi projetada para pessoas que preferem trabalhar na Visualização de design, mas que também desejam acessar rapidamente o código.

Selecionar tags-filha na Visualização de design

Se você selecionar um objeto na Visualização de design que contém tags-filha, por exemplo, uma tabela HTML, poderá selecionar rapidamente a primeira tag-filha desse objeto clicando em Editar > Selecionar filho.

Observação:

Esse comando só estará ativado na Visualização de design.

Por exemplo, a tag <table> normalmente tem tags-filha <tr>. Se você selecionar uma tag <table> no seletor de tags, poderá selecionar a primeira linha na tabela clicando em Editar > Selecionar filho. O Dreamweaver selecionará a primeira tag <tr> no seletor de tags. Como a tag <tr> possui tags-filha, chamadas tags <td>, se você clicar novamente em Editar > Selecionar filho, a primeira célula da tabela será selecionada.

Edição do código com o Inspetor de propriedades

Você pode usar o Inspetor de propriedades para inspecionar e editar os atributos de texto ou de objetos na página. As propriedades mostradas no Inspetor de propriedades geralmente correspondem aos atributos das tags. A alteração de uma propriedade no Inspetor de propriedades normalmente tem o mesmo efeito que alterar o atributo correspondente na Visualização de código.

Observação:

O Inspetor de tags e o Inspetor de propriedades permitem que você exiba e edite os atributos de uma tag. O Inspetor de tags permite que você exiba e edite cada atributo associado a uma tag específica. O Inspetor de propriedades mostra somente os atributos mais comuns, mas fornece um conjunto mais sofisticado de controles para alterar os valores desses atributos, e permite editar determinados objetos (como colunas de tabela) que não correspondem a tags específicas.

  1. Clique no texto ou selecione um objeto na página.

    O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades não estiver visível, selecione Janela > Propriedades.

  2. Faça as alterações nos atributos no Inspetor de propriedades.

Edição do CFML com o Inspetor de propriedades

Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualização de design.

  1. No Inspetor de propriedades, clique no botão Atributos para editar os atributos da tag ou adicionar novos.
  2. Se a tag tiver conteúdo entre suas tags de abertura e finalização, clique no botão Conteúdo para editar o conteúdo.

    O botão Conteúdo aparecerá somente se a tag selecionada não for uma tag vazia (ou seja, se ela contiver uma tag de abertura e uma tag de finalização).

  3. Se a tag contiver uma expressão condicional, faça as alterações nela na caixa Expressão.

Visão geral do Quick Tag Editor

Use o Quick Tag Editor para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualização de design.

Se você digitar um HTML inválido no Quick Tag Editor, o Dreamweaver tentará corrigi-lo para você inserindo aspas de fechamento e colchetes angulares de fechamento quando necessário.

Para definir as opções do Quick Tag Editor, abra o editor pressionando Control-T (Windows) ou Command-T (Macintosh).

O Quick Tag Editor possui três modos:

  • O modo Inserir HTML é usado para inserir um novo código HTML.
  • O modo Editar tag é usado para editar uma tag existente.
  • O modo Inserir HTML é usado para inserir um novo código HTML.

  • O modo Editar tag é usado para editar uma tag existente.

  • O modo Colocar tag ao redor é usado para colocar uma nova tag ao redor de uma seleção atual.

Observação:

O modo em que o Quick Tag Editor é aberto depende da seleção atual na Visualização de design.

Nos três modos, o procedimento básico para uso do Quick Tag Editor é o mesmo: abra o editor, digite ou edite tags e atributos, e feche o editor.

Você pode percorrer os três modos pressionando Control+T (Windows) ou Command+T (Macintosh) enquanto o Quick Tag Editor está ativo.  

Edição de código com o Quick Tag Editor

Use o Quick Tag Editor (Editar > Quick Tag Editor) para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualização de design.

Inserção de uma tag HTML

  1. Na Visualização de design, clique na página para colocar o ponto de inserção no local em que você deseja inserir o código.
  2. Pressione Control+T (Windows) ou Command+T (Macintosh).

    O Quick Tag Editor é aberto no modo Inserir HTML.

    Quick Tag Editor no modo Inserir HTML
    Quick Tag Editor no modo Inserir HTML

  3. Digite a tag HTML e pressione Enter.

    A tag é inserida no código, juntamente com uma tag de finalização correspondente, se aplicável.

  4. Pressione Escape para sair sem fazer alterações.

Edição de uma tag HTML

  1. Selecione um objeto na Visualização de design.

    Você também pode selecionar a tag que deseja editar no seletor de tags na parte inferior da janela Documento. Para obter mais informações, consulte Edição de código com o seletor de tags.

  2. Pressione Control+T (Windows) ou Command+T (Macintosh).

    O Quick Tag Editor é aberto no modo Editar tag.

  3. Digite novos atributos, edite atributos existentes ou edite o nome da tag.
  4. Pressione Tab para mover-se de um atributo para o seguinte; pressione Shift+Tab para retornar.

    Observação:

    Por padrão, as alterações são aplicadas ao documento quando você pressiona Tab ou Shift+Tab.

  5. Para fechar o Quick Tag Editor e aplicar todas as alterações, pressione Enter.
  6. Para sair sem fazer nenhuma outra alteração, pressione Escape.

Delimitação da seleção atual com tags HTML

  1. Selecione o texto sem formatação ou um objeto na Visualização de design.

    Observação:

    Se você selecionar texto ou um objeto que inclua uma tag HTML de abertura ou finalização, o Quick Tag Editor será aberto no modo Editar tag, e não no modo Colocar tag ao redor.

  2. Pressione Control+T (Windows) ou Command+T (Macintosh), ou clique no botão do Quick Tag Editor no Inspetor de propriedades.

    O Quick Tag Editor é aberto no modo Colocar tag ao redor.

  3. Digite uma tag de abertura única, como strong, e pressione Enter (Windows) ou Return (Macintosh).

    A tag é inserida no início da seleção atual, enquanto uma tag de finalização correspondente é inserida no final.

  4. Para sair sem fazer nenhuma alteração, pressione Escape.

Uso do menu de dicas no Quick Tag Editor

O Quick Tag Editor inclui um menu de dicas de atributos que lista todos os atributos válidos da tag que você está editando ou inserindo.

Você também pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor.

Para ver um menu de dicas que lista os atributos válidos para uma tag, faça uma pausa rápida enquanto edita um nome de atributo no Quick Tag Editor. Um menu de dicas é exibido, listando todos os atributos válidos para a tag que você está editando.

Da mesma forma, para ver um menu de dicas que lista nomes de tag válidos, faça uma pausa enquanto digita ou edita um nome de tag no Quick Tag Editor.

Observação:

As preferências de dicas de código do Quick Tag Editor são controladas pelas preferências normais de dicas de código. Para obter mais informações, consulte Definição das preferências de dicas de código.

  1. Siga um destes procedimentos:
    • Comece a digitar um nome de tag ou atributo. A seleção no menu Dicas de código vai para o primeiro item que inicia com as letras que você digitou.

    • Use as teclas para cima ou para baixo a fim de selecionar um item.

    • Use a barra de rolagem para localizar um item.

  2. Pressione Enter para inserir o item selecionado ou clique duas vezes em um item para inseri-lo.
  3. Para fechar o menu de dicas sem inserir um item, pressione Escape ou continue digitando.

Desativação do menu de dicas ou alteração do atraso antes que o menu apareça

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Dicas de código.

    A caixa de diálogo Preferências de dicas de código é exibida.

  2. Para desativar o menu de dicas, cancele a seleção da opção Ativar dicas de código.

Edição de código com o seletor de tags

Você pode usar o seletor de tags para selecionar, editar ou remover tags sem sair da Visualização de design. O seletor de tags está localizado na barra de status, na parte inferior da janela Documento, e mostra uma série de tags.

Edição ou exclusão de uma tag

  1. Clique no documento.

    As tags aplicadas no ponto de inserção aparecem no seletor de tags.

  2. No seletor de tags, clique com o botão direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla Control enquanto clica em uma tag (Macintosh).
  3. Para editar uma tag, selecione Editar tag no menu. Faça as alterações no Quick Tag Editor. Para obter mais informações, consulte Edição de código com o Quick Tag Editor.
  4. Para excluir uma tag, selecione Remover tag no menu.

Seleção de um objeto correspondente a uma tag

  1. Clique no documento.

    As tags aplicadas no ponto de inserção aparecem no seletor de tags.

  2. Clique em uma tag no seletor de tags.

    O objeto representado pela tag é selecionado na página.

    Observação:

    Use esta técnica para selecionar linhas (tags tr) ou células (tags td) de tabela individuais.

Gravação e edição de scripts na Visualização de design

Você pode trabalhar com JavaScripts e VBScripts do cliente tanto na Visualização de código quanto na Visualização de design, da seguinte maneira:

  • Grave um script JavaScript ou VBScript para a página sem sair da Visualização de design.

  • Crie um link no documento para um arquivo de script externo sem sair da Visualização de design.

  • Edite um script sem sair da Visualização de design.

    Antes de iniciar, selecione Exibir > Auxílios visuais > Elementos invisíveis para garantir que os marcadores de script aparecerão na página.

Gravação de um script do cliente

  1. Coloque o ponto de inserção no local onde deve ser inserido o script.
  2. Selecione Inserir > HTML > Script.

  3. Selecione o script na janela de seleção do arquivo.

    Observação:

    Não é preciso incluir as tags de script de abertura e finalização.

A tag de script para o arquivo selecionado é inserida no documento.

Edição de um script

  1. Selecione o marcador de script.
  2. No Inspetor de propriedades, clique no botão Editar.

    O script é exibido na caixa de diálogo Propriedades do script.

    Se você estiver vinculado a um arquivo de script externo, o arquivo será aberto na Visualização de código, na qual você poderá fazer as edições.

    Observação:

    Se houver código entre as tags de script, a caixa de diálogo Propriedades do script será aberta, mesmo se também houver um link para um arquivo de script externo.

  3. Na caixa Linguagem, especifique JavaScript ou VBScript como linguagem do script.
  4. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.
  5. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente.

    Clique no ícone de pasta ou no botão Procurar para selecionar um arquivo ou digite o caminho.

  6. Edite o script e clique em OK.

Edição de scripts ASP do servidor na Visualização de design

Use o Inspetor de propriedades do script ASP para inspecionar e modificar scripts ASP do servidor na Visualização de design.

  1. Na Visualização de design, selecione o ícone visual da tag de linguagem de servidor.
  2. No Inspetor de propriedades do script ASP, clique no botão Editar.
  3. Edite o script ASP do servidor e clique em OK.

Edição de scripts na página usando o Inspetor de propriedades

  1. No Inspetor de propriedades, selecione a linguagem de script no menu pop-up Linguagem ou digite um nome de linguagem na caixa Linguagem.

    Observação:

    Se você estiver usando JavaScript e não tiver certeza da versão, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.

  2. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.
  3. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no ícone de pasta para selecionar o arquivo ou digite o caminho.

  4. Clique em Editar para modificar o script.

Usar comportamentos JavaScript

Você pode anexar facilmente comportamentos JavaScript (no lado do cliente) nos elementos de página, usando a aba Comportamentos do Inspetor de tags. Para obter mais informações, consulte Aplicação de comportamentos internos do JavaScript Dreamweaver.

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