Painel CODE Dreamweaver MX

Neste tutorial estaremos aprendendo a trabalhar com o Painel CODE do Dreamweaver MX. Com certeza, este painel lhe poupará muito tempo e trabalho! Vejamos com mais detalhes do que se trata:

O que é Painel CODE ?
Bem, o painel CODE é uma painel do Dreamweaver MX que possui 3 "janelas", sendo elas:
Tag Inspector: Inspetor de Tags do site. Com ele pode-se acrescentar, deletar e editar tags
Snippets: Uma série de "Snippets" (códigos prontos) esperando para serem utilizados
Reference: Como o próprio nome já diz, é uma painel de Referência. Temos opções de referências de várias Linguagens, inclusive ASP/PHP.
Agora vamos deixar de "blá blá blá" e vamos logo começar a trabalhar com o tal do painel CODE. Abra o painel procedendo conforme indica a figura ou simplesmente apertando F9.

Você terá em sua tela um painel bastante simpático e principalmente útil, conforme indica a figura:

Perceba que temos as 3 janelas dentro de um mesmo painel. Esse mesmo painel nos oferece algumas opções de configurações conforme veremos a seguir:

Na imagem acima temos alguns itens numerados.Veja o significado de cada um deles:
1: Um painel que nos permite editar algumas opções, como por exemplo: "Editar", "Ajuda", "Maximizar Painel", "Fechar painel", "Remover Tags selecionadas" e assim por diante.

2: Botão que nos permite Atualizar a Janela Tag Inspector
3: Botão que nos permite editar a Tag. Veja:

Neste caso, estamos editando a Tag BgSound e sua "sub-tag" chamada Loop, que configura o Loop do som de fundo. Em value (marcado pelo quadrado vermelho) colocamos o valor do Loop que desejarmos e em Preview temos uma prévia do código! Super jóia não?! :)
Agora, vamos trabalhar/explorar um pouco mais esta janela chamada Tag Inspector.
Vamos supor que você queira modificar algumas propriedades do "corpo" de sua página, também conhecido como Body. Muito bem, abra o painel code e a janela Tag Inspector e em seguida, procure pela tag BODY.
Ao clicar na Tag BODY o Dreamweaver nos fornecerá todas as opções de configurações possíveis para esta TAG, cabendo a nós a tarefa de simplesmente alterar os valores de acordo com nossa conveniência. No exemplo da figura abaixo, estamos modificando a cor de fundo (bgcolor). Para isso, basta clicar em bgcolor e depois escolher a cor desejada. Perceba ainda que podemos alterar a cor dos links ativos (alink), o tamanho da margem esquerda (leftmargin) e assim por diante.
Para quem está bastante acostumado com código HTML e quer poupar um tempo considerável, este painel é mais do que aconselhado! É quase obrigatório!

Agora que você já sabe para que serve a Janela de Tag Inspector, está na hora de aprendermos um pouco mais sobre Snippets, não acha?! Vamos lá!

Bem, agora iremos aprender um pouco mais sobre o painel de Snippets. Este painel foi uma sacada muito boa por parte da Macromedia. Com ele, os usuários (principalmente os power users) podem poupar muito tempo e trabalho.
Imagine o seguinte: Você quer colocar em um formulário a opção da pessoas escolher seu ano de nascimento e para isso, quer construir um menu Dropdown com os anos de 1900 a 2000. Já pensou ter que colocar todos os anos?! Não daria um super trabalho?! Mas e se você já tivesse este menu pronto, bastando seleciona-lo e arrasta-lo para o campo de formulário?! Não seria uma beleza?! Pois é...
A Macromedia pensou nisso tudo e nos oferece esta opção maravilhosa! Vamos ver como funciona?!
Então abra o painel de Snippets e encontre algo semelhante a figura a seguir:

Perceba que neste painel temos 4 opções logo abaixo, conforme indica o quadrado vermelho na figura acima. Vejamos o significado de cada um destes botões:
1. Este primeiro botão (ícone da pastinha) serve para criarmos um novo diretório de Snippets
2. Este botão serve para criarmos um novo snippets
3. Este serve para editarmos um snippet já existente
4. Adivinhe pra que serve este?!?!! Hehe este serve para deletarmos um snippet
O painel de Snippets nos oferece os seguintes diretórios:
- Acessible (acessibilidade)
- Comments (comentários)
- Content Tables (tabelas)
- Footers (rodapés)
- Form Elements (Elementos de formulário)
- Headers (Cabeçalhos)
- JavaScript (Alguns códigos prontos para uso)
- Meta (Alguns códigos Meta)
- Navigation (Códigos que facilitam navegação)
- Text (Algumas opções de texto)
Agora, vamos aprender a utilizar um Snippet que já vem com o Dreamweaver MX. Digamos que você quer inserir o Menu Dropdown que já foi comentado no Início desta página. Muito bem, abra o painel e clique em Form Elements e Depois em Dropdown Menus conforme indica a figura:

Neste exemplo, pegaremos um menu com os Meses do Ano. Clique neste Snippet e simplesmente arraste-o para a tela, no campo de formulário e pronto!! Você já tem o Menu prontinho! Agora me diga se é ou não é uma beleza!?
Agora, vamos supor que você queira criar alguns Snippets para facilitar ainda mais a sua vida. Neste exemplo estaremos criando um Snippet de Texto Ok?! Então clique na pasta de Text ou crie uma nova pasta de acordo com sua preferência. Clique no Botão indicado na figura abaixo:

Após clicar neste botão, você terá a seguinte tela:

Agora basta configurar o Snippet de acordo com sua preferência. Neste exemplo, coloquei o Nome do Snippet, sua descrição (Description), seu tipo e seu código (antes e depois). Neste exemplo, todos os textos serão convertidos para a fonte Verdana com tamanho 2 quando utilizarmos este Snippet. Clique em OK e seu Snippet estará prontinho para ser usado! ;)

Agora só falta aprendermos como utilizar o Painel de Referência. Vamos lá?!

Para terminar vamos ver para que serve e como utilizar o painel Reference. Este painel serve como referência - muito boa diga-se de passagem - principalmente para Web Developers na hora de fazer alguma consulta.
Ao abrir o painel Reference você tem a seguinte tela:

Em "Book" escolhemos qual a referência que devemos consultar, podendo ser por exemplo:
- HTML
- CSS
- Macromedia CFML
- JavaScript
- ASP
- JSP
Após selecionarmos em Book qual será a linguagem a ser consultada, basta selecionarmos a TAG desejada e sua "Sub-Tag" caso seja necessário.
No exemplo a seguir estaremos fazendo uma consulta em HTML sobre a Tag BGSOUND. Note na figura abaixo que o Dreamweaver nos dá a descrição da TAG (inclusive versão de Browser suportada).

Caso queira consultar uma das "Sub-Tags" da TAG BGSOUND proceda como a figura indica:

Neste caso, selecionamos a "Sub-Tag" chamada "Loop" e o Dreamweaver nos retorna a seguinte tela:

Nela, podemos conferir para que serve o LOOP, qual versão de Browser suportada e assim por diante. Caso queira fazer uma consulta sobre CFML por exemplo, basta prosseguir como indica a figura abaixo:

Bom pessoal, por enquanto é só! Espero que tenham aprendido sobre o Painel CODE e possam colocar em prática tudo o que vimos. Aliás, por falar em prática, abra já o seu Dreamweaver e trate de começar a praticar! ;)
Tutorial produzido utilizando Macromedia Dreamweaver MX Versão em Inglês