Make Your Own Layouts

Where We're Going
Before you start, you need to know the finished product. I'm going to show you how to make a layout like that, only you're going to add your own elements!

Supplies
Here's what you'll need to get started:

Required

  1. Notepad or simple text editor. Not MS Word!
  2. A Graphic: 500 pixels wide, 100 pixels high. Under 20 KB recommended.
  3. 3 colors: A background color, a second background color, and a color for the links. Hex codes found here.

Optional

  1. A graphic to tile in the background.
  2. Graphics Program

Step One: Build The Frame
Create a folder to contain all the files that you are going to make some where on your hard drive. It would be easiest to put it on your desktop. Call it "my_website".

In the "my_website" folder, make a new folder called "images". All lowercase, no spaces! Avoid spaces and uppercase letters when designing websites. The images folder will come into play later, but basically it's going to be where we store all the image files, to keep things neat.

Open notepad (or any basic text editor). Rule 1, and remember it well, save often!! Let's start by saving, Go to File > Save As. Navigate to the "my_website" folder, and save it as "index.html". Make sure it saves as a .html file. If it saves as an index.html.txt file, then delete it, and save it as index.html again, only put quotations around the file name when you are saving it. Remember, don't save it in the images folder, save it in the my_website folder, next to images!

Let's start typeing. Make the four basic tags:

<html>
<head>
<title>Jenni's Page</title>
</head>
<body>

</body>
</html>

You can make the "Jenni's Page" part whatever title.

Now we need to specify a few things in the body tag. Make your body tag like so:

<body bgcolor="#FFFFFF" text="#000000" rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

bgcolor="#FFFFFF" : We need to set the background color, even though we are going to use an image in the background, in case the image doesn't show up. Right now it's #FFFFFF, but you can change this to your hex code.
text="#000000" : Black text
rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" : Tells Internet Explorer what to make the margins around the page.
marginwidth="0" marginheight="0" : Tells Netscape what to make the margins.

Next, let's build the table. In between <body>, and </body> Place the table like so:

<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
  <tr>
    <td valign="top" height="100">&nbsp;</td>
  </tr>
  <tr>
    <td valign="middle" height="30" bgcolor="#C8B296" align="center">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>
</body>

You don't have to add all the indents, but I did to make things neat. HTML ignores multiple spaces in a row, and carriage returns.

The width of this table is 500, and the height is going to take up 100% of the screen. There will be no space around each cell (the <td>'s). This table consist of 3 rows (the <tr>'s) and 1 coloumn (the <td>'s). The &nbsp; means "make a space" to the browser. That's because Netscape doesn't like empty cells, and therefore you must put something in them.

<td valign="top" height="100">&nbsp;</td> : That's where the image will be.
<td valign="middle" height="30" bgcolor="#C8B296" align="center">&nbsp;</td> : That's where the links will be. The background color is a tan-ish color. You can change this.
<td valign="top" bgcolor="#FFFFFF">&nbsp;</td> : This is where the content will go. I'd put the same bgcolor as the <body> tag's bgcolor.

Step Two: Fill In The Cells
Now, we need to fill in the four cells with the content!

Get your 500 wide x 100 height image, and place it in the "images" folder. Mine is called "image3.jpg"

Replace the &nbsp; in <td valign="top" height="100">&nbsp;</td> with <td valign="top" height="100"><img src="images/image3.jpg" width="500" height="100"></td>. Make sure to replace "image3.jpg" with the name of your image.

Replace the &nbsp; in <td valign="middle" height="30" bgcolor="#C8B296" align="center">&nbsp;</td> with your links. I made mine like this:

<td valign="middle" height="30" bgcolor="#C8B296" align="center">&nbsp;
<a href="index.html">Index</a> : <a href="filename.html">Page1</a> : <a href="filename.html">Page2</a> : <a href="filename.html">Page3</a> : <a href="filename.html">Page4</a>
</td>

Replace the &nbsp; in <td valign="top" bgcolor="#FFFFFF">&nbsp;</td> with your webpage's content. I made this in mine:

    <td valign="top" bgcolor="#FFFFFF">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
        <tr>
          <td>
<p>
<u>Content&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u>
<br>
This layout is easy! All you need is a 300 x 200 pixel image, and another image to tile in the background!
</p>
<p>
<a href="http://www.subterrane.com/loremipsum.shtml" target="_blank">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
          </td>
        </tr>
      </table>

    </td>

Why did I make another table inside the table? Well because I didn't want my content to touch the edge of the other table, so I made a new one with the cellpadding set to 3. You can put whatever you like inside though!

Step Three: The Style Sheet
The layout has everything in place, but it doesn't look right yet does it?

It needs a style sheet! Open another notepad, and save it in the "my_websites" folder as "style1.css".

Type your style sheet like mine:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #FFFFFF; background-image: url(images/background.gif)}
td { font-size: 10px}
a { color: #990000; text-decoration: none}
a:hover { color: #CC0000; text-decoration: underline}
a:visited { color: #660000}

Now you need to change a few things:

Verdana, Arial, Helvetica, sans-serif : What font face's do you want? Seperate the names with commas. You don't need to use uppercase.
font-size: 10px : How big do you want the fonts to be? Make sure to make both of them the same (there is one in the body line, and one in the td line).
color: #000000 : What font color?
images/background.gif : What image do you want tileing in the backround? Type the address here. Don't forget to put a background file in the "images" folder. My background file is called "background.gif".
a { color: #990000; text-decoration: none} : This controls the links
a:hover { color: #CC0000; text-decoration: underline} : This controls links that have a mouse pointer over them.
a:visited { color: #660000} : This controls links that have been visited.

Now you need to show your HTML file where the style sheet is. After the </title> tag, but before the </head> tag, put this:

<title>Jenni's Page</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>

Save everything, and your done! Double click on index.html to see the finished product.

Main?