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
The Get Design Elements Template Building Block described in this article can be
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:
Make a webdav connection from Dreamweaver to the CMS
Copy the HTML prototype to a folder on your local machine
Rename one of the prototype .html files with the .dwt extension and a suitable name (like Page Design.dwt)
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.
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
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
Create a Page Template using this Dreamweaver TBB (DWT) and the Default Finish Actions TBB
Create a page using this template, publish out to your website, and hey presto � your website design published from Tridion
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:
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