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.

Mini-layout inspired on 9rules design - CSS Part

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.

New Posts

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

Currently on Page 1 of 24

CONTENT:

	

New Posts

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

Currently on Page 1 of 24

FULL CODE

<body>
The idea behind this blog is mainly to be a channel to design.

New Posts

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

  • Inspiration: Amy Stein Photography

Currently on Page 1 of 24
</body>

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.

Mini-layout inspired on 9rules design - CSS Part

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.

Mini-layout inspired on 9rules design - CSS Part

Mini-layout inspired on 9rules design - CSS Part

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!

Mini-layout inspired on 9rules design - CSS Part

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.