Heres a cool tutorial slash speed painting of painting realistic ..
If you've noticed a drop in traffic since your new website went l..
This detailed video will show you how to configure the third part..
Heres a must know for anyone who designs or runs an online ecomme..
An extension to the Iris Porthole effect that incorporates 3D animation, to create a reall..
Create a realistic particle based firework display using Flash. This technique was once us..
Futuristic city, 3D techniques in Flash
See the tricks behing the advanced Flash animation that was used to bring this futuristic ..
Panoramic images the easy way with Photoshop PhotoMerge
Creating Panoramic images from your photos is easier than you think, when you know how. So..
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.
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).
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
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:
<!-- #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" -->
<? 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)
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, i´m 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
Learn the simplest way to remove bad words or swear words from a flash input field or dyna..
How to design a logo covering some good font techniques, how to get inspiration, playing w..
Learn how to create this very cool 3D tunnel effect in Flash using some simple 2D animatio..
The secret to good CSS layouts rests with the Float attribute. Using float instead of rela..
How to transform a standard photograph for use with a specific colour scheme or brand imag..
Send to a friend
Try going to:www.w3schools.com/