The Dreamweaver integration for Modular Templating enables you to rapidly upload HTML designs into SDL Tridion and publish them onto your website. However there are some common stumbling blocks related to how 2nd level dependencies are managed (for example the relationship between CSS and images), and the structure of the published files on your website. This article outlines these issues and illustrates a simple approach to overcome them.

Easily Publish Website Design

Article Sections

The Get Design Elements Template Building Block described in this article can be downloaded here .

• Easily Publish Website Design (1) - The basics
• Easily Publish Website Design (2) - An example
• Easily Publish Website Design (3) - How to publish the whole design
• Easily Publish Website Design (4) - Limitations and Further Ideas

An Example : what happens to your design when uploaded and published

To give a specific example, supposing you are delivered the following files (and structure) with the HTML prototype:

homepage.html

                css

                               styles.css

                img

                               fancy-bullets.gif

In homepage.html there is a reference to the styles.css file, which in turn has a style for bullets that includes a background image: 

extract from homepage.html

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />

extract from styles.css

li
{
   background-image: url(../img/fancy-bullets.gif);
}

When you rename homepage.html to Master Page Design.dwt and upload it to the CMS (with dependencies), it creates a DWT TBB for the Page design, plus Multimedia components for the CSS file and image. If you open the DWT from the CMS, it will (on first upload) contain exactly what is shown in Dreamweaver:

<link href="css/styles.css" rel="stylesheet" type="text/css" />

If you upload the .dwt file a second time, and open it again in the CMS you will see the relationship with the CSS is now managed

<link href="tcm:8-1234" rel="stylesheet" type="text/css" />

When you publish a page using this layout, the Dreamweaver mediator and Default Finish Actions TBB will take care that the CSS file put in the packaged, published and the path updated in the rendered output based on the usual publication settings for the Images root:

<link href="/Images/styles.css" rel="stylesheet" type="text/css" />

So the challenge is. Can we preserve the original structure for our HTML design, and can we ensure that all the dependent items are published (including 2nd and 3rd level dependencies), when we publish our (master) page?

The answer of course is yes, and also relatively easily (if we make some sensible assumptions) as described in the next section .