Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Perfect Lion

Tableless: o que é isso?

Por , em Desenvolvimento frontend

Recommended Posts

Perfect Lion    10

Perfect Lion
Postado

Tableless oque é isso?

 

Curso: Tableless IniciandoProfessor: Erick Viana Leão (Perfect Lion)msn: erick_leao@hotmail.com <- adicionar com moderaçãosite: http://www.paodemugen.com.br
Release:

 

Não se assuste, isso não é um bixo de 7 cabeça como muitos pensam. Não é complicado trabalhar com ela, mais da trabalho ;)

 

Conteúdo

 

Bem vamos lá. Antes de mais nada o tableless é um conceito de estruturação de montagem de layout sem usar a tables (tabelas). Muitos programadores ainda utilizam a tabela para criar layout que não é o correto a tabelas como o proprio nome já diz é para se criar uma tabulação de algum resultado.

Vamos analizar o codigo abaixo que seria uma construção de um layout de 3 colunas utilizando tabela:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><body><table width="750" border="0" cellspacing="0" cellpadding="0"><tr><td width="200">Coluna 1</td><td width="350">Coluna 2</td><td width="200">Coluna 3</td></tr></table></body></html>

 

Basicamente seria isso um layout de 3 colunas usando a estrutura de tabelas, mais como eu disse logo acima isso não é o correto mais agiliza e muito a criação para muitos que não se importa com sematica na construção, mais já com tableless você tem varias vantagens que é a manipulação de determinados blocos do site facilmente sem estragar a estrutura do site, você consegue criar layout usando poucas imagens, e claro para mudar o estilo do seu site seria muito mais rapido.

Agora vamos transferir esse layout para tableless, você verá como seu codigo fica limpo e visivel:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Tableless Nivel 1</title></head><body><!-- canto esquerdo --><div id="esquerdo">Coluna 1</div><!-- fim canto esquerdo --><!-- canto direito --><div id="direito">Coluna 3</div><!-- fim canto direito --><!-- centro --><div id="meio">Coluna 2</div><!-- fim centro --></body></html>

 

Veja que diferença só temos 3 linhas de codigo com blocos de camadas e coloquei comentarios de cada coluna para saber o que é oque ;)

Bem se você executar ele no seu navegador nos teremos um resultado abaixo do outro Coluna 1, Coluna3 e Coluna 2 correto? E você se pergunta - "que palhaçada é essa? você não disse que teriamos um layout com 3 colunas igual fizemos com a da tabela?" - sim eu disse e não estou mentindo. Agora vai entrar o chamado Folha de Estilo o grande CSS você já deve ter ouvido falar nele certo? Se não então se prepare pois se você está entrando no mundo do tableless ele será sua arma principal daqui para frente. sem ele seu layout não tem vida fica uma coisa vazia, então procure estudar varias materias sobre ela porque ela vai ser o seu braço direito daqui para frente.

Então vamos ao CSS? Nesse artigo não vou explicar os conceitos e propriedades do CSS porque além do mais estamos aqui para aprender o tableless a como criar um layout mais robusto do que ficar usando tabelas que podem prejudicar a peforma-se de seu site.

Vamos para nosso CSS então abaixo segue o css que iremos aplicar sobre nosso layout.

 

estilo.css 

*{margin: 0;padding: 0;text-decoration: none;list-style: none;}/* vamos estabelecer a largura da coluna esquerda e direita como 200px como fizemos em nossa tabela */#esquerdo, #direito{ width: 200px; background: #00CCFF;} /* aqui definimos o lado para que lado eles vão flotuar */#esquerdo{ float: left; } #direito{ float: right; }/* aqui colocamos as margins do meio para serem depois dos 200px que fizemos ali para a coluna esquerda e direita */#meio{ margin: 0 205px; background: #809241; color: #FFF; }

 

Agora salvamos o nosso estilo e aplicamos ela em nosso HTML.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- link do css --><link href="estilo.css" rel="stylesheet" type="text/css" /><!-- fim link do css --><title>Tableless Nivel 1</title></head><body><!-- canto esquerdo --><div id="esquerdo">Coluna 1</div><!-- fim canto esquerdo --><!-- canto direito --><div id="direito">Coluna 3</div><!-- fim canto direito --><!-- centro --><div id="meio">Coluna 2</div><!-- fim centro --></body></html>

 

Bem agora execute e veja o resultado.. ^^ show né. Bem esse é o nosso inicio entrando em no mundo tableless. Ate a proxima ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

tah esquecendo da dica q sempre falo... o div geral englobando todo o conteúdo... isso eh uma mão na roda para centralizar o layout...

 

tente centralizar esse site sem mexer no html... vai ser beeeeem mais chato... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

mas valew a iniciativa http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Perfect Lion    10

Perfect Lion
Postado

Eu sei kra.. isso ai é apenas para quem está iniciando logo mais crio outros legalzinho mais avançado.. c você ver meu site eu uso div global ;)

 

http://www.paodemugen.com.br

 

;)

 

Temos que começar do basico para ele ver o que está acontecendo saca ? ai depois vamos liberando mais coisa para cima da mente ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

NightSpy    0

NightSpy
Postado

Boa Perfect Lion..vou dizer uma coisas, até agora pelo q eu vi em sites gringos, não tem tutoriais mais completos, detalhados e explicativos do que os tutorias em português..inclui-se nesta lista, claro, o pa_bruno....e continue assim Perfect Lion...que ajudará mais gente...Parabéns

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

Eu sei kra.. isso ai é apenas para quem está iniciando logo mais crio outros legalzinho mais avançado.. c você ver meu site eu uso div global ;)http://www.paodemugen.com.br ;)Temos que começar do basico para ele ver o que está acontecendo saca ? ai depois vamos liberando mais coisa para cima da mente ^^

to ligado lion, mas eh sempre bom jah mostrar o caminho certo... o div geral naum eh nada demais... eh bem facil de explicar... pq mostrando assim, sem ele, o cara q vem aki jah começa a fazer assim, ae depois ele quer modificar, ae posta a duvida aki no forum, etc...sei q está colocando o básico, mas o geral eh básico e d fácil entendimento sim... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Perfect Lion    10

Perfect Lion
Postado

É que eu estava pensando em criar um tudo para isso.. pois eu iria criar um tuto de como centralizar o layout, largura do layout essas coisa ai eu iria entrar nesse detalhe saka ^^ por isso que num postei ;)Mais no proximo tudo pode deixar que vou falar sobre isso ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

MAPU    0

MAPU
Postado

Isso ae kranem sabia o q era tabless+ aprendi com você ^^espero q você continue postando mais coisas pra gente ae...vlw lion!!!t+ brother

Compartilhar este post

Link para o post
Compartilhar em outros sites

leila•trupe    1

leila•trupe
Postado

Acho que postar tutos básicos aqui é importante sim. Saber que a gente pode encontrar tuto básico na Net, a gente sabe, o duro é caçar e achar. Se ficarem todos por aqui mesmo facilita muito pra quem está começando. E eu concordo com o Lion quando ele diz que basta ler o fórum pra ver que o pessoal bate cabeça com o basicão mesmo.é isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RTaveira    0

RTaveira
Postado

Já tô 'inscrito' aqui, vou aprender 'tim-tim' por 'tim-tim'. :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Já tô 'inscrito' aqui, vou aprender 'tim-tim' por 'tim-tim'. :P

/*Bom Dia cara, se quizer também pode estar sempre conferindo o topico que abri, alguns amigos estão me acompanhando e dando dicas de estudo sobre o assunto, e claro tirando minhas dúvidas...Iniciando Estudos sobre Tableless e CSSaté mais... */

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito