Bom, esse é um post relativamente curto, onde explicarei como alinhar um site ao centro da tela através do CSS.

Existem duas maneiras, sendo que ambas são aplicadas ao div principal do seu site: a certa e o boato, sendo que o boato é o mais disseminado na Web, infelizmente. Primeiramente, vamos ao boato.

Alinhando sites ao centro da tela com divs de posição absoluta

Esse boato corre a Web, porém é uma explicação totalmente errada, principalmente pela ausência de teste de usabilidade. Veja abaixo um exemplo de CSS para o alinhamento dessa maneira:

#alinhacentro {
position: absolute;
width: 980px;
left: 50%;
top: 10px;
margin-left: -490px;
z-index: 1;
}

O código acima resulta em um site alinhado ao centro da tela, justamente por realizar um procedimento bastante simples:

1. A posição em X (left) do div é equivalente a 50% da tela.
2. Ao posicionar o div a 50% da tela, o próximo passo é recolher METADE da sua largura através da margem esquerda negativa.
3. Com isso, o div que estava com seu início a 50% da tela terá sua metade para trás, deixando assim o site exatamente no meio da tela.

Problemas

1. O usuário, se utilizar resolução inferior à largura do site, não conseguirá navegar nele por completo pelo fato da margem esquerda com valor negativo. O site entrará para a esquerda, inviabilizando principalmente os sites com menus verticais.
2. O usuário até pode ter resolução de tela compatível com o site, mas se ele utilizar o browser apenas com a metade da tela dele (digamos que ele esteja com duas telas ao mesmo tempo, sendo uma um documento do Word e outra o site, ou então um boleto bancário ou algo assim) enfrentará o mesmo problema.

Ou seja, essa maneira de formatação que corre a Web é absolutamente equivocada, e não deve ser praticada.

Alinhando sites ao centro da tela corretamente

Explicada a maneira errada, vamos à certa:

#alinhacentro {
position: relative; /* para o caso de necessidade de trabalho com divs absolutas dentro do site */
width: 980px;
margin: 0 auto; /* o primeiro valor é equivalente aos valores para topo e baixo, e o segundo para esquerda e direita */
}

O código acima resulta em um site alinhado ao centro da tela de maneira correta, pois não trabalha com a margem negativa. Você pode fazer o teste de usabilidade que sugeri, deixando o navegador com tamanho menor que o do próprio site, e verá que não enfrentará problema algum. Essa sim é a forma absolutamente correta de alinhar um site ao centro da tela com CSS.

Abraços!

   Enviar artigo em PDF   

Bom, depois de 2 anos (sim, DOIS ANOS) parado, venho por meio deste post retomar o meu blog, com a mesma ideia de antes: publicar dicas sobre Web. Nada muda, a não ser a versão dos softwares. O que aliás, é uma vergonha pra mim, né? Retomar um blog somente após a mudança de versão de um software. Tenso…

Bom, bora lá! Vou retomar falando de Dreamweaver CS5. Mas a partir de agora, procurarei ser abrangente, e não mais citar no título da matéria a versão do software. Isso porque retomo o software com as matérias todas postadas para Dreamweaver CS4, e todas as dicas ainda são praticas no CS5, por exemplo. O mesmo ocorre com o Flash. Então, a partir de agora, apenas o software no título, e na matéria o descritivo do mesmo. No caso então, uma dica de Dreamweaver CS5. Mas que funciona em outras versões…

Uma grande reclamação de diversos desenvolvedores Web é que o Dreamweaver não gera CSS Shorthand. Ou seja, não gera o CSS de maneira otimizada, reduzida. Mentira! Mentira! Mentira!!!

Muitos não sabem, mas o Dreamweaver trabalha SIM com CSS Shorthand. Apenas não vem habilitado “de fábrica”. Onde está o truque?

Simples! Vá em Edit – Preferences (ou CTRL + U).

Acesse a categoria CSS Styles, conforme a imagem abaixo.

Habilite todas as opções desejadas com relação a CSS Shorthand (ou, mais uma vez, CSS Reduzido ou Otimizado)

Clique em Ok, e vá trabalhar!

Considerações relevantes:

Ao habilitar essa opção, todo código gerado pelo Dreamweaver será no formato CSS Shortand;
Se você estiver trabalhando com CSS e resolver fazer essa operação no meio de um desenvolvimento, é importante saber que o código gerado anteriormente NÃO SERÁ ALTERADO.
Um outro ponto a considerar é que o código gerado pela tela Page Properties NÃO É AFETADO PELO CSS SHORTHAND. Ou seja, para quem mexe com a opção Page Properties, nada muda.
CSS Shorthand reduz, em média, 30% do seu código CSS.

É isso aí. Fica a dica para quem mexe com Dreamweaver, e a explicação de que Dreamweaver gera sim CSS reduzido. Basta habilitar.

Abraços!

   Enviar artigo em PDF   

Pensando no que escrever, me lembrei de algo que eu sempre abordo nos meus treinamentos na Impacta, e por incrível que pareça, o Dreamweaver CS4 (e nem seus antecessores) não faz automaticamente: tratar a borda gerada pela inserção de um link em uma imagem como um estilo CSS.

Então… vamos fazer com que ele trate! Vamos lá:

- Insira uma imagem do seu site no seu arquivo (salvei o arquivo como demo.html).

- Clique nela e vá no painel Properties (Ctrl + F3). Lá coloque um link qualquer na sua imagem e coloque na opção border o valor 0.

- Verifique o código-fonte (modo Code). Você perceberá que o código border=”0″ foi inserido no HTML. Até aí tudo bem… mas se tivéssemos 483 imagens na nossa página seriam 483 border=”0″ pelo documento… além de border=”0″ ser atributo visual, não considerado pelo XHTML 1.0 Strict!!

- Volte para o modo Design, e retire o valor de border. Aproveite e tire os valores de largura e altura da imagem, sob o mesmo conceito de repetição desnecessária de código. Largura e Altura somente devem ser usados em caso de imagens com tamanho que não seja real, o que não é muito comum…

OBS: Nesse momento, ao clicar em algum outro ponto da página, você perceberá que a imagem ficou com a costumeira borda azulada. 

- Acesse o painel CSS (Shift + F11) e crie uma nova regra (New CSS Rule).

- Crie uma regra que será aplicada a todas as imagens da sua página, conforme a figura abaixo.

OBS: Recomendável criar a regra em arquivo css externo, para que você possa controlar todas as imagens do site com uma única regra em um único arquivo.

- Na janela de configuração do CSS, vá à opção Border, e preencha sua largura como zero.

- Clique em Ok, volte ao arquivo. Repare que a borda da imagem sumiu. Vamos ao código:

- Dá para otimizá-lo com uma pequena regra, que pode ser aplicada assim:

- A linguagem CSS entende 0 como sendo valor absoluto. Você tem 0 pixels, 0 centímetros, 0 reais, 0 moedas… você não tem nada. É tudo 0, portanto a unidade de medida pode ser retirada. E também que podemos generalizar, querendo que TODAS AS BORDAS tenham valor zero.

E assim fica corrigido o problema. Anulamos todos os border=”0″ que poderiam aparecer em virtude da inseração de links em imagens, e implantamos o que deveria ser praxe para o Dreamweaver.

[]‘s!

   Enviar artigo em PDF   

Vou demonstrar nesse tópico algo relativamente simples, mais uma vez voltado para o público iniciante em Dreamweaver e Desenvolvimento Web em geral, mas que já conhece um pouco de XHTML e CSS: como formatar tabelas de dados com CSS.

Muitos desenvolvedores fazem como no Word: selecionam as células da tabela e, através do Painel de Propriedades (CTRL + F3), centralizam os conteúdos das células, ou ainda aplicam cor de fonte, fundo e outras manobras que só fazem com que o código cresça exponencialmente (partindo do princípio que o site pode conter inúmeras tabelas). Embora seja uma manobra errada é a mais aplicada, pela sua comodidade e muitas vezes a falta de conhecimento dos desenvolvedores. E como eu sempre digo: formatar pelo Painel Properties é a pior roubada em que um desenvolvedor pode se meter (a não ser para aplicar regras CSS previamente criadas).

Vamos deixar de blá blá blá e mãos à obra!

Software Utilizado: Adobe Dreamweaver CS4
Requisitos: Conhecer um pouco de XHTML e CSS

Considere a tabela abaixo:

É uma tabela simples, sem formatação alguma, como realmente deve ser. É um grande erro o desenvolvedor gerar conteúdo e formatá-lo ao mesmo tempo. Primeiro faça o básico, depois se preocupe em formatar. =)

- Abra o Painel CSS Styles (Shift + F11)

- Declare uma nova regra CSS (New CSS Rule)

- Preencha a sua caixa de diálogo como mostra a figura abaixo:

OBS: Conforme solicitado um conhecimento mínimo de CSS, nesse exemplo irei colocar a Rule Definition em “This document only” (gerar código CSS para esse documento e nesse documento, em seu cabeçalho), mas fica a critério do desenvolvedor se o CSS deve ser gerado em um arquivo .css (New Style Sheet File), ou mesmo um CSS já existente.

- Defina a regra .dados. Utilizei configurações básicas como exemplo (atenção à última tela da imagem):

- Clique em OK.

- Volte à página, selecione a tabela pelas suas bordas ou pela tag <table> no navegador de tags, e aplique a classe dados, que estará disponível na opção Class no Painel Properties.

O resultado será uma tabela com textos centralizados e fonte Verdana, conforme formatado. Porém, perceba que as bordas não foram atribuídas às células, e sim à tabela apenas, ou as bordas exteriores. Para resolver o problema temos que criar outra regra CSS (Painel CSS Styles novamente – New CSS Rule), com o nome de .dados td, conforme a imagem abaixo:

Explicando:

Todas as tags <td> que estiverem dentro de uma tag tomada pela classe dados serão formatadas de acordo com a regra criada. Veja como podemos eliminar vários códigos, com o auxílio da programação abaixo:

- Ao configurar como a imagem acima, aperte Apply. Você perceberá que todas as células ficaram com suas bordas pretas. Poderiam, por exemplo, ter ficado maiores, caso eu tivesse declarado altura (atributo Height, na categoria Box)…

Assim como o exemplo acima, você também pode criar uma classe para os títulos das tabelas, chamada .dados .titulo (essa classe só funcionará se estiver dentro de um objeto que tenha a classe .dados), aplicar nas primeiras células ou linha da tabela, bem como outra regra chamada .dados .par (para as linhas pares dos dados da tabela) e obter um resultado como o da imagem abaixo:

Questionamento: uma classe ou um identificador?

Simples. Um identificador faria com que essa técnica fosse usada para uma tabela exclusivamente, ao passo que uma classe permite o uso em diversas tabelas ao mesmo tempo, controlando assim o visual dos dados do seu site como um todo.  Eu poderia trocar as cores de todas as tabelas do meu site apenas com essas quatro configurações (desde que elas estivessem escritas em um arquivo .css externo, e não no mesmo arquivo, claro…).

As duas técnicas geram o mesmo resultado, com a diferença de ID ser destinado a uma região apenas. Aí vai de você definir… se será necessário aplicar a técnia em várias tabelas ao mesmo tempo (considerando mais de uma por página) ou se haverá apenas uma tabela por página. No primeiro caso a classe é o melhor modo. Já no segundo o identificador (ID) atende melhor, considerando até mesmo implantação de AJAX e menor uso de regras CSS.

É isso aí. Tópico simples de aplicar, e espero que simples de entender. Principiantes, mãos à obra! =)

   Enviar artigo em PDF