Tutorial background Barack Obama em CSS - Parte 2ListThumbs
Tutorial background Barack Obama em CSS - Parte 2
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!
About the author
I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.
No comments yet :(
Post new comment