Testing Environment

As you can imagine, there is a lot more stuff going on behind the scenes with PHP than there would be with just HTML,CSS, Javascript which is built into browser functionality. PHP is a server-side scripting language which requires a PHP server. This could be either on your web server (most paid hosting includes PHP) or you can set one up locally. For this tutorial I will show you how to set up your server on your own computer(locally). To do this we need to download some software.

Mac Users

For Mac users I will direct you to a great program called MAMP (Mac apache Mysql PHP) download and install that, the free version should be more than enough to start out, but if you find yourself needing more the paid version is great.

Windows Users

Windows users may have a little less pretty interface, but it still works! A program call WAMP (Windows Apache Mysql PHP) Just download and install.

I will be doing this tutorial on a Mac so everything will be in MAMP but everything is very similar in WAMP. For both, make sure that your server is up and running. To do this on MAMP click on the app (the one that looks like an elephant) it will ask for the admin password, then you will be connected a web page will open confirming it’s success. With WAMP click on the icon, it will place an icon in the bottom right bar by your time (the icon looks like a meter of some kind). Click on this icon and select start all services. For more information on how to use WAMP check this out WAMP Docs. Now that we have our servers running it’s time to get started with the fun stuff, Writing the PHP.

Bare Bones Basics

This section I will talk about the very basics needed to get your first PHP application going. If you have already seen php code before than you will recognize some things, but go ahead and read over the information because if you mess up these very essential pieces of the PHP picture than nothing you write in PHP will work. So pay attention and you will be fine.

<?php ?>

This is what you will use to start and end every bit of PHP you will ever write, Also you can use shorthand tag (sometimes it needs to be enabled on your server to be used):

Cliche Hello World

What kind of tutorial would this be without a Hello World statement. I will show you how to display hello world on your screen, Two ways!

This is the echo statement, you should get used to this on as you will use it a lot throughout your PHP developing career.

<?php
    echo "Hello World";
?>

The second is print, which basically does the same thing as echo but it can return an true or false boolean value, which you don’t have to worry about just yet. All that is important right now is that you can use either to display something on a webpage.

<?php
   print "Hello World";
?>

There you have it, your first PHP script! That wasn’t so hard was it? Let me take you through our tiny script and explain to you what is happening with it. first we opened the PHP tag

Commenting Your Code

One of the best Practices you can get into right from the start, is to comment out your code. You may know what you are saying when you are writing it, but what about when you have to edit it a few months later? You may not have any idea what was going through your head at the time. That is why it’s great to comment your code! There are a few ways to add comments in PHP, Let me show you how.

<?php
	echo "Hello World"; //This is a single line comment
?>

<?php
	echo "Hello World"; /* This is a multi-line comment
	print 'Comment'; I am still commenting
	*/
?>

Intro Into Variables

Variables are found in many different programming languages so if you have some experience in Javascript then this might not be a hard concept for you to catch on to. Basically a variable holds a value, it can be a string like “Hello World”;, integer like 4 or it could be another variable. In PHP variables are defined by the $ sign, and are case sensitive.

Some examples of valid variables.

* $variable
* $Variable
* $variable_name
* $varibaleName
* $_variable

Some Invalid variable Names

* $3variable
* $variable-name
* $variable@name

This leaves you with lots of choices to name your variables, here is an example of how to use them.

<?php
	$helloWorld = "Hello World";
	echo $helloWorld;
?>

I am not going to get into this to far until next time but you can do math using variables. Use this example to create you own mathematical equations

<?php
	$var1 = 20;
	$var2 = 15;
	$var3 = $var1*$var2;

echo "20x15 equals $var3";
?>

I will cover more math in the next tutorial but this will give you a nice example of what you can do with variables. Variables are one of the most important building blocks of PHP, and you will soon become very comfortable with them.

Conclusion

This has been a simple introduction into the world of PHP, and let me tell you we have just scratched the surface of what you can do with this very dynamic programming language. Next time we will get into more in depth examples and also some more core functionality of this great language.

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

• Masthead: – Section will contain and hold all logo, and header information.
• Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title Goes Here</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">

</div><!--end masthead-->

<div id="container">

</div><!--end container-->

</body>

</html>

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

<div id="logo">
</div><!--end logo-->

<div id="header">
</div><!--end header-->

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

• left_col: – This will contain/hold all left column text and information.
• right_col: – This will contain/hold all right column text and information.
• page_content: – This will contain/hold all main column text and information.

<div id="left_col">
</div><!--end left_col-->

<div id="right_col">
</div><!--end right_col-->

<div id="page_content">
</div><!--end page_content-->

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

<div id="footer">
</div><!--end footer-->

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3 Column Layout | Webdevtuts</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
	<div id="logo">
	<h1>Logo</h1>
	</div><!--end logo-->

	<div id="header">
	<h1>This is Your Header</h1>
	<p>This is your header</p>
	</div><!--end header-->
</div><!--end masthead-->

<div id="container">
	<div id="left_col">
	<h1>Left Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end left_col-->

	<div id="right_col">
	<h1>Right Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end right_col-->

	<div id="page_content">
	<h1>Main Column</h1>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>
	</div><!--end page_content-->
</div><!--end container-->

<div id="footer">
<p>&copy; 2010 to Webdevtuts. All rights reserved.</p>
</div><!--end footer-->

</body>

</html>

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

• Fixed: – Layout is the same width and all browsers. Majority of websites use this method
• Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
  run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.

body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}

• body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
• masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
• logo – Logo is floated to the left side of the page and has a width of 200px
• Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.

#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}

• container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
• Left_col – The left column is floated to the left side of the page and has a width of 200px
• right_col – The right column is floated to the right side of the page and has a width of 200px
• page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.

#footer {
	clear: both;
	background:teal;
}

• footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

How does it work

Whenever you click on a certain link, the page will scroll to that specific link. For example if were to have a long portfolio page and it took forever to reach the bottom I might want to add a link at the bottom of my website that says Back to top and when visitors click on that link the page would scroll to the top.

Script

Add code below to head section or to a separate javascript file. Tells the document to scroll

$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 500);
	});
});

HTML

Add the code below after your head section. I did not include the entire html but you can download it or view the demo.

<body>
<div id="top">
<h1>Thanks for coming to the top</h1>
</div><!--end top-->

<div id="middle">
<h1>Thanks for coming to the middle</h1>
</div><!--end middle-->

<div id="bottom">
<h1>Thanks for coming to the bottom</h1>
</div><!--end bottom-->

<p><a href="#top" class="scroll">Go Top</a></p>

<style>

#top{
height:500px;
background:maroon;
margin-bottom:20px;
}

#middle{
height:500px;
background:olive;
margin-bottom:20px;
}

#bottom{
height:500px;
background:teal;
margin-bottom:20px;
}
</style>
</body>

Open Photoshop then File>New> and create a new document 800×600 pixels.

Note: Don’t forget to save work

First we will create a new background #000 then select type tool and create your website title ex.webdevtuts

Now we want to add a navigation bar to our design. Select the rounded rectangle tool and create a rounded rectangle across the top (#008dc8).

Right click on the layer with your nav bg and select Gradient Overlay >

set the foreground color #008dc8 and background #004f70. Now lets add a stroke to our navigation background. Select>stroke

Next we will add some text to our navigation. Select the type tool and create the following: Home, About, Services, Portfolio, and Contact. Font: 14pt, Arial

Note: All text is within 1 text box (after every word hit the spacebar 4x)
Example(This is what your layout should like so far)

Ok now lets add a featured image gallery. Select the rectangle marquee tool and create a box #fff width 329x194pixels.

Now create another rectangle within the featured image gallery.

All right lets add some buttons to our feature gallery. Set the foreground color #fff and background #eaeaea. Select the ellipse tool and create a circle outside of the featured gallery.

Then right click on the circle layer>Blending Options>Gradient Overlay> then select the silver/white gradient

Now select the custom shape tool and click on one of the arrows.

Now drag your arrow choice over the featured gallery button.

Ok so lets create a new group and name it feat-button.

Add all button properties to folder.

Now duplicate the folder. Right click on folder and select duplicate Group.

Now go to Edit>Transform>Flip Horizontal

Now drag button to other side of featured gallery.

Ok lets add some Heading’s and paragraph’s to our portfolio. Create a heading font: 30pt, bold, #fefb00. Now for our paragraph we will add some dummy text. Google search lorem ispum. And add a paragraph under the heading.

Ok so now that the hard stuff is completed we will add 3 subheadings (Who are we, Our services, Why choose us) and 3 Paragraphs.

To complete our portfolio we will add 3 read more buttons and a simple footer.
Select the rounded rectangle tool, foreground #cec900 background# cdac00. Then create a small rounded rectangle. Next right click on the small rounded rectangle layer>Blending Options>Gradient overlay


Now select the type tool and add the following text “read more”(create a new group and add button and read more inside folder). Duplicate group.

For the final step we will add a simple footer. Select the rectangle marquee tool #008dc7 and create a rectangle with the same width as the navigation. The last step of this tutorial is to add copyright information

Here are the final results