Heres a cool tutorial slash speed painting of painting realistic ..
In this video Jeremy of Shoemoney.com explains how he experimente..
This very detailed and long tutorial will teach you how to create..
Forget the magic wand tool, this tutorial will teach you how to s..
A collection of futurstic textures used in the Future city project...
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 ..
Create animated eyes that blink, wink and following the mouse pointer using Flash...
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
Great software for fixing those annoying unknown and broken covers..
Learn how to detect keyboard input in flash for applications and game controls using a bit..
Learn the simplest way to remove bad words or swear words from a flash input field or dyna..
A list of great sites to submit your tutorials and articles that actually bring traffic to..
Create animated eyes that blink, wink and following the mouse pointer using Flash...
Send to a friend
Try going to:www.w3schools.com/