O Dreamweaver é um ótimo editor WYSIWYG, mas se você não estiver interessado em escrever páginas da Web em um ambiente "o que você vê é o que obtém", ainda é possível usar o Dreamweaver, pois ele também é um ótimo editor de texto. Mas há muitos recursos que ficam de lado no editor de códigos do Dreamweaver, porque o foco principal está na parte "design view" ou no editor WYSIWYG do produto.
Como entrar na visualização de código do Dreamweaver
Se você nunca usou o Dreamweaver como um editor de HTML antes de nunca ter percebido os três botões na parte superior da página: "Código", "Dividido" e "Design". O Dreamweaver é inicializado por padrão na "Visualização de design" ou no modo WYSIWYG. Mas é fácil mudar para visualizar e editar o código HTML. Basta clicar no Código botão. Ou vá para o Visão menu e selecione Código.
Se você está apenas aprendendo a escrever HTML ou quer ter uma noção de como suas alterações afetarão seu documento, você pode abrir a visualização de código e a visualização de design ao mesmo tempo. A beleza deste método é que você pode editar em ambas as janelas também. Assim, você pode escrever o código da sua tag de imagem em HTML e, em seguida, usar a visualização de design para movê-la para outro local na página, arrastando e soltando.
Para ver os dois de uma vez, ou:
- Clique no Dividido botão (entre Código e desenhar).
- No Visão menu, selecione Código e Design.
Quando você estiver confortável usando o Dreamweaver para editar seu código HTML, poderá alterar suas preferências para abrir o Dreamweaver na visualização de código por padrão. A maneira mais fácil é salvar a visualização de código como um espaço de trabalho. O Dreamweaver será aberto no último espaço de trabalho que você estava usando. Se isso não acontecer, simplesmente vá para o menu Janela e escolha a área de trabalho desejada.
Opções de visualização de código
O Dreamweaver é tão flexível porque tem muitas maneiras de personalizá-lo e fazê-lo funcionar da maneira que você quer. Na janela de opções, há código colorido, formatação de código, dicas de código e opções de regravação de código que você pode ajustar. Mas você também pode alterar algumas opções especiais dentro da própria visualização de código.
Quando você está no modo de exibição de código, há um Opções de Visualização botão na barra de ferramentas. Você também pode ver as opções entrando no Visão menu e escolha Opções de visualização de código. As opções são:
- Quebra de linha - encapsula o código HTML para que você possa visualizá-lo sem rolar horizontalmente. Note que esta opção não insere nenhum retorno de carro no seu código, apenas exibe o código para facilitar a leitura.
- Números de linha - exibe números de linha ao longo do lado do código. Ele mostra um símbolo de quebra de linha para linhas que envolvem mais que a janela de visualização.
- Personagens escondidos - exibe caracteres especiais em vez de espaço em branco que seriam exibidos em uma página da web. Tal como um ponto substitui um espaço, uma dupla chevron substitui cada tabulação e um marcador de pontos ou de pilotos substitui cada quebra de linha.
- Destacar código inválido - destaca o HTML que está incorreto em amarelo. Se você selecionar a tag amarela, o Inspetor de propriedades lhe dará dicas sobre como corrigi-lo.
- Sintaxe Colorir - liga ou desliga a codificação por cores do seu código. Você muda as cores do seu código de cores na seção de colorir código das preferências.
- Recuo Automático - faz seu recuo de código automaticamente após um retorno de carro se o código acima dele for recuado. Você pode alterar o tamanho do recuo alterando o tamanho da tabulação na seção de formatação de código das preferências.
Edição de código HTML na visualização de código do Dreamweaver
É fácil editar o código HTML na visualização de código do Dreamweaver. Simplesmente comece a digitar seu HTML. Mas o Dreamweaver fornece alguns extras que o estendem além de um editor HTML básico. Quando você começa a escrever uma tag HTML, você digita <. Se você fizer uma pausa logo após esse caractere, o Dreamweaver mostrará uma lista de tags HTML. Estes são chamados de dicas de código. Para restringir a seleção, comece a digitar letras - o Dreamweaver restringirá a lista suspensa à tag que se ajusta ao que você está digitando.
Se você é novo em HTML, é possível percorrer a lista de tags HTML e escolher várias delas para ver o que elas fazem. O Dreamweaver continuará solicitando atributos assim que você digitar uma tag. Por exemplo, se você digitar <>, O Dreamweaver descerá para o Tag HTML, com as outras tags começando com o seguinte. Se você continuar digitando a letra m, O Dreamweaver irá reduzi-lo ao tag.
Mas as dicas de código não terminam nas tags. Você pode usar dicas de código para inserir:
- Atributos HTML
- Nomes de Classe e ID
- Propriedades CSS
Se as dicas de código não aparecerem, você pode Ctrl-barra de espaços (Windows) ou Cmd-barra de espaços (Macintosh) para que eles sejam exibidos. O motivo mais comum pelo qual uma dica de código pode não aparecer é se você mudou para uma janela diferente antes de terminar sua tag. Porque o Dreamweaver está desativando a digitação do personagem <, se você sair da janela e retornar, terá que reiniciar as dicas de código.
Você pode desativar o menu de dicas de código pressionando a tecla de escape.
Depois de digitar sua tag HTML de abertura, você precisará fechá-la. O Dreamweaver faz isso de uma maneira natural. Se você digitar o Fechar tags opção que melhor se adapte às suas necessidades.
Se você não estiver pronto para mudar para editar suas páginas em HTML, mas quiser ver o código como está escrito, tente o inspetor de código. Isso abre o código HTML em uma janela separada. Ele funciona exatamente como a visualização de código e, na verdade, é basicamente uma janela de visualização de código destacável para o documento atual.Para abrir o inspetor de código, vá para o Janela menu e escolha Inspetor de Código ou acertar o F10 tecla no seu teclado.
O Dreamweaver irá formatar o código HTML, no entanto, você gostaria que ele fosse exibido. Por exemplo, se você usar 3 espaços para recuar, mas nunca recuar tags IMG, poderá especificar essas informações de formatação nas opções de reconfiguração de código. Então você vai para o Comandos menu e escolha Aplicar formatação de origem. Essa é uma ótima maneira de obter código escrito por outra pessoa em um formato familiar para você.
Um recurso que muitos codificadores HTML não conhecem ou não usam é a capacidade de reduzir o código HTML. Isso não remove as tags do documento, mas apenas as remove da visualização para que elas não distraiam o que você está trabalhando. Para recolher seu código:
- Selecione a seção do código que você deseja ocultar.
- No Editar menu, escolha Recolher seleção de Colapso de Código submenu
Uma maneira mais fácil é selecionar o código e clicar nos ícones de recolhimento de código que aparecem na medianiz. Você também pode clicar com o botão direito no código selecionado e escolher Recolher seleção.
Se você quiser esconder tudo exceto o que é destacado, escolha Recolher Seleção Externa em qualquer um dos métodos acima.
Para expandir o código recolhido, basta clicar duas vezes nele. Isso abre o código e seleciona-o. Em seguida, você pode mover essa seleção ou excluí-la ou adicionar tags adicionais em torno dela.
Você pode usar o recurso Recolher e expandir o tempo todo em páginas em que não deseja editar o modelo externo. Basta selecionar a área de conteúdo que você deseja editar e recolher fora. Em seguida, escreva seu HTML. Você ainda pode ver a página em desenhar visualizar ou visualizá-lo em um navegador. O código recolhido não é removido do documento, simplesmente oculto da exibição. Você também pode usá-lo quando estiver trabalhando em uma série de itens. Quando você terminar um, colapse-o. Você sabe que está feito quando não há código mostrando.
