Ak Rotation Insolence Natacha's Blog Blessed Enchantement Reviews

Main

Home Site Miscellaneous

Graphics

Layouts Avatars Brushes Wallpapers Textures

Tutorials

HTML Layout CSS PHP

Affiliates

Deadly Nightshade

Apply? Linkage


Join Angel Knight's Rotation!
eXTReMe Tracker

 

Div Layer Layout Tutorial

To make a div layer layout some people think they need big programs like photoshop or something,
but its not true!

You can make a layout with a simple program like paint!Of course they wont have those amazing effects that some people have on there layouts, but if you have real talent you will be able to make a nice layout!Take me for example, I used only paint on the site's layout V.1 to V.4

Part 1 // Making The Picture

First you have to start with a picture your going to be using, try not taking a picture more than 800px wide.

I used for this tutorial this picture

Then you open up the program you will be using..(ex:photoshop,paint)

Second you have to think of the colors for your layout,
Then you have to make a rectangle that will make your navigation when you will be all done.
Make it touch the bottom of the picture

It showed look something like this

(Note that i make that box with photoshop 7.0, you can not make it transparent with paint)

Next you have to make the rectange for the content

It showed look something like this

Next you have to think of a title for your layout,
I named mined Ocean Waters

If you don't like the fonts on your computer you can download some on Dafont.com

Mine Looks like this know

Know that your finish putting a title you can add some more personal mark so that no one can steal your layout! I wrote on mine: Layout By : Natacha

Mine Looks like this know

Next you have to cut the bottom of your layout (1px long) and save it on your server.
this is for the background picture so that when you will be using the layout the boxs continue to get longer.

Looks like this while using paint

After Saving the background to my server this is how it looked:

Background

Then you take the background and make it continue with a color like this:

Like this

Know, after all of this you must have 2 picture saved on your computer.(make sure there saved as jpg or jpeg)
Name the main picture as pic1.jpg and the background as back.jpg

That was all simple don't you think? Well that was all for The Part 1 // Making The Picture!

Part 2 // Coding It

This is much harder than the first part!

Know, you have 2 pictures, upload them to your server without changing the names,
they both go in the coding. this is what a main code looks like WITHOUT ALL CSS, if you want to add CSS to your layout please read the CSS tutorial.

This is what Ocean Waters looks all finish.

Main Code (without all CSS):

Were it says:

left: HOW MANY PIXELS FROM LEFT px;
width: WIDTH OF TABLE px;
top: HOW MANY PIXELS FROM TOP px;

For both navigation and content, you must find how many pixels they have from left and from the top, and also the width of the box you made at the beginning in your picture

For example:

left: 200px;

That is how you must write it.

When you are finish that you just have to finish the CSS to change the links and your writing. Please read the tutorial.

If this tutorial really did help you, it would be really nice to credit us somewhere on your site, :)

Need Help with this tutorial?
Email Natacha at natacha@angelknight.net

Announcements

Sonic - Yes!! its a half decent sonic game that you can play online!

Sonic Yes!! Plus over 100 games !
Click Here to Play For Free
 


Join Angel Knight's Banner Exchange

View Credits