Painel Design Dreamweaver MX

Neste tutorial nós abordaremos mais uma maravilha do Dreamweaver MX: o painel Design! Como muita gente não sabe o que é o painel Design (e muito menos como utilizá-lo), este tutorial será dividido em duas partes. Mãos à obra ! :) ...
Conhecendo o painel Design
Nesta parte do tutorial nós ficaremos um pouco mais íntimos do Dreamweaver MX: para exibir o painel Design basta clicar em Window (Janela) e depois em um dos três itens indicados na figura abaixo:

Veja um exemplo do painel aberto, na figura abaixo:

Este painel da figura acima está mostrando a aba de CSS Styles, que nos permite criar alguns estilos CSS. Perceba que há um botão no canto superior direito. Clique nele, conforme indica a figura:

Este é o menu que será aberto com as opções do CSS Styles! Cada aba possui seu menu! ;) ... As funções veremos mais adiante ...

Explorando um pouco mais, temos algumas opções adicinais na aba CSS Styles, indicadas da figura:

Perceba que há um retângulo vermelho na opção Edit Styles: esta opção serve para editarmos um estilo (CSS) já existente! Agora, clique na aba HTML Styles e você terá a seguinte tela:

Esta aba permite-nos a criação de alguns estilos HTML para o site com o intuito de facilitar nossa vida e poupar tempo e trabalho! Imagine que você precisa definir que um determinado texto deve possuir fonte Verdana com corpo 2 e em negrito: para isso basta definir um estilo HTML e toda vez que você precisar este estilo ele poderá ser aplicado diretamente no texto. Veremos mais sobre isso adiante ...
Clicando no botão superior direito você encontra o menu:

Agora, clique na aba Behaviors, para ver a seguinte tela:

O painel de Behaviors permite a criação de alguns comportamentos para o site. Para adicionar um comportamento, basta clicar no "+". Existe um tutorial completo sobre a criação de Behaviors aqui mesmo no site do BABOO - não deixe de conferir!
Utilizando o painel Design
Começaremos criando um novo estilo CSS. Veja:

Clique no botão indicado na figura acima para criar um novo estilo. Você verá a seguinte tela:

Neste exemplo eu coloquei o nome do estilo (BABOO), selecionei a opção para criar um estilo personalizado e apenas para este documento! Clique em OK para abrir a tela de configuração do estilo:

Perceba que em "Category" nós temos várias opções: "Background", "Border" e assim por diante. Neste exemplo eu estou trabalhando com "Type", definindo qual será a fonte, o tamanho, sua cor e assim por diante. Assim que definir tudo o que desejar, clique em OK.

Veja agora que o estilo foi adicionado ao painel: se você der uma olhada no código-fonte do site, perceberá que o estilo já está sendo utilizado:

Legal não?! Mas ainda não acabou ... Veremos agora um pouco mais sobre a criação de estilos - mas desta vez, estilos HTML! Selecione a aba HTML Styles e clique no botão indicado:

Ao clicar neste botão você verá a tela para configurar o estilo, conforme indica a figura:

Neste exemplo eu dei o nome ao estilo (BABOO) e defini algumas opções: Aplicar estilo a um parágrafo com font Tahoma (corpo 2), cor preta e negrito. O formato é parágrafo e o alinhamento é centralizado. Clique em OK e aprecie seu mais novo estilo no painel:

Para aplicar este estilo, escreva um texto qualquer na tela do site, selecione-o e clique no estilo: você verá que será aplicado o estilo ao texto!

Antes              Depois

Legal não é mesmo?! Caso queira aprender a utilizar a aba Behaviors (comportamentos), confira o tutorial disponível aqui mesmo no BABOO! Bem, pessoal,  este foi mais um tutorial sobre os painéis do Dreamweaver MX: agora é só praticar e começar a poupar tempo e trabalho! :) ...