Website Layouts and Templates

Need a layout for your site? Get templates for free. iFrame and PHP versions available! Professional grade layouts for any use as long as you are not redistributing or claiming the work to be your own.

Cloud layout working by default with an iFrame. Easy to use and has a built in CSS and sidebars on both sides of the layout.

<style type="text/css"> p { font-size : 9px; font-family : arial; color : ; text-align : ; margin : ; } h3 { font-family : arial; color : ; text-align : ; } h2 { font-family : arial; color : ; text-align : ; } h1 { font-family : arial; color : ; text-align : ; } body { font-size : 9px; font-family : arial; color : #000000; background : #80ffff url() fixed repeat; } blockquote { font-size : 9px; font-family : arial; color : ; text-align : ; } a:hover { font-weight : normal; font-size : 9px; font-family : arial; color : #00ffff; background : normal; text-decoration : normal; } a:visited, a:link, a:active { font-weight : normal; font-size : 9px; font-family : arial; color : #000000; text-decoration : bold; } .overlay { width: 800px; height: 1200px; background: url('http://www.aridseas.net//Layouts/welcomeclouds.png') 0px 0px no-repeat; position: relative; } .innerbox { overflow: auto; border: 0px solid #333; position: absolute; } #innerbox1 { top: 108px; left: 133px; width: 553px; height: 94px; } #innerbox2 { top: 412px; left: 15px; width: 136px; height: 778px; } #innerbox3 { top: 417px; left: 642px; width: 134px; height: 773px; } #innerbox4 { top: 416px; left: 168px; width: 460px; height: 774px; } </style> <div class="overlay"> <div class="innerbox" id="innerbox1"><h1>Site Name Here!</h1></center></div> <div class="innerbox" id="innerbox2"> <b>Graphics</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br><p> <b>Guides and Tutorials</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br><p> <b>Other</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> </div> <div class="innerbox" id="innerbox3"> <b>Other</b></center><p> <b>Affiliates</b></center><p> <b>Support</b></center><p> </div> <div class="innerbox" id="innerbox4"> <iframe name="main" src="home.html" width="460" height="774" frameborder="0" scrolling="auto" background="none"></iframe></div> </div> </div>

Based off of the Cloud layout's coding, this layout has a built in iFrame, and a right sidebar instead of left. View the preview for install instructions. Winter theme, photo from IceCaves.net

<title> Site Name Here </title> <style> p { font-size : 9px; font-family : verdana; color : #000000; text-align : left; margin : ; } h3 { font-family : arial; color : #000000; text-align : left; } h2 { font-family : arial; color : #000000; text-align : left; } h1 { font-family : verdana; color : #000000; text-align : center; } body { font-size : 9px; font-family : verdana; color : #000000; } blockquote { font-size : 9px; font-family : verdana; color : #000000; text-align : ; } a:hover { font-weight : normal; font-size : 10px; font-family : verdana; color : #000000; background : normal; text-decoration : normal; } a:visited, a:link, a:active { font-weight : normal; font-size : 10px; font-family : verdana; color : #000000; text-decoration : bold; } </style> <div style="overflow:auto;position:relative;width:650px;height:125px;top:125px;left:113px;margin-right:-650px;margin-bottom:-125px;"> <font size="20"> Site Name Here</font> </div> <div style="overflow:auto;position:relative;width:587px;height:968px;top:418px;left:10px;margin-right:-587px;margin-bottom:-968px;"> <iframe name="main" src="homewinter.html" width="778" height="774" frameborder="0" scrolling="auto" background="none"></iframe> </div> <div style="overflow:auto;position:relative;width:188px;height:890px;top:413px;left:604px;margin-right:-188px;margin-bottom:-890px;"> <b>Graphics</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br><p> <b>Guides and Tutorials</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br><p> <b>Other</b></center><p> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> <a href="LINK URL HERE" target="main"> Link Here! </a><br> </div> </div> <div style="width:800px;"> <img id="Image-Maps_2201010231226367" src="http://www.aridseas.net/Layouts/welcomewinter.png" usemap="#Image-Maps_2201010231226367" border="0" width="800" height="1400" alt="" /> <map id="_Image-Maps_2201010231226367" name="Image-Maps_2201010231226367"> <area shape="rect" coords="18,358,78,408" href="SITE LINK GOES HERE" alt="Site" title="Site" target="main" /> <area shape="rect" coords="95,362,240,412" href="GRAPHICS LINK GOES HERE" alt="Graphics" title="Graphics" target="main" /> <area shape="rect" coords="255,360,503,410" href="GRAPHICS/TUTORIALS LINK GOES HERE" alt="" title="" target="main" /> <area shape="rect" coords="529,359,589,409" href="FUN LINK GOES HERE" alt="Fun" title="Fun" target="main" /> <area shape="rect" coords="592,360,681,410" href="OTHER LINK GOES HERE" alt="Other" title="Other" target="main" /> <area shape="rect" coords="679,361,768,411" href="/your a/ TOOLS LINK GOES HERE" alt="Tools/Services" title="Tools/Services" target="main" /> </map> </div>

Lots of boxes in this one. A nice mountain and a tree in the header, and a spot to put your moto/logo/website name.
Download PHP Version
<head> <!-- Put your Meta Data Here --!> <meta name="description" content="Free HTML Template" /> <meta name="keywords" content="Free Template, Free PHP template, free graphics" /> <meta name="author" content="Your Name Here" /> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> <!-- The code and the code is copyright aridseas.net and AP Productions 2006-2012 --!> <div style="text-align:left; width:950px;"> <img src="http://www.aridseas.net/graphics/Templates/day_welcome.png" border="0" width="950" height="1500" alt="" /> <area shape="rect" coords="0,0,77,16" href="http://www.aridseas.net/" taget="new"" alt="Arid Seas Graphics and Tutorials" title="Arid Seas Graphics and Tutorials" /> <area shape="rect" coords="860,1469,937,1485" href="http://www.aridseas.net/" target="" alt="Arid Seas Graphics and Tutorials" title="Arid Seas Graphics and Tutorials" /> </map> </div> <style type="text/css"> .innerbox { overflow: auto; position: absolute; } #innerbox1 { top: 30px; left: 8px; width: 937px; height: 46px; } #innerbox2 { top: 400px; left: 19px; width: 153px; height: 646px; } #innerbox3 { top: 405px; left: 193px; width: 757px; height: 744px; } #innerbox4 { top: 1071px; left: 17px; width: 155px; height: 74px; } #innerbox5 { top: 1159px; left: 192px; width: 759px; height: 34px; } #innerbox6 { top: 1207px; left: 17px; width: 931px; height: 255px; } #innerbox7 { top: 1470px; left: 18px; width: 746px; height: 25px; } body, div, td, p{ font-family: verdana; font-size: 11pt; color: #000000; line-height: 18pt; body {background-color: #556B2F;} } textarea, input, select, option, xmp { font: monaco 11pt #000000; } a:link { color: #000000; border-bottom: 1px dotted #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: bold; } a:hover, a:active { color: #000000; text-decoration: italic; text-transform: uppercase; border-left: 15px #000000; } ul{text-align:left;margin:1em 0;padding:0} </style> <body bgcolor="#556B2F"> <div class="overlay"> <div class="innerbox" id="innerbox1">Add logo, image, site name, navigation, or whatever you please here. Example: <a href="http://www.aridseas.net/" target="new"><img src="http://www.aridseas.net//images/88x31.png" border="0"></a></div> <div class="innerbox" id="innerbox2"> <ul valign="left"> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> </ul> </div> <div class="innerbox" id="innerbox3">Content here</div> <div class="innerbox" id="innerbox4">Copyright, credits, links here.<br> <a href="http://www.aridseas.net">Get this Layout</a></div> <div class="innerbox" id="innerbox5">Foooter, links here</div> <div class="innerbox" id="innerbox6">Footer; chatbox, advertisements, etc </div> <div class="innerbox" id="innerbox7">Credits here</div> </div>

Similar coding and layout structure as the Alpine layout. Lots of boxes. This one has a picture of a giant storm instead of a tree and a mountain.
Download PHP Version
<head> <!-- Put your Meta Data Here --!> <meta name="description" content="Free HTML Template" /> <meta name="keywords" content="Free Template, Free PHP template, free graphics" /> <meta name="author" content="Your Name Here" /> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> <!-- The code and the code is copyright aridseas.net and AP Productions 2006-2012 --!> <div style="text-align:left; width:950px;"> <div style="text-align:center; width:950px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_1201202181423236" src="http://www.aridseas.net/graphics/Templates/night_welcome.png" usemap="#Image-Maps_1201202181423236" border="0" width="950" height="1500" alt="" /> <map id="_Image-Maps_1201202181423236" name="Image-Maps_1201202181423236"> <area shape="rect" coords="0,0,106,13" href="http://www.aridseas.net/" target="new"" alt="Arid Seas - Graphics, Tutorials and Resources" title="Arid Seas - Graphics, Tutorials and Resources" /> <area shape="rect" coords="754,1464,938,1487" href="http://www.image-maps.com/" target="new"" alt="Arid Seas - Graphics, Tutorials and Resources" title="Arid Seas - Graphics, Tutorials and Resources" /> </map> </div> </div> <style type="text/css"> .innerbox { overflow: auto; position: absolute; } #innerbox1 { top: 30px; left: 8px; width: 937px; height: 46px; } #innerbox2 { top: 400px; left: 19px; width: 153px; height: 646px; } #innerbox3 { top: 405px; left: 193px; width: 757px; height: 744px; } #innerbox4 { top: 1071px; left: 17px; width: 155px; height: 74px; } #innerbox5 { top: 1159px; left: 192px; width: 759px; height: 34px; } #innerbox6 { top: 1207px; left: 17px; width: 931px; height: 255px; } #innerbox7 { top: 1470px; left: 18px; width: 746px; height: 25px; } body, div, td, p{ font-family: verdana; font-size: 11pt; color: #000000; line-height: 18pt; body {background-color: #696969;} } textarea, input, select, option, xmp { font: monaco 11pt #000000; } a:link { color: #000000; border-bottom: 1px dotted #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: bold; } a:hover, a:active { color: #000000; text-decoration: italic; text-transform: uppercase; border-left: 15px #000000; } ul{text-align:left;margin:1em 0;padding:0} </style> <body bgcolor="#696969"> <div class="overlay"> <div class="innerbox" id="innerbox1">Add logo, image, site name, navigation, or whatever you please here. Example: <a href="http://www.aridseas.net/" target="new"><img src="http://www.aridseas.net//images/88x31.png" border="0"></a></div> <div class="innerbox" id="innerbox2"> <ul valign="left"> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> <li><a href=" ">Link Here</a></li> </ul> </div> <div class="innerbox" id="innerbox3">Content here </div> <div class="innerbox" id="innerbox4">Copyright, credits, links here.<br> <a href="http://www.aridseas.net">Get this Layout</a></div> <div class="innerbox" id="innerbox5">Foooter, links here</div> <div class="innerbox" id="innerbox6">Footer; chatbox, advertisements, etc </div> <div class="innerbox" id="innerbox7">Credits here</div> </div>