STEP 1. Copy, name and save all 6 files below

:: "You will copy and paste these 6 files into a folder on your computer - copy, paste and name these files exactly as instructed and you will have the basics of a great working adsense template..."

Create a seperate "Notepad" file for each of the following files below. Then save the files below into a common folder on your computer: Choose a meaningful name for the website folder.

IMPORTANT! - you will need a web host that supports .asp files to accomplish this portion of the tutorial!

You should still copy and save the files first - HOWEVER these files will need to be uploaded to an internet host server that supports .asp files in order to view your web pages. Learn how to "sign up for" and "set up" a domain here : Hosting Account the Supports .asp Files

This is a one time set up - as a serious adsense publisher YOU MUST learn how to do this. Believe me , it's a very simple step-by-step process so don't panic!

But first...let's first get started copying our core 6 files. Save all files into a folder on your C:\ drive. CREATE A FOLDER AND NAME IT SOMETHING MEANINGFUL - AS IT RELATES TO YOUR WEBSITE.

ALSO -PRINT THE INSTRUCTIONS OUT! - For each step, it's easiest to print outthe instructions so you won'y have to keep switching screen views.

FILE 1 - Copy Index File Code

Save and name it: "index.asp"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Your Website | Place Title description for each page here  </title>
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" /> 
<link href="style-moz.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div id="container">
	<div id="top">
		<div class="header">
			
				
				
				<h1>www.yourwebsite.com
				<div class="clearfix"></div>
				</h1>
				
				
		</div>
	
	</div>

<div class="innermain">
		
		<h1>Place Your Main Topic Header Here</h1>
				
		
	
			
		
			
	
				<div class="author">
			"Tag line...this is optional..."
				</div>
				
		<h2>Sub Header</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque.
</p>
<h2>Sub Header</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque.
</p>

<h3>Small Sub Header </h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique. Ut euismod metus eget ipsum. Nulla nisl arcu, tristique ut, interdum tempor, pellentesque nec, neque. Morbi interdum lacinia neque.
</p>

</div>
		
				<div class="subcontent">
				
		
		
				
				<div class="clearfix"></div>
				
</div>
	
</div>
			<div class="footer">
		
			
		
		
			</div>

</body>
</html>

FILE 2 - Copy style sheet 1

Save in same folder - name it "style-moz.css"

body {
	
	text-align:center;
	font-family:verdana;
	font-size:12px;
	padding:0 0 0 0;
	color:#333;
	}
	
	* {
		margin:0;
		padding:0;
		
}
.clearfix {
	clear:both;

}
a:link{
	font-family:arial;
	font-size:11px;
		color:#333;
	text-decoration:none;
	font-weight:bold;

}
a:visited{
	color:#ccc;
	text-decoration:none;
	font-weight:none;
	font-size:11px;

}
a:hover{
	color:#666;
	text-decoration:none;
	font-weight:none;
	font-size:11px;

}

b {
	color:#000;

}

div#container{
	width:860px;
	padding:0 0 0 0;
	margin:0 auto;
	border-top:0px solid #333;

}
div#top {
	width:750px;
	height:91px;
		 border-top:10px solid #ccc;
	margin:0px auto;
	padding:0px;

}

h1 {
	font-size:20px;
	float:left;
	margin:10px 0 3px 0px;
	text-align:left;
	color:#3B491F;

}
h2 {
	font-size:15px;
	
	margin:10px 0 10px 0px;
	clear:left;
	text-align:left;
	color:#333;
	width:none;

}
h3 {
	font-size:12px;
	float:left;
	margin:5px 0 5px 0px;
	padding:3px;
	text-align:left;
	clear:both;
	color:#333;
	display:block;
	background:#eee;
	width:90%;

}

div#top .header .adbanner{

width:468px;
	height:60px;
	border:1px solid #333;
	float:right;
	padding:0px 0 0 0;
	margin:3px 0 0  0;
	clear:right;

}

div#digg {
	width:750px;

border-bottom:1px solid #E3E5C4;
	margin:0px auto;
	background:#fff;
	height:15px;
	
}
div#main {
		width:750px;
		border:0px solid #333;
		margin:0 auto;
			background:transparent;

}
div#main .innermain {

padding:0 0 0 10px;
		width:468px;
		border:0px solid #333;
		background:transparent;
		float:left;

}
div#main .innermain  .pull {
	border:0px solid #333;
	float:right;
	width:170px;
	margin:3px;
	line-height:18px;
	font-style:italic;
	font-size:13px;
	text-align:left;
	clear:left;
}
	
 ul {
	border:0px solid #333;
	clear:left;
	}
ul li{
	list-style:square;
	text-align:left;
	padding:3px 0  3px 0;
	list-style-position:inside;

}

.details {
	 text-align:left;
	 padding:0 0 0 0px;
	 width:100%;

}
.detailsLast{
	 text-align:left;
	padding:0 0 5px 0px;
	margin-bottom:8px;
	width:100%;
	border-bottom:1px dashed #ccc;
	font-size:11px;
	display:block;

}

.details span {
	
	background:#D8D9B4;
	float:left;
	width:35%;
	text-align:right;
	margin:0 5px 0 0px;
	border-bottom:1px dashed #eee;

}
div#main b{
		color:#343831;

}
	
div#main .innermain a{
	color:#59691C;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;

}
div#main .innermain a:hover{
	color:#ccc;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;

}
div#main .innermain a:visited{
	color:#color:#59691C;
	text-decoration:underline;
	font-weight:bold;
	font-size:12px;

}
	
.author {
	
	float:left;
	clear:left;
	border:0px solid #333;
	width:100%;
	text-align:left;
	font-style:none;
	font-weight:bold;
	margin:0px 0 8px 0;
		font-size:11px;

}
.author i {
	display:block;
	font-style:italic;
	font-weight:none;
	font-size:11px;
	margin:5px 0 5px 0;
	
	}

p {

clear:left;
	text-align:left;
	width:none;
	margin:5px 0 5px 3px;
	display:block;
	line-height:20px;

}

div#main .subcontent {
	float:right;
	background:#fff;
	width:250px;
	border:0px solid red;
	margin:10px 0 10px 0px;

}
div#main .subcontent .featured {
			border:0px solid #333;
}

div#main .subcontent .featured .subheader{
	width:246px;
	background:#eee;
	float:left;
	padding:2px;
	font-weight:bold;
	text-align:left;
}

div#main .subcontent .featured span a{
clear:left;
display:block;
float:left;
text-align:left;
border:0px solid #333;
width:100%;
background:#fff;
padding:2px 0 2px 0;
}

.footer {
	clear:both;
	border:0px solid #333;
	width:860px;
	margin:0px auto;
	height:78px;
	
		padding:0 0 200px 0;
}

.footer p {
 
	 text-align:center;
 
 }

FILE 3 - Copy style sheet 2

Save in same folder - name it "style-IE6.css"

body {
	
	text-align:center;
	font-family:verdana;
	font-size:12px;
	padding:0 0 0 0;
		color:#333;
}
	
	* {
		margin:0;
		padding:0;
		
}
.clearfix {
	clear:both;

}
a:link{
	font-family:arial;
	font-size:11px;
	color:#333;
	text-decoration:none;
	font-weight:bold;

}
a:visited{
	color:#ccc;
		text-decoration:none;
	font-weight:none;
	font-size:11px;
		color:#8D602B;

}
a:hover{
		color:#666;
		text-decoration:none;
		font-weight:none;
		font-size:11px;
		text-decoration:underline;

}
div#container{
	width:860px;
	padding:0 0 0 0;
	margin:0 auto;
	border:0px solid #333;

}
div#top {
	width:750px;
	height:91px;
	border-bottom:0px solid #E3E5C4;
	margin:0px auto;

}
div#top .header .adbanner{

width:468px;
	height:60px;
	border:1px solid #333;
	float:right;
	padding:0px 0 0 0;
	margin:4px 0 0  0;
	clear:right;

}
h1 {
	font-size:20px;
	float:left;
	margin:8px 0 3px 0px;
	text-align:left;
	clear:left;
	width:400px;
		color:#333;

}
h2 {
	font-size:15px;

margin:10px 0 10px 0px;
	padding:0px;
	text-align:left;
	clear:left;
	color:#333;
	
}
h3 {
	font-size:13px;
	float:left;
	margin:5px 0 5px 0px;
	padding:3px;
	text-align:left;
	clear:left;
	color:#768356;
	background:#eee;
	width:90%;
}

p {
	border:0px solid #333;
	text-align:left;
	line-height:18px;
	margin:5px 0 5px 3px ;
	
	}

div#digg {
	width:750px;
	border-bottom:1px solid #333;
	margin:0px auto;
	background:#fff;
	height:15px;

}
div#main {
		width:750px;
		border:0px solid #333;
		margin:0 auto;
		background:#fff;

}

div#main .innermain a{
	color:#59691C;
		text-decoration:underline;
	font-weight:bold;
	font-size:12px;

}
div#main .innermain a:hover{
		color:#ccc;
		text-decoration:none;
	font-weight:bold;
	font-size:12px;

}
div#main .innermain a:visited{
color:#59691C;
		text-decoration:underline;
	font-weight:bold;
	font-size:12px;

}
       div#main .innermain{
		width:468px;
		border:0px solid #333;
		float:left;
		background:#fff;
		padding:0 0 0 10px;
		font-family:verdana;

}
	div#main  .innermain  .pull{
	border:0px solid #333;
	float:right;
	width:170px;
	margin:3px;
	padding:1px;
	line-height:18px;
	font-style:italic;
	font-size:13px;
	text-align:left;
	clear:none;

}
 ul {
	 clear:both;
	border:0px solid #333;

}
ul li{
	list-style:square;
	text-align:left;
	padding:3px 0  3px 0;
	list-style-position:inside;

}
    .details {
	text-align:left;
	padding:0 0 0 0px;
	width:100%;

}
   .detailsLast{
	text-align:left;
	padding:0 0 5px 0px;
	margin-bottom:8px;
	width:100%;
	border-bottom:1px dashed #ccc;
	font-size:11px;

}
.author {
	float:left;
	clear:left;
	border:0px solid #333;
	width:100%;
	text-align:left;
	font-style:none;
	font-weight:bold;
	margin:0px 0 8px 0;
	font-size:11px;

}
.author i {
display:block;
font-style:italic;
font-weight:none;
	font-size:10px;

}
p {

clear:left;
	text-align:left;
	width:none;
	margin:5px 0 5px 3px;
	display:block;
	line-height:20px;

}

div#main b{
		color:#343831;
	
		}

div#main .subcontent {
	float:right;
	background:#fff;
	width:250px;

}

div#main .subcontent .featured {
	
	border:0px solid #333;
}
div#main .subcontent .featured .subheader{
	width:250px;
	background:#E3E5C4;
	float:left;
	padding:2px;
	text-align:left;
	font-weight:bold;
}

}

div#main .subcontent .featured span a{
		clear:left;
		display:block;
		float:left;
		text-align:left;
		color:#333;
		width:100%;
		background:#fff;
		padding:2px 0 2px 0;
}

.footer {
	clear:both;
	border:0px solid #333;
	width:860px;
	margin:0px auto;
	padding:20px 0  0 0;
	height:78px;
	
}
 .footer p {
 
 text-align:center;
 
 }

FILE 4 - Top adsense Ad block

Save in same folder - name it : "inc-adsense.asp"

FILE 5 - Right Navigation Menu

Save in same folder - name it : "inc-right-content.asp"

FILE 6 - Footer

Save in same folder - name it : "inc-footer.asp"

Your Folder with all 6 files

All done copying and pasting!

Make sure your folder includes the files named correctly. You need all six files to successfully create the adsense page.

directory-screen-shot

Summary Adsense - Template 1

860 px wide
336 px ad block - top of page
Works in IE6 and above, Safari Ver 3.1, Mozilla Ver 5.0
Easy to update nav menu, adsense block, and footer

Review the web building process: build web site free

Was this helpful? Leave a comment...

Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!

Comments...

Comment posted on : 7/30/2008 6:56:18 PM
I tried the steps and was happy that my page displayed after I uploaded the files!
poster: Mara

--------------------------------------------------------

NAV :: Build web site free :: How To Make Your Own Web Site BUILD A BASIC WEB PAGE :: Easiest HTML Template :: Create a Web Page - Begin :: Adding Content to your Web Page :: Display Your Webpage :: Adding Headers and Paragraphs :: Adding Sub Headers :: Adding Links :: Summary - Build a Basic Web Page ASP HOST REGISTRATION :: ASP Domain/Host sign up - step by step ADVICE ABOUT FREE TEMPLATES :: Free HTML Web Page Template Information :: How to create a website for free ADSENSE ADVICE :: Make Money With Adsense :: Picking Niche Keywords for Adsense Websites :: Profitable Keywords for Adsense CREATE ADSENSE TEMPLATE :: Adsense Process - Read First :: STEP 1 - Copy files, name and save :: STEP 2 - Add content :: STEP 3 - Add Navigation Menu :: STEP 4 - Add Links to Menu :: STEP 5 - Add Footer to Webpage :: STEP 6 - Add Adsense Code :: How to Upload Web Files :: View Basic Adsense Template ADDING IMAGES :: Add Banner Image :: Add Regular Image :: View Adsense Template with Images HTML/CSS TEMPLATES :: 2 Column Webpage Layout :: 2 Column Webpage Layout with Nav Menu :: 2 Column WebPage Layout with Nav Menu - .ASP Include File :: Divine Ratio Example - Adsense Layout CSS TIPS :: Setting Up an External Style Sheet :: CSS Rules and selectors :: CSS basic selector style examples :: CSS paragraph Styles :: CSS Contextual Selectors Resources :: Useful websites :: Add URL

Create Adsense Website STEP 1