But you said 'use Templates'!
In a previous tutorial I have covered how to use Dreamweaver's
inbuilt 'Template System' to create a master page or .dwt file which all
of your other pages are based on. You make a change in the template
page (where you don't have an 'editable region') and Dreamweaver will
update all of the pages in your site.
This system is a great introduction to the concept of having a master page and can work really well on a site which may be 5 – 10 pages. Imagine though that your website is 100s of pages. Every time you make a change you are asking Dreamweaver to update all of the pages and then, if it doesn't crash your PC or Mac, you have to ftp them all back up to your webspace. This can get really boring, really quickly. If you have a basic grasp of what HTML code looks like and does (and yes, this does mean venturing past 'Design View') then give 'includes' a try.
So that is the logic. You can have the HTML, which makes up your menu for instance, in one file and then this can be 'called' into every other page which opens up using a simple piece of PHP code. If you need to change your menu, then you change the one file and all your pages change. Much like .dwt files but you only have to ftp the one file instead of all your 100s of pages.
I would usually recommend having a folder of 'includes' for complicated sites as you may find yourself needing 'includes' for other PHP scripts such as security or a database connection in the future. It also makes good sense to me in terms of site structure. You have an 'images' folder for your images, a 'javascript' folder for your javascript and so on.
So you want to create your website menu as an 'include'. All you need to do is create your HTML menu as you would want it to appear in your page layout. I will use a simple unordered list menu for this demonstration. My menu will start out with four links.
Now, instead of including this in the HTML of the page, I am going to create a new page called 'menu.php'. If you are using Dreamweaver you don't need any of the usual page structure items that it creates for you. Simply delete the doctype, head, body and html tags until you are left with a completely blank page. Much as you would have if you created a new 'Notepad' file. Then I simply create the menu structure in the 'menu.php' page and save it.
Last thing I need is to tell my pages to include the HTML for my menu wherever I want it. This means expanding on the basic code I showed you earlier.
Notice that the location of my 'menu.php' file is referenced between the brackets and in between quotation marks. As with an image link, it says that the file is in the 'includes' folder and then gives the name of the file.
I want my menu to be styled using CSS of course so I need to place the 'include' code within an unordered list tag. For example:
When the page is viewed the actual HTML which is output looks like this:
If I decide that I want to add a fifth menu item, maybe a 'Contact Us' link then I simply add another list item to my 'menu.php' file so that the HTML output is:
Once you have a reasonable coding knowledge using PHP 'includes' should be a clean and simple way of updating 100s of pages from one single file.
This system is a great introduction to the concept of having a master page and can work really well on a site which may be 5 – 10 pages. Imagine though that your website is 100s of pages. Every time you make a change you are asking Dreamweaver to update all of the pages and then, if it doesn't crash your PC or Mac, you have to ftp them all back up to your webspace. This can get really boring, really quickly. If you have a basic grasp of what HTML code looks like and does (and yes, this does mean venturing past 'Design View') then give 'includes' a try.
What are PHP 'includes'?
PHP is a server-side scripting language and it can be used to create all kinds of database driven web applications. However, 'includes' are very simple to use indeed. The basic principle is that the page is viewed by the visitor selecting your URL. Before they even get to see the website the PHP in the page will 'call' another set of HTML from a different file and then include that HTML in the page when it opens.So that is the logic. You can have the HTML, which makes up your menu for instance, in one file and then this can be 'called' into every other page which opens up using a simple piece of PHP code. If you need to change your menu, then you change the one file and all your pages change. Much like .dwt files but you only have to ftp the one file instead of all your 100s of pages.
How do I do it?
This is the basic code for an 'include'<?php include(); ?>
I would usually recommend having a folder of 'includes' for complicated sites as you may find yourself needing 'includes' for other PHP scripts such as security or a database connection in the future. It also makes good sense to me in terms of site structure. You have an 'images' folder for your images, a 'javascript' folder for your javascript and so on.
So you want to create your website menu as an 'include'. All you need to do is create your HTML menu as you would want it to appear in your page layout. I will use a simple unordered list menu for this demonstration. My menu will start out with four links.
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
Now, instead of including this in the HTML of the page, I am going to create a new page called 'menu.php'. If you are using Dreamweaver you don't need any of the usual page structure items that it creates for you. Simply delete the doctype, head, body and html tags until you are left with a completely blank page. Much as you would have if you created a new 'Notepad' file. Then I simply create the menu structure in the 'menu.php' page and save it.
Last thing I need is to tell my pages to include the HTML for my menu wherever I want it. This means expanding on the basic code I showed you earlier.
<?php include("includes/menu.php"); ?>
Notice that the location of my 'menu.php' file is referenced between the brackets and in between quotation marks. As with an image link, it says that the file is in the 'includes' folder and then gives the name of the file.
I want my menu to be styled using CSS of course so I need to place the 'include' code within an unordered list tag. For example:
<ul id="navigation"><?php include("includes/menu.php"); ?></ul>
When the page is viewed the actual HTML which is output looks like this:
<ul id="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
If I decide that I want to add a fifth menu item, maybe a 'Contact Us' link then I simply add another list item to my 'menu.php' file so that the HTML output is:
<ul id="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact Us<a/></li>
</ul>
Cautionary note
If you are using Dreamweaver and you create all of your links automatically then you need to watch out for the file paths. Although the 'menu.php' file is in the 'includes' folder it is actually being called into a page that is in your site root, so, one folder up. This means you must imagine that you are creating links in your root folder. It is very easy to end up with something that looks like this:
<li><a href="../index.php">Home</a></li>
<li><a href="../about.php">About Us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../services.php">Services</a></li>
This won't work when the HTML is called because the links will be
pointing towards the wrong place. The same goes for images as well!
Other uses
'Includes' can also be useful for other things and I have be known to use it to break down complicated site designs into more bitesize chunks. For instance large image galleries, such as Lightbox2 powered ones, can keep all of the images in one 'includes' file. This makes them more manageable and you may even consider letting your client loose on an 'include' or two as all they will need to do is update that single file by copying and pasting the Lightbox2 code.Once you have a reasonable coding knowledge using PHP 'includes' should be a clean and simple way of updating 100s of pages from one single file.
0 comments:
Post a Comment