Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Pop Menu Magic 2 Includes

How Includes work

The technology is wonderfully simple. You place a directive in your page where you want the contents of an external file (the include file) to be inserted. When your server encounters the directive, it reads the external include file and inserts its contents in place of the directive.

Includes are often more practical to use for medium-to-large sites because only the include file needs to be edited and uploaded to your server. Each page that contains a directive that references the include file is then updated instantly.

What does your server support?

Before you attempt to use SSI, contact your web-hosting company and ask them the following questions:

  1. Does my server support ASP, PHP, or ColdFusion?
  2. Does my server support plain SSI?
  3. Which file extensions do you allow for SSI?

Plain SSI

To use plain SSI, your pages will need to use an .shtm or .shtml file extension instead of .htm or .html. If you prefer to keep your existing .htm or .html extensions, and you have access to your server's configuration (or ability to use .htaccess files), you can set your server to parse for these normal file extensions. See Addendum at the end of this tutorial.

Your include files (the external files that contain the content to be included in your page) can use any file extension that Dreamweaver supports - no matter which type of include you are employing. We recommend using the .htm file extension. That way, Dreamweaver will allow you to edit your include file in Design View.

PHP Includes

To use PHP includes your host pages will need to use the .php file extension.

ASP Includes

To use ASP includes your host pages will need to use the .asp file extension or the .aspx extension if you are using .NET.

ColdFusion Includes

To use ColdFusion includes your host pages will need to use the .cfm file extension.

Parsed HTM or HTML file extensions

If you have full access to your server's configuration you can set it to parse includes for normal web file extensions such as .htm and .html types. See Addendum at the end of this tutorial.

What goes in an include file

For an include to work, the include file must contain only the code you wish to be inserted into your page. If your include will consist of a Pop Menu Magic 2 menu, it should contain only the menu's root DIV. A Pop Menu Magic 2 include file, in Dreamweaver Code View, should look like this:

Include files contain only the markup that will be inserted in your page

Of course, the ID and class can be slightly different as they depend on the how many menus are on your page and the style theme being used.

Where do the html, head, and body tags go? Those tags and all of the pertinent attributes within them, go in your actual pages as will be explained in the step-by-step tutorial below.

Setting Dreamweaver to show Includes in Design View

Dreamweaver can be set to display server-side includes in Design View.

-Choose Edit > Preferences

-Switch to the Invisible Elements category

Preferences Dialog - Show contents of included file is checked

-Place a Check in the box between Server-Side Includes: and Show contents of included file

-Click OK

Creating the Include file

The include file is the external file that contains the information that you wish to include in your actual web pages. You'll create a new folder, an include file inside that folder, and then you'll copy the menu markup from an existing web page and copy it into the new include file.

-Open your files panel (Window > Files)

-Right Click (Control-Click) the root of your site and choose New Folder.

Creating a new folder

-Name the new folder includes.

-Create a new file within the includes folder and name it pmm_include.htm.

-Open the page that contains your actual menu. For this tutorial, we'll assume that this page is index.htm.

Changing the file extension to shtm

For your include to work on your server, you'll need to change your file extension so that index.htm becomes index.shtm.

-Open index.htm (the page that contains your menu).

-Choose File > Save As.

The Save As dialog

-For File name, type in index.shtm.

-Click Save.

Copying the menu markup

-In index.shtm, switch to Code View

-Find the menu markup (it begins with <div id="p7PMM_1" class="p7PMMv09">) and place your cursor anywhere inside the menu code.

Selecting the menu markup

Note: The class name p7PMMv09 is relative to the style theme and menu orientation you are using. If you are using theme 7 (See-Through) and your menu is horizontal, the class name will be p7PMMh07.

-Find <div.p7PMMv09l#p7PMM_1> on the Tag Selector bar, which runs along the bottom edge of Dreamweaver's window (just above the Property Inspector) and click to select it.

The entire block of menu code will highlight to indicate your selection.

-Choose Edit > Copy

-Open pmm_include.htm

-Switch to Code View

Include files must only contain the code you wish to appear in your actual web page. Your page already contains a DOCTYPE, an <html> tag, a <head> region and a <body> tag. You will remove all of this code and replace it with the menu markup you copied from your actual page.

Selecting the source code in the include file

-Select all of the code in your pmm_include.htm file

-Delete it so that your page code is completely blank

-Press CTRL + V to paste in your menu markup

Pasting in the menu markup

Your menu markup replaces the original code.

Converting links to site root relative

When viewed on the internet, your server will insert the contents of your include file into your actual web pages. In all likelihood, your pages will reside in various folders within your site. If you use Document Relative paths (Dreamweaver's default), then your menu item links will always be relative to your include file, which is in its own folder. Your links will not work unless the page happens to reside in the includes folder. The only way to ensure that your links are always going to work, no matter what the page, you must set them to be relative to the root of your site.

Note: The browser attempts to process the links that come from your include file, as if they were relative to the page that contains them ( index.htm) and they will fail because the link is actually relative to pmm_include.htm

-In pmm_include.htm, click the PMM2 icon to open the Pop Menu Magic 2 UI

-Select a menu item.

-Click the Browse... button.

-The Select File To Link dialog will open.

-Browse to the file within your defined site that you wish to link to and select it

-In the Relative to list, choose Site Root.

The URL value will change to include a leading forward slash, which indicates the path to your linked file is now relative to the root of your site.

Site Root Relative Path

-Click OK to close the Select File To Link dialog.

The Link URL box in the PMM2 UI will reflect your new link and its site root relative path.

-Repeat the above steps to change all of the links in your menu to site root relative.

-Click OK to close the PMM2 UI when you're done converting all of your links.

Notice that the PMM2 system inserted a JavaScript link and a CSS link. You will need to delete these before saving your include file.

-Select all of the code that comes before <div id="p7PMM_1" class="p7PMMv09">.

Deleting the extra code in the Include file

-Delete the selected code so that your markup begins with <div id="p7PMM_1" class="p7PMMv09">.

-Save the include file.

Inserting the Include

-Switch back to index.shtm.

If your menu markup is not still selected, go ahead and select it again-

-Find the menu markup (it begins with <div id="p7PMM_1" class="p7PMMv09">) and place your cursor anywhere inside the menu code.

-Find<div.p7PMMv09l#p7PMM_1>on the Tag Selector bar, which runs along the bottom edge of Dreamweaver's window ( just above the Property Inspector) and click to select it. The entire block of menu code will highlight to indicate your selection.

Selecting the menu markup

-Press your Delete key to delete the markup.

-Dreamweaver 8, Dreamweaver CS3 and CS4 users choose Insert > Server-Side Include.

-Dreamweaver MX 2004 users choose Insert > HTML > Script Objects > Server-Side Include.

-Dreamweaver MX users choose Insert > Script Objects > Server-Side Include.

The Select File dialog will open.

-Browse to your pmm_ include.htm file and select it

Selecting the Include File

-Choose Relative to: Site Root

-Click OK.

-Dreamweaver will insert a Virtual Include comment in your code.

The include comment

About Virtual Includes

Virtual Includes are always used with Site Root Relative paths. If you forgot to choose Site Root in the Select File dialog, Dreamweaver will insert a File Include. To correct this-

-Click the Refresh button on your Property Inspector

Refrshing the Property Inspector

-Place your cursor anywhere inside the Include comment

Your Property Inspector will change to show options for your Include

The PI in SSI Mode

-Select the Virtual Type radio button.

-Click the folder icon to browse to and reset the path to your include file.

Selecting the include file

-Select Site Root from the Relative to list.

-Click OK.

Your Filename path now has a leading forward slash indicating it is Site Root Relative.

The proper root relative path

-Switch to Design View.

Your menu will be there. If it is not, make sure you followed the instructions to set your Dreamweaver Preferences to show Include files.

Previewing locally

In Dreamweaver you can preview pages that contain includes and Dreamweaver will display the included content using a special temporary file. To see the included content, Dreamweaver must be set up to Preview using a temporary file. To make sure this feature is enabled-

-Choose Edit > Preferences.

Setting DW Preview Preferences

-In the Preview in Browser category, check the Options box to Preview using temporary file.

-Click OK.

Note: Dreamweaver can only generate the included content for the current page. If you click a link on the previewed page and open another page, the include will not be rendered. This is normal behavior for Dreamweaver. All pages will work as expected on the internet.

Editing "included" menus

To edit an include menu you must do so inside the include file—in this case pmm_include.htm. The interface will work perfectly. Just remember to delete the script and CSS links before saving and uploading the include file.

Creating additional pages

To create additional pages, make copies of index.shtm and rename the copies.

-Open index.shtm.

-Choose File > Save As.

-When the Save As dialog opens, change the name in the File Name box. For example, change index.shtm to products.shtm.

Note: If you are using a Dreamweaver Template, you can insert an include into the DWT file. Just remember that all of the pages attached to your Template will need to be changed to the shtm file extension.

Other types of Includes

If you have access to and would like to use a server technology such as ASP, ASP.NET, ColdFusion, or PHP, you'll need to change the file extension of index.shtm to one of the following:

  • index.asp
  • index.aspx
  • index.cfm
  • index.php

Your include file extension (pmm_include.htm) does not need to be modified unless the include file will be containing dynamic server code.

You will also need to change the syntax of your include comments. While you should consult your server hosting company or network administrator, here are examples of how your include comments should be written:

ASP and .NET

ASP and .NET includes use the same syntax as plain SSI:
<!--#include virtual="/includes/pmm_include.htm" -->


<cfinclude template="/includes/pmm_include.htm">


<?php require_once('/includes/pmm_include.htm'); ?>

Parsing htm and html file types

The following addenda cover customized settings to enable parsing of htm and html file types. The first addendum covers Windows Server and the second addendum covers Linux/Apache/Red Hat servers.

Addendum: Parsing on IIS (Windows Server)

When page content is called via SSI directive tags in HTML pages, the server has to parse (look through) these pages trying to find SSI directives.

In the past, when servers were running on 386 and 486 machines, this often bogged down a server by forcing it to parse every HTML file it serves up looking for SSI directives. Modern servers should not be affected at all. Web servers typically only look through certain HTML files. These files are identified by their extensions.

By default, IIS will only parse HTML files that have .shtm, .shtml, and .stm extensions.

This can pose a problem if you want to start adding SSI directive tags to long-established pages. These pages may have the more traditional extensions of .htm and .html and through time could be linked to by numerous other sites and indexed with their current extensions by various search engines. Changing the extensions to accommodate server parsing would cause a raft of 404 errors when people try to access these pages from existing links and search engine references.

Apache users can get around the above problem by using a .htaccess file. You don't even have to be a server admin to set one up. However, with IIS you do have to be a server admin, or at least an IIS admin, to get around the above problem. Let's say you want IIS to also parse all pages that have a .htm extension. Here's how:

  • Right-click on the selected Web site and select Properties
  • Click on the Home Directory tab
  • Click on the Configuration button

Parsing for SSI directives on Windows IIS servers

Scroll to the bottom of the list in the App Mappings tab and you'll see the HTML file extensions listed for pages that are parsed by default

The Application Config Window

Highlight the entry for the .shtml extension and click on the Edit button and note the mapping properties

Edit Extension Mapping Dialog

Click on the Cancel button to close this window and click on the Add button to create a new mapping

Simply duplicate the mapping properties you noted in the previous step but this time enter .htm in the Extension field and click on OK.

Edit Extension Mapping Dialog: Add The Extension

The default file extension for CGI scripts under IIS is .pl so if you have a bunch of CGI scripts with a .cgi extension, you can use the above procedure to add a mapping to the Perl.exe file for the .cgi extension. Simply duplicate the mapping for the .pl extension.

That's all there is to it. It's probably a good idea to restart the server, or at least the IIS service in the Control Panel, so that all your changes take effect.

Linux/Apache/Red Hat Parsing

If you have access to your server or to your web directory's htaccess file, you can leave your web pages as index.htm or page.html and have your includes parsed just as if they were placed in an index.php or page.php file!

Edit the .htaccess file

Go to your WWW root and look for the file named .htaccess. If it's not there ask your host or server administrator where to find it and if you may edit it.

Ask your host for the line to add in your .htaccess file. It will look something like:

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html

or simply:

AddType x-mapp-php4 .html .htm

or perhaps:

AddType x-mapp-php5 .html .htm

Once you have the correct method to deploy from your host, save the file and upload it to the root of your site.

Save and close the .htaccess file. Upload it to your web server and you're done.

Closing thoughts

Pop Menu Magic 2 was designed to make it as easy as possible for you to work with site management techniques such as Includes. Even after deploying an include, you can still use the Pop Menu Magic 2 User Interface to add or delete links, add sub-menus, re-order your menu items - in short, you do not give up the power of the PMM2 UI when you use server-side includes!