Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

Site em tableless

Tutorial HTML, CSS e Javascript

Querendo ou não, um site feito em tableless é outra história quando se trata de programação, sem contar que fica muito mais fácil editar pelo CSS do que na própria tabela. Acredite, ainda há muitos sites assim e nunca é demais ensinar o básico para quem quer aprender HTML e CSS.

1) Introdução:
Tableless é exatamente o oposto de um layout em tabelas. Usa-se apenas das tags <div>. Sem as <tr>, <td> e <table> da vida, fica tudo mais fácil pois tudo é feito por CSS!

2) Base: Abra seu editor de HTML (indico o Sublime Text ou o Dreamweaver) e copie o seguinte CSS

/*** Config básico ***/
body
	{background-image: url('http://imagem.jpg'); /*Imagem que se repetirá de uma ponta a outra no topo da página*/
	font-size: 10px;
	background-repeat: repeat-x; /*quer dizer que se repetirá apenas na horizontal*/
	font-family: Tahoma;
	text-align: justify;
	color: #COR DA FONTE;
	}

/* layout */
#page {
	/*** linha VERTICAL do layout ***/
	width: 980px; /*melhor largura para tela 800x600 px*/
	background-image: url('Http://imagem.jpg); /*Imagem de fundo que desce de maneira vertical dando continuação aos posts e sidebar*/
	background-repeat: repeat-y; /*quer dizer que se repetirá apenas na vertical*/
	margin-left: auto; /*se ajustará no centro de acordo com a tela*/
	margin-right: auto;
	}

#header {
	/*** Topo do layout! ***/
	background: url('http://layout.jpg') no-repeat top center; /*ficará no centro, no topo e não se repetirá*/
	width: 980px; /*largura da imagem*/
	height: 300px; /*altura da imagem*/
        }

#sidebar {
	/*** Sidebar é a coluna do perfil do layout ***/
	width: 300px; /*ou a largura que você escolher*/
	color: #COR DA FONTE;
	font-family: Tahoma;
	font-size: 10px;
	text-align: justify;
	padding: 0px; /* espaço do texto entre a width imposta */
	float: left; /*alinhado a esquerda*/
	margin-top: -10px; /*ajuste para a direita, esquerda e para baixo, para cima são valores negativos*/
	}

#content {
	/*** conteudo dos posts e das paginas ***/
 	width: 640px;
	text-align: justify;
	float: right; /*alinhado à direita*/
	}

#footer {
	/*** imagem rodapé do layout ***/
	background-image: url('http://imagem.jpg'); /*Imagem do rodapé da página*/
	background-position: bottom; /*posição para baixo*/
	width: 779px; /*largura da imagem*/
	height: 30px; /*altura da imagem*/
	clear: both !important; /*quer dizer que não importa o tamanho dos posts e sidebar, sempre aparecerá abaixo deles de maneira alinhada, é crucial para deixar que a imagem apareça!*/
	}

3) Customizando: Basicamente, é tudo questão de lógica! Para ter uma ideia melhor da densidade de pixels, pense em seu layout no photoshop ou em qualquer editor de imagem que dá a dimensão de uma determinada área que você seleciona. De acordo com as medidas que você vê no photoshop (com o comando F8) você irá ajustando no CSS nos locais indicados nas descrições acima.

4) No código HTML: Tem que ser na seguinte ordem:

<html>
<head>
<title>Título do seu blog</title>

<!– SEU CSS - TROQUE A URL DO STYLE.CSS PELO SEU CSS HOSPEDADO –>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>

<div id="page">

<div id="header"></div>

<div id="sidebar">
<!– CONTEUDO DO PERFIL –>

Tudo sobre você aqui<br>
Tudo sobre você aqui<br>
Tudo sobre você aqui<br>

<!– FIM DO CONTEUDO –>
</div>

<div id="content">
<!– CONTEUDO DO POST E PAGINAS –>       

Aqui você coloca os códigos do seus post quando for UOL, BLOGGER etc.. ou coloque a include do cutenews caso use.   

<!– FIM DO CONTEUDO –>
</div>

<div id="footer"></div>

</div>

</body>
</html>

Até que não foi tão difícil assim. Várias pessoas me perguntaram como fazer lay em tableless e como tinha bastante código, nunca dava para explicar. Então resolvi criar este tutorial. Espero que deu para entender, eu apenas dei o primeiro chute. Agora, o resto é com você. Dúvidas?

Veja também...

Resenha: Protetor Solar Perfect Bright Milk, da Bioré
Além da Henna: Como ter reflexos dourados com Cassia Obovata
As ilustrações de Pauline (a.k.a. Punziella)

0 Comentário(s)

(0 pelo blog e pelo facebook)