You can use dynamic code in the same pages that you are editing with WebEdit Professional and through the use of editable regions, this code will stay intact as you edit only the static sections of the page.

In part one of this three part tutorial, I showed you what editable regions look like and how to easily insert them in your pages.

In this tutorial, I will show you how you can use editable regions and dynamic code on the same page to allow you to protect your dynamic code, whilst letting your clients/users to update the static sections of the page. By using editable regions in your page you will be restricting the users access to specified sections of the page and at the same time you will protect your dynamic code from being output as static html and overwritten.

Server side code allows us to output pages to the browser with a dynamic backend. The content may change in the background, or may be based on calculations etc, but the output code is always static to the end user.
The editor itself works with the browser so that it must load pages to be edited as output static html. NB: This one factor should allow programmers to understand more about how they should work with the editor alongside their own programming scripts.

If you open a document that contains server side code in the editor – it will open as the output html & not the original text script, because we are trying to edit the page visually in it’s original ‘output’ layout.
By using editable regions, you can specify the parts of the page that can then be made editable to your end user and still maintain the server side code.

That’s correct, you read that right; the editor will maintain your server side code and will not save the output html back in as static code.

Please note: The editor is not a text editor, so if you actually want to edit your dynamic code, then you should download it and edit it with your local text editor. You cannot edit dynamic code in a WYSIWYG view, especially if it has conditional statements based on events.

Using included files allows you to make quick site-wide changes to a navigation bar or change a logo or any predefined section of a site quickly and easily by only having to change one file.

It is almost like having a site stylesheet for that section of the site. This can be applied to headers, footers, menus, and even dynamic applications like a news system.

Here are some examples of server side includes that you can use for different programming languages.

Server Side Includes (SSI and ASP) – may require the shtml or asp extension on your server to run the includes.

<!--#include file="filenamehere.htm" -->
OR
<!--#include virtual="filenamehere.htm" -->

PHP server side includes (PHP only)

<?php include(“filenamehere.htm”); ?>

Ok, if you’ve never used includes till now, before you all go running off to your notepad editors to try this, please note some important points about the way the includes must work with the editor. Some of these points may be expanded on later in another tutorial about includes with the editor.

Here are some general rules of thumb:
- Do not use html, head or body tags in your includes. Keep these in your main files wherever possible(there are tricks that can be done, but this is only for seasoned developers… I’ll fill you in on another tutorial).
- Do not put dynamic code inside an editable region – all editable regions are for static code only.
- Use complete tables in your includes, do not use half open or closed tags in your includes.
Eg. Don’t create a row <tr> in the main file then try to open the cell <td> in the include.
- Do not use editable regions in your includes.

In the next section I’ll show you how to make a navigation menu for your site using a php include. This same principle can apply to any other file that you would like to include in your site.

The way that the editor protects your code relies on the insertion of editable regions. There is really no simpler way to protect your dynamic code. I am going to show you one use of dynamic code for a sitewide navigation menu, nothing fancy, but then you’ll be able to replicate this method for any part of the site you want. Here is a typical menu that might appear on a few websites.



The code looks like this:

<a href="index.html">home</a> |
<a href="about.html">about us</a> |
<a href="contact.html">contact us</a> |
<a href="products.html">products</a> |
<a href="services.html">services</a>

Now, if we had this on every page as a static navigation, then we want to add a new page, we would have to do this on every single page that contains this navigation. That means doing the same thing 6 times. Every time the navigation changes, you have to make the changes on every page – that’s what we call double handling.

The problem: We want to allow the client to still make changes to the site, but we don’t want the include to be output as static html. We also need the client to be able to make one change to the menu, so that this change is shown on all pages that use this menu.

The solution: We’re going to place the menu in a separate file and then include it in every page. When changes are made to this file, they will be updated on every file that has this link to the menu file.

Here’s the original code for the page with the static html menu
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="index.html">home</a> | <a href="about.html">about us</a> | <a href="contact.html">contact us</a> | <a href="products.html">products</a> | <a href="services.html">services</a>
This is currently a blank page.
</body>
</html>

Let’s rip out the nav and put it in the include file and call it menu.htm
The contents of menu.htm should look like this following block of code.

<a href="index.html">home</a> |
<a href="about.html">about us</a> |
<a href="contact.html">contact us</a> |
<a href="products.html">products</a> |
<a href="services.html">services</a>


Now insert the include link to this menu.htm file in your main file.

<html>
<head>
<title>My title</title>
</head>
<body>
<?php include(“menu.htm”); ?>
This is currently a blank page.
</body>
</html>
Important!! - Make sure that you place the .htm file extension in the filetypeinclude array of the config.php file.
Eg. $FileTypeInclude = "htm";
Now, when you open this file in the editor, it will allow you to edit it without the need for html, head and body tags.

Now we’ll add an editable region to the file and we’ll be done.

<html>
<head>
<title>My title</title>
</head>
<body>
<?php include(“menu.htm”); ?>
<!-- #BeginEditable “Comment here” -->
This is currently a blank page.
<!-- #EndEditable -->
</body>
</html>

Upload these pages to your site and then edit with WebEdit.

You can use includes to insert dynamic content for just about anything, whether it’s content from a database, or a dynamic navigation to insert links to files in a specified folder.

Here are some ideas:
- An auto generated navigation script – scrape a folder for .html files and output them in a menu list. Your client won’t need to edit the navigation at all.
- A Calendar script that uses a database or text file on the backend.
- Events script with the above properties.
- Banner Management script.
- Dynamic Countdown and Counters.
- Current Date and Time.
- Much more (use your imagination)…

Here are some javascript possibilities you can use in your files:
- Random Images
- Date and time
- Countdown script
- Dynamic Menu Dropdowns
- Cookies
- Mouse Tricks
- Much more…

Now that you know that WebEdit also works with dynamic code alongside, you should start experimenting with news and gallery scripts or any other dynamic bit of code you can get your hands on. The editor is much more powerful than you last thought, or I hope so, because these more advanced areas of the editor can be overlooked very easily.

Stay tuned for Part Three which covers Dreamweaver and WebEdit integrated development through the use of Dreamweaver templates.