Avaliação: | Publicado em: 04/09/2006

Criando um layout simples, parte 1

Leonardo L Procopio (mas pode me chamar de Léo!). Sou formado em Analise e Desenvolvimento de Sistemas. Trabalho com desenvolvimento deskop e web. Meu objetivo e transmitir o que sei de forma simples e descontraída!

Criando um layout simples, parte 1

Salve!!!Bom, esse é o meu primeiro artigo aqui no site, e por isso quero levar até vocês leitores todos os testes que andei fazendo ao longo dos meus estudos!A missão hoje é demonstrar como é fácil construir um Layout sem usar Tabelas pra marcação, e reforçar que tudo o que se conseguia com elas também se pode conseguir com css!Mas antes disso, você deve entender que isso é uma técnica que esta sendo muito empregada hoje em dia, tendo em vista que os padrões estão cada vez mais sendo respeitados!Ainda encontramos resistências de programadores mais antigos em questão de mudar, mas, com o tempo as coisas vão melhorar!O termo Tableless significa "Sem tabelas", mas isso não quer dizer sem tabela pra nada. E sim sem tabela para marcação do layout (posicionamento melhor dizendo!). Em seus projetos você pode sem problemas utilizar tabelas (ninguém vai querer te matar não!), mas, utilizar tabelas para apresentar dados tabulares! Pois é pra isso que esse código foi criado!Chega de ficar falando, e vamos direto ao que interessa!Temos aqui uma pagina simples, que contem um Topo, coluna da esquerda com o menu de navegação, e coluna da direita que tem o resultado dos links do menu (o principal melhor dizendo!), e finalizando temoso rodapé!Até aqui tudo tranqüilo, sem mistério algum! Da uma olhada na aparência fiel!Antes que você ache que eu esteja viajando eu vou mostrar o código para exibir aquele resultado.Note que esse primeiro código era a forma antiga de se projetar, ainda utilizando Tabelas pra fixar o layout:--------------------------------                                                                            

Duas Colunas
Menu                            texto, com texto, com texto                            texto, com texto, com texto                            texto, com texto, com texto                            texto, com texto, com texto                            texto, com texto, com texto                            texto, com texto, com texto                            texto, com texto, com texto	Conteudo                            quanto mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     ....                                                        quanto mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!quanto mais, mais quanto!quanto                                     mais, mais quanto!
Desenvolvido...

---------------------------Alem dar cores o que vocês acharam?Uns vão dizer: "Ta funcionando?! Então ta bom!". Outros vão tacar uma pedra na minha cabeça, e outros ainda vão dizer "que se eu não mandar essa mensagem pra todos os meus contatos, o orkut vai me excluir!!!".Vai de cada um o comentário. Como a coluna é sobre tableless, css, então nada mais correto do que desapreciar essa técnica.Tu imaginas se o seu site começa a ficar maior, e a saída é colocar tabelas dentro de tabelas, vai chegar num certo ponto, que você vai demorar quase um dia inteiro pra descobrir porque esta dando determinado erro. Ou tu imaginas como um navegador que lê o conteúdo da sua pagina, iria ficar meio doidão!!!São vários fatores que podem vir a pesar no final, mas lembre-se que cabe a você decidir o que fazer (ou melhor, o que utilizar!!!). Cada doido com sua doideira!!!A minha doideira é essa agora pessoal, eu vou mostrar como se obter a mesma apresentação utilizando css na formatação:----------------------------------------------------------Pronto! Olhe pro 1º código, e depois analise o 2º. Interessante? (se o correto é interessante então pode ser!). Você tem o esqueleto de uma pagina utilizando tableless!!!Mas sempre tem um mala que vai dizer de novo: "- Mas do outro jeito também funciono!", isso é verdade, mas pensa comigo, se você tem uma pagina apenas, manter aquele código pode não ser tão chato (mas eu acho ele horrível de qualquer jeito!), mas e se você tem 93 paginas daquela? Então, para não querer mudar de profissão, ou se entregar a bebida, você utiliza css! Pois assim você vai estar criando a formatação em um único arquivo, que vai ser aplicado as usas paginas! Na hora de mudar, vai ser bem mais fácil (e bota bem nisso!).No próximo artigo eu vou explicar detalhe por detalhe do código css!Faça um teste, tire suas conclusões, analise, mas sempre de cabeça aberta, pois o pior cego é o que não quer ver!Grande abraço!!!==================msn: leonardomerce@hotmail.comtwitter.com/eek_
relatosnoturno.blogspot.com

• p2.gif
• p1.gif