You will need at least a basic knowledge of html to use my sets and to follow along with the information contained on this page. All sets have an html file already coded for you inside the .zip file. This guide is to show you what that html page looks like. There are many places on the internet that are much more adept in helping you, just go to any search engine and type in 'tutorial html' and a gazillion pages will show up :)
I use 'tables' to format all my pages (basic & advanced). All my 'basic' sets have a graphical border on the left side of the page. The easiest and most efficient way to keep your page aligned and the text out of the graphical border (left or right borders) is the use of a transparent .gif 5x5 (one is included in all the 'basic' set zip files) then stretch the .gif to any size you need to accommodate your side graphic + 10. Which means if you have a side border that is 100 pixels wide then you would stretch your transparent gif to 110 pixels wide.
By placing that .gif in the *first* table cell in the *first* row it will force everything below it (your page) to retain that width throughout the table. I have already done this for you on all my sets.
Ok, now that that is out of the way let's get down to business .... below is a copy of the html file from one of my 'Basic' sets that you will edit to create your page ...
<html>
<head>
<title>The Title of your Page Goes Here (this 'title' is for the search engines)</title>
</head>
<body background="backgroundimage.gif" bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#">
<TABLE border="0" cellpadding="0" cellspacing="0" valign="top" align="center" width="70%">
<tr>
<td valign=top>
<img src="clear.gif" width="110" height="1" border="0">
</td>
<td valign=top>
<!- YOUR CONTENT GOES HERE :: EDIT BELOW THIS LINE ->
<__________________________________________________________________________________________>
<p class="closer" align="center" FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="+2" COLOR="#DEDEDE" YOUR TITLE GOES HERE (and this title is what will display at the top of your page)>
***** All of your page content goes in here *******
<__________________________________________________________________________________________>
<!- YOUR CONTENT GOES HERE :: EDIT BELOW THIS LINE ->
</td>/td>
</table>
</body>
</html>
As you can see from above, the parts you need to change and exactly where to place your page content is clearly marked for you. I have coded each page table so you will not have to worry about that. I have also coded all the buttons for you. All you will need to do is insert the href tag to make them into actual links and place them where you want them on your new web page.
I hope this helps, if you have any questions or comments please email me via the link at the bottom of this page. Enjoy your new web page!
For these sets I have chosen to use 'nested tables' it gives more control and flexibility in design layout. I have made it extremely easy for you to use however, I would recommend only those with at least a basic understanding of HTML attempt to use these sets.
Below I will show you were you can change things such as colors, links etc., I have these items clearly marked inside the html file that is included in each zip.
Ok, now that that is out of the way let's get down to business .... below is a copy of the html file from one of my 'Advanced' sets that you will edit to create your page ...
my comments are marked ****
comment: blah blah blah ****
<html>
<head>
<title>THE TITLE OF YOUR PAGE GOES HERE</title>
****
comment: this is a new addition that will be found in most of my Advanced sets, it is an in-line css style, you can use it to change the way that your links (active, visited, hover, etc) are displayed (underlines, over lines, background color, etc.) ****
<style TYPE="text/css">
BODY {text-decoration: none; }
A:link {text-decoration: none; }
A:visited {text-decoration: none; }
A:active {text-decoration: underline; }
A:hover {text-decoration: underline; color: "#"}
</style>
>head>
****
comment: below is where you can change the body text colors & the link colors ****
<body bgcolor="#000000" text="#ccc8bf" link="#ccc8bf" vlink="#ccc8bf" alink="#ccc8bf" topmargin="0" leftmargin="0" rightmargin="0">
****
comment: below is where you set up your links. All you need to do is add the url and the name of the link ****
<p align="center">>p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
****
comment: When you look at the "preview" of a set notice where the 'page decorations' are, this is where you will insert your page content. In the coded HTML file you will see the two lines below you will also notice the code for the the page decorations, this is where you will insert your content. ****
<!-- YOUR CONTENT GOES BELOW HERE -->
<!-- YOUR CONTENT ABOVE BELOW HERE -->
Nothing else needs or should be changed in the HTML file. I hope this helps, if you have any questions or comments please email me via the link at the bottom of this page. Enjoy your new web page!
