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.

MGM site wide management… PVII is the leader in creative extensions for Dreamweaver

Dreamweaver Templates, Library Items and Server-Side Includes allow you to manage repeating sections of your web pages in a central file. This section contains tutorials that will help you to deploy your MGM menu using any of those methods.

MGM in Templates | Library Items | Includes

MGM in Dreamweaver Library Items

Dreamweaver Library Items are a popular way to manage repeating content in small to medium-sized web sites.

How Library Items Work

Library Items work locally. When you make changes to the Library Item file, Dreamweaver updates the local copy of each page that carries an instance of that Library Item. To see those changes on the internet you must then upload all the pages to your remote server. MGM is designed to be fully compatible with Dreamweaver Library Items. The system will recognize that a Library Item is being used and adjust accordingly.

Deploying MGM in a Dreamweaver Library Item

You'll create 2 pages for this tutorial. The first page will be used to create your menu. The second page will be the one that you add your menu to after you've made the menu a Library item.

-Create a new blank page. Save it in the root of your defined site as mgm-library.htm

-Create another blank page. Save it in the root of your defined site as mgm-menu-test.htm

Note: The test pages are made in the root to make it easier for you to change the path to your CSS and script files to root-relative, which in turn makes it possible to add your library-based menu to any page, in any folder, of your defined site.

-Open mgm-library.htm

-Click on the page and then open the MGM interface

-Build your MGM menu with any options you desire

-Click the OK button to create the new menu

Copy the MGM CSS and Script Links

The externally linked CSS and JavaScript files used by MGM need to be moved to the destination pages that will contain your menu as a Library Item. In Code View, locate the following 2 lines in the <head> section (near the top of the code):

<script type="text/javascript" src="p7mgm/p7MGMscripts.js"></script>
<link href="p7mgm/p7MGM-04.css" rel="stylesheet" type="text/css" media="all">

-Copy the 2 lines.

-Open mgm-menu-test.htm and locate the closing head tag: </head>

-Make a new line just above </head> and paste in the CSS and JavaScript links.

-Leave mgm-menu-test.htm open as you have one more line of code to copy.

-Switch back to mgm-library.htm

MGM menus are responsive-enabled by default. Unless you turn off the responsive option in the menu interface, a special meta tag will be added to your page. This meta tag needs to be moved to the destination pages that will contain your menu as a Library Item. In Code View, locate the following line in the <head> section (near the top of the code)::

<meta id="p7MGM" name="viewport" content="width=device-width">

-Copy the line.

-Switch to mgm-menu-test.htm and locate the title tag in Code View:

<title>Your Title is Here</title>

-Make a new line just above <title> and paste in the meta tag.

Convert the CSS and Script path to Site Root Relative

In all likelihood your site will store its pages in various folders. To ensure a valid path to your MGM CSS and script files for pages in any folder of your site, you will make the path to those asset files relative to your site's root. To do so, add a leading forward slash to the paths:

<script type="text/javascript" src="/p7mgm/p7MGMscripts.js"></script>
<link href="/p7mgm/p7MGM-04.css" rel="stylesheet" type="text/css" media="all">

-Save the page and keep it open.

-Switch back to MGM-library.htm

Create the Library Item

Select the menu by clicking the first DIV tag <div#p7MGM... on the Tag Selector bar that runs across the bottom of Dreamweaver's window—just above the Properties Inspector.

When you have selected the tag, the menu will become highlighted.

Note: Based on the menu options you have chosen, the class names inside your tag might be a little different. It will always begin, however, with <div id="p7MGM_1".

With the menu highlighted, choose:

Modify > Library > Add Object to Library

Your Assets Panel will open and you might see this alert box:

The alert message is not relevant to your task so click OK

The Assets panel will now have focus and you will see a new untitled library item in the panel. Before you do anything else, you will need to give this file a name. Let's give it a name of mgm-menu.

The panel will now reflect the name you set in both the Name and the Full Path columns of the panel.

An Update Files dialog will open.

Click the Update button.

Your Library item is now linked to your page and carries the menu. Your menu will now appear with a yellow highlight indicating it is a Library item:

If you click on the menu, the Properties Inspector will display the properties of your Library Item:

From the inspector you will be able to Open your Library file, Detach it, or Recreate it.

-Close mgm-library.htm. It is no longer needed so you can delete the file if you wish.

Deploying the Library file

We're now going to use the Library file to add a menu to a page.

-Open mgm-menu-test.htm

-Click once inside Design View to establish an insertion point.

-Open your Assets panel and select the Library icon. You will see your new Library item listed.

-Select the pm3-menu Library Item in the Asset panel's first column and drag it into Design View.

-Release your mouse button to drop the menu onto the page.

That's it. The menu is now resident in your page. You can repeat the above processes to add your menu to any page in any floder of your site.

Modifying a Menu in a Library Item

You can Modify the menu at any time. To do so:

-Click on your menu to select it and then click the Open button on your Properties inspector to open the Library file.

Note: The menu will appear unstyled. This is normal.

-Place your cursor in one of the menu links.

-Click the MGM icon to open the Modify interface.

-Make your modifications.

-Switch to Code View

Remove Extra Code

Dreamweaver will add some extra code to the top of the Library file and MGM will add back links to the MGM CSS and script files. We will remove this code.

-In Code View of your Library file, locate these lines at the top:

<meta id="p7MGM" name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="p7mgm/p7MGM-04.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="p7mgm/p7MGMscripts.js"></script>

-Delete the code.

-Save your Library file

The Update Library Items dialog will open, listing the pages that use this Library item and asking if you would like to update them.

-Click Update.

The Update Pages dialog will open, indicating the process is Done.

-Click Close.

That's it. You have created a Library file for your menu and have learned how to edit it. You can add your Library item to any page within your site.

Publishing to your Web Server

Dreamweaver manages Library items in your local site. Whenever you edit a Library file, Dreamweaver updates all local files that carry that Library item. To complete the job you need to upload all of the files that Dreamweaver updated locally to your Web server.