22 Sep 2005, 11:54am
General
by Jesse Rodgers

Comments Off

Dreamweaver 8 changes relative link management in templates, workaround is here

If you are using templates in Dreamweaver MX 2004, you happen to link to CSS in your template using @import url("css/custom.css");, and you want the relative css/ to remain untouched because you have CSS directories in each of your sub-directories then you need the solution posted below. Same problem exists for server side includes (SSI), images, and a couple other tags.

Update: with the update 8.01 for Dreamweaver the issue is now sort of fixedread the technote. It’s not a bad solution for the apparent problem but keep in mind the 8.01 update changes your default you may have gotten use to. If you haven’t got used to it, check out the technote and get the update. Read on for description of the problem 8.01 fixes…

In Dreamweaver 8 there appears to be is a fix for a template problem that had DW MX 2004 not managing links properly but this fix causes problems for those that took advantage of the problem behavior in Dreamweaver MX/2004. This problem will likely effect at least a couple large sites at UW and goes beyond CSS to annoy your relative links in includes (PHP, ASP, CFM, JSP, etc), images, and more.

Stephanie has an explanation of the problem on her site. We spent the better part of the afternoon on this ;)

For includes

Without using template parameters:

Simply change double quotes to single quotes for include file path – only works for ASP and .NET templates
For example: <!--#include file='include.inc' -->.

Use template expression:
PHP: <?php include("@@('include.inc')@@"); ?>CFM: <cfinclude template="@@('include.inc')@@"> JSP: <%@include file="@@('include.inc')@@" %> ASP & .NET: <!--#include file="@@('include.inc')@@" -->

(Note: include.inc is the real file path, not template parameters, so it has to be quoted.)

Using template parameters:

Create a template parameter in head section of the template:
<!-- TemplateParam name="inc_url_param" type="text" value='file="include.inc"' -->
(NOTE: the parameter has “text” type) Change the include in the template to:
<!--#include @@(inc_url_param)@@ -->

For other dependent files like CSS, IMAGE, and LINK (‘A’ TAG)

Without using template parameters, change the css link or image tag to:

<link href="@@('styles.css')@@" rel="stylesheet" type="text/css" /> @import url("@@('styles.css')@@"); <img src="@@('image.gif')@@" /> <a href="@@('link.htm')@@">link text</a>

(Note: styles.css, image.gif and link.htm are the real file paths, not template parameters, so they should be quoted.)

Using template parameters:

Create template parameters in head section of the template:
<!-- TemplateParam name="img_url_param" type="text" value="image.gif" --><!-- TemplateParam name="css_url_param" type="text" value="styles.css" -->
(NOTE: the parameter has “text” type) Change the css link and img tag in the template to:
<link href="@@(css_url_param)@@" rel="stylesheet" type="text/css" /> @import url("@@(css_url_param)@@"); <img src="@@(img_url_param)@@" />