Clique no texto ou selecione um objeto na página.
Última atualização em
27/04/2021
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 se preocupar com o código de origem subjacente, mas há momentos em que pode ser necessário editar o código para ter maior controle ou solucionar problemas da página da Web. O Dreamweaver permite editar alguns códigos enquanto trabalha na visualização Design.
Esta seção foi criada para pessoas que preferem trabalhar na exibição de Design, mas que também desejam acesso rápido ao código.
Selecionar tags-filha na Visualização de design
Se você selecionar um objeto na visualização Design que contenha tags filhas—por exemplo, uma tabela HTML—pode selecionar rapidamente a primeira tag filha desse objeto selecionando Editar > Selecionar filha.
Nota
Esse comando só estará ativado na Visualização de design.
Por exemplo, a tag <table> normalmente tem tags filhas <tr>. Se você selecionar uma tag <table> no seletor de tag, poderá selecionar a primeira linha da tabela selecionando Editar > Selecionar filha. O Dreamweaver seleciona a primeira tag <tr> no seletor de tag. Como a tag <tr> em si tem tags filhas, ou seja, tags <td>, selecionar Editar > Selecionar filha novamente seleciona a primeira célula da tabela.
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 sua página.As propriedades mostradas no inspetor de Propriedade geralmente correspondem a atributos de tags; alterar uma propriedade no inspetor de Propriedade geralmente tem o mesmo efeito que alterar o atributo correspondente na visualização Código.
Nota
O inspetor de tag e o inspetor de Propriedade permitem visualizar e editar os atributos de uma tag. O inspetor de tag permite visualizar e editar todos os atributos associados a uma determinada tag. O inspetor de Propriedade mostra apenas os atributos mais comuns, mas fornece um conjunto mais rico 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.
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.
Faça as alterações nos atributos no Inspetor de propriedades.
Edição do CFML com o Inspetor de propriedades
Use o inspetor de Propriedade para inspecionar e modificar a marcação ColdFusion na visualização Design.
No inspetor de propriedades, clique no botão Atributos para editar os atributos da tag ou adicionar novos.
Se a tag contém conteúdo entre suas tags de abertura e fechamento,
clique no botão Conteúdo para editar o conteúdo.
O botão Conteúdo aparece apenas se a tag selecionada não for uma tag vazia (ou seja, se tiver uma tag de abertura e uma de fechamento).
Se a tag contém uma expressão condicional, faça alterações
nela na caixa Expressão.
Visão geral do Quick Tag Editor
Você usa o Editor de Tags Rápido para inspecionar, inserir e editar rapidamente tags HTML sem sair da exibição Design.
Se você digitar HTML inválido no editor de tag rápido, o Dreamweaver tentará corrigi-lo inserindo aspas de fechamento e colchetes angulares de fechamento onde necessário.
Para definir as opções do editor de tag rápido, abra o editor de tag rápido 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.
Nota
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
Na visualização Design, clique na
página para posicionar o ponto de inserção onde deseja inserir código.
Pressione Control+T (Windows) ou Command+T (Macintosh).
O Quick Tag Editor é aberto no modo Inserir HTML.
Digite a tag HTML e pressione Enter.
A tag é inserida no código, junto com uma tag de fechamento correspondente, se aplicável.
Pressione Escape para sair sem fazer alterações.
Edição de uma tag HTML
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 Editar código com o seletor de tags.
Pressione Control+T (Windows) ou Command+T (Macintosh).
O Quick Tag Editor é aberto no modo Editar tag.
Insira novos atributos, edite atributos existentes ou edite
o nome da tag.
Pressione Tab para avançar de um atributo para o próximo;
pressione Shift+Tab para voltar.
Nota
Por padrão, as alterações são aplicadas ao documento quando você pressiona Tab ou Shift+Tab.
Para fechar o Editor de tags rápidas e aplicar todas as alterações,
pressione Enter.
Para sair sem fazer nenhuma outra alteração, pressione Escape.
Encapsular a seleção atual com tags HTML
Selecione texto não formatado
ou um objeto no modo Design.
Nota
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.
Pressione Control+T (Windows) ou Command+T (Macintosh), ou
clique no botão Editor de tags rápidas no Inspetor de propriedades.
O Quick Tag Editor é aberto no modo Colocar tag ao redor.
Insira uma única tag de abertura, como strong,
e pressione Enter (Windows) ou Return (Macintosh).
A tag é inserida no início da seleção atual, e uma tag de fechamento correspondente é inserida no final.
Para sair sem fazer nenhuma alteração, pressione Escape.
Usar o menu de dicas no Editor de tags rápidas
O Editor de tags rápidas 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 desabilitar o menu de dicas ou ajustar o atraso antes do menu aparecer no Editor de tags rápidas.
Para ver um menu de dicas que lista atributos válidos para uma tag, pause brevemente ao editar um nome de atributo no Editor de tags rápidas.Um menu de dicas aparece, listando todos os atributos válidos para a tag que você está editando.
Da mesma forma, para ver um menu de dicas listando nomes de tags válidos, pause brevemente ao inserir ou editar um nome de tag no Editor de tags rápidas.
Nota
As preferências de Dicas de código do Editor de tags rápidas são controladas pelas preferências normais de Dicas de código. Para obter mais informações, consulte Definir preferências de Dicas de código.
Siga um destes procedimentos:
Comece a digitar um nome de tag ou atributo. A seleção no menu Dicas de código pula para o primeiro item que começa com as letras digitadas.
Use as teclas para cima ou para baixo a fim de selecionar um item.
Use a barra de rolagem para localizar um item.
Pressione Enter para inserir o item selecionado ou clique duas vezes
em um item para inseri-lo.
Para fechar o menu de dicas sem inserir um item, pressione
Escape ou continue digitando.
Desabilitar o menu de dicas ou alterar o atraso antes de aparecer
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.
Para desabilitar o menu de dicas, desmarque a opção Habilitar 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
Clique no documento.
As tags que se aplicam ao ponto de inserção aparecem no seletor de tags.
Clique com o botão direito (Windows) ou Control+clique (Macintosh) em uma
tag no seletor de tags.
Para editar uma tag, selecione Editar tag no menu. Faça suas alterações no Editor de Tags Rápido.Para obter mais informações, consulte Editar
código com o editor de tags rápido.
Para excluir uma tag, selecione Remover tag no menu.
Selecione um objeto correspondente a uma tag
Clique no documento.
As tags que se aplicam ao ponto de inserção aparecem no seletor de tags.
Clique em uma tag no seletor de tags.
O objeto representado pela tag é selecionado na página.
Nota
Use esta técnica para selecionar linhas individuais da tabela (tags tr) ou células (tags td).
Escrever e editar Scripts na visualização Design
É possível trabalhar com JavaScripts e VBScripts do lado do cliente nas visualizações Código e Design, das seguintes formas:
Escreva um script JavaScript ou VBScript para sua página sem sair da exibição Design.
Crie um link no documento para um arquivo de script externo sem sair da exibição Design.
Editar um script sem sair da exibição Design.
Antes de começar, selecione Exibir > Auxílios visuais > Elementos invisíveis para garantir que os marcadores de Script apareçam na página.
Gravação de um script do cliente
Posicione o ponto de inserção onde deseja o script.
Selecione Inserir > HTML > Script.
Selecione o script na janela de seleção do arquivo.
Nota
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
Selecione o marcador de script.
No Inspetor de propriedades, clique no botão Editar.
O script é exibido na caixa de diálogo Propriedades do script.
Se você vincular um arquivo de script externo, o arquivo abre na exibição Código, onde é possível fazer as edições.
Nota
Se houver código entre as tags de script, a caixa de diálogo Propriedades do Script abre mesmo se também houver um link para um arquivo de script externo.
Na caixa Idioma, especifique JavaScript ou VBScript como o idioma do script.
No menu pop-up Tipo, especifique o tipo de Script,
lado do cliente ou lado do servidor.
(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.
Edite o script e clique em OK.
Editar Scripts do lado do servidor ASP na visualização Design
Use o inspetor de propriedades de Script ASP para inspecionar e modificar Scripts do lado do servidor ASP na visualização Design.
Na exibição Design, selecione o ícone visual da tag de idioma do servidor.
No inspetor de propriedades de Script ASP, clique no botão Editar.
Edite o script ASP do servidor e clique em OK.
Editar scripts na página usando o Inspetor de propriedades
No inspetor de propriedades, selecione a
linguagem de Script no menu pop-up Idioma ou digite um nome de idioma
na caixa Idioma.
Nota
Se você estiver usando JavaScript e não tiver certeza da versão, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
No menu pop-up Tipo, especifique o tipo de Script,
lado do cliente ou lado do servidor.
(Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no ícone de pasta para selecionar o arquivo ou digite o caminho.
Clique em Editar para modificar o script.
Usar comportamentos JavaScript
Você pode anexar facilmente comportamentos JavaScript (lado do cliente) aos elementos da página usando a guia Comportamentos do inspetor de tags.Para obter mais informações, consulte Aplicação de comportamentos JavaScript integrados no Dreamweaver.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
