Div Layout Tutorial

Step 1

I'm going to use the graphic program paint.net to demonstrate this, paint.net is a free program. I encourage you to download it. (I have photoshop, but I still use paint.net sometimes. That's how good it is, my opinion)

You need to create your layout in your graphic program. You can make it whatever size you want, though I'd recommend doing the width around 900px. The height, whatever you want it to be. Personally, I like my div layouts to be minimal and having lots of scroll-boxes (aka scrollable div's). Easier navigation, etc.

Anyway, if you want to include your own menu on your div layout, you may. We're going to be using one picture in this whole layout.
The picture I'm using to demonstrate this is 890px x 639px. I am not going to show you step-by-step on making your layout in paint.net, you can have the freedom of experimenting. My layout, I planned on having 2 boxes - one is about me, the other is my blog. I also planned on making a marquee (scrollable text) near the bottom.

So you have your layout planned out, or at least some idea. Now, upload your picture to an image hosting service (I prefer FileDen, but Photobucket works as well. Whichever you use, and it doesn't have to be one of the ones I mentioned).
Copy your image URL, we'll need it in the next few steps.

Introduction | Step 2