Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

V. Basic

Feed da seção V. Basic

Newsletter de V. Basic


Segunda-feira, 12/12/2005 - 13:06 - Por João Henrique Firmino
Seções relacionadas:

Tableless

Tableless nada mais é do que uma metodologia de desenvolvimento de layouts sem o uso de tabelas, da qual toda a informação é separada da formatação, levando em conta a semântica do (X)HTML. Toda a formatação do layout é feito pelo CSS, tornando vantajoso a estruturação de um layout fazendo com que seu site se torne muito mais leve para acessar.

É extremamente necessário estar dentro de todos os padrões web da W3C ( World Wide Web Consortium ), e possuir um bom conhecimento em HTML/XHTML/CSS para que se possa entender e aprender toda esta metodologia de desenvolver estruturas que são mais leves que um pena.

Algumas Vantagens

- Desenvolver um site que seja melhor visualizado em qualquer navegador do mercado.
- Criar um site sem tabelas e o mais independente possível de tags, podendo até fazer uma estrutura até 70% mais leve que o tradicional.

Construir sites em tableless é mais do que fazer homes mais leves e viáveis, e sim estar também em dia com os padrões web da W3C e também com seu auto-conhecimento nesta gisgantesca e vasta selva do mundo virtual.

Para saber mais sobre os padrões web e aprenderem melhor todo o conteúdo citado neste artigo acessem www.w3schools.com , lá vocês encontrarão além de uma vasta aprendizagem, também verão quizes para testar e avaliar seu conhecimentos. Uma ótima dica também é conhecerem melhor o CSS explorando todo o conteúdo do Imasters e através dos artigos de Mauricio Samy.

E para entenderem um pouco mais sobre esta metodologia, acessem também www.tableless.com.br.

Espero que tenham gostado e se interessados pelo conteúdo, pois é algo essencial hoje no mercado web para se aplicar no desenvolvimento web. Agora mostrarei a vocês uma introdução básica de estruturamento em tableless.

Construindo um layout básico

Vamos adentrar a partir de agora no básico do conhecimento em desenvolvimento tableless. É muito importante que você já saiba o necessário de (X)HTML e CSS. Segue abaixo uma estrutura básica:

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estrutura Básica de 3 colunas</title>

<style type="text/css"> @import url("site.css"); </style>
</head>

<body>
<!-- estrutura geral do site -->
<div id="corpo">

<h1>Estrutura b&aacute;sica</h1>
<div id="esquerda"> conteudo esquerdo </div>
<div id="direita"> conteudo direito </div>
<div id="conteudo"> conteudo do meio </div>
</div>

</body>
</html>

Como vocês podem ver, toda a estrutura fisica no XHTML é orientada pela tag <DIV>, da qual a mesma chama as propriedades do CSS para imprimir na tela todo o layout. É importante chamar o arquivo css após sua criação, da qual podemos fazer isso de 2 maneiras:

<style type="text/css"> @import url("site.css"); </style>

<link rel="stylesheet" type="text/css" href="site.css" />

Vamos ver agora um exemplo deste arquivo CSS, que está sendo responsável pela forma do layout acima:

site.css

h1 {
text-align:center; }

#corpo {
width:700px; text-align:justify; font:70% Arial; }

#direita {
width:120px; float:right; }

#esquerda {
width:120px; float:left; }

#conteudo {
width:400px; margin-left:150px; }

Para quem já conhece o CSS, podemos reparar que o ‘#’ antes do nome da propriedade serve nada mais do que para identificar que será usado pelo ‘ID’ da tag <DIV>, com a finalidade (é claro) de estruturar conforme os comandos usados pela propriedade.

Fácil e prático, toda a estrutura no tableless será feita por inteira no CSS e depois chamada no XHTML para a sua impressão final. Basicamente é isso pessoal. Para visualizarem melhor, clique aqui para baixar o arquivo index e o css para melhor análise ok.

Obrigado a todos, e em breve darei continuidade no desenvolvimento em tableless.

Todos os artigos de João Henrique Firmino

3 comentários publicados

  • 1. Básico

    Segunda-feira, 12/12/2005, por tauser

    Opa cara, beleza. Não querendo ser chato, mas só fazendo uma crítica construtiva, acho que sua matéria foi muito básica pois tudo o que você falou já foi aprofundado por outras matérias aqui do próprio imasters mesmo. Acho que seria bom vc ter dado uma lida nas matérias já existentes antes de postar uma nova. As matérias que já existem são muuiito boas e aprofundadas. Falows. Té mais...

    Responder comentário

  • 2.

    Segunda-feira, 12/12/2005, por tauser

    Ops. Não querendo parecer um cara chato, mas foi uma boa matéria pra quem AINDA não conhecia. Faltou só aprofundar mais e falar mais das vantagens.

    Responder comentário

  • 3. Bom!

    Segunda-feira, 12/12/2005, por Rogério Louzada

    Realmente, por um lado é básico. Mas tableless é uma técnica moderna e esse parece que foi o primeiro artigo, para dar base aos demais. Se for esse método, a expectativa é grande pelos próximos. Parabéns!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

João Henrique Firmino é formando em Tecnologia em Informática pelas FCS, trabalha com desenvolvimento web desde 2002 e atualmente é mantenedor dos sites das Faculdades Católicas Salesianas de Araçatuba e do Colégio Salesiano de Araçatuba.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.