Easily Publish Website Design - The Basics

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 .

The Basics

The process of converting an HTML prototype (typically developed by an external agency) into SDL Tridion items using Adobe Dreamweaver, or a similar webdav enabled HTML editor is very fast:

  1. Make a webdav connection from Dreamweaver to the CMS

  2. Copy the HTML prototype to a folder on your local machine

  3. Rename one of the prototype .html files with the .dwt extension and a suitable name (like Page Design.dwt)

  4. Remove any markup that represents content, or should be dynamically generated (like navigation) - you can also leave this in as placeholders until you are ready to replace it.

  5. Upload the .dwt file using webdav into the CMS as your Page Design TBB, (or perhaps Master Page Design if you are using ASP.NET) - make sure you upload dependent files, as this will upload all the css, js referenced in the design, plus any images referenced in the CSS

  6. Upload the .dwt for a second time (this time without dependencies) - this will ensure that all relative paths for CSS, JS etc. are converted to tcm uri references in the CMS

  7. Create a Page Template using this Dreamweaver TBB (DWT) and the Default Finish Actions TBB

  8. Create a page using this template, publish out to your website, and hey presto - your website design published from Tridion

  9. All this can be achieved in around 15-20 minutes with a bit of practice, however often you will notice some problems with the published design, most commonly because:

All this can be achieved in around 15-20 minutes with a bit of practice, however often you will notice some problems with the published design, most commonly because:

  1. Dreamweaver has identified 2nd level dependencies between files (for example between a CSS file and images referenced in it, or between javascript files that are referenced from other javascript files) and so they are uploaded to the CMS. However, these dependencies are not managed in the CMS, and so the second (and further) level dependencies are not published.

  2. The css, js etc are published in to the default Images location configured for the publication (/Images or whatever you have configured in publication properties). Often the HTML prototype relies on the structure of folders within it and this is ruined when the CMS publishes everything flat to one folder on the website.

This is illustrated by an example in the next section