Website design

Miscellaneous Forums/Graphics Showcase/Website design

Yahfree
 #1
*screen shot updated JS dynamic stuff still in the works...*

Warning alot of files because I focused heavily on OOP and it being modular. Thus it's heavily split into modular files for easy changing.

ps. The database isn't hooked up to the news yet, rather a .txt file
pss. I don't care if you use the code or not


Code that the screen shot uses:
-----
Main structure:

/index.php
<?php
	//copy this page with differing values for each page.
	// Add/remove TEMPLATES and SETTINGS as needed
	// All templates/settings must be filled out
	
	//-------------------------------------------------
	//Style sheet path to use
	//-------------------------------------------------
	$STYLESHEET = "Includes/style.css";
	
	//-------------------------------------------------
	//TEMPLATES - feed into the page
	//-------------------------------------------------
	$TEMPLATE = array();
	$TEMPLATE['head'] = "
	<title>Title of the page</title>";
	$TEMPLATE['content'] = "
	This is some content for use in the content template file.
	This content includes a panel colored to green.<br/><br/>
	
	This website features full OOP php code, a complete
	templating system for easy creation of pages. And 
	a couple of objects to start you off. The first object
	is a panel object that is used by certain features. The 
	second object is a news log object that is fully database 
	driven. <br/><br/>
	
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	 Nullam mattis pede quis nunc. Proin in lectus. Integer 
	eros nisl, sollicitudin at, rutrum et, tincidunt in, est. Duis
	 venenatis pretium leo. Aliquam est. Suspendisse 
	pretium enim et est. Cras orci nisl, tempor eget, blandit in
	, molestie sed, sem. Vivamus iaculis. Suspendisse 
	potenti. Nunc tincidunt justo in risus. <br/><br/>

	Integer a velit. Vestibulum commodo metus vitae magna.
	 Aliquam hendrerit, urna a ornare imperdiet, lacus 
	eros scelerisque nulla, non tristique leo nisi at risus.
	 Cras ultrices. Pellentesque fringilla. Vestibulum sagittis 
	ornare augue. Maecenas tortor augue, aliquet lobortis,
	 tempor vel, scelerisque non, velit. Curabitur diam. Etiam 
	dapibus lectus et velit. Aliquam hendrerit arcu. Sed elit.
	 Nam turpis sem, sagittis sed, aliquet sed, pharetra nec, 
	purus. Aliquam cursus orci et risus. Mauris mattis ipsum vitae sapien.
	 Ut id arcu et mi laoreet vulputate. Nam sit
	 amet mauris ac tellus ullamcorper blandit. In accumsan. <br/><br/>

	Integer in nulla. In pellentesque, elit eget hendrerit elementum,
	 libero lacus vulputate lectus, in convallis turpis 
	nibh id libero. Pellentesque interdum pede sed risus. Aenean id justo.
	 Vivamus nec purus ut nibh 
	condimentum pharetra. Cras elit diam, iaculis nec, gravida ac, laoreet sed, leo.
	 Mauris commodo. Etiam at ante. 
	In a ante. Pellentesque nec lorem ac arcu pharetra aliquet.
	";
	$TEMPLATE['navigation'] = "
	<a href="index.php">Home</a> |
	<a href="about.php">About</a>";

	//-------------------------------------------------
	//SETTINGS - deciphered then feed into the page
	//-------------------------------------------------
	$SETTINGS = array();
	$SETTINGS['database'] = false;
	$SETTINGS['panels'] = true;
	
	// extra features in the page
	$SETTINGS['newspanel'] = true;//requires panel support and database support
	
	//-------------------------------------------------
	//decipher the SETTINGS
	//-------------------------------------------------
	//database support?
	if($SETTINGS['database'] == true){
		include "Includes/inc.dbinfo.php";
	}
	//panel support? and furthermore news support?
	if($SETTINGS['panels'] == true){
		include "Includes/class.panel.php";
		if($SETTINGS['newspanel'] == true){
			include "Includes/class.news.php";
		}
	}
	
	//-------------------------------------------------
	// calls the template webpage
	include "Includes/inc.template.php";
?>


/about.php
<?php
	//copy this page with differing values for each page.
	// Add/remove TEMPLATES and SETTINGS as needed
	// All templates/settings must be filled out
	
	//-------------------------------------------------
	//Style sheet path to use
	//-------------------------------------------------
	$STYLESHEET = "Includes/style.css";
	
	//-------------------------------------------------
	//TEMPLATES - feed into the page
	//-------------------------------------------------
	$TEMPLATE = array();
	$TEMPLATE['head'] = "
	<title>Title of the page</title>";
	$TEMPLATE['content'] = "
	";
	$TEMPLATE['navigation'] = "
	<a href="index.php">Home</a> |
	<a href="about.php">About</a>";

	//-------------------------------------------------
	//SETTINGS - deciphered then feed into the page
	//-------------------------------------------------
	$SETTINGS = array();
	$SETTINGS['database'] = false;
	$SETTINGS['panels'] = false;
	
	// extra features in the page
	$SETTINGS['newspanel'] = false;//requires panel support and database support
	
	//-------------------------------------------------
	//decipher the SETTINGS 
	//-------------------------------------------------
	//database support?
	if($SETTINGS['database'] == true){
		include "Includes/inc.dbinfo.php";
	}
	//panel support? and furthermore news support?
	if($SETTINGS['panels'] == true){
		include "Includes/class.panel.php";
		if($SETTINGS['newspanel'] == true){
			include "Includes/class.news.php";
		}
	}
	
	//-------------------------------------------------
	// calls the template webpage
	include "Includes/inc.template.php";
?>


/Includes/inc.template.php
<!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>
		<?=$TEMPLATE['head']?>
		<link rel="stylesheet" type="text/css" href=<?=$STYLESHEET?> />
	</head>
	<body>
		<div id="Top"></div>
		<div id="Wrapper">
			<?php include_once("Includes/inc.header.php");?>
			<?php include_once("Includes/inc.content.php");?>
			<?php include_once("Includes/inc.footer.php");?>
		</div>
	</body>
</html>


/Includes/inc.header.php
<div id="Header">
	<div id="Logo"></div>
</div>
<div id="Navigation" class="NavText">
	<?=$TEMPLATE['navigation']?>
</div>


/Includes/inc.content.php
<div id="Content" class="ContentText">
	<?php 
		if($SETTINGS['newspanel'] == true){
			if($SETTINGS['panels']==false){
				Die("no panel support!!");
			}
			$newspanel = new News;
			$newspanel->SetColor("#417703");
			$newspanel->SetFloat("right");
			$newspanel->DrawNews();
		}
	?>
	<?=$TEMPLATE['content']?>
</div>


Includes/inc.footer.php
<div id="Footer">
	©[Your company] - 2008
</div>


Includes/inc.dbinfo.php
<?php
	$DB_HOST = "";
	$DB_NAME = "";
	$DB_USER = "";
	$DB_PASSWORD = "";
?>


-------------
Classes:

Includes/class.panel.php
<?php
	class Panel{
		var $floater = "left";
		var $h = "400px";
		var $w = "300px";
		var $color = "#000000";
		
		function SetColor($c){
			$this->color = $c;
		}
		function SetWidth($n){
			$this->w = $n;
		}
		function SetHeight($n){
			$this->h = $n;
		}
		function SetFloat($n){
			if(n == 1){
				$this->floater = "left";
			} else {
				$this->floater = "right";
			}
		}
		function DrawPanel(){
			echo "
			<div style="background-color: $this->color;
						width: $this->w; height: $this->h; 
						float: $this->floater; border: thin black solid">
			</div>";
		}
	}
?>


Includes/class.news.php
<?php
	class News extends Panel {
		
		function DrawNews(){
			echo "
			<div style="background-color: $this->color;
						width: $this->w; height: $this->h; 
						float: $this->floater; border: thin black solid;
						padding: 10px">
				
				<center><h2>News</h2></center>";
				$newsarray = file("Includes/inc.newstext.txt");
				$i = 0;
				while($i != count($newsarray)){
					echo $newsarray[$i];
					$i++;
				}
			echo "
			</div>";
		}
	}

?>

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

Last but not least - the STYLESHEET:

Includes/style.css
body{
	background: #E3EAAE url("../Images/bggradient.jpg") repeat-x;
	margin-top: 0.01em;
	margin-right: 0.01em;
}


#Top{
	z-index: -10;
	position: absolute; top: 0px; left: 0px;
	width: 100%;
	height: 180px;
	background: url("../Images/top_bg.jpg") repeat-x;
	border-bottom: medium black solid;
}

#Wrapper{
	width: 806px;
	margin: 0 auto;
	text-align: left;
	padding: 0px;
}

#Header{
	background-color: black;
	width: 800px;
	height: 180px;
	background: url("../Images/header_bg.jpg");
	margin: 0 auto;
}

#Logo{
	background-image: url("../Images/logo.png");
	width: 400px;
	height: 180px;
}

#Navigation{
	width: 806px;
	height: 30px;
	background: url("../Images/nav_bg.jpg") center no-repeat;
	text-align: center;
}

#Content{
	background: url("../Images/content_bg.jpg") center repeat-y;
	width: 776px;
	min-height: 470px;
	padding: 15px;
}

#Footer{
	margin: 0 auto;
	background: url("../Images/footer.gif") center no-repeat;
	width: 806px;
	height: 40px;
	color: white;
	font-size: 80%;
	text-align: center;
}

/*
text styles
*/

.ContentText{
	color: #e2e2e2;
	font-size: 80%;
}

.NavText{
	color: white;
	font-weight: bold;
}

.NavText a{
	color: #c6c6c6;
	text-decoration: none;
}

.NavText a:hover{
	color: #06EF73;
	text-decoration: none;
}



Have fun - Feedback appriciated!