[Basic Tut] Making and coding a layout

Pazza · 04-12-2007, 09:43 PM

I made this in a post, and some people liked it - so I remade it and put it into a thread =)

Okay, here comes a lame explanation:

To Make The Layout:

1 - Go into a graphic design program [Paint, Fireworks, Photoshop ETC.]
2 - Get the simple out line of your design.
3 - Add content boxes and 1 box bigger that the other for main content.
4 - Fill in colours that suit the purpose [Habbo - orange,blue ETC.]
5 - [OPTIONAL] Add some images, for Habbo Add habbos etc.
6 - When you've finished the layout, add a banner.
7 - Make sure there are no pixel errors and you have the simple layout.
IMPORTANT- Make sure the dimensions arent too big or too small.

Coding Your Layout:

1 - Use a program like Macromedia Fireworks to 'Slice' your layout.
2 - There will be a button on the side like this: http://nmc.loyola.edu/intro/planning...nFireworks.gif
3 - Use it to make a square inside the content boxes and this is where the content of the boxes would go.
4 - After you think you have sliced appropiately, on the top right corner click export to dreamweaver and put it to a file of your choice.
5 - Now open a program like Dreamweaver, Frontpage.
6 - You will notice there are outlines where you can write in, this is the simple sliced layout in HTML.
7 - You can add content in them boxes and upload all of the files to a webhost.
8 - If you want to make your layout even better, make the main content box an IFRAME.
9 - For some HTML Codes try: http://www.tizag.comor http://www.htmlgoodies.com.

I hope this Helped you!!
I've sat here for 15 minutes writing this haha.

Yah, hope it helped

Don't rip, i dont see why you'd want to but hey ho, lets go!