Scroll To Top

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.

Using Adaptive Menu Magic With Includes… PVII is the leader in creative extensions for Dreamweaver

Server-Side Includes allow you to manage repeating sections of your web pages, such as navigation, in a central file. Also see: Templates and Library Items

While this tutorial was written using Adaptive Menu Magic as its model, the techniques you will learn are applicable to any menu system or widget.

How Server-Side 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 Server-Side Includes (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 classic SSI?
  3. Which file extensions do you allow for SSI?

Classic SSI

To use classic 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 body code you wish to be inserted into your page. If your include will consist of an AMM menu, it should contain only the menu's root DIV. An AMM include file, in Dreamweaver Code View, should look like this:

<div id="p7AMM_1" class="p7AMM amm-noscript amm-responsive amm-root-black amm-rootlinks-blue amm-subs-blue amm-sub-borders amm-centered" data-amm="360,1,900,5,-10,0,1,0,0,5,1,1,1,0,0" data-amm-label="More...">
<div id="p7AMMtb_1" class="amm-toolbar closed"><a title="Hide/Show Menu" href="#">&equiv;</a></div>
<ul class="closed" aria-label="Navigation Menu">
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#" class="amm-trigger">Menu Item</a>
<ul>
<li><a href="#" class="amm-first">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#" class="amm-last">Sub Menu Item</a></li>
</ul>
</li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
<li data-amm-priority="0"><a href="#">Menu Item</a></li>
</ul>
</div>

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

Where do the html, head, and body tags go? How about JavaScript and CSS linked files? They go in your actual pages as will be explained in the steps 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

Note: Depending on the version of Dreamweaver you are using, your Preferences window might look slightly different.

-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.

-Create a new folder inside the root of your defined Dreamweaver site.

-Name the new folder includes.

-Create a new file within the includes folder and name it AMM_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.

-For File name, type in index.shtm.

-Click Save.

Note: The file extension depends on your server capabilities and could be .shtm, .shtml, .php, .asp, .aspx, or .cfm.

Copying the menu markup

-In index.shtm, switch to Code View

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

Selecting the menu markup

Note: The Tag Selector bar behaves differently in various Dreamweaver versions. Older versions might show the entire DIV tag, along with its IDs and classes, directly on the bar. Newer versions will show a tooltip when you hover over the element.

-Find <div#p7AMM_...> 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. Depending on your chosen menu options, what appears on your Tag Selector bar might be a little different.

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

-Choose Edit > Copy

-Open AMM_include.htm

-Switch to Code View

Include files must only contain the code you wish to appear in your actual web page. Your page 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.

-Select all of the code in your amm_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.

-In AMM_include.htm, click the AMM icon to open the AMM interface.

-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 AMM 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 AMM UI when you're done converting all of your links.

Notice that the AMM system inserted a JavaScript link, a CSS link, and a viewport Meta tag (based on the Enable Responsive Conversion option in the AMM UI). You will need to delete these before saving your include file.

-Select all of the code that comes before the <div id="p7AMM_"... tag.

<meta id="p7AMM" name="viewport" content="width=device-width">
<link href="p7AMM/p7AMM-01.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="p7AMM/p7AMMscripts.js"></script>

-Delete the selected code so that your markup begins with <div id="p7AMM_"...

-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="p7AMM_"...) and place your cursor anywhere inside the menu code.

-Find the menu DIV on the Tag Selector bar 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, CS3, CS4, CS5, CS5.5, and CS6 users choose Insert > Server-Side Include.

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

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

-Dreamweaver CC users? Adobe removed the ability to insert Server-Side Includes visually (no one seems to know why). You will need to enter the code manually, which is covered below and quite simple to do. If you'd prefer an automated way of entering Include directives in Creative Cloud, we have released an Add-On toolkit that restores several key features (featuring an Includes command) to Creative Cloud versions. It's called: DW Tools 1

The Select File dialog will open.

-Browse to your AMM_ 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. Dreamweaver CC users please copy the line of code below and paste it into your page to replace the menu code.

The Virtual Directive Code

<!--#include virtual="/includes/AMM_include.htm" -->

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-

-Place your cursor anywhere inside the Include comment

Your Property Inspector will change to show options for your Include

The PI in SSI Mode

Note: If you do not see the above Properties inspector view, you will see a Refresh button. Click it to refresh Code View. This screen is not available in Creative Cloud versions, so you'll need to correct the code manually. If you'd prefer an automated way of doing it in Creative Cloud, we have released an Add-On toolkit that restores several key features (featuring Include commands) to Creative Cloud versions. It's called: DW Tools 1

-Select the Virtual Type radio button. Newer versions of Dreamweaver will adjust the path for you. Older versions will not. To adjust the path yourself:

-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 PI in SSI Mode

The code should look like this:

<!--#include virtual="/includes/AMM_include.htm" -->

-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

DW CS6 & Earlier:

Setting DW Preview Preferences

Note: Newer Creative Cloud versions of Dreamweaver have drastically altered the Preview in Browser functionality. The above screen capture shows Preferences for Dreamweaver CS6. Dreamweaver Creative Cloud versions would look like this:

Dreamweaver Creative Cloud & Later:

Setting DW Preview Preferences

-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 AMM_include.htm. The interface will work perfectly. Just remember to delete the script link, CSS link and optional Viewport Meta tag before saving and uploading the include file. Lines to delete:

<meta id="p7AMM" name="viewport" content="width=device-width">
<link href="p7AMM/p7AMM-01.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="p7AMM/p7AMMscripts.js"></script>

The Meta tag line will be present if your AMM menu is set to "Enable Responsive Conversion".

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

Other types of Includes

If you have access to and would like to use a server technology such as 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 (AMM_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 classic SSI:

<!--#include virtual="/includes/AMM_include.htm" -->

ColdFusion

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

PHP

<?php include $_SERVER["DOCUMENT_ROOT"] . "/includes/AMM_include.htm"; ?>

Older servers might require different syntax. If you have problems, contact your server admin or host support.

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

Adaptive Menu Magic 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 AMM 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 AMM UI when you use server-side includes!