5 Como trabalhar com codigos de pagina

Como trabalhar com códigos de página

Utilize as ferramentas de codificação avançadas do Dreamweaver para criar ou modificar páginas.

Esta seção contém os seguintes capítulos:

l Configuração do seu ambiente de codificação l Codificação no Dreamweaver l Otimização e depuração do código l Edição do código na visualização do projeto

Configuração do seu ambiente de codificação

É possível adaptar o ambiente de codificação no Macromedia Dreamweaver MX à sua forma de trabalho. Por exemplo: é possível alterar a forma de exibir códigos, configurar diferentes atalhos de teclado, ou importar e utilizar a biblioteca de tags favorita.

Este capítulo aborda os tópicos a seguir:

l Exibição do seu c ódigo l Definição de preferências de visualização l Definição de preferências de codificação l Personalização de atalhos de teclado l Definição de preferências de codificação l Definição de preferências do Validador l Gerenciamento de bibliotecas de tags l Importação de tags personalizadas para o Dreamweaver l Utilização de um editor de HTML externo com o Dreamweaver

Exibição do seu c ódigo

É possível exibir o código-fonte do documento atual de várias maneiras: é possível exibi-lo na janela do documento ativando a visualização do código, dividir a janela do documento para exibir a página e o código associado, ou trabalhar no inspetor de c ódigo, uma janela de codificação separada.

Nota: Visualização do código e inspetor de código compartilham a mesma funcionalidade.

Página 1 de 70Como trabalhar com códigos de página

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

Esta seção contém instruções para alterar a forma de exibição de código.

Para exibir o código na janela do documento:

Escolha Exibir > código.

Para exibir o código em uma janela separada:

Escolha Janela > Outras > Inspetor de código.

Para codificar e editar visualmente uma página na janela do documento ao mesmo tempo:

1. Escolha Exibir > código e projeto.

O código é exibido no painel superior e a página, no painel inferior.

2. Para exibir a página na parte superior, escolher Exibir > Visualização do projeto no alto. 3. Para ajustar o tamanho dos painéis na janela do documento, arraste a barra de divisão

até a posição desejada.

A barra de divis ão está localizada entre os dois painéis.

A visualização do código é atualizada automaticamente quando são feitas alterações na visualização do projeto. Mas, após fazer alterações na visualização do código, é necessário atualizar manualmente o documento na visualização do projeto. Para fazer isso, clique na visualização do projeto e pressionar F5.

Definição de preferências de visualização

É possível definir a quebra automática de linha, exibir números de linha para o código, realçar o código HTML inválido, definir a sinalização da sintaxe por cores para elementos de código e definir o recuo no menu Exibir > Opções de visualização do código.

Para definir opções para a visualização do código e para o inspetor de código:

1. Exibir pelo menos uma página na visualização do código ou no inspetor de código. 2. Escolha Exibir > Opções de visualização do código.

Um menu pop-up é exibido com uma marca de seleção ao lado de cada opção já definida.

3. Selecione qualquer uma destas opções do menu: ¡ A opção Quebra automática de linha quebra automaticamente o código para

permitir exibi-lo sem rolar horizontalmente. Esta opção não insere quebras de linha, apena facilita a visualização do código.

¡ A opção Números de linha exibe números de linha ao lado do código. ¡ A opção Realçar o HTML incorreto faz com que o Dreamweaver realce em

amarelo qualquer HTML inválido não suportado por navegadores. Quando uma tag inválida for selecionada, o inspetor de propriedades exibirá informações sobre como corrigir o erro.



¡ A opção Sinalização da sintaxe por cores ativa e desativa a codificação por cores. Para alterar o esquema de cores, veja Definição de preferências de cores de código.

¡ A opção Recuo automático faz o recuo automático de código quando o usuário pressiona a tecla Enter enquanto grava o código. Para alterar o espaçamento do recuo ou as tags que geram recuo automático, veja Definição de preferências de formatação de código.

Caso uma opção já marcada tenha sido selecionada, ela será desativada. Caso contrário, a opção será definida.

Definição de preferências de codificação

É possível definir as preferências de codificação a seguir no Dreamweaver:

l As preferências de formatação de código determinam as opções comuns de formatação de código, como tamanho e recuo da linha. Veja Definição de preferências de formatação de código. Também é possível aplicar novas preferências de formatação a documentos HTML existentes. Veja Aplicação de novas preferências de formatação a documentos existentes.

l As preferências Dicas de código permitem ativar ou desativar dicas de código e personalizar as dicas exibidas. As dicas de c ódigo oferecem ajuda em linha enquanto o usuário digita na visualização do código. Por exemplo: se for digitado um colchete da tag de abertura (<), será exibido um menu listando as possíveis tags. Em vez de digitar o restante da tag manualmente, é possível selecionar uma das dicas listadas no menu e pressionar Enter para digitá-la automaticamente. Veja Definição de preferências de dicas de código.

l As preferências de regravação de código determinam quais alterações, se houver, o Dreamweaver fará no código quando um documento HTML ou de script for aberto. Veja Definição de preferências de regravação de código.

l Preferências de codificação por cores permitem definir formatação especial e sinalização da sintaxe por cores para elementos de código como tags, comentários e scripts. Veja Definição de preferências de cores de código.

Para definir preferências avançadas, utilizar o Editor de bibliotecas de tags (veja Gerenciamento de bibliotecas de tags).

Definição de preferências de formatação de código

É possível alterar a aparência do código especificando preferências de formatação como recuo, tamanho de linha, a caixa da tag e nomes de atributos.

Observar que todas as preferências, exceto “Ignorar a caixa de”, afetam apenas os novos documentos e inclusões feitos nos documentos existentes. Ou seja, quando um documento HTML criado anteriormente for aberto, estas opções de formatação não serão aplicadas a ele;

para reformatar documentos HTML existentes, utilizar o comando Aplicar a formatação de origem. Para obter mais informações, veja Aplicação de novas preferências de formatação a documentos existentes.

Para definir preferências de formatação de código:

1. Selecione Editar > Preferências > Formato do código.

A caixa de diálogo Formato do código é exibida.

2. Ajuste qualquer uma destas definições da caixa de diálogo:

A opção Utilizar especifica se os recuos serão feitos com espaços ou tabulações.

A opção Tamanho do recuo determina o tamanho dos recuos. O tamanho será medido em espaços se a opção Utilizar estiver definida para espaços, ou em tabulações se essa opção estiver definida para tabula ções.

A opção Tamanho da tabulação determina o tamanho das tabulações (medido em espaços de caracteres).

Quebra automática de linha adiciona uma quebra de linha incondicional quando uma linha atinge a largura de coluna especificada (o Dreamweaver insere quebras de linha incondicionais apenas nos locais onde estas não alteram a aparência do documento nos navegadores. Por isso, algumas linhas podem ser mantidas mais longas que a especificação na opção Quebra automática de linha). De modo contrário, a opção Quebra automática de linha, na visualização do código, adiciona uma quebra “condicional” às linhas que ultrapassam a largura da janela.

A opção Tipo de quebra de linha especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos caracteres de quebra de linha garante que o código-fonte HTML será exibido corretamente no servidor remoto (para o FTP, essa definição se aplica apenas ao modo de transferência binária; o modo de transferência ASCII do Dreamweaver ignora essa definição. Quando é efetuado o download dos arquivos no modo ASCII, o Dreamweaver define as quebras de linha com base no sistema operacional do computador; se for efetuado upload dos arquivos no modo ASCII, todas as quebras de linha serão definidas como CR LF). Essa definição também é útil quando se está trabalhando com um editor de texto externo que reconhece apenas determinados tipos de quebras de linha. Por exemplo: utilizar CR LF se o Bloco de Notas for o editor externo.

As opções Caixa padrão da tag e Caixa padrão do atributo controlam a utilização de maiúsculas e minúsculas nos nomes de tags e atributos. Estas opções são aplicadas a tags e atributos inseridos ou editados na janela do documento, mas não às tags e aos atributos digitados diretamente na visualização do código, ou àqueles em um documento quando este for aberto (a menos que uma ou ambas as opções em Ignorar a caixa de sejam selecionadas).

A opção Ignorar a caixa de: Tags e atributos especifica se as opções de caixa definidas serão implementadas sempre, inclusive quando for aberto um documento HTML existente. Quando uma destas opções for selecionada, todas as tags ou atributos nos documentos abertos serão imediatamente convertidos na caixa especificada, bem como todas as tags ou atributos abertos daqui em diante (até que seja cancelada novamente esta opção). As tags ou atributos digitados na visualização do código e no Quick Tag Editor também serão convertidos na caixa especificada, da mesma forma que as tags ou os atributos inseridos utilizando a barra Inserir. Por exemplo: se desejar que nomes de tags sejam sempre convertidos em minúsculas, especificar minúsculas em Caixa para tags e, em seguida, selecione a opção Ignorar a caixa de: Tags. Em seguida, quando for aberto



um documento contendo nomes de tags em maiúsculas, o Dreamweaver os converterá em minúsculas.

A opção Centralização especifica se os elementos devem ser centralizados utilizando div align="center" ou center. Ambos fazem parte da especificação HTML 4.0 Transitional, mas center conta com suporte de um número maior de navegadores.

Aplicação de novas preferências de formatação a documentos existentes

As opções de formatação de código especificadas em preferências de formato do código só se aplicam a quaisquer documentos novos criados com o Dreamweaver. Para aplicar novas preferências de formatação a documentos existentes, utilizar o comando Aplicar a formatação de origem.

Para aplicar novas preferências de formatação a um documento existente:

1. Abra o documento no Dreamweaver. 2. Escolha Comandos > Aplicar a formatação de origem.

Definição de preferências de dicas de código

A opção Dicas de código permite inserir rapidamente nomes de tags, atributos e valores à medida que códigos são digitados. Para definir preferências, escolher Editar > Preferências > Dicas de código.

Dica: Mesmo se a opção Dicas de código estiver desativada, será possível exibir uma dica pop-up na visualização do código ou no inspetor de código pressionando a tecla Control-barra de espaço no Windows.

Para definir preferências de dicas de código:

1. Selecione Editar > Preferências > Dicas de código.

A caixa de diálogo Dicas de código é exibida.


A opção Ativar o preenchimento automático da tagpermite o preenchimento automático da tag.

A opção Ativar as dicas de código ativa dicas de código enquanto o código é digitado na visualização do código. Arrastar o controle deslizante de atraso para definir o tempo em segundos antes de o programa exibir dicas apropriadas.



A opção Menus permite definir o tipo exato de dicas de código a ser exibido durante a digitação. É possível utilizar todos ou alguns menus.

Definição de preferências de regravação de código

A opção Preferências de regravação de código determina a ação do Dreamweaver durante a abertura de documentos. Essas preferências não provocam qualquer efeito sobre a edição de HTML ou scripts na visualização do código.

Se as opções de regravação forem desativadas, o Dreamweaver exibirá itens de markup inválidos na janela do documento para o HTML que seria regravado.

Se um documento HTML for importado do Microsoft Word, é possível utilizar o comando Limpar o HTML do Word para remover os c ódigos HTML desnecessários. Para obter mais informações, veja Como limpar o HTML do Microsoft Word.

Para definir preferências de regravação de código:

1. Selecione Editar > Preferências > Regravação de código.

A caixa de diálogo Regravação de código é exibida.


A opção Ajustar as tags abertas e aninhadas incorretamente regrava as tags sobrepostas. Por exemplo: text é regravado como text. Esta opção também insere colchetes e aspas finais quando eles estão ausentes.

A opção Ao colar, renomear os itens de formulário garante a não existência de nomes duplicados para objetos de formulário.

A opção Remover as tags adicionais de finalização exclui as tags de finalização sem tags de abertura correspondentes.

A opção Advertir quando resolver ou remover tagsexibe um resumo de HTMLs tecnicamente inválidos que o Dreamweaver tentou corrigir. O resumo indica o local do problema (sob a forma de números de linha e coluna), para que seja localizada a corre ção e garantido o seu processamento adequado.

A opção Nunca regravar o código: Em Arquivos com extensões permite evitar que o Dreamweaver regrave o c ódigo em arquivos com extensões de nome de arquivo especificadas. Esta opção é especialmente útil para arquivos contendo tags de outros fabricantes.

A opção Codificar caracteres especiais em URLs utilizando % garante que a URL contém apenas caracteres válidos.

A opção Codificar <, >, & e " em valores de atributo utilizando & garante que a URL contém apenas caracteres válidos.

Definição de preferências de cores de código

Sintaxe por cores ajuda a identificar blocos de código em documentos grandes. É possível definir preferências de sintaxe por cores para elementos de código como comentários e scripts, e para tags em geral. Para definir preferências de cores para tags específicas, editar a definição de tag no Editor de bibliotecas de tags. Para obter mais informações, veja Edição de bibliotecas, tags e atributos.

Para definir preferências de codificação por cores:

1. Escolha Editar > Preferências > Codificação por cores. 2. Escolha um tipo de documento e clique em Editar o esquema de cores.

A caixa de diálogo Editar o esquema de cores é exibida.

3. Selecione um item e definir a cor de texto, a cor de fundo e o estilo (negrito, itálico ou sublinhado).

É possível visualizar o esquema de cores no painel Visualizar.

4. Ao concluir, clique em OK.

Personalização de atalhos de teclado

É possível utilizar os atalhos de teclado favoritos no Dreamweaver. Se o usuário estiver acostumado a utilizar atalhos de teclado (por exemplo: Control-Enter para adicionar uma quebra de linha, Control-G para ir até uma posição específica no código ou Shift+F6 para validar um arquivo), ele poderá adicioná-los ao Dreamweaver usando o Editor de atalhos de teclado. Para obter mais informações, veja Utilização do editor de atalhos de teclado.

Abertura de arquivos na visualização do código como padrão

É possível configurar o Dreamweaver para abrir automaticamente arquivos com determinadas extensões na visualização do código em vez da visualização do projeto.

Quando o usuário abre um tipo de arquivo que não costuma conter HTMLs (por exemplo: um arquivo JavaScript), o arquivo é aberto na visualização do código (ou no inspetor de código) e



não na visualização do projeto. É possível editar o arquivo e salvá-lo como um arquivo HTML ou não-HTML.

Para definir a visualização padrão de arquivos não-HTML:

1. Escolha Editar > Preferências > Tipos de arquivo/editores. 2. Na caixa de texto Abra na visualização do código, digite as extensões de nome de arquivo

a serem abertas automaticamente nessa visualização. Coloque um espaço entre cada tipo de arquivo.

As extensões de arquivo padrão listadas são .js, .txt e .asa. É possível adicionar quantas o usuário quiser.

Tópicos relacionados

Utilização de editores externos

Definição de preferências do Validador

É possível utilizar o Validador no Dreamweaver para localizar rapidamente erros de tag ou de sintaxe no código (veja Validação das tags). É possível especificar os idiomas baseados em tag nos quais o Validador deve fazer a verificação, os problemas específicos a serem verificados pelo Validador e os tipos de erros a serem relatados pelo Validador.

Para definir preferências para o Validador:

1. Escolha Editar > Preferências > Validador. 2. Selecione as bibliotecas de tags a serem validadas.

Algumas bibliotecas de tags são construídas sobre outras. Por exemplo: se HTML 4.0 for selecionado, HTML 3.2 e HTML 2.0 serão automaticamente selecionados, pois a definição de HTML 4.0 fica incompleta sem eles.

Nota: Se CFML e HTML forem validados em um único documento, o Validador não poderá avaliar o sinal de número (#). Isto ocorre pois, no CFML, # é um erro e ## está correto; enquanto no HTML, ## é um erro e # está correto.

3. Clique em Opções.

A caixa de diálogo Opções do Validator é exibida.

4. Selecione a opção Exibir para cada tipo de erro a ser incluído pelo relatório do Validador. 5. Selecione itens a serem verificados pelo Validador. 6. Clique em OK para fechar a caixa de diálogo Opções do Validator e, em seguida, clique

em OK para fechar a caixa de diálogo Preferências.



Gerenciamento de bibliotecas de tags

É possível utilizar o Editor de bibliotecas de tags para gerenciar as bibliotecas de tags no Dreamweaver. O Editor de bibliotecas de tags permite adicionar e excluir bibliotecas de tags, tags e atributos, definir propriedades para uma biblioteca de tags e editar tags e atributos.

Para abrir o Editor de bibliotecas de tags, escolher Editar > bibliotecas de tags. O Editor de bibliotecas de tags é exibido conforme descrito a seguir (o conteúdo desta caixa de di álogo é alterado de acordo com a tag selecionada).

Esta seção contém os tópicos a seguir:

l Adição de bibliotecas, tags e atributos l Edição de bibliotecas, tags e atributos l Exclusão de bibliotecas, tags e atributos

Veja também Importação de tags personalizadas para o Dreamweaver.

Adição de bibliotecas, tags e atributos

É possível utilizar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos às bibliotecas de tags no Dreamweaver.

Nota: Para importar uma tag, veja Importação de tags personalizadas para o Dreamweaver.

Para adicionar uma biblioteca de tags:



1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e escolha Nova biblioteca de tags.

A caixa de diálogo Nova biblioteca de tags é exibida.

2. Na caixa de texto Nome da biblioteca, digite um nome (por exemplo: Tags PHP). 3. Clique em OK.

Para adicionar uma ou mais tags em uma biblioteca de tags:

1. No Editor de bibliotecas de tags (Editar > bibliotecas de tags), clique no botão de adição (+) e escolha Novas tags.

A caixa de diálogo Novas tags é exibida.

2. No menu pop-up Biblioteca de tags, escolha uma biblioteca de tags (por exemplo: Tags CFML).

Por padrão, a biblioteca de tags selecionada no editor de tags é exibida na caixa Biblioteca de tags.

3. Na caixa de texto Nomes das tags, digite um nome para a tag.

Se estiver adicionando mais de uma tag, digite os nomes das tags, separados por uma vírgula e um espaço (por exemplo: cfgraph, cfgraphdata).

4. Para adicionar cada tag com uma tag de finalização complementar (</...>), selecione Com tags de finalização complementares.

5. Clique em OK.

Para adicionar um ou mais atributos em uma tag:

1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e escolha Novos atributos.

A caixa de diálogo Novos atributos será exibida.

2. No menu pop-up Biblioteca de tags, escolha uma biblioteca de tags.

Por padrão, a biblioteca de tags selecionada no editor de tags é exibida na caixa de texto Biblioteca de tags.

3. No menu pop-up Tag, escolha uma tag (por exemplo: cfgraph).

Por padrão, a tag selecionada no editor de tags é exibida na caixa Tag.

4. Na caixa de texto Nomes dos atributos, digite um nome para o atributo (por exemplo: type).

Para adicionar mais de um atributo, digite os nomes dos atributos, separados por uma vírgula e um espaço.

5. Clique em OK.

Edição de bibliotecas, tags e atributos

Exclusão de bibliotecas, tags e atributos


É possível utilizar o Editor de bibliotecas de tags para definir propriedades para uma biblioteca de tags e editar tags e atributos em uma biblioteca, seja para atributos, valores ou formato (para facilitar a identificação no código).

Para definir as propriedades de uma biblioteca de tags:

1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags no menu pop-up Tags.

2. Na caixa Utilizado em, selecione todos os tipos de documento que devem utilizar a biblioteca de tags.

As tags da biblioteca de tags estão disponíveis apenas nos tipos de documentos selecionados aqui.

3. Se as tags da biblioteca de tags precisarem de um prefixo, digite o prefixo na caixa de texto Prefixo da tag.

4. Ao concluir as alterações no Editor de bibliotecas de tags, clique em OK.

Para editar uma tag em uma biblioteca de tags:

1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), abra uma biblioteca de tags no menu pop-up Tags e selecione uma tag.

2. Defina qualquer uma destas opções de Formato da tag: ¡ A opção Quebras de linha especifica onde o Dreamweaver insere quebras de linha

para uma tag. ¡ A opção Conteúdo especifica como o Dreamweaver insere o conteúdo de uma tag,

ou seja, se ele aplica quebra de linha e regras de formatação ao conteúdo. ¡ A opção Caixa especifica a caixa para determinada tag. Escolha entre Padrão,

Minúsculas, Maiúsculas, ou Maiúsculas e minúsculas. Se for escolhida a opção Maiúsculas e minúsculas, a caixa de diálogo Nome da tag em maiúsc./minúsc. será exibida. Digite como o Dreamweaver deve inserir a tag (por exemplo: getProperty) e clique em OK.

¡ A opção Definir os padrões define a caixa padrão para todas as tags. Na caixa de diálogo Caixa padrão da tag que é exibida, escolha <MAIÚSCULAS> ou <minúsculas> e clique em OK.

Dica: Talvez seja necessário definir a caixa padrão como minúsculas por questões de compatibilidade com os padrões XML e XHTML.

Para editar um atributo para uma tag:

1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), abra uma biblioteca de

tags no menu pop-up Tags, abra uma tag e selecione um atributo de tag. 2. No menu pop-up Caixa do atributo, escolha Padrão, Minúsculas, Maiúsculas, ou

Maiúsculas e minúsculas.

Se for escolhido Maiúsculas e minúsculas, na caixa de diálogo Nome do atributo em maiúsc./minúsc., digite como o Dreamweaver deve inserir o atributo (por exemplo: onClick). Clique em OK.

Clique no link Definir padrão para definir a caixa padrão para todos os atributos.

3. No menu pop-up Tipo de atributo, selecione o tipo de atributo.

Ao escolher Enumerados, digite cada valor permitido para o atributo na caixa de texto Valores. Separe cada valor por uma vírgula e sem espaço. Por exemplo: para o tipo de atributo da tag cfgraph, digite bar,horizontalBar,line,pie .






É possível utilizar o Editor de bibliotecas de tags para excluir bibliotecas de tags, tags e atributos.

Para excluir uma biblioteca, uma tag ou um atributo:

1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um atributo no menu pop-up Tags.

2. Clique no botão com o sinal de subtração (-). 3. Se for solicitada a confirmação da exclusão, clique em OK.

O item é removido do menu pop-up Tags.

4. Para não excluir o item permanentemente, clique em Cancelar.

O Editor de bibliotecas de tags é fechado sem excluir o item e sem salvar quaisquer alterações feitas no Editor de bibliotecas de tags desde a sua abertura.

5. Para excluir permanentemente o item, clique em OK.







Importação de tags personalizadas para o Dreamweaver

É possível importar tags personalizadas para o Dreamweaver de forma que elas se tornem parte integral do ambiente de autorização. Por exemplo: quando o usuário começa a digitar uma tag personalizada na visualização do código, o recurso Dicas de código lista automaticamente os atributos de tag e permite escolher um dos atributos.


l Importação de tags de arquivos XML l Importação de tags ASP.NET personalizadas l Importação de tags JSP de um arquivo l Importação de tags JSP de um servidor (web.xml) l Importação de tags JRun

Importação de tags de arquivos XML

É possível importar tags de um arquivo DTD (Definição de tipo de documento, Document Type Definition) XML ou de um esquema.

Para importar tags de um DTD XML ou de um esquema:

1. Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags). 2. Clique no botão de adição (+) e escolha Esquema DTD > Importar arquivo XML, DTD ou

Schema. 3. Digite o arquivo ou a URL do arquivo DTD ou Schema. 4. Digite o prefixo a ser utilizado com as tags.

O prefixo é utilizado para identificar uma tag em uma página como parte de determinada biblioteca de tags.

5. Clique em OK.

Importação de tags ASP.NET personalizadas



É possível importar tags ASP.NET personalizadas para o Dreamweaver.

Antes de iniciar, certifique-se de que a tag personalizada esteja instalada no servidor de teste definido na caixa de diálogo Defini ção de sites (veja Como especificar onde as páginas dinâmicas podem ser processadas). Tags compiladas (arquivos .dll) devem ser colocadas na pasta de compartimentos na raiz do site. Tags não-compiladas (arquivos .ascx) podem residir em qualquer diretório ou subdiretório virtual no servidor. Para obter mais informações, veja a documentação do Microsoft ASP.NET.

Para importar tags personalizadas ASP.NET para o Dreamweaver:

1. Abra uma página ASP.NET no Dreamweaver. 2. Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags). 3. Clique no botão de adição (+) e escolha uma das opções a seguir:

¡ Para importar todas as tags personalizadas ASP.NET do servidor de aplicativos, escolha ASP.NET > Importar todas as tags ASP.NET personalizadas.

¡ Para importar apenas determinadas tags personalizadas do servidor de aplicativos, escolha ASP.NET > Importar as tags ASP.NET personalizadas selecionadas.

A caixa de diálogo Importar as tags ASP NET personalizadas selecionadas é exibida, listando todas as tags personalizadas ASP.NET instaladas no servidor de aplicativos. Mantenha a tecla Control pressionada e clique em tags da lista e, em seguida, em OK.

Importação de tags JSP de um arquivo

É possível importar uma biblioteca de tags JSP para o Dreamweaver de diversos tipos de arquivo.

Para importar uma biblioteca de tags JSP para o Dreamweaver:

1. Abra uma página JSP no Dreamweaver. 2. Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags). 3. Clique no botão de adição (+) e escolher JSP > Importar do arquivo (*.tld, *.jar, *.zip). 4. Especifique o arquivo .tld, .jar ou .zip que contém a biblioteca de tags. 5. Digite uma URI para identificar a biblioteca de tags.

A URI (Uniform Resource Identifier) consiste normalmente na URL da organização que mantém a biblioteca de tags. A URL não é utilizada para acessar a organização, mas para identificar exclusivamente a biblioteca de tags.

6. Digite o prefixo a ser utilizado com as tags.


7. Clique em OK.



Importação de tags JSP de um servidor (web.xml)

É possível importar tags JSP de um servidor.

Para importar tags JSP de um servidor:

1. Abra uma página JSP no Dreamweaver. 2. Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags). 3. Clique no botão de adição (+) e escolher JSP > Importar do servidor (web.xml).

A caixa de diálogo Importar do servidor é exibida.

4. Selecione uma biblioteca de tags. 5. Digite uma URI para identificar a biblioteca de tags.

A URI (Uniform Resource Identifier) consiste normalmente na URL da organização que mantém a biblioteca de tags. A URL não é utilizada para acessar a organização, mas para identificar exclusivamente a biblioteca de tags.

6. Clique em OK.

Importação de tags JRun

Caso seja utilizado o Macromedia JRun, será possível importar tags JRun para o Dreamweaver.

Para importar tags JRun para o Dreamweaver:

1. Abra uma página JSP no Dreamweaver. 2. Abra o Editor de bibliotecas de tags (Editar > bibliotecas de tags). 3. No Editor de bibliotecas de tags, clique no botão de adição (+) e escolher JSP > Importar

as tags do servidor JRUN a partir da pasta. 4. Especifique uma pasta contendo as tags JRun. 5. Digite uma URI para identificar a biblioteca de tags. 6. Digite o prefixo a ser utilizado com as tags.


7. Ao concluir as alterações, clique em OK para fechar o Editor de bibliotecas de tags.



Utilização de um editor de HTML externo com o Dreamweaver

É possível iniciar um editor de HTML ou de texto externo, a partir do Dreamweaver, para editar o código-fonte para o documento atual e, em seguida, voltar ao Dreamweaver a fim de continuar a edição graficamente. O Dreamweaver detecta quaisquer alterações salvas no documento externamente e lhe avisa para recarregá-lo ao retornar.

É possível utilizar editores de HTML integrados a seguir: Macromedia HomeSite. Tamb ém é possível utilizar outro editor de texto, como Bloco de Notas, SimpleText, vi, emacs e TextPad.

Utilização de um editor de HTML integrado

Ao instalar o Dreamweaver, é possível instalar o HomeSite no Windows ou uma versão de teste do BBEdit no Macintosh. O Dreamweaver está totalmente integrado com esses dois produtos.

Graças a essa integração, é possível editar um documento no Dreamweaver e no HomeSite/BBEdit, alternando de um aplicativo para outro. O documento é mantido em sincronização automática nos dois aplicativos. Além disso, os dois programas controlam a seleção atual; por exemplo: se o usu ário selecionar um texto no Dreamweaver e alternar para BBEdit, o mesmo elemento será selecionado em BBEdit.

Utilização do HomeSite (apenas no Windows)

Não é necessário ativar a integração para o HomeSite, pois ele é integrado automaticamente quando o programa é instalado.

Para utilizar o HomeSite:

1. Escolha Editar > Editar com o HomeSite. 2. Edite o documento no HomeSite e salve as alterações. 3. Para retornar ao Dreamweaver, clique em Dreamweaver na barra de ferramentas Editor.

Utilização do BBEdit (apenas no Macintosh)

É possível desativar a integração com o BBEdit se for mais conveniente trabalhar com uma versão mais antiga do BBEdit ou com um outro editor de texto HTML. As seleções não serão controladas se a integra ção com o BBEdit estiver desativada.



Para utilizar o BBEdit com o Dreamweaver:

1. Escolha Editar > Editar com o BBEdit. 2. Edite o documento no BBEdit. 3. Clique no botão Dreamweaver, na paleta de ferramentas de HTML, no BBEdit, para

retornar ao Dreamweaver.

Para desativar a integração com o BBEdit:

1. Escolha Editar > Preferências e selecionar Tipos de arquivos/editores. 2. Cancele a seleção de Ativar a integração com o BBEdit e clique em OK.

Utilização de editores externos

É possível abrir outros editores externos a partir do Dreamweaver, mas o documento não é mantido em sincronização nos dois aplicativos, como ocorre com o HomeSite ou o BBEdit. Ao concluir as alterações no editor externo, é necessário atualizar manualmente o documento no Dreamweaver.

Para escolher um editor de HTML externo:

1. Escolha Editar > Preferências e selecionar Tipos de arquivos/editores. 2. (Apenas no Macintosh) Cancele a sele ção da opção Ativar a integração com o BBEdit para

poder utilizar um editor de HTML que não seja o BBEdit. Para utilizar o BBEdit, manter a opção Ativar a integração com o BBEdit selecionada e ignorar as etapas restantes.

3. Clique no botão Navegar ao lado da caixa de texto Editor de código externo e escolha um editor de texto.

4. Na opção Recarregar os arquivos modificados, especifique o que o Dreamweaver deverá fazer ao detectar alterações externas em um documento aberto no Dreamweaver.

5. Na opção Salvar na iniciação, especificar se o Dreamweaver deve sempre salvar o documento antes de iniciar o editor, nunca salvar o documento ou lhe perguntar se salvará ou não o documento quando o editor de texto externo for iniciado.

Para iniciar um editor de HTML externo:

Escolha Editar > Editar com [nome do editor].


Abertura de arquivos na visualização do código como padrão

Definição das preferências do editor de imagens externo

Como iniciar um editor externo para arquivos de mídia



Referência

Esta seção contém informações sobre a caixa de diálogo apresentada neste capítulo.

Definição de opções da caixa de diálogo Editor de bibliotecas de tags

O objetivo desta caixa de diálogo é adicionar, editar e excluir bibliotecas de tags, tags e atributos, além de importar bibliotecas de tags.

Tarefas




Importação de tags personalizadas para o Dreamweaver

Codificação no Dreamweaver

O Macromedia Dreamweaver MX oferece um ambiente de codificação completo projetado para qualquer tipo de operação de desenvolvimento para a Web, desde a elaboração de páginas HTML simples à criação, aos testes e à implementação de aplicativos para a Web complexos.

Este capítulo contém os tópicos a seguir:

l Sobre o ambiente de codificação do Dreamweaver l Como gravar e editar o código l Como copiar e colar códigos l Como procurar e substituir tags e atributos l Acesso a referências de linguagem

Para obter informações sobre como migrar do Macromedia HomeSite para o Dreamweaver, visitar a Central de suporte.


Configuração do seu ambiente de codificação

Otimização e depuração do código

Edição do código na visualização do projeto



Sobre o ambiente de codificação do Dreamweaver

O ambiente de codificação do Dreamweaver oferece pleno acesso ao código das páginas. Esta seção contém os tópicos a seguir:

l Tipos de arquivos que contam com suporte l Como o Dreamweaver respeita os códigos l Sobre o Roundtrip HTML l Sobre o código inserido por comportamentos de servidor

Tópico relacionado

Exibição do seu c ódigo

Tipos de arquivos que contam com suporte

Para a codificação do cliente, é possível trabalhar com diversos tipos de arquivos no Dreamweaver, inclusive HTML, XML, CSS (Folhas de estilos em cascata, Cascading Style Sheets), JavaScript, VBScript, WML (Linguagem de marcação sem fio, Wireless Markup Language), EDML (Linguagem de marcação de dados de extensão, Extension Data Markup Language), modelo do Dreamweaver (.dwt) e arquivos de texto.

Para codificação do servidor, é possível trabalhar com os tipos de arquivos a seguir: ColdFusion, componente de ColdFusion (.cfc), ASP.NET Visual Basic, ASP.NET C#, ASP VBScript, ASP JavaScript, JSP e PHP. Também é possível criar arquivos independentes em C#, Visual Basic e Java.


Como o Dreamweaver respeita os códigos

Sobre o Roundtrip HTML


O Dreamweaver gera um código válido e limpo nos ambientes visual e de codificação. Ele também respeita o código criado pelo usuário manualmente ou gerado por um outro editor. O



Dreamweaver nunca regrava códigos do usuário. Por exemplo: o Dreamweaver não altera os espaços em branco nem altera o uso de caixa alta ou baixa dos atributos. Se for escolhida a opção Exibir > Opções de visualização do código > Realçar o HTML incorreto, o Dreamweaver exibirá os erros realçados em amarelo. Como opção, o usuário pode limpar o código de acordo com critérios por ele especificados. Também é possível personalizar a maneira como o Dreamweaver formata o código. Para obter mais informações, veja Definição de preferências de codificação.



Sobre o código inserido por comportamentos de servidor


O Roundtrip HTML permite movimentar os documentos entre um editor de HTML baseado em texto e o Dreamweaver com pouco ou nenhum impacto sobre o conteúdo e a estrutura do código-fonte HTML original do documento. Seus principais recursos incluem:

l Por padrão, ao voltar para o Dreamweaver estando em um editor externo ou ao abrir um documento HTML que não foi criado com o Dreamweaver, este regrava as tags sobrepostas, adiciona as tags de finalização necessárias e remove as tags adicionais de finalização. No entanto, o Dreamweaver não faz nenhuma outra alteração no código, mesmo que ele seja inválido, desde que os navegadores possam interpretar corretamente o código inválido.

É possível desativar a regravação do código (veja Definição de preferências de regravação de código).

l O Dreamweaver não altera as tags que não reconhece – inclusive tags XML – porque não dispõe de um crit ério para avaliá-las. Se uma tag não-reconhecida se sobrepõe a uma outra tag (por exemplo: <MyNewTag>text</MyNewTag>), o Dreamweaver marca essa tag como um erro, mas não regrava o código.

l Opcionalmente, é possível definir o Dreamweaver para que realce em amarelo o código HTML inválido que não conta com suporte dos navegadores. Quando é selecionada uma seção realçada, o inspetor de propriedades exibe informações sobre como corrigir o erro.

l O Dreamweaver permite iniciar um editor de texto de outros fabricantes para editar o documento atual. Para obter mais informações, veja Utilização de um editor de HTML externo com o Dreamweaver.

Sobre o código inserido por comportamentos de servidor

Ao desenvolver uma página dinâmica e escolher um comportamento de servidor no painel Comportamentos de servidor, o Dreamweaver insere um ou mais blocos de código (ou “participantes”) na página para ativar o comportamento de servidor.

Se o código for alterado em um participante, não será mais possível utilizar uma ferramenta visual para editar ou excluir o comportamento de servidor. O Dreamweaver procura padrões específicos no código da página para detectar comportamentos de servidor e exibi-los no painel Comportamentos de servidor. Se o código de um participante for alterado de alguma forma, inclusive se for alterado o espaçamento entre palavras e as quebras de linha, o Dreamweaver não mais conseguir á detectar o comportamento de servidor nem exibi -lo no painel Comportamentos de servidor. No entanto, o comportamento de servidor continuará existindo na página e poderá ser editado no ambiente de codificação do Dreamweaver.



Otimização da área de trabalho para desenvolvimento visual

Como gravar e editar o código

O Dreamweaver oferece diversos recursos que ajudam a gravar e editar o código de modo eficiente. Esta seção apresenta estes recursos, como se segue:

l Como utilizar as Dicas de código l Como trabalhar com trechos de código l Como inserir c ódigo rapidamente utilizando a barra Inserir l Como inserir tags com o Seletor de tags l Edição de tags utilizando editores de tags l Edição de tags utilizando o inspetor de tags l Como recuar blocos de código l Como copiar e colar códigos l Como inserir comentários de HTML l Como listar funções JavaScript e VBScript na página

Como utilizar as Dicas de código

As Dicas de código permitem inserir e editar código conforme ele é digitado na visualização do código (ou no inspetor de código). Ao digitar determinados caracteres, é exibida uma lista sugerindo opções para concluir a entrada. É possível utilizar este recurso para inserir ou editar código ou apenas para examinar os atributos disponíveis para uma tag, os parâmetros disponíveis para uma função ou os métodos disponíveis para um objeto.



É possível definir por quanto tempo as Dicas de código devem esperar para exibir uma lista de opções, especificar as tags a serem incluídas na lista de tags ou desativar totalmente as Dicas de código. Para obter mais informações, veja Definição de preferências de dicas de código.

Para inserir uma tag utilizando as Dicas de código:

1. Digite um parêntese inicial ( <) para exibir uma lista de tags. 2. Pressione a tecla Escape para fechar a lista. 3. Role a lista para baixo e clique duas vezes em uma tag para inseri-la. 4. Se a tag oferecer suporte a atributos, pressionar a barra de espaço para exibir uma lista

de atributos permitidos para a tag. Selecione um atributo e pressionar a tecla Enter. 5. Digite o valor para o atributo ou, se o atributo aceitar somente determinados valores,

selecionar um valor na lista de valores permitidos para o atributo. 6. Para cada atributo a ser adicionado à tag, repetir as duas etapas anteriores, certificando-

se de não pressionar a barra de espaço entre um valor e as aspas finais ("). 7. Digite o parêntese final para a tag (>) após o último par atributo-valor.

Para editar uma tag, seguir um dos procedimentos abaixo:

l Para adicionar um atributo, colocar o ponto de inserção à esquerda do parêntese final de uma tag (>) e pressionar a barra de espaço para exibir uma lista de atributos permitidos para a tag. Inserir o atributo e seu valor conforme descrito anteriormente.

l Para alterar um atributo, excluí-lo e adicionar um atributo, conforme descrito anteriormente.

l Para alterar um valor, excluí-lo e adicionar um valor, conforme descrito anteriormente.

Para inserir ou editar código referente a uma função ou objeto:

1. Escolha Editar > Preferências > Dicas de c ódigo ou Dreamweaver > Preferências > Dicas de código (no Mac OS X) e definir as preferências de exibição sem atraso.

2. Na visualização do código (ou no inspetor de código), digitar o código de funções ou de objeto normalmente.

Sempre que é digitada uma palavra -chave ou um caractere para o qual há Dicas de código disponíveis, é exibido um menu pop-up de opções de conclusão. Quando desejado, selecionar uma opção na lista e pressionar a tecla Enter.

Para configurar ou desativar as Dicas de c ódigo, veja Definição de preferências de dicas de código.

Como trabalhar com trechos de código

Os trechos de código permitem armazenar conteúdo para que este possa ser reutilizado rapidamente. É possível criar e inserir trechos de código HTML, JavaScript, CFML, ASP, JSP e de outras linguagens de programação. O Dreamweaver também contém alguns trechos predefinidos que podem ser utilizados como ponto de partida.

É possível indicar se o trecho de código será colocado ao redor de uma seleção ou se existir á apenas como um bloco de código. Por exemplo: é possível vincular a uma página que é exibida diversas vezes no site, mas está anexada a diferentes objetos e textos. É possível selecionar um objeto, clique com o botão direito do mouse ao clicar em um trecho de código exibido no

painel Trechos e escolher Inserir, no menu pop-up. O código referente ao link é colocado ao redor da seleção. Também é possível comentar os trechos para ajudar outros usuários a utilizá-los corretamente.

Para inserir um trecho de código:

1. Coloque o ponto de inserção na posição desejada no documento; para inserir um trecho de código ao redor de uma sele ção, fazer a seleção no documento.

2. No painel Trechos (Janela > Trechos), clique duas vezes no trecho.

Também é possível clicar com o botão direito do mouse ao clicar no trecho e, em seguida, escolher Inserir, no menu pop-up.

Para criar um trecho de código:

1. Na parte inferior do painel Trechos, clique no ícone Novo trecho.

A caixa de diálogo Trecho é exibida.

2. Preencha a caixa de diálogo e clique em OK.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Trecho.

Para editar ou excluir um trecho de código:

1. Na parte inferior do painel Trechos, selecionar um trecho e clique no ícone Editar o trecho ou Remover.

É possível identificar o ícone Editar o trecho ou Remover por sua dica de ferramentas.

Para criar pastas de trechos de código e gerenciar trechos de código:

1. Na parte inferior do painel Trechos, clique no ícone Nova pasta de trechos. 2. Arrastar trechos para a nova pasta ou para outras pastas, conforme desejado.

Para compartilhar um trecho com outros membros da equipe:

1. Localize o trecho a ser compartilhado na pasta Configuration\Snippets da pasta do aplicativo Dreamweaver MX.

2. Copie o trecho para uma pasta compartilhada do computador ou de um computador de rede.

3. Solicitar aos outros membros da equipe que copiem o trecho para a respectiva pasta Configuration\Snippets.

Qualquer usuário com acesso à pasta compartilhada poderá, a partir de agora, adicionar, editar e excluir trechos dessa pasta.

Como inserir código rapidamente utilizando a barra Inserir

É possível utilizar a barra Inserir para adicionar códigos a uma página rapidamente. Basta



posicionar o ponto de inserção no código e clique em um ícone da barra Inserir. Ao clicar em um ícone, o código poderá ser exibido na página imediatamente ou poderá ser exibida uma caixa de diálogo solicitando mais informações para concluir o código.

Para saber o que os ícones fazem, colocar o mouse sobre o ícone e aguardar a exibição da dica de ferramentas. A quantidade e o tipo de ícones disponíveis na barra Inserir varia de acordo com o tipo de documento aberto no Dreamweaver. Também depende de o usuário estar utilizando a visualização do código ou a visualização do projeto.

Embora a barra Inserir forneça uma série de tags utilizadas com freqüência, ela não é abrangente. Para poder escolher dentre uma seleção mais abrangente de tags, utilizar o Seletor de tags (Como inserir tags com o Seletor de tags).

Como inserir tags com o Seletor de tags

É possível utilizar o Seletor de tags para inserir na página qualquer tag das bibliotecas de tags do Dreamweaver (que incluem bibliotecas de tags ColdFusion e ASP.NET). Para obter mais informações sobre as bibliotecas de tags, veja Gerenciamento de bibliotecas de tags.

Para inserir uma tag utilizando o Seletor de tags:

1. Posicionar o ponto de inserção no código, clique com o botão direito do mouse ao clicar e escolher Inserir tag.

O Seletor de tags é exibido. O painel esquerdo contém uma lista de bibliotecas de tags que contam com suporte e o painel direito mostra as tags individuais na pasta de biblioteca de tags selecionada.

2. Selecione uma tag na lista. 3. Se desejar exibir informações de uso e sintaxe da tag, clique no botão Informações sobre

a tag.

Se disponível, a ajuda referente à tag será exibida na caixa de diálogo.

4. Se desejar obter informações de referência sobre a tag, clique no ícone <?>.

Se disponíveis, informações de referência sobre a tag serão exibidas no painel Referência.

5. Clique em Inserir para inserir no c ódigo a tag selecionada.

As tags que não exigem informações adicionais, que são exibidas no painel direito entre parênteses (por exemplo: <HTML></HTML>), s ão inseridas no documento no local indicado pelo ponto de inserção. Todas as demais tags exibem seus pr óprios editores de tag.

6. Se for aberto um editor de tags, inserir as informações adicionais e clique em OK.

Veja Edição de tags utilizando editores de tags.

Edição de tags utilizando editores de tags

Os editores de tags permitem especificar ou editar os atributos de uma tag utilizando uma caixa de diálogo. Se for utilizado o Seletor de tags para inserir uma tag e se a tag exigir informações adicionais, o respectivo editor de tags será exibido automaticamente. Caso contrário, o procedimento a seguir explica como abrir o editor de tags de uma tag. Para obter mais informações, veja Como inserir tags com o Seletor de tags.

Para acessar o editor de tags de uma tag:

1. Coloque o ponto de inserção dentro de uma tag. 2. Clique com o botão direito do mouse ao clicar e, no menu pop-up, selecionar Editar a tag. 3. Faça as alterações e clique em OK.

Dica: Para obter mais informações sobre a tag no editor de tags, clique em Informações sobre a tag.

Edição de tags utilizando o inspetor de tags

É possível utilizar o inspetor de tags para editar tags em uma folha de propriedades semelhante àquelas encontradas em outros IDEs (Ambientes integrados de desenvolvimento, Integrated Development Environments).

Para editar uma tag utilizando o inspetor de tags:

1. Certifique-se de que o inspetor de tags esteja aberto (Janela > Inspetor de tags). 2. Na visualização do código (ou no inspetor de código), clique em qualquer lugar dentro de

uma tag.

Se a tag oferecer suporte a atributos, o Dreamweaver exibirá os atributos e seus valores atuais na folha de propriedades do inspetor de tags.

3. Faça as alterações na tag na folha de propriedades.

Clique no nome de um atributo para digitar um valor ou, se o atributo aceitar valores predefinidos, para selecionar um valor na lista.

4. Se o atributo aceitar um valor de uma fonte de conteúdo dinâmico (como um banco de dados), clique no ícone de raio, no final da linha do atributo selecionado, e selecionar a fonte.

Para obter informações sobre como definir fontes de conteúdo dinâmico, veja Definição das fontes de conteúdo dinâmico.

5. Clique em qualquer outro lugar do painel para atualizar a tag no documento.



Como recuar blocos de código

À medida que se grava e edita o código na visualização do código ou no inspetor de código, é possível recuar blocos de código para separar visualmente o bloco do restante, o que facilita sua localização.

Para recuar um bloco de código:

1. Selecione a(s) linha(s) do bloco de código a ser(em) recuada(s) (é necessário selecionar a linha inteira).

2. Escolha Editar > Recuar o código.

O código é recuado. Escolha Editar > Remover o recuo do código para retornar o código recuado à posição inicial.

Como copiar e colar códigos

É possível copiar e colar o código-fonte de um outro aplicativo ou da própria visualização do código. É possível copiar e colar o código como um texto ou como um c ódigo com as tags intactas.

Para copiar e colar o código-fonte como texto:

1. Copie o código pelo Dreamweaver ou por um outro aplicativo. 2. Coloque o ponto de inserção diretamente na visualização do projeto e escolher Editar >

Colar.

Para copiar e colar o código-fonte com as tags intactas:

1. Copie o código pelo Dreamweaver ou por um outro aplicativo.

Para copiar pela visualização do projeto, escolher Editar > Copiar como HTML.

2. Siga um dos procedimentos abaixo: ¡ Na visualização do código, posicionar o ponto de inserção e escolher Editar > Colar.

Se estiver utilizando a visualização do projeto, pressionar a tecla F5 para atualizar a exibição do documento.

¡ Na visualização do projeto, posicionar o ponto de inserção e escolher Editar > Colar como HTML.



Como inserir comentários de HTML

Um comentário é um texto descritivo inserido no código HTML para explicá-lo ou fornecer outras informações. O texto do comentário aparece somente na visualização do código e não é exibido na página da Web no navegador.

Para inserir um comentário:

1. Na visualização do código ou do projeto, colocar o ponto de inserção no local onde deseja inserir o comentário.

2. Clique no ícone Comentário, localizado na guia Comuns da barra Inserir.

Utilize as dicas de ferramentas para identificar o ícone Comentário.

¡ Na visualização do código, o Dreamweaver insere uma tag  na página. Digite o comentário dentro da tag.

¡ Na visualização do projeto, o Dreamweaver exibe a caixa de diálogo Comentário. Digite o comentário e clique em OK.

Para exibir marcadores de comentário na visualização do projeto, escolher Exibir > Aux ílios visuais > Elementos invis íveis. Certifique-se de que os comentários estejam selecionados nas preferências de elementos invisíveis; caso contrário, o marcador não será exibido.

Para adicionar um comentário existente, seguir um dos procedimentos abaixo:

l Na visualização do projeto, selecionar o marcador Comentário e digitar o texto no inspetor de propriedade.

l Localize o comentário no código e adicionar o texto diretamente nele.

Como listar funções JavaScript e VBScript na página

Em uma página aberta na visualização do código, é possível exibir todas as funções JavaScript ou VBScript.

Para exibir as funções de script em uma página:

1. Abra o documento na visualização do código. 2. Certifique-se de que a barra de ferramentas Documento esteja sendo exibida (Exibir >

Barras de ferramentas > Documento). 3. Clique no ícone Navegação por códigos, na barra de ferramentas.

O ícone é formado por um par de chaves ({ }).

Nota: O ícone fica desativado na visualização do projeto.

Se o código contiver funções JavaScript ou VBScript, elas serão exibidas no menu pop-up.

Para ver as funções listadas em ordem alfabética, manter pressionada a tecla Control ao clicar no botão Navegação por códigos.

Para ir até uma função no código:

Selecione uma função no menu pop-up Navegação por códigos. A função será realçada na visualização do código (ou no inspetor de código).

Como procurar e substituir tags e atributos

É possível utilizar o Dreamweaver para procurar e substituir tags e atributos no código. Esta seção contém os tópicos a seguir:

l Sobre buscas de código-fonte HTML l Como procurar tags e atributos l Como procurar texto contido em tags específicas l Como salvar padrões de busca l Sobre expressões comuns

Sobre buscas de c ódigo-fonte HTML

Utilize a opção Código-fonte, da caixa de diálogo Localizar e substituir, para procurar determinadas seqüências de texto no c ódigo-fonte HTML. Por exemplo: uma busca por black dog no código a seguir retornaria duas correspondências (no atributo alt e na primeira frase):

<img src="barnaby.gif" width="100" height="100" alt="Barnaby, a black dog."> We saw several black dogs in the park yesterday. The black <a href="barnaby.html">dog</a> we liked best was called Barnaby.

A frase black dog também é exibida na segunda oração, porém ela não gera correspondências porque é interrompida por um link.

Para obter mais informações, veja Busca e substituição de texto.


Como procurar tags e atributos

Como procurar texto contido em tags específicas

Como salvar padrões de busca

Sobre expressões comuns


Utilize a opção Tag específica, da caixa de diálogo Localizar e substituir, para procurar tags, atributos e valores de atributos específicos. Por exemplo: é possível procurar todas as tags img sem nenhum atributo alt.

Para executar uma busca de tag:

1. Escolha Editar > Localizar e substituir e especificar em quais arquivos deverá ser feita a busca.

2. No menu pop-up Procurar, escolher Tag específica. 3. No menu pop-up junto ao menu pop-up Procurar, escolher uma tag específica, digitar

uma tag ou escolher [any tag].

Se desejar apenas procurar todas as ocorrências da tag especificada, pressionar o botão de subtração (-) e passar à etapa 6. Caso contrário, ir para a etapa 4.

4. Limitar a busca utilizando um dos modificadores de tags a seguir: ¡ O modificador Com atributo escolhe um atributo que deve estar na tag para que

esta corresponda aos critérios de busca. É possível especificar um determinado valor para o atributo ou escolher [qualquer valor].

¡ O modificador Sem atributo escolhe um atributo que não pode estar na tag para que esta corresponda aos critérios de busca. Por exemplo: escolher esta op ção para procurar todas as tags IMGsem o atributo ALT.

¡ O modificador Contendo especifica um texto ou uma tag que deve estar contida na tag original para que haja correspondência com os crit érios de busca. Por exemplo: no código heading 1, a tag font está contida na tag b.

¡ O modificador Não contendo especifica um texto ou uma tag que não pode estar contida na tag original para que haja correspondência com os critérios de busca.

¡ O modificador Dentro da tag especifica uma tag dentro da qual deve estar a tag de destino para que haja correspondência com os critérios de busca.

¡ O modificador Fora da tag especifica uma tag dentro da qual não deve estar a tag de destino para que haja correspondência com os critérios de busca.

5. Clique no botão de adição (+) e repetir a etapa 4 para restringir ainda mais a busca. 6. Inicie a busca:

¡ Clique em Localizar o próximo para realçar a próxima instância da tag no documento atual e em qualquer documento subseqüente se a busca estiver sendo feita em mais de um documento.

¡ Clique em Localizar todos para gerar uma lista de todas as instâncias da tag no documento atual ou, se estiver pesquisando em um diretório ou site, gerar uma lista de documentos que contêm a tag. A lista é exibida na guia Buscar do painel Resultados.

Como procurar texto contido em tags espec íficas

Utilize a opção Texto avanç., na caixa de di álogo Localizar e substituir, para procurar determinadas seqüências de texto que podem estar ou não em um conjunto de tags recipientes. Por exemplo: é possível procurar a expressão Sem título entre as tags <title> para localizar todas as páginas sem título do site.

Para executar uma busca de texto avançada:

1. Escolha Editar > Localizar e substituir e especificar em quais arquivos deverá ser feita a busca.

2. No menu pop-up Procurar, selecione Texto avanç. 3. Digite o texto a ser pesquisado no campo de texto adjacente ao menu pop-up Procurar.

Por exemplo: digitar a expressão Sem título.

4. Escolha Dentro da tag ou Fora da tag e, em seguida, selecione uma tag no menu pop-up adjacente.

Por exemplo: escolher Dentro da tag e, em seguida, title.

5. Clique no botão de adição (+) para restringir a busca a tags com um ou mais atributos específicos.

Uma vez que a tag <title> não possui atributos, não é necessário utilizar esta opção para localizar todas as páginas sem título do site.

6. Inicie a busca: ¡ Clique em Localizar o próximo para realçar a próxima instância do texto no

documento atual e em qualquer documento subseqüente se a busca estiver sendo feita em mais de um documento.

¡ Clique em Localizar todos para gerar uma lista de todas as instâncias do texto no documento atual ou, se estiver pesquisando em um diretório ou site, gerar uma lista de documentos que contêm a tag. A lista é exibida na guia Buscar do painel Resultados.


É possível salvar padrões de busca para uso posterior clicando no ícone Salvar a consulta (o ícone em forma de disco), na caixa de diálogo Localizar e substituir. O salvamento de uma consulta é conveniente se a mesma busca for realizada com freqüência e se o usuário não desejar reconstruir esse padrão de busca várias vezes. Por exemplo: é recomendável retirar tags não-padronizadas de documentos criados com um outro editor visual de HTML ou confirmar se todas as imagens contidas em um arquivo têm os atributos height, width e alt antes de o documento ser publicado na Web.

Para salvar um padrão de busca:

1. Na caixa de diálogo Localizar e substituir (Editar > Localizar e substituir), definir os parâmetros para a busca.

Se estiver executando uma busca de tag ou texto avançado, veja Como procurar tags e atributos ou Como procurar texto contido em tags específicas para obter informações sobre como definir parâmetros adicionais de busca.

2. Clique no ícone Salvar a consulta (o ícone em forma de disco).

O local padrão onde as consultas são salvas é a pasta Configuration/Queries, contida na pasta do aplicativo Dreamweaver.

3. Na caixa de diálogo que aparece, atribuir ao arquivo um nome que identifique a consulta e clique em Salvar.

Por exemplo: se o padrão de busca envolve a localização de tags img sem o atributo alt, a consulta pode se chamar img_no_alt.dwr. As consultas de localização terminam com a extensão .dwq; as consultas de substituição terminam com a extensão .dwr.

Para chamar um padrão de busca novamente:

1. Escolha Editar > Localizar e substituir. 2. Clique no botão Carregar a consulta (o ícone da pasta).

A caixa de diálogo Carregar a consulta é aberta automaticamente na pasta Configuration/Queries. É possível navegar até uma outra pasta se houver consultas salvas em outras pastas.

3. Selecione um arquivo de consulta e clique em Abrir.

Na caixa de diálogo Localizar, apenas as consultas de localização (arquivos .dwq) estão disponíveis. Na caixa de diálogo Substituir, tanto as consultas de localização (arquivos .dwq) quanto as de substitui ção (arquivos .dwr) estão disponíveis.

4. Clique em Localizar o próximo, Localizar todos, Substituir ou Substituir todos para iniciar a busca.








As expressões comuns consistem em padrões que descrevem as combinações de caracteres no texto. Utilize essas expressões em suas buscas, para que auxiliem o usuário a descrever conceitos como “frases iniciadas com ‘O’” e “valores de atributo que contenham um número”. A tabela a seguir lista os caracteres especiais em expressões comuns, seus significados e exemplos de uso.

Para localizar o texto contendo um dos caracteres especiais da tabela, preceda o caractere especial com uma barra invertida. Por exemplo: para localizar o asterisco na frase some conditions apply*, o padrão de busca deve ter esta aparência: apply\*. Se não for colocada uma barra inclinada antes do asterisco, serão localizadas todas as ocorrências de “aplicam” (assim como de “aplic”, “aplica” e “aplicar”), e não apenas aquelas seguidas do sinal de asterisco.

Caractere Coincide com Exemplo

^ Início da entrada ou linha. ^T coincidirá com “T” em “Terracota”, mas não em “Cabana do Pai Tomás”

$ Final da entrada ou linha. o$ coincidirá com “o” em “número”, mas não em “números”

* O caractere precedente 0 ou mais vezes. um* coincidirá com ”um” em “rum”, “umi” em “luminoso” e “u” em “azul”

+ O caractere precedente uma ou mais vezes. um+ coincidirá com “um” em “rum” e “umi” em “luminoso”, porém não coincidirá com qualquer ocorrência de “azul”

? O caractere precedente no máximo uma vez (isto é, indica que o caractere precedente é opcional).

re?ta coincidirá com “rta” em “curta” e “reta” em “preta”, porém não coincidirá com qualquer ocorrência de “caneta” ou “brotar”

. Qualquer caractere único, exceto nova linha. .pr coincidirá com “propriedades” e



“programa” na frase “propriedades do programa”

x|y x ou y. FF0000|0000FF coincide com “FF0000” em bgcolor=”#FF0000” e “0000FF’” em font color=”#0000FF”

{n} Exatamente 'n' ocorr ências do caractere precedente.

r{2} coincidirá com “rr” em “carro” e com os primeiros dois erres em “brrrrrr”, porém não coincidirá com qualquer ocorrência de “for”

{n,m} Ao menos 'n' e no máximo 'm' ocorrências do caractere precedente.

F{2,4} coincidirá com “FF” em “#FF0000” e com os primeiros quatro efes em #FFFFFF

[abc] Qualquer um dos caracteres dentro dos colchetes. Especifique uma faixa de caracteres com um hífen (por exemplo: [a-f] equivale a [abcdef]).

[e-g] coincidirá com “e” em “tabela”, “f” em “fraude” e “g" em “Aguarde”

[âbc] Qualquer um dos caracteres que não esteja dentro dos colchetes. Especifique uma faixa de caracteres com um hífen (por exemplo [â-f] equivale a [âbcdef]).

[âeiou] coincidirá inicialmente com “r” em “cravo”, “b” em “biblioteca” e “f” em “OFF!”

\b Um limite de palavra (como um espaço ou retorno de carro).

\bb coincidirá com “b” em “blasfêmia”, porém não coincidirá com qualquer ocorrência de “abrir” ou “liberdade”

\B Um limite sem palavra. \Bb coincidirá com “b” em “liberdade”, porém não coincidirá com “blasfêmia”

\d Qualquer caractere numérico. Equivale a [0-9].

\d coincidirá com ”3” em “C3PO” e “2” em “apartamento 2G”

\D Qualquer caractere não numérico. Equivale a [^0-9].

\D coincidirá com ”S” em “900S” e ”Q” em “Q45”

\f Avanço de página.

\n Avanço de linha.

\r Retorno de carro.

\s Qualquer caractere contendo espaço em branco, inclusive espaços, tabulações, avanços de página ou avanços de linha.

\scoluna coincidirá com ”coluna” em “100 colunas”, porém não coincidirá com “colunas”



Utilize parênteses para definir agrupamentos nas expressões comuns a serem mencionadas posteriormente. Utilize $1, $2, $3, etc. (utilize ($) no campo Localizar e barra invertida (\) no campo Substituir para referir-se ao primeiro, segundo, terceiro, etc. agrupamento entre parênteses. Por exemplo: a busca de (\d+)\/(\d+)\/(\d+) e sua substituição por $2/$1/$3 troca o dia e o mês em uma data separada por barras inclinadas (na conversão entre o formato de datas no estilo americano e europeu).





Acesso a referências de linguagem

O painel Referência é uma ferramenta de referência rápida para as linguagens de markup, objetos JavaScript, estilos CSS e seus atributos. O painel Referência fornece informações relativas a tags, objetos ou estilos específicos com os quais o usuário está trabalhando na visualização do código (ou no inspetor de código).

\S Qualquer caractere que não contenha espaços em branco.

\Scoluna coincidirá com “coluna” em “colunas:”, porém não coincidirá com “100 colunas”

\t Uma tabulação.

\w Qualquer caractere alfanumérico, inclusive o sinal de sublinhado. Equivale a [A-Za-z0-9_].

b\w* coincidirá com “Alfabeto” em “Alfabeto cirílico” e com “objeto” e “abstrato” em “nenhum objeto abstrato”

\W Qualquer caractere não alfanumérico. Equivale a [^A-Za-z0-9_].

\W coincidirá com “&” em “Joca & Mateus” e com “%” em “100%”

Control+Enter ou Shift+Enter

Caractere de retorno. Certifique-se de desmarcar a opção Ignorar os diferentes espaços em branco ao efetuar essa busca se não forem utilizadas expressões comuns. Observar que isso coincide com um determinado caractere, mas não com a noção geral de quebra de linha; por exemplo: não coincide com uma tag ou . Os caracteres de retorno de carro são exibidos na forma de espaços na janela do documento e não na forma de quebras de linha.

Para abrir o painel Referência:

1. Na visualização do código, clique com o botão direito do mouse ao clicar em uma tag, em um atributo ou em uma palavra -chave.

2. No menu pop-up, escolher Referência.

É exibido o painel Referência, mostrando informações sobre a tag, o atributo ou a palavra-chave clicada. Para ajustar o tamanho do texto no painel Referência, selecione Fonte grande, Fonte média ou Fonte pequena no menu de opções (a seta pequena na parte superior direita do painel).

O menu pop-up Livro exibe o nome do livro do qual provém o material de referência: Para exibir as tags, os objetos ou estilos de um outro livro, escolher um livro diferente no menu-pop-up Livro.

O menu pop-up Tag, Objeto ou Estilo (dependendo do livro selecionado) exibe a tag, o objeto ou estilo escolhido na visualização do código (ou no inspetor de código). Para exibir informações sobre outra tag, objeto ou estilo, selecione uma nova opção no menu.

Ao lado do menu pop-up Tag, Objeto ou Estilo, há um menu que contém a lista de atributos da tag escolhida. A seleção padrão é Descrição, que exibe uma descrição da tag escolhida. Também é possível selecionar um atributo no menu para exibir mais informações sobre ele.

Referência

Esta seção fornece informações sobre as caixas de diálogo e os painéis apresentados neste capítulo.



Definição das opções da caixa de diálogo Trecho

O objetivo desta caixa de diálogo é criar ou editar um trecho de código do painel Trechos.

Procedimento

1. Na caixa de texto Nome, digite um nome para o trecho.

Nota: Os nomes de trechos não podem conter caracteres que são inválidos em nomes de arquivos, como barras (/ ou \), caracteres especiais ou aspas duplas (“).

2. (Opcional) Na caixa de texto Descrição, digite um texto descritivo do trecho de código. Isso facilita o uso do trecho de c ódigo pelos outros membros da equipe.

3. Para Tipo de trecho, escolha Quebra de linha da sele ção ou Inserir bloco. 4. Se for escolhida a opção Quebra de linha da seleção, preencha estas caixas de texto:

¡ Caixa de texto Inserir antes de Digite ou cole o código a ser inserido antes da seleção atual. Para definir um espaçamento padrão entre os blocos, pressione a tecla Enter ao final do texto inicial e no início do texto final.

¡ Caixa de texto Inserir após Digite o código a ser inserido após a seleção. 5. Se for escolhida a opção Inserir bloco, digite ou cole o código na caixa Código. 6. (Opcional) No painel Visualização, selecione um Tipo de visualização: Código ou Projeto.

Se for selecionado Projeto, o Dreamweaver processará o código e o mostrará ao usuário no painel Visualização do painel Trechos. Se for selecionado Código, o Dreamweaver mostrará somente o código no painel Visualização.

7. Clique em OK.

Nota: Uma vez que os trechos podem ser criados como blocos iniciais e finais, é possível utilizá-los para envolver outras tags e conteúdos. Isso é útil para inserir formatação especial, links, elementos de navegação e blocos de script. Basta realçar o conteúdo a ser envolto pelo trecho de código e inserir o trecho.

Tópico relacionado

Como trabalhar com trechos de código

Definição das opções da caixa de diálogo Comentário

O objetivo desta caixa de diálogo é digitar um comentário de HTML em uma página na visualização do projeto.

Procedimento



Digite o comentário e clique em OK.

Tópico relacionado


Definição das opções do inspetor de propriedades de comentário

O objetivo deste inspetor de propriedades é modificar um comentário de HTML existente em uma página.

Procedimento

Modificar o comentário.

Tópico relacionado


Otimização e depuração do código

É possível utilizar o Macromedia Dreamweaver MX para otimizar e depurar o código. É possível, por exemplo: validar tags, tornar o documento compatível com XHTML ou depurar JavaScripts.

Este capítulo aborda os tópicos a seguir:

l Limpeza do código l Como verificar se as tags e chaves estão ajustadas l Validação das tags l Como tornar as páginas compatíveis com XHTML l Como utilizar o depurador JavaScript l Como utilizar o depurador de ColdFusion

Limpeza do código

Utilize o comando Limpar o HTML ou Limpar o XHTML para remover tags vazias, combinar tags



font aninhadas e aprimorar o código HTML/XHTML confuso ou ilegível.

Para um documento XHTML, o comando Limpar o XHTML corrige erros de sintaxe, define o uso de caixa dos atributos de tag como minúsculas e adiciona ou reporta os atributos exigidos ausentes de uma tag (após a execução do comando Limpar o XHTML, é exibida uma caixa de diálogo que lista o número de tags img e area que não têm um atributo alt).

Para limpar o HTML gerado por um documento do Microsoft Word, veja Como limpar o HTML do Microsoft Word.

Para limpar o código:

1. Abra um documento. ¡ Se o documento estiver em HTML, escolha Comandos > Limpar o HTML. ¡ Se o documento estiver em XHTML, escolha Comandos > Limpar o XHTML.

2. Na caixa de diálogo que é exibida, escolha uma das opções a seguir: ¡ A opção Remover tags recipientes vazias remove todas as tags que não

comportam conteúdo entre elas. Por exemplo: e são consideradas tags vazias, mas a tag em um texto não é.

¡ A opção Remover tags aninhadas redundantes remove todas as ocorrências redundantes de uma tag. Por exemplo, no código This is what I really wanted to say , as tags b próximas à palavra “really” são redundantes e devem ser removidas.

¡ A opção Remover comentários de HTML não pertencentes ao Dreamweaver remove todos os comentários que não foram inseridos pelo Dreamweaver. Por exemplo:  seria removido, mas  não, porque é um comentário do Dreamweaver que marca o início de uma regi ão editável em um modelo.

¡ Remover markup especial do Dreamweaver ¡ A opção Remover tag(s) específico(s) remove as tags especificadas no campo de

texto adjacente. Utilize esta opção para remover tags personalizadas, inseridas por outros editores visuais, e outras tags que não devem ser exibidas no site (Por exemplo: blink). Separe várias tags com v írgulas (por exemplo: font, blink).

¡ A opção Combinar os tags de aninhadas sempre que poss ível consolida duas ou mais tags font quando elas controlam a mesma faixa de texto. Por exemplo: big red seria alterado para big red.

¡ A opção Mostrar o registro quando concluir exibe uma caixa de alerta com detalhes sobre as alterações feitas no documento logo que a limpeza é concluída.

3. Clique em OK.

Dependendo do tamanho do documento e do número de opções selecionadas, a limpeza poderá demorar alguns segundos.

Como verificar se as tags e chaves estão ajustadas

À medida que se edita o código na visualização do código ou no inspetor de código é editado, é possível se certificar de que as tags ou as chaves ({ }) exibidas na página estão ajustadas. A verificação das tags para ver se estão ajustadas ajuda a garantir que todas contêm tags de

abertura e finalização. Esse procedimento é especialmente útil quando diversos n íveis de alinhamento forem utilizados no código (por exemplo: quando há várias tabelas aninhadas em outras tabelas.

Para verificar se as tags estão ajustadas:

1. Abra o documento na visualização do código. 2. Coloque o ponto de inserção no código aninhado a ser verificado. 3. Escolha Editar > Selecionar a tag-mãe.

As tags correspondentes de abertura e finalização aparecem realçadas no código. Se continuar escolhendo Editar > Selecionar a tag-mãe e as tags estiverem ajustadas, ocasionalmente o Dreamweaver realçará as tags <html> e </html> externas.

Para verificar se as chaves estão ajustadas:

1. Abra o documento na visualização do código. 2. Coloque o ponto de inserção no código aninhado a ser verificado. 3. Escolha Editar > Ajustar as chaves.

As tags correspondentes de abertura e finalização aparecem realçadas no código. Escolha novamente Editar > Ajustar as chaves realçará as tags correspondentes que envolvem a seleção anterior.

Validação das tags

É possível utilizar o Validador do Dreamweaver para saber se o código apresenta erros de tag ou sintaxe. O Validador oferece suporte a várias linguagens baseadas em código, incluindo diversas versões de HTML, XHTML, CFML (Linguagem de markup ColdFusion, ColdFusion Markup Language), JavaServer Pages (JSP) e Wireless Markup Language (WML). Também é possível validar um documento XML.

Nota: Para validar o documento para fins de acessibilidade, veja Teste de acessibilidade do site da Web.

É possível definir preferências para o Validador. Pode-se, por exemplo: especificar linguagens baseadas em tags a serem verificadas pelo Validador, os problemas específicos que o Validador deve verificar e os tipos de erros que ele deve reportar. Para obter mais informações, veja Definição de preferências do Validador.

É possível executar o Validador no documento atual ou em uma tag selecionada.

Para executar o validador:

1. Siga um dos procedimentos abaixo: ¡ Para um arquivo XML (ou XHTML), escolha Arquivo > Verificar página > Validar

como XML. ¡ Caso contrário, escolha Arquivo > Verificar página > Validar o markup.

A guia Validação do painel Resultados exibe uma mensagem “Não foram

encontrados erros ou advertências” ou lista os erros de sintaxe encontrados.

2. Clique duas vezes em uma mensagem de erro para realçá-la no documento. 3. Clique com o botão direito do mouse no relatório para salvá-lo como um arquivo XML ou

exibi-lo em um navegador (o que permite imprimi-lo).

Como tornar as páginas compatíveis com XHTML

Esta seção descreve o XML e XHTML, os requisitos de XHTML, os requisitos de CSS (folhas de estilos em cascata) para XHTML e como criar documentos compatíveis com XHTML.


l XML e XHTML l Sobre o código XHTML gerado pelo Dreamweaver l Como utilizar as CSS com a linguagem XHTML l Como tornar os documentos compatíveis com XHTML

XML e XHTML

A XML (Extensible Markup Language) define a estrutura de informações ou como elas podem ser armazenadas em um banco de dados. Por exemplo: uma linguagem XML para culin ária poderia ter uma tag denominada <receita> e <receita> poderia conter tags para <nome>, <ingredientes> e <modo de fazer>. O ponto forte da linguagem XML está no fato de que as informações podem ser armazenadas e recuperadas em um banco de dados, processadas em uma série de formatos e utilizadas para uma variedade de objetivos (por exemplo: em uma página da Web, em um computador portátil ou no telefone celular ou ainda para um livro de receitas de culinária, fichas de receitas ou um livro sobre coentro).

A XHTML (Extensible Hypertext Markup Language) é uma reformulação da linguagem HTML como uma aplicação da XML. Ela é quase idêntica à HTML 4.01, porém é mais rigorosa e limpa.

Vantagens da linguagem XHTML

Geralmente, com a XHTML pode-se perceber os benefícios da XML e também assegurar a compatibilidade com versões anteriores e futuras dos documentos da Web. Abaixo, alguns motivos específicos para se utilizar a linguagem XHTML:

l A XHTML foi desenvolvida para substituir a HTML. Se desejar que seu site da Web na Internet fique visível e seja processado corretamente no futuro, é um investimento seguro começar a codificar em XHTML desde já.

l A XHTML foi desenvolvida para funcionar em diversos dispositivos e não somente em PCs. l A XHTML é uma linguagem XML, por isso oferece potencial de extensibilidade. Também é

possível utilizar ferramentas XML padrão para exibir, editar e validar documentos XHTML. l Os documentos XHTML podem utilizar aplicativos como scripts e applets que se baseiam

no modelo de objeto de documento HTML ou no modelo de objeto de documento XML. l A XHTML requer um código de qualidade. Isso reduz as discrepâncias entre a forma como

agentes de usuários distintos (como navegadores da Web) processam um documento da Web, uma vez que muitas dessas discrepâncias são geradas devido ao código formatado incorreta ou inadequadamente.

Migração de HTML para XHTML

A linguagem XHTML funciona com navegadores e outros agentes de usuário que oferecem suporte à HTML 4 e com aqueles que oferecem suporte à XML. Desse modo, é possível alternar para a XHTML sem excluir ninguém ou ter de aguardar que os agentes de usuário XML sejam a maioria. Como a XHTML é tão parecida com a HTML, não é um processo dif ícil passar da HTML para a XHTML.

Recursos da Web para XHTML

Para obter mais informações sobre XHTML, visitar o site do World Wide Web Consortium (W3C), que contém as especificações da linguagem XHTML 1.1 - XHTML baseada em módulos (http://www.w3.org/TR/xhtml11/) e XHTML 1.0 (http://www.w3c.org/TR/xhtml1/), bem como sites validadores de XHTML para arquivos baseados na Web (http://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html).


Sobre o código XHTML gerado pelo Dreamweaver

Como utilizar as CSS com a linguagem XHTML

Como tornar os documentos compatíveis com XHTML



O Dreamweaver gera código XHTML e limpa o código XHTML existente de uma forma que atende a muitos dos requisitos de XHTML automaticamente. Para os poucos requisitos de XHTML que não são atendidos, o Dreamweaver fornece as ferramentas necessárias.

Nota: Alguns dos requisitos descritos nesta se ção também são exigidos em diversas versões da linguagem HTML.

A tabela a seguir descreve os requisitos de XHTML atendidos automaticamente pelo Dreamweaver.

requisito de XHTML Para atender a este requisito, o Dreamweaver faz isto...

Quando a codificação de caracteres de um documento é diferente da codificação UTF-8 padrão, o documento deve ter uma declaração XML.

Adiciona uma declaração XML a um documento XHTML e especifica a codificação, por exemplo: <?xml version="1.0" encoding="iso-8859-1"?>

Deve haver uma declaração DOCTYPE no documento antes do elemento raiz e a declaração deve fazer referência a um dos três arquivos DTD (Defini ção de tipo de documento, Document Type Definition) para XHTML (Strict, Transitional ou Frameset).

Adiciona uma declaração XHTML DOCTYPE a um documento XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Ou se o documento XHTML tem um conjunto de molduras: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

O elemento raiz do documento deve ser “html” e o elemento html deve designar o espaço para nome XHTML.

Adiciona o atributo namespace ao elemento html, como segue: <html xmlns="http://www.w3.org/1999/xhtml">

Um documento padrão deve ter os elementos estruturais cabeçalho, título e corpo. Um documento de conjunto de molduras deve ter os elementos estruturais cabeçalho, título e conjunto de molduras.

Inclui os elementos cabeçalho, título e corpo em um documento padrão e, em um documento de conjunto de molduras, inclui os elementos cabeçalho, título e conjunto de molduras.

Todos os elementos do documento devem ser aninhados corretamente: Este é um exemplo com erro. Este é um bom exemplo.

Gera corretamente o código aninhado e, ao limpar o XHTML, corrige o aninhamento no código que não foi gerado pelo Dreamweaver.

Todos os nomes de elementos e atributos devem ficar em minúsculas.

Impõe o uso de minúsculas para os nomes de elementos e atributos HTML no código XHTML que gera e ao limpar o XHTML, independentemente das preferências de caixa da tag e do atributo.

Todos os elementos devem ter uma Insere tags finais no código que gera e ao limpar

tag final, a menos que estejam declarados no arquivo DTD como EMPTY.

o XHTML.

Os elementos vazios devem ter uma tag final ou a tag inicial deve terminar com />. Por exemplo: a tag não é válida; a forma correta é ou . Em seguida, estão os elementos vazios: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta e param. E para fins de compatibilidade com versões anteriores de navegadores que não são ativados por código XML deve haver um espaço antes de /> (por exemplo: e não ).

Insere elementos vazios com um espaço antes da barra inclinada de fechamento em tags vazias no código que gera e ao limpar o XHTML.

Os atributos não podem ser minimizados; por exemplo: <td nowrap> é um atributo inválido; a forma correta é <td nowrap="nowrap">. Isso afeta os atributos a seguir: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly e selected.

Insere pares atributo-valor integrais no código que gera e ao limpar o XHTML. Nota: Se um navegador HTML não oferecer suporte a HTML 4, poderá interpretar incorretamente esses atributos booleanos quando exibidos na forma por extenso.

Todos os valores de atributos devem ser exibidos entre aspas.

Coloca os valores de atributos entre aspas no código que gera e ao limpar o XHTML.

Os elementos a seguir devem ter um atributo id e um atributo name: a, applet, form, frame, iframe, img e map. Por exemplo: <a name="intro">Introduction</a> é inválido; a forma correta é <a id="intro">Introduction</a> ou <a id="section1" name="intro"> Introduction</a>.

Define os atributos name e id com o mesmo valor, sempre que o atributo name é definido por um inspetor de propriedades, no código que o Dreamweaver gera e ao limpar o XHTML.

Para atributos com valores de um tipo enumerado, os valores devem ser especificados em minúsculas. Um valor de tipo enumerado é um valor de uma lista especificada de valores permitidos; por exemplo: o atributo align tem estes valores permitidos: center, justify, left e right.

Impõe o uso de minúsculas para os valores de tipos enumerados no código que gera e ao limpar o XHTML.

Todos os elementos de estilo e script devem ter um atributo type. (O atributo type do elemento de script é exigido desde o HTML 4, quando o atributo language foi reprovado.)

Define os atributos type e language nos elementos de script, e o atributo type nos elementos de estilo, no código que gera e ao limpar o XHTML.

Todos os elementos img e area devem ter um atributo alt.

Define esses atributos no código que gera e, ao limpar o XHTML, reporta os atributos alt


XML e XHTML




Para determinados estilos CSS, um agente de usuário HTML (como um navegador da Web) pode produzir resultados visuais ou auditivos diferentes daqueles produzidos por um agente de usuário XML. Abaixo são apresentadas algumas regras que visam a reduzir essas discrepâncias:

l Utilize minúsculas para nomes de elementos e atributos em folhas de estilos CSS.

O Dreamweaver impõe o uso de minúsculas para nomes de atributos e elementos de estilo em um documento XHTML, independentemente das preferências do usuário, no código que gera e ao limpar o XHTML.

l Os analisadores HTML inferem o elemento tbody, mas os analisadores XML não. Portanto, se for definido um estilo tbody, adicionar o elemento tbody às suas tabelas.

l A CSS define regras distintas de conformidade para documentos HTML e XML; por isso, deve-se levar em consideração que as regras de HTML se aplicam a um documento XHTML fornecido como HTML e que as regras de XML se aplicam a um documento XHTML fornecido como XML.

Nota: Em documentos que especificam o espaço para nome XHTML, espera-se que navegadores e outros agentes de usuário continuem reconhecendo os atributos class e id como um atributo do tipo ID. Portanto, é possível continuar utilizando a sintaxe abreviada “.” para fazer referência a uma classe CSS de um seletor (por exemplo: P.note) e utilizar a sintaxe de seletor abreviada “#” mesmo que o agente de usuário não leia o arquivo DTD.


XML e XHTML



ausentes.




Esta seção descreve como tornar um novo documento compatível com XHTML e como tornar um documento HTML existente compatível com XHTML.

Para criar um novo documento compatível com XHTML:

1. Escolha Arquivo > Novo.

A caixa de diálogo Novo documento é exibida.

2. Escolha um tipo de documento. 3. Selecione a opção Tornar o documento compatível com XHTML. 4. Clique em OK.

Para criar documentos compatíveis com XHTML como padrão:

1. Escolha Editar > Preferências e selecionar a categoria Novo documento. 2. Na categoria Novo documento, escolher um tipo de documento e selecionar a opção

Tornar o documento compatível com XHTML. 3. Clique em OK.

Para tornar um documento HTML existente compatível com XHTML:

Abra um documento.

l Para um documento sem molduras, escolher Arquivo > Converter > XHTML. l Para um documento com molduras, selecione uma moldura e escolher Arquivo >

Converter > XHTML. Para converter todo o documento, repetir esta etapa para cada documento com moldura e conjuntos de molduras.

Nota: É imposs ível converter uma instância de um modelo porque ela deve ter sido criada na mesma linguagem que o modelo no qual se baseia. Por exemplo: uma instância de um modelo XHTML sempre será uma instância XHTML, uma instância de um modelo HTML sempre será uma instância HTML e não poderá ser convertida para XHTML ou para qualquer outra linguagem.


XML e XHTML



Como utilizar o depurador JavaScript

O depurador JavaScript ajuda a isolar erros no código JavaScript do cliente. É possível escrever o código na visualização do código (ou no inspetor de código) e, em seguida, executar o depurador para verificar se há erros lógicos e de sintaxe no código. Se a página apresentar um ou mais erros de sintaxe, o navegador exibirá uma mensagem de erro; se a página contiver um



erro lógico, ela funcionará incorretamente, mas o navegador não exibirá uma mensagem de erro.

É possível utilizar o depurador JavaScript com o Microsoft Internet Explorer e o Netscape Navigator 4.0 (mas não com o Netscape Navigator 6.0).

Inicialmente, o depurador verifica se há erros de sintaxe no código e, em seguida, é executado com o navegador para auxiliar na identifica ção dos erros lógicos. Se houver erros lógicos, é possível utilizar a caixa de diálogo Depurador JavaScript para examinar as variáveis e propriedades do documento enquanto o programa está em execução. É possível definir pontos de interrupção (semelhantes a instruções de alerta) no código a fim de interromper a execução do programa e exibir os valores dos objetos e propriedades JavaScript em uma lista de variáveis. Também é possível avançar até a próxima instrução ou até uma chamada de função para examinar a alteração nos valores de variável.


l Como executar o depurador JavaScript l Como localizar erros de sintaxe l Como localizar e corrigir erros lógicos l Definição de pontos de interrupção l Como analisar o código l Como examinar e editar valores de variáveis

Como executar o depurador JavaScript

Depois de escrever o código JavaScript, é possível iniciar o depurador JavaScript para verificar se há erros no código. Inicialmente, o depurador verifica os erros de sintaxe e, em seguida, abre a página no navegador para que o usuário possa verificar se há erros lógicos.

Para iniciar a depuração:

1. Escolha Arquivo > Depurar no navegador e, em seguida, selecione um navegador na lista.

No Windows, escolher o Internet Explorer ou o Netscape Navigator.

Se o depurador encontrar um erro de sintaxe, interromperá a execução e listará o erro na janela Erros de sintaxe JavaScript. Para obter mais informações, veja Como localizar erros de sintaxe.

2. Se estiver utilizando o Netscape Navigator, clique em OK na caixa de advertência do depurador e, em seguida, clique em Conceder na caixa de di álogo Segurança Java.

Nota: Se o usuário já tiver aceito um certificado de segurança da Macromedia, talvez a caixa de diálogo Segurança Java não seja exibida.

3. (Apenas no Windows) Se estiver utilizando o Internet Explorer, clique em Sim na caixa de diálogo Segurança Java e clique em OK na caixa de advertência do depurador.

Nota: A caixa de diálogo de segurança é necessária porque o depurador utiliza um



protocolo de Internet para se conectar com o navegador – na verdade, ele não efetua uma conexão de rede nem se conecta a um servidor de Internet.

A caixa de diálogo Depurador JavaScript é exibida com a janela do navegador. O depurador interrompe a operação automaticamente na primeira linha de código.

A figura abaixo mostra a barra de ferramentas da caixa de diálogo Depurador JavaScript:

Para executar o depurador:

Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Executar.

Para interromper a execução do depurador:

Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Parar a depuração. A caixa de diálogo Depurador JavaScript é fechada.


Como localizar erros de sintaxe

Como localizar e corrigir erros lógicos

Definição de pontos de interrupção

Como analisar o código

Como examinar e editar valores de variáveis

Como localizar erros de sintaxe

Se o depurador encontrar erros de sintaxe em uma página, ele interromperá sua execução e listará os erros na caixa de diálogo Erros de sintaxe JavaScript, conforme mostra a figura abaixo:



Para exibir a descri ção do erro:

Selecione um erro na caixa de diálogo Erros de sintaxe JavaScript. Uma descrição do erro é exibida na caixa Descrição detalhada.

Para ter acesso ao erro selecionado no código, seguir um dos procedimentos abaixo:

l Clique duas vezes no erro. l Clique em Ir para a linha.

O código é realçado na visualização do código ou, se a visualização do código não estiver aberta, no inspetor de c ódigo.





Ao iniciar o depurador, a caixa de di álogo Depurador JavaScript é aberta e interrompe a execução do navegador na primeira linha do c ódigo. É possível definir pontos de interrupção adicionais em qualquer linha do código. O depurador interrompe a execução do código em cada ponto de interrupção, possibilitando examinar os valores dos objetos e das propriedades JavaScript no painel da lista de variáveis.



Depois que o depurador pára em um ponto de interrupção, é possível analisar o código (executar uma instrução por vez). Este procedimento permite verificar se o programa é executado da forma como deveria. O depurador pode analisar até mesmo código vinculado. Por exemplo: se o código contiver um link para um arquivo de origem, o depurador analisará o arquivo de origem e o exibirá na caixa de di álogo Depurador JavaScript. À medida que avança na análise do código, é possível acompanhar as alterações nos valores das variáveis no programa.







Um ponto de interrupção indica um ponto do código no qual se deseja interromper a execução do programa. Ao definir um ponto de interrupção, ele é marcado com um pequeno ponto vermelho na margem esquerda da caixa de diálogo Depurador JavaScript. Quando a execu ção do programa é interrompida no ponto de interrupção, uma pequena seta é exibida sobre o ponto, e o usuário pode examinar os objetos e as propriedades existentes neste ponto. Com



isso, é possível identificar rapidamente a origem do problema no código JavaScript.

Os pontos de interrupção podem ser definidos apenas no código JavaScript (entre as tags script) ou em uma linha com um manipulador de evento. Se for definido um ponto de interrupção em outro lugar, o Dreamweaver automaticamente o definirá na próxima linha válida de código (ou colocará o ponto de inserção nesta linha se ela já tiver um ponto de interrupção definido). Se não houver linhas v álidas nas quais o ponto de interrupção possa ser definido, será emitido um alerta sonoro.

Para definir um ponto de interrupção:

1. Na caixa de diálogo Depurador JavaScript, coloque o ponto de inserção na linha em que deseja definir o ponto de interrupção.

2. Na barra de ferramentas, clique no botão Definir/remover o ponto de interrupção. 3. Para remover o ponto de interrupção, clique novamente em Definir/remover o ponto de

interrupção.

Para remover todos os pontos de interrupção, seguir um dos procedimentos abaixo:

l Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Remover todos os pontos de interrupção.

l Na visualização do código (ou no inspetor de código), escolher Editar > Remover todos os pontos de interrupção.







É possível “analisar” o código a executar as instruções uma de cada vez e observar os resultados. Por exemplo: é possível analisar uma condição if para verificar se o programa pára na primeira linha da instrução condicional ou na próxima linha executável após a instrução if.

Quando o depurador pára em uma instrução com uma chamada de função, é possível verificar a função para se certificar de que será executada corretamente. Se a fun ção estiver correta, é possível determinar que o depurador execute uma depuração circular até que a função seja retornada. A execução do programa será novamente interrompida na próxima instrução após o local indicado da chamada de função. Se o usuário tentar depurar uma instrução que contém uma função JavaScript não-padronizada, o depurador JavaScript executará a depuração parcial.

Para efetuar a depuração parcial de uma instrução:

Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração parcial.



Quando o programa para em qualquer instrução (inclusive naquelas com uma chamada de função), é possível efetuar a depuração parcial da instrução para continuar e interromper o processo antes da próxima instrução.

Para efetuar a depuração total de uma função:

Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração total.

Para efetuar a depuração circular de uma função:

Na parte superior da caixa de diálogo Depurador JavaScript, clique no botão Depuração circular.

Também é possível utilizar a Depuração circular quando o depurador está em uma função definida pelo usuário. A depuração circular faz com que as instruções restantes na definição da função sejam executadas. O depurador faz uma pausa na instrução seguinte.







Para verificar os valores das variáveis à medida que examina o código, utilizar o painel da lista de variáveis, localizado na parte inferior da caixa de diálogo Depurador JavaScript. Ao adicionar uma variável, seu nome é exibido na coluna à esquerda; a coluna à direita exibe seu valor atual quando o programa interrompe a execução em um ponto de interrupção ou depois que o usuário efetua a depuração total do c ódigo.

A figura abaixo mostra o valor atual de diversas variáveis:



Para adicionar uma variável à lista de variáveis, seguir um dos procedimentos abaixo:

l Selecione o nome da vari ável na seção do código da caixa de diálogo Depurador JavaScript. Clique no botão de adição (+) e pressionar a tecla Enter.

l Clique no botão de adição (+), digite o nome da variável a ser examinada e pressionar a tecla Enter.

Os valores são exibidos ao lado de cada variável à medida que o código é examinado. Se a variável for um objeto com propriedades, é possível expandi-la para exibir as propriedades e os valores correspondentes. Para expandir a vari ável, clique no botão de adição (+) exibido ao lado da variável na lista. A variável expandida se fecha automaticamente sempre que o código é examinado.

Para remover uma variável da lista:

1. Selecione o item na lista de variáveis. 2. Clique no botão com o sinal de subtração (-).

Para editar um valor:

1. Selecione o item na lista de variáveis. 2. Clique no valor da lista de variáveis. 3. Na caixa de texto que é exibida, digite um novo valor.








Como utilizar o depurador de ColdFusion

Ao desenvolver aplicativos com o Macromedia ColdFusion, é possível configurar o ColdFusion para exibir informações em um navegador que ajudarão a depurar esses aplicativos. Por exemplo: se uma página contiver um erro, o ColdFusion exibirá as poss íveis causas do erro na parte inferior de uma página ColdFusion quando a página for aberta em um navegador. Se você é um programador de ColdFusion e está utilizando o Macromedia ColdFusion MX como servidor de teste Dreamweaver, é possível exibir essas informações e corrigir a página sem sair do Dreamweaver.

Nota: Este recurso não conta com suporte no sistema operacional Macintosh. Os programadores de Macintosh podem utilizar o comando Visualizar no navegador (F12) para



abrir uma página ColdFusion em um navegador distinto. Se a página contiver erros, informações sobre as possíveis causas do erro serão exibidas na parte inferior da página.

Antes de começar, certifique-se de que as definições de depuração estejam ativadas no Administrador de ColdFusion. Para obter mais informações, ver a ajuda do ColdFusion no Dreamweaver (Ajuda > Como utilizar o ColdFusion). Além disso, certifique-se de que o servidor de teste Dreamweaver esteja executando o ColdFusion MX. Para obter mais informações sobre o servidor de teste Dreamweaver, veja “Como especificar uma pasta para processar páginas dinâmicas”.

Para depurar uma página ColdFusion:

1. Abra a página ColdFusion no Dreamweaver. 2. Clique no ícone Depuração pelo servidor, na barra de ferramentas do documento (o ícone

com o globo e um raio) ou selecione Exibir > Depuração pelo servidor.

O Dreamweaver solicita o arquivo do servidor ColdFusion MX e o exibe em uma janela interna do navegador Internet Explorer. Se a página contiver erros, as possíveis causas dos erros serão exibidas na parte inferior da página.

Ao mesmo tempo, é exibido um painel Depuração pelo servidor. O painel fornece diversas informações úteis, como todas as páginas processadas pelo servidor para interpretar a página, todas as consultas SQL executadas na página e todas as variáveis do servidor e seus respectivos valores, se houver. O painel também fornece um resumo das execuções.

3. Se uma categoria Exceções for exibida no painel Depuração pelo servidor, clique no ícone de adição (+) para expandi-la.

A categoria Exceções é exibida quando o servidor encontra problemas na página. Expandir a categoria para obter mais informações sobre o problema.

4. Na coluna Local do painel Depuração pelo servidor, clique na URL da página para abri-la na visualização do código e corrigi-la.

Se o Dreamweaver localizar a página, ela será aberta com a(s) linha(s) indicando o problema realçada(s). Se o Dreamweaver não conseguir localizar a página, ele solicitará a localização.

5. Corrija o erro, salve o arquivo no servidor e clique em Procurar.

O Dreamweaver processa a página no navegador interno novamente e atualiza o painel Depuração pelo servidor. Se não houver mais nenhum problema na página, a categoria Exceções não reaparecerá no painel.

6. Para sair do modo de depuração, alternar para a visualização do código (Exibir > Código) ou para a visualização do projeto (Exibir > Projeto).

Para assegurar que as informações de depuração sejam atualizadas todas as vezes em que uma página for exibida no navegador interno, certifique-se de que o Internet Explorer verifica se há versões mais recentes do arquivo sempre que este é solicitado. No Internet Explorer, escolher Ferramentas > Opções da Internet, selecionar a guia Geral e clique no botão Configurações, exibido na área Arquivos de Internet temporários. Na caixa de diálogo Defini ções, selecionar a opção “A cada visita à página”.



Referência

Esta seção contém informações sobre a caixa de diálogo apresentada neste capítulo.

Definição das opções do Depurador JavaScript

O objetivo do depurador é isolar erros no código JavaScript do cliente.

Tarefas






Edição do código na visualização do projeto

Embora o Macromedia Dreamweaver MX permita criar e editar páginas da Web visualmente sem se preocupar com o código-fonte adjacente, algumas vezes é necessário editar o código para maior controle ou para solucionar problemas na página da Web.

Por exemplo: suponha que você selecionou um texto no documento e aplicou uma nova fonte, mas esse procedimento afetou somente metade da frase. Ao observar o código, você percebe que a tag de fechamento está no meio da frase. Movendo a tag para o final da frase, o problema é resolvido.

Este capítulo destina-se às pessoas que preferem trabalhar na visualização do projeto, mas também desejam ter acesso rápido ao código. O Dreamweaver permite editar o código e trabalhar na visualização do projeto ao mesmo tempo.

O capítulo contém os tópicos a seguir:

l Edição do código com o inspetor de propriedades l Edição do código com um editor de tags

l Edição de códigos com o Quick Tag Editor l Edição do código com o seletor de tags l Edição de scripts l Como trabalhar com inclusões do servidor

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

O inspetor de propriedades pode ser usado para verificar e editar os atributos de texto ou dos objetos em uma página.

Para utilizar o inspetor de propriedades:

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

O inspetor de propriedades referente ao texto ou objeto é exibido abaixo da janela do documento. Se o inspetor de propriedades não estiver visível, selecione Janela > Propriedades.

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

Edição do código com um editor de tags

É possível utilizar um editor de tags para inspecionar e editar os atributos de objetos de uma página.

Para utilizar um editor de tags:

1. Clique com o botão direito do mouse no objeto da página e escolha Editar tag no menu pop-up.

O editor de tags desse objeto é exibido.

2. Faça alterações nos atributos do objeto e clique em OK.

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

Utilize o Quick Tag Editor para inspecionar e editar tags HTML rapidamente sem sair da



visualização do projeto. Para abrir o Quick Tag Editor, pressione as teclas Control + T.


l Sobre o Quick Tag Editor l Como inserir uma tag HTML com o Quick Tag Editor l Edição de uma tag HTML com o Quick Tag Editor l Como aplicar HTML a uma seleção com o Quick Tag Editor l Como utilizar o menu de sugestões

Sobre o Quick Tag Editor

O Quick Tag Editor dispõe de três modos:

l O modo Inserir HTML , utilizado para inserir o novo código HTML. l O modo Editar a tag, utilizado para editar uma tag existente. l O modo Colocar a tag ao redor, utilizado para colocar uma nova tag ao redor da seleção

atual.

O modo em que o Quick Tag Editor será exibido dependerá da seleção na opção Visualização de projeto. Nos três modos, as operações básicas do Quick Tag Editor são as mesmas: abrir o editor, digite ou editar as tags e os atributos e fechar o editor.

É possível navegar através dos vários modos clicando em Control+T no Windows enquanto o Quick Tag Editor estiver ativo.

Se for utilizado qualquer HTML inválido no Quick Tag Editor, o Dreamweaver tentará corrigi-lo, inserindo aspas de finalização e sinais de maior, onde for necessário.

Para executar uma edição de HTML mais abrangente, utilizar a visualização do código. Para obter mais informações, veja Codificação no Dreamweaver.


Como inserir uma tag HTML com o Quick Tag Editor

Edição de uma tag HTML com o Quick Tag Editor

Como aplicar HTML a uma seleção com o Quick Tag Editor

Como utilizar o menu de sugestões




Utilize o Quick Tag Editor para inserir uma tag HTML no documento.

Para inserir uma tag HTML com o Quick Tag Editor:

1. Na visualização do projeto, clique na página para colocar o ponto de inserção no local onde deseja inserir o código.

2. Pressione Control + T.

O Quick Tag Editor se abre no modo de inserção de HTML.

3. Digite a tag HTML e pressione Enter.

A tag é inserida no código.

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







Utilize o Quick Tag Editor para editar uma tag HTML no documento.

Para editar uma tag HTML com o Quick Tag Editor:

1. Selecione um objeto na visualização do projeto.

A tag a ser editada também pode ser selecionada no seletor de tags, na parte inferior da janela do documento. Para obter mais informações, veja Edição do código com o seletor de tags.

2. Pressione Control + T.

O Quick Tag Editor se abre no modo Editor de tag.

3. Digite novos atributos, edite os já existentes ou edite o nome da tag. 4. Pressione a tecla Tab para avançar de um atributo ao outro e pressione Shift+Tab para

voltar.



Por padrão, as alterações são aplicadas ao documento pressionando-se Tab ou Shift+Tab. Para desativar as atualizações automáticas, selecione Editar > Preferências > Quick Tag Editor. A caixa de diálogo Preferências do Quick Tag Editor é exibida. Desmarque a opção Aplicar as modificações durante a edição e clique em OK. Para obter mais informações, veja Definição das preferências do Quick Tag Editor.

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







Utilize o Quick Tag Editor para incluir uma seleção em seu documento com tags HTML de abertura e fechamento.

Como aplicar HTML a uma seleção com Quick Tag Editor:

1. Selecione um objeto ou texto não formatado na visualização do projeto.

Se for selecionado um texto ou objeto que inclua uma tag HTML de abertura ou finalização, o Quick Tag Editor será aberto no modo Editar a tag.

2. Pressione as teclas Control + T ou clique no botão Quick Tag Editor, no inspetor de propriedades.

O Quick Tag Editor se abre no modo Colocar a tag ao redor.

3. Digite uma única tag de abertura, como <font="verdana"> e pressione Enter.

A tag é inserida no início da seleção atual e a tag de finalização correspondente é colocada no final.

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



No Quick Tag Editor, é possível acessar um menu de sugestões de atributos que lista todos os atributos válidos da tag que está sendo editada ou inserida. Se o Dreamweaver não reconhecer a tag que estiver sendo editada, o menu de sugestões apresentará todos os atributos que o Dreamweaver reconhece para qualquer tag.

Também é possível desativar o menu de sugestões ou ajustar o intervalo de exibição antes do menu pop-up no Quick Tag Editor.

Para exibir uma lista de atributos válidos para uma tag, interromper a opera ção por alguns segundos e editar um nome de atributo no Quick Tag Editor. É exibido um menu de sugestões listando todos os atributos válidos para a tag que está sendo editada.

Utilize o menu de sugestões como segue:

l Ao iniciar a digitação de um nome de atributo, o menu de sugestões realça o primeiro nome de atributo começa com as letras digitadas.

l Para mover o realce para cima ou para baixo no menu, utilize as teclas de seta para cima e seta para baixo ou a barra de rolagem.

l Para selecionar o nome do atributo realçado, pressione Enter. Como alternativa, clique duas vezes em um nome de atributo no menu.

l Para ignorar o menu de sugestões sem selecionar uma entrada, pressione a tecla Escape ou continuar digitando.

Quando ocorre uma pausa durante a digitação ou edição de um nome de tag, é exibido um menu de sugestões semelhante listando nomes de tags em vez de nomes de atributos.

Para desativar o menu de sugestões ou alterar o intervalo de exibição:

1. Escolha Editar > Preferências e selecionar Quick Tag Editor.

A caixa de diálogo Preferências do Quick Tag Editor é exibida.

2. Para desativar o menu de sugestões, desmarque a opção Ativar a sugestão de tags. 3. Para alterar o intervalo de exibição do menu, ajuste o botão deslizante Atraso.

Para obter mais informações, veja Definição das preferências do Quick Tag Editor.

4. Clique em OK.






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

É possível utilizar o seletor de tags para selecionar, editar ou remover tags sem sair da visualização do projeto. O seletor de tags está localizado na barra de status, na parte inferior da janela do documento, e consiste em uma série de tags, como a seguir.

Para editar um tag:

1. Clique no documento.

As tags aplicáveis no ponto de inserção são exibidas no seletor de tags.

2. Clique com o botão direito do mouse em uma tag do seletor de tags.

O menu pop-up é exibido.

3. Selecione Editar a tag no menu.

O Quick Tag Editor é exibido. Para obter mais informações, veja Edição de uma tag HTML com o Quick Tag Editor.

Para remover uma tag:



2. Clique com o botão direito do mouse em uma tag do seletor de tags.

O menu pop-up é exibido.

3. No menu, selecione Remover a tag.

Para selecionar um objeto representado por uma tag:



2. Clique em uma tag no seletor de tags.

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

Dica: Utilize esta técnica para selecionar linhas de tabelas (tags tr) ou células (tags td) individualmente.



Edição de scripts

É possível trabalhar com JavaScripts e VBScripts de cliente na visualização do código e do projeto. Esta seção contém os tópicos a seguir:

l Como gravar um script de cliente na visualização do projeto l Como vincular a um arquivo de script externo l Edição de um script na visualização do projeto

Como gravar um script de cliente na visualização do projeto

É possível gravar um JavaScript ou VBScript na página sem sair da visualização do projeto. Antes de começar, certifique-se de que o Dreamweaver exibe marcadores de script na página. Para exibir os marcadores de script, selecione Exibir > Auxílios visuais > Elementos invis íveis.

Para inserir um script de cliente na visualização do projeto:

1. Coloque o ponto de inserção no local onde deseja inserir o script. 2. Selecione Inserir > Objetos de script > Script.

A caixa de diálogo Script é exibida.

3. Preencha a caixa de diálogo e clique em OK.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Script.


Como vincular a um arquivo de script externo

Edição de um script na visualização do projeto


É possível criar um link no documento para um arquivo de script externo sem sair da visualização do projeto. Antes de começar, certifique-se de que o Dreamweaver exibe marcadores de script na página. Para exibir os marcadores de script, selecione Exibir > Auxílios visuais > Elementos invis íveis.



Para vincular a um arquivo de script externo:

1. Coloque o ponto de inserção no local onde deseja inserir o script. 2. Selecione Inserir > Objetos de script > Script.

A caixa de diálogo Script é exibida.

3. Clique em OK sem inserir nada na caixa de texto Conteúdo. 4. Selecione o marcador de script na visualização do projeto da janela do documento. 5. No inspetor de propriedades, clique no ícone de pasta para procurar e selecionar o

arquivo de script externo ou digitar o nome do arquivo na caixa Origem.





É possível editar um script sem sair da visualização do projeto. Antes de começar, certifique-se de que o Dreamweaver exibe marcadores de script na página. Para exibir os marcadores de script, selecione Exibir > Auxílios visuais > Elementos invis íveis.

Para editar o script na visualização do projeto:

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

Se tiver sido criado um link com um arquivo de script externo, o arquivo será aberto automaticamente na visualização do código, onde é possível fazer edições.

Nota: Se não houver um código entre as tags de script, a caixa de diálogo Propriedades do roteiro será aberta mesmo que haja um link para um arquivo de script externo.

3. Faça as edições no script e clique em OK.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Propriedades do roteiro.






Como trabalhar com inclusões do servidor

As inclusões do servidor são instru ções feitas ao servidor da Web para incluir um arquivo especificado em uma página da Web antes de disponibilizá-la ao navegador. É possível utilizar o Dreamweaver para inserir inclusões do servidor nas páginas, editar as inclusões ou visualizar as páginas contendo inclusões.


l Sobre as inclusões do servidor l Como inserir uma inclusão do servidor l Edição do conteúdo de uma inclusão do servidor

Sobre as inclusões do servidor

Ao abrir um documento que está em um servidor da Web, o servidor processa as instruções de inclusão e cria um novo documento no qual tais instruções são substituídas pelo conteúdo do arquivo incluído. O servidor envia esse novo documento ao navegador. No entanto, ao abrir um documento local diretamente em um navegador, não há nenhum servidor para processar as instruções de inclusão nesse documento. Por isso, o navegador abre o documento sem processar essas instruções e o arquivo que deveria ser incluído não é exibido no navegador. Desse modo, sem utilizar o Dreamweaver, pode ser difícil visualizar os arquivos locais e verificar a aparência que terão para os visitantes após serem colocados no servidor.

Com o Dreamweaver, no entanto, é possível visualizar os documentos exatamente como eles serão exibidos depois de inseridos no servidor, tanto na visualização do projeto quanto na visualização no navegador.

A colocação de uma inclusão do servidor em um documento insere uma referência a um arquivo externo. O conteúdo do arquivo especificado não é inserido no documento atual. O Dreamweaver exibe o conteúdo do arquivo externo na visualização do projeto, facilitando a criação de páginas.

É imposs ível editar o arquivo incluído diretamente em um documento. Para editar o conteúdo de uma inclusão do servidor, é necessário editar diretamente o arquivo a ser incluído. Todas as alterações feitas no arquivo externo são automaticamente refletidas em todos os documentos que incluírem tal arquivo.

Há dois tipos de inclusões do servidor: Virtual e Arquivo. A escolha a ser feita depende do tipo de servidor da Web utilizado:

l Se for um servidor Apache da Web, escolher Virtual (esta é a opção padrão no Dreamweaver). No Apache, a opção Virtual funciona em todos os casos, enquanto Arquivo funciona apenas em alguns.

l Se o servidor for um Microsoft Internet Information Server (IIS), escolha Arquivo (virtual



funciona com o IIS somente em circunstâncias específicas). Infelizmente, o IIS não permite incluir um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a não ser que algum software especial tenha sido instalado no servidor. Se houver necessidade de incluir um arquivo de uma pasta que está em uma posição superior na hierarquia de pastas do servidor IIS, perguntar ao administrador do sistema se o software necessário está instalado.

l Para outros tipos de servidores ou caso desconheça o tipo de servidor em uso, pergunte ao administrador do sistema qual opção deverá ser utilizada.

Alguns servidores estão configurados para examinar todos os arquivos, verificando se eles contêm inclusões do servidor. Outros servidores estão configurados para examinar somente os arquivos de uma determinada extensão, como .shtml, .shtm ou .inc. Se uma inclusão do servidor não estiver funcionando, pergunte ao administrador do sistema se é necessário utilizar uma extensão especial no nome do arquivo que utiliza a inclusão (por exemplo: se o arquivo é denominado canoe.html, talvez seja necessário renomeá-lo como canoe.shtml). Se desejar que os arquivos permaneçam com as extensões .html ou .htm, solicite ao administrador do sistema para configurar o servidor para examinar todos os arquivos (não apenas os arquivos com uma determinada extensão) quanto à ocorrência de inclusões do servidor. Todavia, a análise de um arquivo quanto à ocorrência de inclusões do servidor é mais demorada. Portanto, as páginas que o servidor analisa são fornecidas um pouco mais lentamente do que as demais. Em função disso, alguns administradores de sistema não disponibilizam a opção de análise de todos os arquivos.


Como inserir uma inclusão do servidor

Edição do conteúdo de uma inclusão do servidor


É possível utilizar o Dreamweaver para inserir inclusões do servidor em uma página.

Para inserir uma inclusão do servidor:

1. Escolha Inserir > Objetos de script > Inclusão do servidor. 2. Na caixa de diálogo que é exibida, procure e selecione um arquivo.

Para alterar o arquivo a ser incluído:

1. Selecione a inclusão do servidor na janela do documento. 2. Abra o inspetor de propriedades (Janela > Propriedades). 3. Siga um dos procedimentos abaixo:

¡ Clique no ícone de pasta, procure e selecione um novo arquivo a ser incluído. ¡ Na caixa de texto, digite o caminho e o nome do novo arquivo a ser incluído.







É possível utilizar o Dreamweaver para editar inclusões do servidor. Para editar o conteúdo associado ao arquivo incluído, é necessário abrir o arquivo.

Para editar uma inclusão do servidor:

1. Selecione a inclusão do servidor na visualização do projeto ou na visualização do código e, no inspetor de propriedades, clique em Editar.

O arquivo incluído é aberto em uma nova janela do documento.

2. Edite o arquivo e salve -o em seguida.

As alterações são imediatamente refletidas no documento atual e em qualquer documento subseqüente que for aberto e inclui esse arquivo.




Referência

Esta seção fornece informações sobre as caixas de diálogo e inspetores de propriedade apresentados neste capítulo.

Definição das preferências do Quick Tag Editor

O objetivo desta caixa de diálogo é permitir controlar se as edi ções feitas com o Quick Tag Editor são automaticamente atualizadas na janela Documento. Também permite controlar o menu de sugestões do Quick Tag Editor.

Procedimento

1. Para atualizar o documento automaticamente à medida que navega entre os atributos no



modo Editar a tag, selecione a opção Aplicar as modificações durante a edição.

Se esta opção for desativada, é necessário pressionar Enter para aplicar as alterações ao documento (várias alterações aplicadas pressionando-se a tecla Enter são exibidas como uma única etapa no painel Histórico e podem ser desfeitas com uma única operação Desfazer).

Nota: Esta opção é ignorada nos modos Inserir HTML e Colocar tag ao redor. Em ambos os modos, sempre é necessário pressionar Enter para aplicar as alterações ao documento.

2. Para desativar o menu de sugestões, desmarque a opção Ativar a sugestão de tags. 3. Para ajustar o intervalo de abertura dos menus pop-up no Quick Tag Editor, ajuste o

botão deslizante Atraso.

Tópico relacionado

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

Definição das opções da caixa de diálogo Script

O objetivo desta caixa de diálogo é inserir scripts de cliente no código.

Procedimento

1. Escolha a linguagem de script no menu pop-up Linguagem.

Se utilizar o JavaScript e não tiver certeza quanto à versão, escolher JavaScript em vez de JavaScript1.1 ou JavaScript1.2.

2. Digite o código do script na caixa de texto Conteúdo.

Não é necessário incluir as tags script de abertura e de fechamento.

Tópico relacionado

Edição de scripts

Definição das opções da caixa de diálogo Propriedades do roteiro

O objetivo desta caixa de diálogo é modificar um script na página.

Procedimento



1. Na caixa de texto Linguagem, especifique a linguagem do script: JavaScript ou VBScript. 2. Na caixa de texto Tipo, especifique o tipo de script: cliente ou servidor. 3. Na caixa de texto Origem, especifique um arquivo de script vinculado externamente.

Clique no ícone de pasta para escolher o arquivo ou digitar o caminho correspondente.

4. Na caixa de texto Script, edite ou grave o script. 5. Clique em OK para aplicar as edições.

Tópico relacionado


Definição das opções do inspetor de propriedades do script

O objetivo deste inspetor de propriedades é inspecionar e modificar um script na página.

Procedimento

1. Na caixa de texto Linguagem, especifique a linguagem do script: JavaScript ou VBScript. 2. Na caixa de texto Tipo, especifique o tipo de script: cliente ou servidor. 3. Na caixa de texto Origem, especifique um arquivo de script vinculado externamente.

Clique no ícone de pasta para escolher o arquivo ou digitar o caminho correspondente.

4. Clique em Editar para modificar o script.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Propriedades do roteiro.

Tópico relacionado


Definição das opções do inspetor de propriedades da inclusão do servidor

O objetivo deste inspetor de propriedades é inspecionar e modificar inclusões do servidor na visualização do projeto.

Procedimento

1. Para alterar o arquivo a ser incluído no documento, siga um dos procedimentos abaixo: ¡ Clique no ícone de pasta, procure e selecione um novo arquivo a ser incluído.



¡ Na caixa de texto, digite o caminho e o nome do novo arquivo a ser incluído. 2. Para editar a inclusão do servidor, clique no botão Editar, edite o arquivo que é aberto em

uma nova janela do documento salve-o em seguida.

As alterações são imediatamente refletidas no documento atual e em qualquer documento subseqüente que for aberto e inclui esse arquivo.





Definição das opções do inspetor de propriedades de tag do ColdFusion

O objetivo deste inspetor de propriedades é inspecionar e modificar o markup do ColdFusion na visualização do projeto.

Procedimento

1. Clique no botão Atributos para editar os atributos da tag ou para adicionar novos. 2. Se a tag tiver algum conteúdo entre as tags de abertura e fechamento, clique no botão

Conteúdo para editá-lo.

O botão Conteúdo será exibido apenas se a tag selecionada não estiver vazia (ou seja, se ela tiver uma tag de abertura e de fechamento).

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

Definição das opções do inspetor de propriedades de script ASP

O objetivo deste inspetor de propriedades é inspecionar e modificar scripts do servidor ASP na visualização do projeto.

Procedimento

1. Clique no botão Editar. 2. Edite o script de servidor ASP na caixa de di álogo que é exibida. 3. Clique em OK para aplicar as edições.



de 70Como trabalhar com códigos de página


5 Como trabalhar com codigos de pagina

Documents

Transcript of 5 Como trabalhar com codigos de pagina