April 25, 2008 from fabiano's blog
In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer.
Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web.
STEP 1
The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo.
STEP 2
Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future.
<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>
STEP 3
Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it.
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.
#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;
}
STEP 4
Check the final result... really simple, huh? You only have to structure well the code and practice!
