Home :

Converting a Spry Menu Bar to a Server-Side Include

Site navigation needs to be on every page of your website, but if you build web pages the traditional way, it means updating every page in the site whenever you need to make a change to the navigation. It's far more efficient to convert the navigation or menu bar into a server-side include. By doing so, any changes you make to the include file are automatically reflected in every page that uses the file. The following instructions show how to convert a Spry Menu Bar created in Dreamweaver into a PHP include file. Although PHP is used here, the same basic principles apply to all server-side technologies.

  1. Open a page that contains the Spry Menu Bar that you want to convert, and switch to Code view. It's important to work in Code view, because if you work in Design view, Dreamweaver automatically deletes code that you need to preserve.
  2. Position your cursor anywhere inside the menu code, and click <ul#MenuBar1> in the Tag selector at the bottom of the Document window to select the entire menu. Depending on how you created your page, the menu's ID might be different; the important thing is to select the complete menu, plus any other part of the page structure that you want to be part of the include.
  3. Cut (Ctrl+X/Cmd+X) the menu to your clipboard. Depending on where you click next, Dreamweaver will display the following warning immediately or sometime during the next few steps. You must click NO to prevent Dreamweaver from deleting the code related to the menu bar.
    Dreamweaver warning
  4. Create a new file, and save it in your includes folder. Switch to Code view, and delete everything, including the DOCTYPE declaration. There should be nothing left in the page.
  5. Still in Code view, paste the menu that you cut from the previous page. (If you are in Design view, you won’t get all the HTML code. Always cut and paste in the same view in Dreamweaver—Design view to Design view or Code view to Code view.)
  6. Return to the original page from which you cut the menu, and scroll down to locate the following code (it should be near the bottom):

    <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script>

  7. This is the initialization script for the Spry menu bar. Select the entire script block, making sure you have the opening and closing <script> tags, and cut it to your clipboard.
  8. Paste the Spry initialization script into the include file after the closing tag of the menu.
  9. Links inside include files always need to be relative to the site root. Otherwise, they won't work if the parent file is in a different folder. Change ALL the links in the menu to use links relative to the site root. (Site-root-relative links begin with a leading forward slash.)

    You can either do this manually, or by clicking inside each link, and using the Browse for File icon alongside the Link field in the Property inspector. In the Select File dialog box, switch the link type to Relative to Site Root, as shown in the following screenshot:
    Select File dialog box
  10. The script block that you pasted in step 8 also needs to be edited. Make the links to the images relative to the site root like this:

    <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"}); //--> </script>

  11. Save the include file.
  12. Include the menu in the original file by adding an include command at the point where you want it to appear. PHP include commands should use a document-relative link.

You can add the menu to any page by using an include command at the point where you want the menu to appear. Spry Menu Bars rely on an external JavaScript file (SpryMenuBar.js) and a style sheet (SpryMenuBarHorizontal.css or SpryMenuBarVertical.css). By default, these files are located in the SpryAssets folder. Don't forget to attach them in the <head> of each page that uses the menu.

If you prefer, you can add the link to SpryAssets/SpryMenuBar.js to the include file. Place it immediately above the script block that initializes the menu bar (see step 10). However, you cannot put the style sheet in the include file, because all links to external style sheets must be in the <head> of a web page.

Once you have converted the Spry Menu Bar into an include file, you can edit it and add new links by opening the include file in the Dreamweaver Document window. It will appear unstyled, but you can use Design Time Style Sheets to apply the styles while working with the menu in Design view.

DW CS5 with PHPGetting StartED with CSSEssential Guide to Dreamweaver CS4PHP Object-Oriented SolutionsPHP Solutions Lynda.com CS4 University