OK, let’s say you’ve just used Dreamweaver’s Spry tab and inserted a horizontal Spry menu to your page. At this point you are trying to save the document. The first time you save after adding Spry, DW copies the files (a spry javascript “.js” file and a CSS file named SpryMenuBarHorizontal.css) into your SpryAssets folder in this site. DW doesn’t ask you anything about the save, it just uses the default file name for those files and drops them into your SpryAssets folder. AND, what’s more, DW automatically adds lines to your document’s <head> section to point to those two files. (Remember to upload those SpryAssets files along with your page when it’s time to publish your website.)
You then spend several minutes (hours?) adjusting the style (colors, etc.) for that horizontal menu. Good work! Looks great! Those changes were all automatically entered into the file SpryMenuBarHorizontal.css mentioned above. Thanks, Dreamweaver, for knowing where to save my stylin’ work!
Now imagine this…. what if you wanted to create several pages with horizontal-style Spry menus. DW doesn’t remember you’ve previously added one elsewhere, so it goes ahead and copies the files into the SpryAssets folder each time. But DW doesn’t know you spent all that time adjusting the file. It doesn’t know enough to name each new instance differently, so the second time you add a horizontal-type menu, DW would actually overwrite the files that were saved there from the first time you inserted that style of menu…. unless you RENAME the first spry files BEFORE YOU SAVE the second document (remember, DW copies those files in there at the point of “Save”).
Summarizing the above:
- Upon first save, DW saves a file called SpryAssets/SpryMenuBarHorizontal.css
- That’s the stylesheet for this one menu.
- Next time you add a horizontal menu (“SpryMenuBarHorizontal”), DW is going to want to save a copy of that file AGAIN.
- To avoid overwriting the first CSS horizontal menu file when you place a second horizontal menu, you should rename the CSS file you used for the first one.
I’d rename it something that will really identify it for you in the future, like “SpryMenuBarHorizontalGreenPage.css” (something that tells you which page in your site that particular horizontal menu is on).
AND THEN, you also have to change the <link href=”../SpryAssets/etc… reference to that file in the HTML code in the <head> section of your document, so that DW knows which stylesheet you want this page to use (among the several that will eventually be collecting in your SpryAssets folder).
A couple of notes to follow up on this.
(1) EXCEPTION: You don’t have to rename the CSS file, just let DW do its thing each time IF you do not plan to change even one little thing in the menu’s stylesheet. That is, you can just keep letting DW overwrite that CSS file IF really do want ALL the horizontal-type spry menus exactly the same in this site — the original Spry default design (i.e., fairly ugly in my opinion).
(2) If you plan to have IDENTICALLY STYLED horizontal-style menus throughout your site, but you want to customize the style (colors, etc), you must still rename your SpryMenuBarHorizontal.css file before you save another page that contains a newly placed horizontal-style menu. Why? Again, so that your changes to the CSS file don’t get overwritten. In this case, you could rename it something like SpryMenuBarHorizontalPhotoSite.css. (This time I’m naming it to identify which whole site it’s being used on, rather than which page.)
AND THEN…
Each time you place a new instance of the Spry Horizontal Menu on any of your pages, all you’d have to do is go to the <head> section of the document and change the name of the CSS file in this tag: <link href=”../SpryAssets/SpryMenuBarHorizontalPhotoSite.css” rel=”stylesheet” type=”text/css” />
Dreamweaver is powerful in the many things it does for us automatically, but it’s like having any good assistant, we have to sometimes make small adjustments to the work it does for us. Working together, hand in hand, with DW.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=347229fd-6f1f-4da3-bb68-636e0f0e4d1c)
