Main   Layouts   About   FAQ   Links  Extras   Guestbook

The *Official* Ae-D Layout Tut
 Disclamer - I am not a professional. I have never claimed to be. If you have a problem with any of the following, don't tell me about it because I don't want to know. I have written this because of many requests on how to build better HL pages, and this is my personal reply.

Okay, so you have learnt HTML, and think you're ready to have a try at making your own Horseland page.

First off, DESIGN the layout. It can be on a scrap piece of paper, school textbook, PostIt Note, maths homework sheet, or in your head. Whatever. It doesn't matter as long as you have a rough idea as to what your doing. When doing so take into consideration the following factors: 

  • amount of text
  • the 'look' (grungy, classical, whatever)
  • loading time (lots of pictures means lots of KBs!)
  • acceptable HL coding (no i-frames, no scripts)
  • types of coding that you want to use (tables, divs, etc)
  • Available software (see below)
  • screen res (why do a page for 1280x1024 when most users have 800x600?)
  • Updatability (can you easily change the text?)
  • Image(s) you're intending to use

To make a good layout, you can't do it on your own. You need a good graphic editor like Adobe Photoshop or Paintshop Pro (Paint is okay to begin with, but not good!), and if you're really lazy, a HTML generator like FrontPage (which comes with Microsoft Office) or Adobe GoLive. A recent version of Internet Exploder is a must, so is Notepad for easy offline editing.
That's all the basics. Anything more nifty gadgets you've come across on the net, use! It gives you an unfair advantage over the rest of 'em! :P

Step two - the GRAPHICS. Go into your grapic editor and put your ideas into reality. Play around with the images, the text areas and all the rest. Make sure that in the process you're thinking about how *exactly* your going to put the page together, and design the images around that. When you think you've finished, draw lines where you're going to crop the image and SAVE the orginal pic, trying to retain the layers (this will mean saving as a .psd in Photoshop, I don't know about the others) in case you stuff up.
Crop the original image into the smaller segments, keeping to the lines.
When saving the images, try going for as smaller resolution as you can before it starts to look all funny. In Photoshop use 'Save For Web...'. This cuts loading time down.

Step three - putting it all back TOGETHER AGIAN. Okay, lazy peeps, go into your HTML generator, massacists go into Notepad, and generate your HTML! If it makes you feel better I use Frontpage mostly.
Save as a .html file, and take a peep at it regularly in IE.

UPLOADING. When you've finished everything, and all the bugs have been, erm...squashed in their tracks...go into your host and upload your image files. Make sure that you are somewhere that allows direct linking (ie. not geocities!), and make those changes in your code, linking to where the pics are. Don't forget the http:// bit!
A little hint, if you're using HL horse pics for your layout pics, remember to write down the horse number that corresponds to each image. This makes editing easier.

Saving in HL. Get the finished html document, and get rid of all the <html> <head> <title> and <body> tags. Copy and paste it all into the little text box in your account. And voila! You have a page!

HINTS and TRICKS. 

  • When surfing around on the net (not just HL), if you see something you like, work out why it looks so good, and do a 'Save As...' so that you can refer back to it later on. You mean STEAL?!!?!?!! Yes, kind of. Don't copy it *exactly*, but use that little bit you like, and put it together with bits and pieces from other sites that you like to create an original looking page.
  • The pics *make* the layout. Dodgy pics make a dodgy page.
  • Don't use clashing or hard to read colours. Use common sense. Bright red text on a fluro green background isn't a good look 0_o!
  • Make a design, have a break from the computer (go riding!), then come back and fix up the problems, as seen in a whole new light.
  • Music! Make making layouts fun! Listen to groovy music, or else match the music to the type of page your doing. It'll also give you extra inspiration. Delerium and grunge - a match made in heaven! 
  • Make sure that when you save the elements of the layout, that you label them so that you know what each one is in the future. Instead of akhaklh.jpg and horse1.gif use names like layouta_1.jpg and layouta_bg.gif. This is especially useful if you have tons of layouts in that one folder, and makes them easy to find.
CONCLUSION. Nothing in this world gives as much satisfaction as slogging it out and putting in your all to make something, then standing back and admiring your hard work when your finished. You can pay off people to make your page, but nothing can compare to the feeling of people admiring your page and you saying, 'Yeah, I made it all on my own'.
So what are you still doing here? Go on, shoo fly! Make your on damn pages! :P

[Back]   [Putting it to the test]