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.
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.
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.
Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualização de design.
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.
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.
-
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.
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.
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.
-
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.
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.
-
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.
Use o Inspetor de propriedades do script ASP para inspecionar e modificar scripts ASP do servidor na Visualização de design.
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.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.