Tutorial 2 >>

[mmmbisto]

http://www.littlesocks.co.uk/tutorials/layout-tut1.gif

We're going to make a basic table layout. It's eye pleasing, and very simple to make! Firstly we're going to make a header image. I'm making on that's 400x100.

http://www.littlesocks.co.uk/tutorials/layout-tut2.gif

I've picked a blue colour, and I'm going to paint the whole image in that colour :)

http://www.littlesocks.co.uk/tutorials/layout-tut3.gif

Once that's done I'm going to add some text to the image. For great fonts, check out fontalicious.com which is where I get mine from.

http://www.littlesocks.co.uk/tutorials/layout-tut4.gif

Once I've positioned the text where I want it, I'm going to add an effect to make it stand out a little more. So I use "Inner Bevel"

http://www.littlesocks.co.uk/tutorials/layout-tut5.gif

These are the settings I used. And you can see on the right, that's what our image is going to look like.

http://www.littlesocks.co.uk/tutorials/layout-tut7.gif

and our finished image! Now to put together a webpage!

http://www.littlesocks.co.uk/tutorials/layout-tut8.gif

I'm using Frontpage for this part, although you can use any software that you're used to. I'm going to add a background colour to the page. Pick any colour from what there is to offer. We're going to change it anyway. What's the point in writing the HTML yourself, when it does it for you? Hehe.

Click on the HTML tab, and change the background tag to the following (You're just changing the HEX colour):

http://www.littlesocks.co.uk/tutorials/layout-tut9.gif

To add a table, you'll need to click this image. Draw a table at the top, big enough to fit your image in, and then add another table below that and split it into 2. The left will be a menu to navigate around the rest of the site, and the right will be the main area.

http://www.littlesocks.co.uk/tutorials/lay...ayout-tut10.gif

HTML:

[center]
[img=file:///E:/My%20Documents/Kirsty/Images/tutorials/layout-tut7.gif][/center]
[center][/center]

http://www.littlesocks.co.uk/tutorials/lay...ayout-tut11.gif

Right click in the main area, and choose "cell properties". Again choose any colour, cos we're going to change it in the HTML:

(add the #67ACD7 from whatever colour you chose)

http://www.littlesocks.co.uk/tutorials/lay...ayout-tut12.gif

http://www.littlesocks.co.uk/tutorials/lay...ayout-tut13.gif

You could leave the site as it is, or you can add stuff to it. The picture on the bottom (bottom link) has a border around the bottom table (right click, table properties, border=1) and the same with the picture.

You can just get a black border around the main area of the layout, using CSS. This is a little more complicated.

find:

 for the main area, and then change it to: 
http://www.littlesocks.co.uk/tutorials/lay...ayout-tut14.gif
You can even add some images to the menu to break it up a little more :)
Hope that given some of you some inspiration!

[Guest Cookie]

No, even more confused. :( :( :(

[mmmbisto]

What part are you stuck on, so I can explain it a little better?

[Prince of Calcutta]

what software did you use to create the 1st text picture thing .. ?

and off topic but how can i make one of those blinkie thingies like your signature .. ? :)