Featured Videos

A great example of how the many Photoshop tools can be used to im..

This tutorial will teach you some of the basics of controling mov..

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

This is a very rare tutorial that will teach you how to use Photo..

Learn how to use Photoshop textures and filters to create this ph..

Popular Tutorials

Realistic Eye Animation

Create animated eyes that blink, wink and following the mouse pointer using Flash...

Creating Gradient Buttons

In this crazy new world of web 2.0 some designs call for some bright, shiny gradient butto..

Jazz up text with Gradient Overlay

Some simple Photoshop techniques for giving your text and little oooomph!..

Futuristic city, 3D techniques in Flash

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

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:

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

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

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

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


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


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

</body>
</html>

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.

homepage.asp
header.asp
topnav.asp
leftnav.asp
footer.asp

 

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>
</div>
<!-- #include file="footer.asp" -->

PHP Version

<? include("header.asp") ?>
<? include("topnav.asp") ?>
<? include("leftnav.asp") ?>
<div class="content">
            <p>My content here</p>
</div>
<? 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

thanks

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

Comments:

Author:  

What colour is the sky?

Related Content

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..

Graphics Design Guide

Graphics Design Guide

The second in a series of help and reference guides, this one covers graphics design and h..

Creating Multi-page PDFs with Adobe Photoshop

Creating Multi-page PDFs with Adobe Photoshop

Heres a tutorial on how to create Multi-page PDF documents using Adobe Photoshop, thats ri..

Creating Gradient Buttons

Creating Gradient Buttons

In this crazy new world of web 2.0 some designs call for some bright, shiny gradient butto..

Set position of external SWF file in Flash

Set position of external SWF file in Flash

A few tips for using levels in flash when loading swf files, and how to set the position o..

Recommended Sites

 Subscribe to our feed

Send to a friend