Main?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
Optional
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="100%" border="0" cellspacing="0" cellpadding="3" height="100%">
<tr valign="top">
<td> </td>
<td width="170" bgcolor="#C8B296"> </td>
</tr>
</table>
</body>
You don't have to add all the indents, but I did to make things neat. HTML ignores more then multiple spaces in a row, and carriage returns.
The width of this table is 100%, 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 2 coloumns, and 1 row. The 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> </td> : That's where the image and the content
will go. I'd put the same bgcolor as the <body> tag's bgcolor.
<td width="170" bgcolor="#C8B296"> </td>
: That's where the links will be. The background color is a tan-ish color. You
can change this.
Step Two: Fill In The Cells
Now, we need to fill in the four cells with the content!
Get your 400 wide x 100 height image, and place it in the "images" folder. Mine is called "image2.jpg"
Replace the in <td> </td> with your content, and the image at the top. This is how I did mine:
<td>
<p align="center"><img src="images/image2.jpg"
width="400" height="100"></p>
<p>
<u>Content </u><br>
This layout only needs a 400 x 100 pixel image. Actually, you can make that
image a little bigger or smaller, just don't go over 500 pixels wide, and 200
pixels tall, or it will be to big.
</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>
Replace the in <td width="170" bgcolor="#C8B296"> </td> with your links. I made mine like this:
<td width="170" bgcolor="#C8B296">
<p>
<u>This Site </u><br>
<a href="index.html">Index</a><br>
<a href="filename.html">Link 1</a><br>
<a href="filename.html">Link 2</a><br>
<a href="filename.html">Link 3</a>
</p>
<p>
<u>OutSide </u><br>
<a href="http://ocad.syste.ms">OCAD</a><br>
<a href="http://beautify.diaryland.com">Beautify</a><br>
<a href="http://webtaox.tripod.com">WebTao</a>
</p>
</td>
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 "style2.css".
Type your style sheet like mine:
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #FFFFFF}
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?
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="style2.css" type="text/css">
</head>
Save everything, and your done! Double click on index.html to see the finished product.