Basic Layout Coding » Skylish

Basic Layout Coding

YOUR JOURNEY SO FAR: Home » Tutorials » Basic Layout Coding

* PHP/INCLUDES

Rate this tutorial:

Note: Before you read this tutorial, please note that I am not some kind of coding guru nor do I think I am - this tutorial was requested.

Introduction
Take it from the top: Doctypes
Take it from the top: Meta
Recap
Headers
Recap
Sidebars
Main Content
Recap
End/Disclaimer

Introduction

(Top ↑) When I saw an e-mail in my inbox requesting for me to write a tutorial on coding layouts from the beginning I didn't know where to start. There's so much that goes into coding a layout, and in this tutorial I will teach you the very basics.

Take it from the top: Doctypes

(Top ↑) When you want to start working on a layout from scratch; no templates, no nothing - start from the top. The very first thing that you should put on your 'header.php' file is something called a Doctype.

"DOCTYPEs are a key component of compliant web pages: your markup and CSS won't validate without them. DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win."

- Alistapart.com

For more information as to what DocType you should display at the top of your page, click here.
I use XHTML 1.0 Transitional.

Take it from the top: Meta

(Top ↑) Before the meta and after the DocType open up a <head> tag. The meta is always contained inside the <head> tag, and the meta gives basic information about the document. Metas are useful in relation to search engines as the information written can help these search engines to find your website.

There are many different meta attributes, for more information go here. The one's I use can be found below:

Also contained within the <head> tag are details that are optional. This may be different Javascript codes (I have many), or even a code for your favicon. Those optional things are things that you may chose to look up yourself, or I may add tutorials on them in the future. Two important things contained within the <head> tag are your TITLE and the reference to your CSS. The reference to your CSS is very important, it is essential for a layout!



<link rel="stylesheet" type="text/css" href="http://URL/style.css" />

What is a CSS? CSS stand for Cascading Style Sheets. Much like PHP documents are contained inside documents that end '.php', the documents that CSS's are contained in end with '.css'. The CSS will sometimes start off with some kind of discription (EG: Maker - Catherine), and will go on to describe the different divs, links or headers within a document. If you want to learn more about CSS's access this page, also look around at different coded layouts available on various websites (like this one), and dive into the .CSS file. When I first started webdesign when I was ten, somebody asked me what a CSS was and I simply described it as: "The styling thingy?" ... They then told me to get off of Freewebs and go to Piczo because I clearly 'didn't know what I was doing'.

One of the most important things to have in your CSS is the 'body' code, this code sets out the styling for the majority of your layout. You don't have to continue to write out the font-family for each div if it is contained in this body code (unless you wish for it to differ). The body code is also the code where you list your background colour/image and the line-height (unless you wish for it to differ in a div).



body  {

	margin : 0;

	padding: 0;

	border: 0; 

	font-family: ????;

	color: #??????;

	text-align : center;

	background: #?????? url(http://IMAGE URL IF ANY);


}

Recap

(Top ↑) This is what your header.php file should look like so far:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 (or any other Doctype)





<head> 



<title>Title Here!<title> 



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<meta name="title" content="Title" /> 

<meta name="description" content="Description, Description, Description" />

<meta name="keywords"  content="Description, Description, Description" />

<meta name="author" content="Name" />



<link rel="stylesheet" type="text/css" href="http://URL/style.css" />

</head>

Headers

(Top ↑) After you have finished the codes within the <head> tag, open up a <body> tag. This will contain all the coding for the layout.

Coding headers is pretty simple. But it depends on what type of header you want to code. There are two main types of header:

1. The header that is connected to your main container.

2. The header that runs accross the top of the page.

It's much like the footer.
Before coding the header we need to know a it more about containers (or wrappers, or simply whatever name you assign to them). Containers are what first of all allows your layout to be centered and therefore more asthetically pleasing in different resolutions. There is no limit to the amount of containers you use on your layout, in this tutorial I will show you a way to use a container for your header image, and one for both your header and main content. Here is the basic code for a container:


#container  {

- This could have any name

	width : ???px; 

	position: relative; 

	display: block; 

	margin: 0 auto; 

	background: url();

}

This will contain any furthur divs or elements for your coding. Let's start off with the header option 1. This header is a part of the main container.
After your <body> tag, follow on with this code:



<div id="container">

<div id="header">

</div>

The 'container' div (like said before, this can have any name) is left open for future things we plan on adding such as a sidebar. The header div in this case is closed off immedietly; and has been assigned the CSS coding I have written below. You may choose not to use an image as you header image, and write all inside the div. I will show you how to manipulate the code below in order to do this.



#header  {	

	padding-top: 0px;

	background-color: transparent;

	background-image: url('http://IMAGEHERE');

	height: ??px;

	width: ??px; 

}

It's easy to manipulate this code if you want to include written text in your header and just use an image as a background, or use no image whatsoever. To do this start off by adding basics to the #header CSs; such as the font-size, font color, font-family, etc. You will write the text inside inbetween <div id="header"> and </div> found in the header.php page.

If you don't wish to include text and just want to have an image, it is important to define the background-image, height and width.

Option 2 - If you want the header to extend accross the top of the page, but want you content to have a defined width, it's just a case of including at least two different containers. Say we make the container containing the header 'container1', this code will be included in your CSS:


#container1  {

- This could have any name

	width : 100%; 

	position: relative; 

	display: block; 

	margin: 0 auto; 

	background: url();
}

If you want to apply a background which will extrend accross the page (example 1 *, 2 *, 3 *), include this inside the container1 code. What you then choose to do with this container that extends accross the page is up to you; you may want to add in a navigation, some text, or even a header image using a basic img src code, or a header .div (like the one above).

Recap

(Top ↑) Things are getting complicated - let's recap. (I am taking on Option 2):




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 (or any other Doctype)





<head> 



<title>Title Here!<title> 



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<meta name="title" content="Title" /> 

<meta name="description" content="Description, Description, Description" />

<meta name="keywords"  content="Description, Description, Description" />

<meta name="author" content="Name" />



<link rel="stylesheet" type="text/css" href="http://URL/style.css" />

</head>

<body>



<div id="container1">
  - (This is what allows the header to run accross the page) 

<div align="center">

<div class="header"> (click here for the code) 


</div>  - (Closes off the header) 

</div>  - (Closes off the div that centers the header image) 

</div>  - (Closes off the container) 



<div id="container">  - (Opens up a new container for future uses, this could be 100% in width and extend accross the page, however in this case it has a defined width)

Sidebars

(Top ↑) At this point, the latest container div has been left open; this will be used to contain all the rest of the content. Coding the rest of the content is pretty easy.



#sidebar  {

	float : left;

- Or right, your choice.



	width : ??px;

	margin : 0;

	background-color: ??????;
	background-image: url('http://IMAGEHERE');

	color:  #000000;
	padding: ?px;
	font-family: ???????; 
	position: absolute;
}

The 'float', can be changed to whatever you want; it just depends on where you want the sidebar to appear.
The 'absolute' position is important as that it what allows it to appear next to the main content.
Implementing it into your header.php page is easy:



<div id="sidebar">

Information!

</div>

Making this code interesting is up to you with how you choose to work with backgrounds, fonts and in some cases divs that you will contain inside the sidebar code. Often I add in a .div for the different sections on the sidebar:



.sidebarbox  {

	text-align : left;

	background: transparent url(http://IMAGEHERE) top no-repeat;

	width: 281px;

	display: block;

	font-weight: normal;

	padding: ?px;

	margin: ?px;
	
}

Main Content

(Top ↑)




.content {

	float: right;

- Opposite to your sidebar.



	width : ???px;

	text-align : left;
	display: block;
	background: #?????? url(http://IMAGEHERE);
	padding: ??px;
	margin: ??px;
	font-size: ??px;
}

This will contain what you use to hold your main content - this means your blogs, your updates, your tutorials, etc. Again, making this code interesting is up to you with how you choose to work with backgrounds, fonts and other CSS elements (above). This will go at the VERY end of your page; if you use Wordpress it will be picked up in the index.php page; however if you use PHP includes your index.php page with contain a code similar to code below:



<?php include('header.php');?>


Information for main content!


<?php include('footer.php');?>

Recap

(Top ↑) Below is my final code for the header.php page:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 (or any other Doctype)





<head> 



<title>Title Here!<title> 



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<meta name="title" content="Title" /> 

<meta name="description" content="Description, Description, Description" />

<meta name="keywords"  content="Description, Description, Description" />

<meta name="author" content="Name" />



<link rel="stylesheet" type="text/css" href="http://URL/style.css" />

</head>

<body>



<div id="container1">
  - (This is what allows the header to run accross the page) 

<div align="center">

<div class="header"> (click here for the code) 


</div>  - (Closes off the header) 

</div>  - (Closes off the div that centers the header image) 

</div>  - (Closes off the container) 



<div id="container">  - (Opens up a new container for future uses, this could be 100% in width and extend accross the page, however in this case it has a defined width)  



<div class="sidebar"> 



<div class="sidebarbox"> 

<h1> Header 1 </h1>

Information

</div>



<div class="sidebarbox"> 

<h1> Header 2 </h1>

Information

</div>



</div>  - (Closes off the sidebar) 



<div class="content">  - (This is left open for the main content)

Learn how to code a footer here.

End/Disclaimer

(Top ↑) And that is the basic beginning middle and end to how I code layouts. This is how I code my layouts and not everybody codes in the same way. Over time, with practice, you'll get more used to coding and will know, just by looking at something, how you would go about coding it. Coding is definitely not an easy thing and I would not call my expert. It is something that you just get used to as time goes by.

Good luck and happy coding. :]

If you need any help with coding or this tutorial whatsoever - contact me.

Basic Layout Coding

Introduction

Take it from the top: Doctypes

Take it from the top: Meta

Recap

Headers

Recap

Sidebars

Main Content

Recap

End/Disclaimer

Welcome

Links

Advertisement

Statistics