Using Frontier 5 with Dreamweaver

faisal@faisal.com

This document was written for Frontier 5.01, which didn't get along well with graphical editors. More recent releases of Frontier (and, of relevance to the audience for which this was intended, Radio Userland) have much better compatibility with tools such as Dreamweaver. These instructions still work with the old software, but I suggest upgrading if at all possible.

Frontier assumes that most of your site development is done within Frontier, but Frontier also extends to work with external applications, particularly BBEdit. Dreamweaver also extends to work with BBEdit.

By combining the two we can use Frontier to flow static and dynamic content into templates created with Dreamweaver's layout tools (with support for Cascading Style Sheets, JavaScript and Dynamic HTML).

How

Right now you can only use the two together in limited ways, and only on the Macintosh. Currently the only real way to get them to work together is to use BBEdit as an intermediary, and BBEdit is a Mac only program. In the future you'll be able to use ContentServer to integrate between the packages (and other web authoring packages) without regard to platform. For now, you'll need:

• Dreamweaver 1.2 or later
• BBEdit 4.5.2 or later (BBEdit is bundled with the Mac version of Dreamweaver)
• Frontier 5.0 or later (Frontier is a free download, and is bundled with the commercial version of BBEdit)

The Basics

Create a standard BBEdit Scripting site (if you're unfamiliar with the process, you may want to check out http://www.scripting.com/bbedit/ for more detail):

• Launch Frontier and BBEdit.
• In BBEdit, choose your output and backup folders using the Site menu.
• Create a folder to build the site in.

In Dreamweaver's Preferences window, select the HTML panel and turn off all the error checking - the error checking can interfere with how Frontier expects pages to be set up.

Using BBEdit or Dreamweaver, create a #template.html file to hold the template. This can be a normal HTML file, with CSS, JS, DHTML, etc. Just lay the page out, and put {bodytext} where you want the page content to go. You can use {} macros as usual (eg. {title}). Be sure to read the Gotchas, below.

Using BBEdit, create content files (index.html or whatever you want to name it). Enter the usual # directives at the top, then flip over into Dreamweaver to edit the content of the page. Dreamweaver interprets the whole page as HTML, so the # directives at the top of the page will appear as one line (or paragraph, if you have a lot of them). Render your site.

Gotchas

• Working With Macros
  • Dreamweaver doesn't know about {} style macros.
  • If the macro is something simple, like {bodytext} or {title}, Dreamweaver will leave it alone, allowing Frontier to do its work.
  • If the macro is more complicated, such as {return "<img src="/images/topbar-" + area + ".jpg"}, Dreamweaver will freak out. Obviously in this case you could use the imagetag macro (eg. {imagetag("topbar-" + area + ".jpg")}) - it wouldn't look good in Dreamweaver, but it would work. In other cases you may have to get clever in how you write your macro, or give up and add your macros by hand after you have finished with the file in Dreamweaver. This is one of the biggest limitations of using these two programs together.
• Commenting Modern Code
  • Good HTML practice suggests that you put JavaScript and CSS code in <!-- --> comments for compatibility with older browsers, and Frontier expects it (more to the point, it doesn't process macros within comments, and won't interpret JavaScript and CSS syntax as macros to be processed).
  • For JavaScripts, add <!-- after every <script> tag, and //--> before every </script> tag.
  • For CSS, add <!-- after the <style> tag and --> before the </style> tag.
  • The Behaviors and Objects included in Dreamweaver 1.0 do not do this automatically, but the Behviors and Objects in DW 1.2 do. If you have version 1.0 of Dreamweaver, you'll have to add your own comments to the code. You should only have to do this once after any time you modify the behavior or style in question - Dreamweaver doesn't touch any code unless it's working with it directly.
  • Dreamweaver Objects and Behaviors written by third parties may not comment correctly either. Check to see whether you have to add comments yourself. If you're writing your own Objects or Behaviors, be sure to write them so that they include comments - it will save you a lot of grief.

Next

This is just one way that these two tools work together. There are others.

For instance, you can use Dreamweaver 1.2 (or later?) to edit web pages stored in Frontier's object database:

• select the WP-text field
• hit command-E to edit using BBEdit
• hit the Dreamweaver button to flip the page into Dreamweaver
• edit the page in Dreamweaver
• hit command-E in Dreamweaver to return to BBEdit
• make a minor change (eg. space then delete) and save once more, which tells Frontier to pick up the changes for the odb

It's rather Rube Goldbergesque (and from our experimentation, very tempermental - if you don't follow the process very closely you can wind up accidentally saving your work outside the odb), but it can be useful.

We're playing with using Userland's ContentServer/B software to be able to automate this process on both Windows on the Mac. There are a few glitches, but in principle it's like the method described above but supporting multiple users, and not requiring local access to the files.