Parte III Como trabalhar com códigos de página

Transcrição

1 Parte III Como trabalhar com códigos de página Parte III 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: Capítulo 12, Configuração do seu ambiente de codificação Capítulo 13, Codificação no Dreamweaver Capítulo 14, Otimização e depuração do código Capítulo 15, Edição do código na visualização do projeto

2

3 CAPÍTULO 12 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: Exibição do seu código, na página 185 Definição de preferências de visualização, na página 186 Definição de preferências de codificação, na página 187 Personalização de atalhos de teclado, na página 191 Definição de preferências de codificação, na página 187 Definição de preferências do Validador, na página 191 Gerenciamento de bibliotecas de tags, na página 192 Importação de tags personalizadas para o Dreamweaver, na página 195 Utilização de um editor de HTML externo com o Dreamweaver, na página 198 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. Observação: Visualização do código e inspetor de código compartilham a mesma funcionalidade. 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. 185

4 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, na página 190. 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, na página 187. Caso uma opção já marcada tenha sido selecionada, ela será desativada. Caso contrário, a opção será definida. 186 Capítulo 12

5 Definição de preferências de codificação É possível definir as preferências de codificação a seguir no Dreamweaver: 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, na página 187. 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, na página 189. 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, na página 189. 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, na página 189. 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, na página 190. Para definir preferências avançadas, utilizar o Editor de bibliotecas de tags (veja Gerenciamento de bibliotecas de tags, na página 192). 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, na página 189. 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. Configuração do seu ambiente de codificação 187

6 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. 188 Capítulo 12

7 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. 2 Ajuste qualquer uma destas definições da caixa de diálogo: 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 na ajuda do Dreamweaver (Ajuda > Como utilizar o Dreamweaver). Configuração do seu ambiente de codificação 189

8 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. 2 Ajuste qualquer uma destas definições da caixa de diálogo: A opção Ajustar as tags abertas e aninhadas incorretamente regrava as tags sobrepostas. Por exemplo: <b><i>text</b></i> é regravado como <b><i>text</i></b>. 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, na página 194. 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. 190 Capítulo 12

9 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, na página 56. 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. 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, na página 217). É 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. Observação: 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. Configuração do seu ambiente de codificação 191

10 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: Adição de bibliotecas, tags e atributos, na página 193 Edição de bibliotecas, tags e atributos, na página 194 Exclusão de bibliotecas, tags e atributos, na página 195 Veja também Importação de tags personalizadas para o Dreamweaver, na página Capítulo 12

11 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. Observação: Para importar uma tag, veja Importação de tags personalizadas para o Dreamweaver, na página 195. 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. Configuração do seu ambiente de codificação 193

12 Ediçã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. 194 Capítulo 12

13 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. Exclusão de bibliotecas, tags e atributos É 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. Esta seção contém os tópicos a seguir: Importação de tags de arquivos XML, na página 195 Importação de tags ASP.NET personalizadas, na página 196 Importação de tags JSP de um arquivo, na página 196 Importação de tags JSP de um servidor (web.xml), na página 197 Importação de tags JRun, na página 197 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. Configuração do seu ambiente de codificação 195

14 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, na página 144). 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. 196 Capítulo 12

15 6 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. 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. O prefixo é utilizado para identificar uma tag em uma página como parte de determinada biblioteca de tags. 7 Ao concluir as alterações, clique em OK para fechar o Editor de bibliotecas de tags. Configuração do seu ambiente de codificação 197

16 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. 198 Capítulo 12

17 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]. Configuração do seu ambiente de codificação 199

18 200 Capítulo 12