PDA

View Full Version : [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 (http://nmc.loyola.edu/intro/planning/images/inFireworks.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.com (http://www.tizag.com/)or http://www.htmlgoodies.com (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!

Zroc
04-12-2007, 09:48 PM
Slicing, please explain more on that. I can make templates, I do it all day long, however I then have to pay people to code my site >.<

Stoosh937
04-12-2007, 09:51 PM
http://zomgcatz.com/images/supercat.jpg

Edited by mat64 (Forum Super Moderator): Please don't post pointlessly.

Colin-Roberts
04-12-2007, 09:55 PM
Real Coding doesn't involve slicing..

Pazza
04-12-2007, 10:05 PM
*cough* Basic.

Stoosh937
04-12-2007, 10:06 PM
http://www.zomgcatz.com/images/cat28.jpg


Edited by mat64 (Forum Super Moderator): Please don't post pointlessly.

redtom
04-12-2007, 10:11 PM
Real Coding doesn't involve slicing..

Haha, yeah you wish, hardly any good layouts use coding alone.

Pazza
04-12-2007, 10:16 PM
redtom ,

You've confused me :P

Want to hide these adverts? Register an account for free!