Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal!
Desenvolvi recentemente um layout no photoshop e segui as dicas de muitos membros aqui do fórum, usar tableless para estruturar o layout no site.
Mostrarei o layout fatiado em primeiro lugar: http://ragnacorp.forbrazil.com.br/siteteste/site_novo_para_tableless_fatiado.html
Aqui está o que eu consegui fazer do zero somente pelo código, utilizando o método tableless (as cores representam as imagens que estão fatiadas na pasta 'images'): http://ragnacorp.forbrazil.com.br/siteteste/teste.html
Eis o código que desenvolvi para isso:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#mae {
width: 958px;
height: 900px;
}
#sobre_topo {
background: #000;
height: 29px;
}
#topo {
background: #FF0;
height: 191px;
}
#menu_horizontal {
background: #CF0;
height: 41px;
}
#conteudo {
background: #F00;
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #000;
height: 579px;
width: 169px;
}
#menu_direita_sub_1_topo {
background: #AAA;
height: 51px;
}
#menu_direita_sub_1_meio {
background: #EEE;
}
#menu_direita_sub_2_topo {
background: #DDD;
height: 71px;
}
#menu_direita_sub_2_meio {
background: #FED;
}
#menu_direita_sub_3_topo {
background: #DAA;
height: 67px;
}
#menu_direita_sub_3_meio {
background: #FDA;
}
#propaganda_1 {
float: left;
background: #FCF;
width: 198px;
height: 197px;
}
#propaganda_2 {
float: left;
background: #BFF;
width: 191px;
height: 197px;
}
#propaganda_3 {
float: left;
background: #FCC;
width: 198px;
height: 177px;
}
#propaganda_4 {
float: left;
background: #BFB;
width: 191px;
height: 177px;
}
#propaganda_top_1 {
float: left;
background: #DAD;
width: 389px;
height: 125px;
}
#propaganda_top_2 {
float: left;
background: #F00;
width: 400px;
height: 125px;
}
#sub_conteudo_1_topo {
float: left;
background: #FCB;
width: 400px;
height: 62px;
}
#sub_conteudo_1_meio {
float: left;
background: #AFC;
width: 400px;
height: 108px;
}
#sub_conteudo_1_rodape {
float: left;
background: #BDD;
width: 400px;
height: 27px;
}
#sub_conteudo_2_topo {
float: left;
background: #FCB;
width: 400px;
height: 40px;
}
#sub_conteudo_2_meio {
float: left;
background: #AFC;
width: 400px;
height: 109px;
}
#sub_conteudo_2_rodape {
float: left;
background: #BDD;
width: 400px;
height: 28px;
}
#conteudo_limpo_topo {
clear: left;
background: #CDF;
height: 43px;
}
#conteudo_limpo_meio {
clear: left;
background: #CFA;
height: 11px;
}
#conteudo_limpo_rodape {
clear: left;
background: #FAC;
height: 26px;
}
</style>
</head>
<body>
<div id="mae">
<div id="sobre_topo">
</div>
<div id="topo">
</div>
<div id="menu_horizontal">
</div>
<div id="menu_direita">
<div id="menu_direita_sub_1_topo">
</div>
<div id="menu_direita_sub_1_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_2_topo">
</div>
<div id="menu_direita_sub_2_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
<div id="menu_direita_sub_3_topo">
</div>
<div id="menu_direita_sub_3_meio">
<ul>
<li>teste</li>
<li>teste</li>
</ul>
</div>
</div>
<div id="conteudo">
<div id="propaganda_1">
</div>
<div id="propaganda_2">
</div>
<div id="sub_conteudo_1_topo">
</div>
<div id="sub_conteudo_1_meio">
</div>
<div id="sub_conteudo_1_rodape">
</div>
<div id="propaganda_3">
</div>
<div id="propaganda_4">
</div>
<div id="sub_conteudo_2_topo">
</div>
<div id="sub_conteudo_2_meio">
</div>
<div id="sub_conteudo_2_rodape">
</div>
<div id="propaganda_top_1">
</div>
<div id="propaganda_top_2">
</div>
<div id="conteudo_limpo_topo">
</div>
<div id="conteudo_limpo_meio">
</div>
<div id="conteudo_limpo_rodape">
</div>
</div>
</div>
</body>
</html>Gostaria de, primeiramente, pedir a análise de vocês:
E, da mesma forma, gostaria de tirar algumas dúvidas:
Um abraço gente,
Aguardo resposta.
Carregando comentários...