Website design

Community Forums/Graphic Chat/Website design

Yahfree

(Posted 2008) [#1]

Hey, this is the second website i've done for a friend.

It uses a templating system so its extremely easy to add pages

I called it "alien" just cause it reminds me of aliens, because of the greenish color scheme.

Let me know what you think, I want some critique before I add the final touches (padding, ect..):

I spent a total of 5 hours on it.

Retimer

(Posted 2008) [#2]

What's site genre is the template geared to?

I like the logo, but I can't quite touch what I don't like about everything underneath it. The |_| border color maybe? Seems to flashy/plain.

I think with some color changes, maybe some backgrounds, it would look a lot nicer. Also, the text seems way too close to the borders.

Yahfree

(Posted 2008) [#3]

>Also, the text seems way too close to the borders.

That can be fixed with padding, though i'm fighting the website at the minute, the content expands when I add padding to it.

>I think with some color changes, maybe some backgrounds, it would look a lot nicer

I'm interested in what color changes you have in mind. The background will come as soon as I know what he wants to use the site for.

>What's site genre is the template geared to?

Just general at the moment, I don't want to gear it to anything until I know what that something is. For now I'm just trying to show off my design skills in the hopes that he will hire me for something else in the future.

I can't pick it out myself but there's something I don't like about it.

I'm thinking I need to go more flashy. Maybe a single background image behind the content and then replace the content with an transparent glass like image. And have the background image peek out of the content onto the background.

what do you think?

Yahfree

(Posted 2008) [#4]

this is slightly annoying, I'm trying to add padding to the content div and its expanding to the right the sum of the amount i'm padding it left and right..

so when I call "padding: 15px" it expands 30 pixels to the right.

Any ideas? its a set width.

Yahfree

(Posted 2008) [#5]

ok I fixed the problem, I just set the width to 30px less than normal.

its all padded now... I just need to tiddy up a couple things and get a background image and i'll post a new screenshot.

Htbaa

(Posted 2008) [#6]

Tip: Use Lorem Ipsum as dummy content. http://www.lipsum.com (and generate a couple of paragraphs)

Yahfree

(Posted 2008) [#7]

Cool, I was looking for something like that.

Yahfree

(Posted 2008) [#8]

Ok, the image has been updated.. The about link is being hovered on by the mouse, but the screenshot seems to have excluded the mouse.

Let me know your thoughts! It can be improved but I need help trying to figure out what to improve on.

D4NM4N

(Posted 2008) [#9]

The layout is clean enough but the text needs full justifying and a bigger cell padding between the image box and the text.

Yahfree

(Posted 2008) [#10]

what do you mean by full justifying?

D4NM4N

(Posted 2008) [#11]

it means the text has a straight edge on both sides (think newspaper column).

http://www.htmlcodetutorial.com/linepar/index_famsupp_153.html

don't forget the paragraph <p> tags!!

Yahfree

(Posted 2008) [#12]

I'm currently doing a couple things here and there and doing a major javascript overhall (not really, just some dynamic effects like link-dropdowns)

Will report back when I've completed the changes

Edit: D4NM4N:

I know what justifying means, but I ment where - sorry for the confusion.

The wrapped look was on purpose, do you think I should go with a single column of text & panels on a seperate "column"?

Loktar

(Posted 2008) [#13]

Id give better feedback if I could see the code. Design is ok, for a 2nd website its not bad at all. I just hope your not using tables :)

Yahfree

(Posted 2008) [#14]

*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!