July 29, 2008 from fabiano's blog
Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started!
STEP 1 - SECTIONS
First of all, we need to open the file at the the Tutorial Part 1. After that, we're going to set the regions of this page, this will help us to make the code.
STEP 2 - THE CODE
Now we can start to code. We will make the basic structure and then see how the page will look only with some plain text. To do the code, we use Smultron, a free and powerfull text editor, but you can use whatever you want. Let's code it region by region:
HEADER:
MAIN:
The idea behind this blog is mainly to be a channel to design.
CONTENT:
FULL CODE
<body></body>The idea behind this blog is mainly to be a channel to design.
You may save this file and call it index.html. Here you can see how your browser will render it with no styles right now.
STEP 3 - SLICING THE PNG
At this step, we're gonna hide some layers and use the Slice Tool to export the images that we'll use in the CSS. Select the tool and make the slices as shown.
STEP 4 - EXPORTING IMAGES
After making the slices we'll export the images. Click with the right button over each slice and select Export Select Slice, save the images inside a folder in the root, and call this folder "images". Check the names of each image we've exported.
STEP 5 - CSS
Now we must link the CSS file in the HTML. Insert the following line inside the <head> tag.
To build the CSS we'l use CSSEdit. Open a new CSS file and save it on the root folder as style.css. To begin the styles we will create the main ID's.
body {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background: #000;
}
#total {
width: 600px;
height: 600px;
border: 5px solid #FFF;
position: relative;
margin: 20px auto;
}
#header {
height: 105px;
background: url(images/bg_header.jpg);
position: relative;
}
#main {
background: url(images/bg_body.png) left top repeat-x #DBE8C4;
height: 477px;
width: 500px;
padding: 18px 50px 0 50px;
}
#slogan {
width: 195px;
height: 82px;
background: url(images/bg_slogan.jpg) no-repeat;
color: #325D6A;
padding: 18px 20px 0 285px;
line-height: 1.3em;
}
#content {
background: url(images/bg_roundWhite_top.png) left top no-repeat #FFF;
margin-top: 15px;
}
#footer {
background: url(images/bg_roundGreen_top.png) left top no-repeat #81AC40;
margin-top: 15px;
}
Now, let's make the style for the contents inside the ID #content. We must create the #content_inner, to make the round corners at the bottom and at the top.
#content_inner {
background: url(images/bg_roundWhite_bottom.png) left bottom no-repeat;
height: 240px;
padding: 10px 15px;
}
#content_inner h2 {
margin: 0;
color: #666;
font-size: .9em;
font-weight: normal;
border-bottom: 1px dotted #CCC;
padding-bottom: 10px;
height: 15px;
}
#content_inner ul {
margin: 0;
padding: 0;
}
#content_inner ul li{
margin: 0;
padding: 0;
list-style: none;
height: 50px;
padding-top: 10px;
padding-left: 15px;
border-bottom: 1px dotted #CCC;
}
#content_inner ul li.gray {
background: #f5f5f5;
}
#content_inner ul li h3 {
margin: 0;
font-size: .95em;
line-height: 20px;
}
#content_inner ul li .submitted {
color: #666;
font-size: .8em;
height: 20px;
line-height: 20px;
}
#content_inner ul li .submitted a{
color: #325D6A;
font-weight: bold;
text-decoration: none;
}
#content_inner ul li .submitted a:hover {
color: #000;
text-decoration: underline;
}
#content_inner .pager {
position: relative;
height: 30px;
}
#content_inner .pager .pages {
position: absolute;
left: 0;
top: 0;
color: #666;
font-size: .7em;
line-height: 30px;
}
#content_inner .pager .pages strong {
color: #000;
}
#content_inner .pager .links {
position: absolute;
right: 0;
top: 10px;
height: 18px;
line-height: 18px;
font-size: .6em;
font-weight: bold;
text-transform: uppercase;
}
#content_inner .pager .links a{
text-decoration: none;
background: #325D6A;
color: #FFF;
line-height: 18px;
height: 18px;
padding: 3px 5px;
margin-left: 5px;
}
#content_inner .pager .links a:hover {
background: #000;
}
For the footer, we're gonna do the same thing, create the #footer_inner for the round corners.
#footer_inner {
background: url(images/bg_roundGreen_bottom.png) left bottom no-repeat;
height: 70px;
line-height: 70px;
text-indent: 15px;
color: #2A3D15;
font-size: 1.2em;
font-weight: bold;
}
For our final step, we're gonna place the logo. We're gonna name our logo 'logo.png'. Take a look how we'll make this style.
#header h1 {
width: 292px;
height: 130px;
background: url(images/logo.png);
margin: 0;
text-indent: -2000px;
position: absolute;
left: 50px;
top: 20px;
}
#header h1 a {
display: block;
width: 292px;
height: 130px;
outline: none;
text-decoration: none;
}FINAL RESULT
You can see that all process is very easy, but you must exercise the CSS part, this is the heart of web design. A beatiful code is nothing without a good CSS to show the hard work we had to design. Practice and share with us your results!
| Attachment | Size |
|---|---|
| 9rules_tutorial.zip | 312.2 KB |
