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
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.
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.
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).
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 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.
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.).
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:
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:
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:
This is your Library file.
Select File> Save As.
Browse to your Library folder.
Name the file menlib.lbi
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)
Select your new Library file (menlib)
Click the Insert button.
Your widget should appear on the page.
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.