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.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #143

Can I use Library Items or server side includes (SSI) for complex DHTML menus or pages that have lots of javascript?

The Answer

Prepared May. 2004 by Al Sparber, PVII

Making a Library Item (or SSI) with Complex DHTML

It's often asked, "Can I turn my DHTML menu system into a Library Item?". Well, we think it's quite easy, if you understand just how Dreamweaver Library Items work. The added bonus of learning this technique is that it works fundamentally the same for Server-Side Includes (SSI). The key is to think outside the box... and to work outside the Library Item file (LBI).

The first step is to make a sample page that contains the elements you wish to have in your Library Item, positioned exactly as they will appear in your finished page. This page is to be kept, as it will be central to ongoing management of your Library Item.

If your Dreamweaver site doesn't already have one, create a new folder in its root and name it: Library.

Create a new HTML document in your Library folder and give it a name that relates to the Library Item you will be making. For example: menlibworksheet.htm

Create your DHTML Widget

Build your DHTML menu, scroller, or woozle in the new file you created in step 2 above. The widget can be as simple as a single pull down menu, or as complex as a full-blown Menu Magic system. If you need to position the widget based upon background images or content, go ahead and add the necessary attendant parts... even a style sheet. Once you've got everything put together and working as intended you can start the Library building process:

Save your work page (menlibworksheet.htm, e.g.) before beginning the following steps.

Create a "Deconstruct-able" Page

Choose File> Save As to make a copy of your work page in the Library folder. Call it: templibJuly09.htm (sub today's date). We'll be doing some deconstructing and we need to keep our work page intact for future modifications to the Library Item.

Delete all code between the <body> and </body> tags that does not relate to your DHTML widget. In other words, if you've added any content to assist you in lining up your widget (tables, paragraphs, layers, etc.), remove them now. Your page should be distilled down to the HTML that comprises your widget.

Externalize the JavaScripts

Create a new file, name it: myscripts.js, and save it in the root of your site.

Go back to your temporary work file and open up code view (View> Code).

Look for the JavaScripts in the <head> area that drive your widget. If your widget is a PVII-type drop down menu, you might see the following scripts:

<script type="text/javascript">
<!--
function MM_reloadPage(init) {
Sample script
}
function P7_autoLayers() { //v1.2 by PVII
Sample Script
}
//-->
</script>

Copy everything between (but not including) the opening comment marker (<!--) and the closing comment marker (//-->). Do not copy the script tags that appear just above the opening comment and just below the closing comment.

Paste the scripts into your new file (myscripts.js) and save the file.

Go back into templibJuly09.htm and delete all the code above the opening body tag, including doctypes, HTML tag, Meta tags and the entire <head> region. The first line in your source code should now begin with:

<body blah blah blah>

Create a Host Document

Create a new HTML document. This is the document you'll use to house your new Library Item. Once you insert the Library Item, you'll build the rest of the page. Save this new page anywhere within your Dreamweaver site. For the purpose of referencing this page during the rest of this lesson, let's call it: hostpage.htm.

Transfer event handlers from the body tag to the Hostpage

For a PVII-style pull down menu, you probably would not have any body event handlers. But if you were working with Menu Magic, for instance, the body tag in templibJuly09.htm might look like this:

<body onLoad="P7_setMenuMagic1(stuff in here)">

Copy the onLoad handler:

onLoad="P7_setMenuMagic1(stuff in here)"

Paste the onLoad handler inside the body tag of your new document (hostpage.htm) so it now looks like this:

<body onLoad="P7_setMenuMagic1(stuff in here)">

Now go back into templibJuly09.htm and delete the opening <body> tag, the closing </body> tag, and the closing </HTML> tag. The remaining source code should be comprised of structural tags only (DIV, Table, P, e.g.).

Link your JavaScript file and CSS files (if applicable) to the Hostpage

Create links to myscripts.js and any CSS files you need. These links go in the <head> region of your hostpage's code. Here is what a script link looks like:

<script type="text/javascript" src="myscripts.js"></script>

Here is what a CSS link looks like:

<link href="mycss.css" rel="stylesheet" type="text/css">

So, with the above changes, your hostpage's code should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link href="mycss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="myscripts.js"></script>
</head>
<body onLoad="P7_setMenuMagic1(stuff in here)">

</body>
</html>

Create the Library File

Go back to templibJuly09.htm and inspect the code. You should have just html markup remaining. If you have a Menu Magic system (for example), it should look something like this:

<div id="p7menu1" style="position:absolute; left:20px; top:160px;width:160px; z-index:103">
<a href="javascript:;" onClick= "P7_trigMenuMagic1('p7menu1',1); return false">
<img src="images/butt1.gif" width="160" height="22" name="p7mbut1" border="0" alt="menu 1">
</a></div>
<div id="p7menu2" style="position:absolute; left:20px; top:182px; width:160px; z-index:104">
<a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu2',1);return false">
<img src="images/butt2.gif" width="160" height="22" name="p7mbut2" border="0" alt="menu 2">
</a></div>

This is your Library file.

Select File> Save As.

Browse to your Library folder.

Name the file menlib.lbi

Insert and test

Open Hostpage.htm

Place your cursor at the top left edge of your Dreamweaver editor window.

Open the Assets panel (Window> Assets or F11)

Select the Library Icon (open book on bottom)

Library Panel

Select your new Library file (menlib)

Click the Insert button.

Your widget should appear on the page.

Notes

When working with Dreamweaver Layers, make sure that all Layers in Library items have unique names. For instance, if you insert a Layer on a new page, Dreamweaver will name it "Layer1". If you then insert a Library file on that page, and the Library file also contains a layer named "Layer1", you will have a naming conflict. If that layer is referenced in a script, the script will not work and an error will be generated in the browser.

To update this type of Library item, you would work in menlibworksheet.htm and make all your changes. Then you would repeat all the steps listed above. Once your Library file is ready, you simply use File> Save As to overwrite your existing Library file.

Whenever changes are made to a Library file, and your local Dreamweaver updates are completed, you need to "put" or upload all changed files to your remote server. The actual Library files (.LBI) do not need to be uploaded.

The Library file you just created can be converted to a SSI. You just need to save a copy and give it whatever file extension your server requires. See (SSI) in your Dreamweaver documentation to learn more about this technology.

 

Back to the questions list