abril 25, 2008 from fabiano's blog
Nesse tutorial vamos mostrar como podemos utilizar o background criado na Parte 1. Mas não vamos mostrar somente como colocar ele no body, mas também criar a estruturar as principais regiões do site como menu, conteúdo principal, coluna de apoio e rodapé.
O objetivo deste tutorial não será montar o site todo, e sim mostrar alguns conceitos básico de CSS e integração do fireworks para web.
PASSO 1
A primeira coisa que precisamos fazer é exportar nossas imagens. Como vamos somente monstar a estrutura básica vamos precisa somente de duas imagens: o background e o logo.
PASSO 2
Vamos agora criar o html. A estrutura terá basicamente 4 regioes: #header, #main, #sidebar e #footer. Repare que vamos colocar o #main e #sidebar dentro de um #content, dessa forma para modificações futuras podemos teruma flexibilidade maior.
<body> <div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div>> <div id="menu">MENU</div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT</div> <div id="sidebar">SIDEBAR</div> <div> <div id="footer">FOOTER</div> </div> </body>
PASSO 3
Vamos agora para o CSS. Voce pode usar um editor de texto/css que desejar. Usamos aqui o CSS Edit, e abrimos o Live Preview. Com isso temos a vantagem de visualizar em tempo real o que estamos modificando. Notem que a estrutura é muito simples. Apenas colocamos um corpo #total com "margin:0 auto" e o restante dos elementos dentro dele.
body {
margin: 0;
color: #999;
font-weight: bold;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 2em;
background: #01245c url(bg_obama.jpg) no-repeat center top;
}
/***
AQUI ESTÁ NOSSO BG!
Repare também que usamos a cor #01245C para complementar resoluções maiores.
***/
#total {
width: 960px;
margin: 0 auto;
}
#header {
height: 160px;
}
#header img{
border: 0;
}
#menu {
height: 60px;
background: #FFF;
text-align: center;
line-height: 60px;
}
#main {
float: left;
width: 650px;
background: #f0f0f0;
height: 400px;
text-align: center;
padding-top: 100px;
}
#sidebar {
float: right;
width: 310px;
background: #dadada;
height: 400px;
text-align: center;
padding-top: 100px;
}
#footer {
height: 150px;
text-align: center;
padding-top: 50px;
clear: both;
color: #15539c;
}
PASSO 4
Veja que o resultado final é bem simples. Basta estruturar bem o código e praticar!
