Construindo uma página (site) usando Tableless – Pt.3

jan/2010

Nenhum comentário

Agora, na 3ª parte de nosso tutorial, criaremos o arquivo CSS do nosso exemplo, fazendo definições básicas em cima do wireframe que vimos na Parte 1.

// Início do arquivo estilo.css
 
@charset "utf-8";
/* CSS Document */
 
/* A seguir vamos declarar a div topo */
#topo {
position:absolute;
width:950px;
height:150px;
z-index:1;
left: 5px;
top: 5px;
}
#menu {
position:absolute;
width:950px;
height:50px;
z-index:2;
left: 5px;
top: 155px;
}
#cntdPrincipal {
position:absolute;
width:600px;
height:400px;
z-index:3;
left: 5px;
top: 210px;
}
#cntdLateral {
position:absolute;
width:330px;
height:400px;
z-index:3;
left: 625px;
top: 210px;
}
#rodape {
position:absolute;
width:950px;
height:50px;
z-index:4;
top: 630px;
left: 5px;
}

Nesta mesma parte, já vamos ver como ficará o HTML da página, para que essas divs declaradas possam aparecer na tela.

<!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=utf-8" />
<title>Minha primeira pagina em tableless</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="topo">conteudo da div topo</div>
<div>conteudo da div menu</div>
<div id="cntdPrincipal">conteudo da div cntdPrincipal</div>
<div id="cntdLateral">conteudo da div cntdLateral</div>
<div id="rodape">conteudo da div rodape</div>
</body>
</html>

Repare

Repare que entre as tags <head> e </head> temos a seguinte linha de código:

<link href=”estilo.css” rel=”stylesheet” type=”text/css” />

Essa linha tem a finalidade de fazer a ligação de nossa página HTML, com o arquivo CSS já criado.

Depois de digitado estes códigos, chegaremos ao seguinte resultado:

Vemos que ainda não é um site belo visualmente, mas na próxima parte começaremos a ver uma forma simples de deixar a página mais apresentável.

- Construindo uma página (site) usando Tableless
Ir para:
- Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5

Postado por Paulinho

Compartilhe via:

Comentários

Nenhum comentário ainda.

Blog do web designer Paulo Victor

Construindo uma página (site) usando Tableless – Pt.3

Comentários

Blogroll