Visualização de código no Dreamweaver MX

Sem dúvida nenhuma o Dreamweaver é a melhor opção quando se deseja criar bons sites para Web. Ele vem conquistado cada vez mais a simpatia de usuários iniciantes e também dos 'experts' - afinal o Dreamweaver MX é capaz de criar páginas dinâmicas com as mais diferentes linguagens de um modo bastante simples. Tudo isso em uma interface WYSIWYG, em inglês "What-You-See-Is-What-You-Get" e em português "O que você vê é o que você tem". Deste modo, sites inteiros podem ser criados sem decorar dezenas de comandos.
Apesar de toda facilidade o Dreamweaver também oferece a opção de "Visualização de código". Neste tutorial será apresentado como otimizar o trabalho usando esse tipo de visualização, dando várias dicas e configurações que podem ser utilizadas para o trabalho mais agradável e eficiente.
Na versão MX o Dreamweaver tem um terceiro tipo de visualização: nela pode-se conferir a criação do site tanto no modo código como no modo projeto, usando uma "meia-tela":

A figura mostra um exemplo da visualização de "meia-tela" e também três opções de visualização realçadas com cores diferentes:

Em cinza: Modo de visualização de código. É nela que será baseado esse tutorial.
Em vermelho: Nessa opção vê-se as duas outras simultaneamente. Ela é a mais indicada para qualquer usuário (seja ele um iniciante ou um pouco mais experiente) pois os usuários que não têm muito conhecimento de HTML podem observar como é a estrutura dos códigos enquanto escrevem o site e os mais avançados podem fazer pequenas correções no código do site sem perder muito tempo.
Em verde: Visualização do Projeto. Devido à sua extrema facilidade, essa é a visualização mais usada.
Antes de tudo, são configuradas as opções de como o Dreamweaver tratará a visualização de código: no menu Editar -> Preferências -> Codificação por Cores, selecionar HTML como tipo de documento e  'Editar o esquema de cores':

No box de seleção são apresentados os tipos de TAGs e do lado esquerdo e do lado direito algumas opções para realçá-las. Logo abaixo você pode ver o exemplo de como ficará a visualização do Código: por padrão o Dreamweaver já tem um esquema de cores mas novos esquemas podem ser testados. Se ao terminar você desejar salvar as configurações, clique em 'OK' e caso você queira manter a configuração anterior, clique em 'CANCELAR'.
Selecionar 'Dicas de código', selecionar todas opções e programar o atraso para 0 (zero) segundo. Na categoria 'Formato do código', o Dreamweaver já tem ótimas configurações por default. Mas podem ser feitas algumas melhorias:

:: Diminuir o Tamanho do recuo para 1
:: Setar o tamanho de tabulação para 2

As outras configurações já são as mais indicadas para uso - portanto não é aconselhável trocá-las.
Vá para a categoria 'Quick Tag Editor', selecione todas caixas e defina o atraso para 0.5 segundo. Ainda na caixa de 'Preferência', selecione a categoria 'Regravação de código' e marque todas as opções - EXCETO a opção 'Remover as tags de finalização adicionais'. Depois que todas as preferências foram setadas, clique em OK.
Agora clique no menu 'Exibir' -> 'Auxílios visuais' e marque todas opções:

O Dreamweaver pode ser configurado para criar o código da página de diversas maneiras: para isso, no menu 'Editar' -> 'Biblioteca de tags'. Não é recomendável mexer nessa opção pois caso algo saia errado, a página poderá não ser exibida corretamente nos navegadores.
IMPORTANTE: Todas modificações de formato de código não afetarão documentos antigos. Para deixar os documentos já criados de acordo com essas novas configurações, faça o seguinte: com o documento aberto selecionar no menu 'Comandos' -> 'Aplicar' a formatação de origem.
Por último, serão apresentadas algumas dicas para edição de tags usando a Visualização de código. Para se criar uma nova tag os procedimentos são simples, ao digitar "<" e a primeira letra, um pequeno menu surgirá logo abaixo com todas as tags:

Pode-se continuar digitando normalmente a TAG e para escolher a tag que está em foco no menu basta você apertar a tecla TAB e inserir o ">" final: ao fazer isso, a tag de finalização surgirá. Depois disso podem ser editados todos atributos da tag usando o Editor de tags. A figura mostrará como se deve iniciar o editor de tags:

Nota-se que ao clicar com o botão direito do mouse na tag inicial, há uma opção de 'Editar tag': ao clicá-la aparecerá uma nova janela com todas as opções de atributos para a tag. Na imagem abaixo há um exemplo do 'Editor de tags' com a tag <iframe>:

Por esse editor (cuja existência é ignorada pela maioria dos usuários), todos atributos de uma tag são editados de forma fácil e direta. O editor pode ser acessado através do modo visualização de projeto; para isso clique no objeto que deseja que tenha sua tag editada e vá ao menu Modificar -> Editar tag.
As opções de busca do Dreamweaver também se estendem ao código fonte: utilize a opção de Pesquisa Editar -> Localizar e substituir ou simplesmente tecle CTRL+F:

No campo 'Procurar' , a opção 'Código-fonte' permitirá fazer buscas e substituições de forma rápida em todo o site - em toda uma pasta ou apenas no  documento. Para finalizar, este tutorial mostrará como "dar aquela enxugada" no documento, economizando segundos preciosos da conexão do visitante.
"Enxugando" o código
Depois de tanto trabalho na construção de um site é comum que existam muitas linhas de códigos inúteis - principalmente se esse documento foi importado de um editor de textos como o MS Word. Algumas dessas tags podem ser deletadas sem que a parte visual do site sofra alterações e algumas outras tags - principalmente as que setam o tipo e tamanho da fonte - podem ser agrupadas.
O Dreamweaver oferece uma pequena ferramenta para fazer essa tarefa de forma rápida e simples, a qual está presente no menu 'Comandos' e tem o título de "Limpar HTML". Ver figura abaixo:
Ao clicar sobre Limpar o HTML, uma nova janela se abrirá podendo escolher as "opções de limpeza". Todas as opções já marcadas são as ideais para uso:

Quando o código do site estiver totalmente pronto, a caixa 'Markup Especial do Dreamweaver' pode ser marcada para que se elimine todas as 'observações' do Dreamweaver (como por exemplo os itens de biblioteca e imagens de rastreamento). Se o HTML foi importado do Word, utilize a opção 'Limpar HTML do Word'. Todas opções restantes deverão permanecer da maneira apresentada e na seqüência, clique em OK.