Site hosted by Angelfire.com: Build your free website today!

Making Layouts

Layouts are great because they make a page look more professional and organized. Pages that just have endless text or graphics are annoying, and messy. Plus, when you make your own layout, it makes your page individual and better because you didn't just take someone else's idea.

The first step towards making a layout is realizing what you want it to do or look like. You need to come up with a general idea before you get started. Some aspects to consider are: colors, shape, table design, pictures, link location, and text area size/location.

The first step to making your layout is making your table, that is if you want a table. You must start out with this tag:

<table>

You add your table attributes to this tag. After the "e" of table put a space and add any or all of these. You don't have to put anything between the different ones except for a space. When you do the last one, remember to put this >.


Table Attributes
bgcolor=COLOR
background=IMAGE URL
border=NUMBER
bordercolor=COLOR
cellpadding=NUMBER
cellspacing=NUMBER

To add a row, you put

<tr>

and a column is

<td>

That's pretty much if for tables. The next thing you need to do is find a picture. The best way to do that is go to Google and click on the images button. If you type in the name of what you are looking for, you will almost always find what you want. If you don't find it, try other search terms. For example, instead of typing "South Padre beach in Corpus Christi," type "South Padre," "Corpus Christi," or "Texas beaches." Once you find your image click on it, then click where it says actual size under it. Right click on the actual size image and click "Properties." The URL should be there. Copy and paste the URL into your image code.

Image Code

<img src="IMAGE URL">

Paste the complete code into whatever box of your table you want it to go in.

The next thing you want to do is make a text area. I really would never use a text area that wasn't html allowing.

Text Area Code

<ilayer name="scroll1"> <div id="scroll3" style="width:100;height:75; background-color:COLOR; overflow:auto"> TEXT GOES HERE </textarea></div>

The text area is pretty self explanatory. You can adjust the length and width of the area and change the background color to whatever you want. You can put HTML in there too if you want.

The last thing you want to do to your layout is add links.

<a href="URL">LINK TITLE</a>

Paste the URL you want to link to where "URL" is. Whatever you want your link to say goes where "LINK TITLE" is.

The very last thing you might want to do is a CSS code. Visit my CSS tutorial to learn how to do it.

Home