Footnote:
ArkiePrince
Semi-Retired
See Blog


Valid XHTML 1.0
Valid CSS

HTML PHP CSS Website Template Code Generator:

This PHP website template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet website template generator outputs full featured tableless code i.e. tables are NOT used for the website template with the column layout.

The resulting website template is actually a combination of several files i.e. this is a true php, html, css template that makes it easy to control multiply pages at a web site. This website template maker generates the following files:

Bottom Line: This is a learn as you go code generator i.e. by changing input values and then viewing the source code, it's possible to learn a lot about PHP, HTML and CSS column layouts. Since the generated page is broken up into the various files and all pulled together by php includes, the resulting page(s) will all be uniform in appearance. Not to mention, much easier to manage because changing one file (such as menu.html) will automatically change the content on ALL pages. Of course, using the external style sheet will automatically change all the fonts, colors, etc on all pages at once.
BTW: Here are: Browser Colors by name plus a couple of color schemer generators: Color Schemer and Color Scheme Designer

Style Sheet



body { 
background-color:  ;
font-family:   ; 
font-size: px; 
color: ;

padding-bottom:px ;

scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-3dlight-color:;
scrollbar-darkshadow-color:;
scrollbar-shadow-color:;
scrollbar-arrow-color:;
scrollbar-track-color:;
  }

  
#header {
height:px;
background:;
border:px solid ;
  }



#mainbody {
margin-left:px;
padding-top:px;
padding-right:px;
padding-bottom:px;
padding-left:px;
background: ;
border:px solid ;
  }
 
 

#menu {
position:absolute;
top:px;
width:px;
background:;
color:;
border:px solid ;
 }



#menuitem {
width:px;
background:;
color: ;
font-size:px;
border:px solid ;
  }



#menuhead {
width:px;
background:;
color:;
border:px solid ;
font-weight:;
font-size:px;
  }




#footer {
margin-top:px;
padding:px;
background:;
color:;
border:px solid ;
  }



a:hover {
font-size:px;
background-color:;
color:;
}



h1 { font-size:px}
h2 { font-size:px}
h3 { font-size:px}


p,h1,h2,h3 {
margin: px;
}



.heading { 
font-family:;
font-size:px;
background-color:;
color:; 
font-weight:;
} 


Header

The layout / format for the header is controlled by the CSS (Cascading Style Sheet); however, the content of the header is controlled by the header.html file. To change the content of this example header.html file, modify the following info:
Option 1: A banner image. Make sure to enter the full (http:// ...) path to a banner image, such as the default shown below:

Image URL:

Option 2: A CSS generated banner. VIP: Be sure to remove the above URL to active this option i.e. removing the URL to the banner will automatically use the following text in a '.heading' class inside the header.html file:

CSS Banner Text:

Option 3: Text controlled by CSS style sheet. VIP: Remove the URL for option 1 and the text for option 2 to active this option:

Plain Text:

Menu (Left Column)

This example menu is best explained by viewing the CSS code for menu, menuitem and menuhead which produces a set of 'links' without any graphics i.e. this example does not use buttons for links to demostrate some tricks that are possible with CSS. Be sure to also view the contents of the menu.html file to understand how it uses the CSS classes. The example link and text input is:
Main Heading:
Item Heading:
Example Link:
Body Text:

Body Section

This example code is the 'homebody.html' file that contains the text for the main section:

Footer

The layout / format for the footer is controlled by the CSS (Cascading Style Sheet); however, the content of the footer is controlled by the footer.html file. In some cases, the footer file may be exactly the same as the header.html - or have some of the same options. To avoid repeating the options, this example only uses option 3 for the footer.

Plain Text: