Featured Videos

Learn how to create 3d spinning animated text with thie Swift 3D ..

I never realised how easy it can be to create some really amazing..

Learn one of the most important tools in Photoshop, the layers fe..

I often use this text effect for intros or as a button roll over ..

A very cool tutorial on one of Photoshop CS3's fancy new tools, t..

Popular Tutorials

Iris Porthole Door Animation in Flash

Very cool effect that could be used for an intro or as an enter button for any web site...

Futuristic city, 3D techniques in Flash

See the tricks behing the advanced Flash animation that was used to bring this futuristic ..

Gradient Mapping

How to transform a standard photograph for use with a specific colour scheme or brand imag..

Creating a 3D Tunnel Effect in Flash

Learn how to create this very cool 3D tunnel effect in Flash using some simple 2D animatio..

Building your website with includes

For this article I thought I would share a few tips on how to design and organize the construction of your web sites in a way that will not only keep your coding skills tidy but will allow you to change and edit page elements quickly and easily as and when your site needs updating.


Scripting Languages

I’m talking or course about the server side "Include Function". But before we begin remember that the include functionis not a feature of standard HTML (Hypertext Market Language) but can only be used with more advanced scripting languages such as PHP (Hypertext Pre-Processor) or ASP (Active Server Pages).

Now you may be thinking but I don’t know any ASP or PHP, well it doesn’t matter, the simple task of renaming your filenames from .html to .php or .asp will automatically give your pages some hidden abilities.

Now if you are totally unfamiliar with advanced scripting languages you will first need to be sure that the web server that you are going to be developing your web site on supports scripting languages, you can contact your hosting company and either find out or upgrade to a server that is running PHP or ASP, it may costs a few extra pennies a month on top of standard hosting but its worth it (as you will soon see).


How the Include Function works

In its most basic form it all boils down to separating the main commonly used sections of your site such as the header, navigation and footer into individual files. Your main pages for example homepage.asp will then pull all of these files together using the include function. Below you can see a diagram illustrating this principle:

To start with simply create your homepage as you would normally in HTML. Once its complete it is then time to start seperating sections of this document into separate files, for this article my example homepage design is illustrated in the code below:

<title>My Web Site</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head> <body>

<div class="header">
<div class="logo"></div>

<div class="topnav">
<a href="link">Navigation1</a>
<a href="link">Navigation2</a>
<a href="link">Navigation3</a>

<div class="leftnav">
<a href="link">Navigation4</a>
<a href="link">Navigation5</a>
<a href="link">Navigation6</a>

<div class="content">
<p>My content here</p>

<div class="footer"></div>


As you can see from the code above I have colour coded each of the sections to show you how I have separated each into its own file. Below you can see my newly created ASP pages.



Using the Include Function

Now to add the include function to the original homepage so that it how loads all of these now separated elements as one, you can see the final homepage.asp file below:

ASP Version

<!-- #include file="header.asp" -->
<!-- #include file="topnav.asp" -->
<!-- #include file="leftnav.asp" -->
<div class="content">
            <p>My content here</p>
<!-- #include file="footer.asp" -->

PHP Version

<? include("header.asp") ?>
<? include("topnav.asp") ?>
<? include("leftnav.asp") ?>
<div class="content">
            <p>My content here</p>
<? include("footer.asp") ?>

Seeing how the above can shrink the overall site of the editable page I guess you can now see how this technique can make the overall construction and editing of your web site so much simpler.

Now simply create your other pages and use this same technique, if you then need to add more links to your header or main navigation all you will need to do it edit a single file. Good eh? well thats all there is to it, enjoy :)

Comments (15)

Try going to:www.w3schools.com/

Posted by: WEst on 22/10/2008

Don't WYSIWYG it is crap

Posted by: WEst on 22/10/2008

Learn HTML, then CSS and a bit of graphics design always helps ;)

Posted by: Ben on 01/06/2008

I am startting from scratch to build a web page where is the best place to start. Where is the best palce to get free templates?

Posted by: Ollie on 01/06/2008

thanks! :D

Posted by: rainin9 on 20/12/2007

Photoshop 2??? hahhahahahahaha where are u from the stoneage? hahaahahahahahahahah

Posted by: Anonymous on 28/11/2007

can u give me a secret of adobe photoshop 2 ?this is my e-add.. reisha_18@yahoo.com..pls help me

Posted by: krian on 28/11/2007

Oh lets all try and put code into the form, yeh coz thats going to work :P

Posted by: Anonymous on 05/11/2007

select count(*) from users where userName='john' and userPass='' or 1=1 --'

Posted by: asd on 04/11/2007


Posted by: altra on 11/10/2007

Anonymous - Start by using a simple WYSIWYG web editor and you'll be able to start learning the HTML from looking at the source code. A decent WYSIWYG editor that I can recommend is either NVU or DreamWeaver (Steer clear of FrontPage!) oh and if you have never heard of them then Google it. :-)

Posted by: Dale Hay on 11/09/2007

hello i want to know how to start making a page for html also . i have no clue how to design my website

Posted by: Anonymous on 04/08/2007

hello, i m from india, really it's works great!!! very helpful and easy to do... keep it up.

Posted by: Shailesh Mistry on 31/07/2007

Hello, im from Germany. This articel was very helpfull to me. Thanks

Posted by: Sebastian - Germany on 15/07/2007

helped as lot thnxx

Posted by: wilf sharpe add me on msn wilf_tramp@hotmail.com on 04/07/2007



What colour is the sky?

Related Content

Become a Gradient Junkie

Become a Gradient Junkie

Gradients are like gold when it comes to creating clean, sleek designs, This article hopes..

Simple Bad Word Filter in Flash

Simple Bad Word Filter in Flash

Learn the simplest way to remove bad words or swear words from a flash input field or dyna..

Building your website with includes

Building your website with includes

Using server side includes to design and code your web site allows you to keep your develo..

Futuristic city, 3D techniques in Flash

Futuristic city, 3D techniques in Flash

See the tricks behing the advanced Flash animation that was used to bring this futuristic ..

How to stay A-Float in CSS

How to stay A-Float in CSS

The secret to good CSS layouts rests with the Float attribute. Using float instead of rela..

Recommended Sites

 Subscribe to our feed

Send to a friend