Olá pessoal. Gostaria de expressar a todos vocês minha felicidade para com os feedbacks que tenho recebido do CD-ROM Curso Web Sites com AJAX. É gratificante saber que a didática fácil, simples e objetiva está sendo eficiente para todos aqueles que desejam aprender o assunto abordado no curso, Ajax.

Bom, queria agradecer também ao Fabyo, um dos administradores do Fórum iMasters, o qual me convidou para ser moderador do Fórum de Dreamweaver. Espero ver todos vocês por lá, para que a nossa troca de conhecimento se estreite cada vez mais.

No artigo da semana passada, falamos sobre Tableless com o Dreamweaver de forma visual, ou seja, pelo modo Design View. Hoje, iremos fazer uma abordagem de como o Dreamweaver trabalha e interpreta a forma como desejamos trabalhar com as CSS.

Cada profissional tem suas peculiaridades, e nós precisamos respeitá-las, afinal cada um é cada um. O Dreamweaver também pensa dessa forma, ou seja, ele respeita a forma como você gosta de lidar com as CSS e assim seu trabalho fica mais condizente com o seu perfil de codificação. Mas, para que o Dreamweaver saiba como você gosta de trabalhar, você precisa dizer a ele. Embora ele seja uma ferramenta muito funcional, ainda não foi desenvolvido a leitura de pensamento dos usuários que o utilizam, risos.

Através do Painel de Preferências (Preferences) - que pode ser acessado pelo seguinte menu: Edit > Preferences; ou Ctrl + U. Podemos realizar diversas configurações no Dreamweaver, e, assim, deixá-lo com a "nossa cara" e gostos pessoais. Para configurarmos nosso modo de se trabalhar com as CSS, acessamos a categoria (Category) CSS Styles, observe na imagem abaixo:

Na referida categoria é possível configurar o seguinte: se usaremos ou não a forma resumida - Use shorthand for - ao realizarmos algumas declarações para os seguintes itens: Font, Background, Margin and Padding, Border and Border Width e List-Style.

Ok, mas você pode estar se pergutando: qual a vantagem de se usar a forma resumida das declarações? A resposta é simples: para que o tamanho final do seu arquivo seja menor, com isso, ele carregará mais rápido, você codificará menos e mais rápido e ao mesmo tempo evitará a LER e a tendinite.

A segunda configuração - When editing CSS rules - informa ao Dreamweaver se ele usará a forma resumida para as declarações que informamos em Use shorthand for ou se usuará somente se tal declaração tiver a forma resumida - If ogirinal used shorthand. A última opção, Open CSS files when modified, diz ao Dreamweaver para abrir o arquivo CSS que você modificou.

A última configuração, When double-clicking in CSS panel, diz ao Dreamweaver onde que você gostaria de editar as declarações CSS, oferecendo-lhe as seguintes opções: utilizando a caixa de diálogo do painel CSS, o painel lateral de Propriedades ou através do modo Code View, diretamente no arquivo. Veja um exemplo das duas primeiras opções nas imagens abaixo:

Agora, veja alguns exemplos de declarações CSS e ao mesmo tempo como elas são feitas de forma resumida.E compare você mesmo.

Exemplo para as declarações de Font.

Forma não resumida

seletor {
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Forma resumida

seletor {
font: italic normal bold 1em/1.5em Verdana, Arial, Helvetica, sans-serif;
}

Exemplo para as declarações de Background

Forma não resumida

seletor {
background-color: #fff;
background-imagem: url(/img/bgImagem.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0 100px;
}

Forma resumida

seletor {
background: #fff url(/img/bgImagem.jpg) 0 100px repeat-x fixed;
}

Exemplo para as declarações de Margin e Padding

Forma não resumida

seletor {
margin-top: 100px;
margin-right: 50px;
margin-bottom: 200px;
margin-left: 20px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 200px;
padding-left: 20px;
}

Forma resumida

seletor {
margin: 100px 50px 200px 20px;
padding: 100px 50px 200px 20px;
}

Exemplo para as declarações de Border and Border width

Forma não resumida

seletor {
border-style: double;
border-width: 3px;
border-color: #ff9900;
}

seletor2 {
border-top-width: 2px;
border-right-width: 10px;
border-bottom-width: 4px;
border-left-width: 5px;
}

Forma resumida

seletor {
border: 3px double #f90;
}

seletor2 {
border-width: 2px 10px 4px 5px;
}

Exemplo para as declarações de List-Style

Forma não resumida

seletor {
list-style-type: disc;
list-style-position: outside;
list-style-image: url(/img/bullets.gif);
}

Forma resumida

seletor {
list-style: disc outside url(/img/bullets.gif);
}

Bom, acredito que deu para você fazer uma boa comparação e tirar suas próprias conclusões. Se você se interessou pelo assunto e gostaria de mais referência, seguem alguns links:

. W3C
. TutoCle - Shorthand

Bom, é isso aí. Um abraço a todos e até o próximo.