Web Merge Tutorial

What is Web Merge?

Web Merge is a Dreamweaver command which allows you to separate "content" from "presentation". What does that mean? It means that you could in theory have two different people working on a given "page" - one developing the actual text content (say a news article) and another person designing the visual look and feel of the web page without having to fool with any real content. Web Merge also allows you to use the same "prototype" page over and over again to build "instances" of many pages. For instance you might have a web-based catalog, and you want to create a separate page for each catalog entry. You dont want to have to create 100 pages, all with the same layout but just different content (perhaps a description, an image, etc.). With Web Merge, you create the prototype page once, create a table with all your "data" (the descriptions, logos, etc.) and then just "merge" them together, much like you would do a "mail merge" in a word processor.

Before You Begin

If you are new to Dreamweaver or to Commands, I recommend you avoid using Web Merge for now. Take some time to learn how to do the Basics with Dreamweaver, and when you are more comfortable, come back and try this out. If you have some immediate "business" need to do this (say a deadline in a few hours?) read on, and I'll try to make it as painless as possible.

So, before you begin, download the command to the configuration/commands/ directory. There have been many versions of this command so make sure you get the one with the highest number (web merge3.html so far). Then create a new fresh site in your dreamweaver site window. (We will be using this site as a sort of "tutorial site")

Getting Started

Understanding Web Merge

How does Web Merge work? It analyses the content of the html table you create and creates an internal array of values. Each value is associated with a special tag. You place the tagname at the top of each column in the table. And you place the tag inside the prototype page in the location you eventually want the content to appear. Web Merge then places each row of data into the various locations specified by the prototype file tags, then saves this "merged" page out to a filename you specifiy. Since you can have many rows of information, you can automate the page creation process. Web Merge (henceforth referred to as WM) uses Dreamweaver's ability to access the page's DOM to find and insert HTML into the tags.

Creating Data Pages

Usually when deciding to use WM you have lots of content which needs to get poured into a series of pages with identical formatting. The way in which you tell the command how to handle your data is to place it in a table in an html page. This page should only contain this single table, with no other kinds of html outside this table (although you can place anything INSIDE the table).

Sample table:

user_name user_age user_image wminclude_user_profile wmsavefilepath
Andrew Wooldridge 29 andrew.txt user_andrew.html
Bill Smith 30 more/stuff/bill.txt user_bill.html

Special "tags":

There are special "tags" which WM uses to do specific things for you. These tags allow you to do things like just have a pointer to some information instead of having to insert it fully into the html table (like large images or complex code).

wmsavefilepath - This tag means "web merge save file path". Meaning that defining this column will force the command to save the results of this merge to the file name you specify. If this column is not used/defined then WM uses the "auto naming" feature in the command which allows you to have a prefix with automatic numbering. This tag is optional.

wminclude_XXX - This tag meand "go to the file I tell you in the URL and place the contents of that file in this spot during merge". In other words, instead of having to include a bunch of HTML in your table and mess up the look of the table (it might be too big and be hard to see other columns) you just point to a file. Everything in that file will be inserted into that tag in the prototype page so be careful and not insert new "HTML" pages which have their own HEAD and BODY tags, otherwise you will get strange/bad results. EX: wminclude_bill , wminclude_agedata. You can have as many of these as you want in a table. This tag is optional.

wmdate - This tag means "insert the current date and time into this rendered page." This tag DOES NOT appear in the table and you SHOULD NOT put it there! Instead it lives in the prototype file only. This tag allows you to tell the user when this page was last created/modified. This tag is optional.



Creating Prototype Pages

After creating the data table, you want to create the "template" page. This is akin to Dreamweaver's Templates, only you will be using your own tags to define where the special insertable areas are. The great thing about this is that you do not have to use every tag you define in the data table, and you have "merge" the data table with many different kinds of prototype pages! So you could create a "short" view of each page, perhaps with just the name and image, and then create a "long" view with the name, image, description, etc. etc.

Here's an eample:


User Name:name

User Image:image


And here is the sourcecode:

<p>User Name:<user_name><b>name</b></user_name></p>
<p>User Image:<user_image><b>image</b></user_image></p>

Do you see how the tagnames match up to the column names in the data table example? That's all there is to it! Plus modern browsers ignore markup that they dont understand, so these tags - in the merged/generate pages - will be ignored.

Running the Command

Now that you have created the data file and the prototype file you are ready to run the command. It's best if you make sure that you have no data files or prototype files open in DW when you do this because you dont want DW modifying these files - plus it just seems that having them open causes problems.

Additional Information:

1) You can place the data and prototype html files anywhere on your hard drive - they dont need to be in the site - although it's a good idea to place them there unless you have a good reason not to as they will be easier to find.

2) When you set the wmsavefilepath - WM cannot create directories, so make sure all of the directory information is correct.

3) contact andreww@netscape.com for help if you need it.