How to edit templates in Dreamweaver

minorgod · #1 09-20-2002, 12:36 PM

Here's the official Macromedia how-to on this subject:
http://www.macromedia.com/support/dreamweaver/ts/documents/add_ext_mx.htm

The rest of this post is out of date....please scroll down to my latest post to see the best way to edit your templates in DreamweaverMX.

You can edit your templates using a visual editor such as Dreamweaver by inserting the following line at the top of the template file you wish to edit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This makes life SOOOO much easier for anyone who is used to designing with a visual editor. No, it won't render the Smarty code, but it WILL render the HTML code:

Once you add that line (make sure it's the FIRST line in your template file) you will see tables and image placeholders for page elements. It's not a perfect solution, but it helps me quite a bit when editing templates with DreamweaverMX. It appears that you can just leave that line there and it won't cause template errors on the server, but I haven't thoroughly tested this statement so do it at your own risk. If you're really worried, you can delete the line once you're done visually editing your templates.

shan · #2 09-20-2002, 01:17 PM

Or why not just boot up dw, open a blank page and drag and drop the files onto it. Be carefull dw does not alter any code though

minorgod · #3 09-21-2002, 01:28 PM

That would work fine if you didn't care about being able to VISUALLY edit the page, having Dreamweaver render tables and such. In order to get DreamweaverMX to render the HTML contained in a .tpl file that contains no obvious HTML start and end tags, you'll need to give it a clue that there is renderable HTML in the file, which is why you need to add the

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

tag to your .tpl file as the very first line of code. You can do this within Dreamweaver and then save the file and Dreamweaver will magically reload and parse the page, rendering all your tables for easier layout. You can then use Dreamweaver's visual tools to drag Smarty code from one table to another and rearrange the layout of the template.

For added convenience, users may also wish to add the .tpl file type to their Dreamweaver preferences so they can open .tpl files from within Dreamweaver by double-clicking on them.

The only place you may have to worry about Dreamweaver breaking your page is when using special characters such as the Smarty {} tags which Dreamweaver will change into their HTML-encoded equivalents when cutting and pasting them from one table to another. Dreamweaver will not touch or otherwise try to convert any code you don't specifically cut and paste. That's the kind of thing you probably couldn't say about FrontPage or Adobe GoLive, so be careful if you try it with other visual editors. Other than that, Dreaweaver will not harm any of your code as it makes no attempt to parse or rewrite anything it doesn't specificaly recognize via it's syntax definitions. Dreamweaver is generally very good about ignoring code it doesn't recognize.

It would also be possible to write Dreamweaver data translators that would parse the smarty code and render it properly on screen, the same way DreamweaverMX currently does with PHP or ASP. But if you can do that, then you sure as heck don't need to be wasting your time reading this.

brgreene · #4 10-14-2002, 07:30 PM

I tried adding the code to a .tpl file in Dreamweaver MX and save the file. I then can only view the fiel in code view, not layout view. Any ideas?

Brian

minorgod · #5 10-15-2002, 02:10 PM

Oh yeah, I forgot to correct my previous post about this. DreamweaverMX is the version I've tested this on and it works for me, but I doubt it will work the same way in Dreamweaver 3.x or UltraDev.

However, it only works if you have the file open, then add the DOCTYPE code, then save the file, but don't close it. You should then see the code rendered in design view.

After you close the file, if you want to edit it visually again, you simply need to open the page and make some kind of minor edit to it (I usually just add a space somewhere) then resave it and the display should refresh with the rendered code. You'll have to do that each time you re-open the file if you want to view in design view. Sorry for the confusion.

brgreene · #6 10-15-2002, 05:42 PM

Brett,

I am using Dreamweaver MX. I still am unable to get it to work. I tried adding the line of code and saving it without closing it. I still can't view the file in design view.

I can copy the code over to a new page and view it but it doesn't appear correctly. Any special setting I should have?

minorgod · #7 10-17-2002, 07:28 AM

I didn't have to do anything special. I'm not sure why you're having problems.

brgreene · #8 10-17-2002, 06:15 PM

I can't get it to work your way but I can cut and paste the code to view it.
Thanks for the help.

minorgod · #9 11-08-2002, 01:34 PM

This is the REAL way to make your templates render in DreamweaverMX's design view with the added benefit that the template icons will show up in your file browser as a native DreamweaverMX documents and you'll have no trouble opening them from within DreamweaverMX. You just need to edit a couple of files and create one new one. Here's how:

Open your Dreamweaver MX\Configuration\Strings directory and add the following entries to the end of the "documenttypes.xml" file before the last closing </strings> tag:

Code:

<string id="mmdocumenttypes_64" value="Smarty Template" />
<string id="mmdocumenttypes_65" value="<![CDATA[Smarty Template Document]]>" />

You should make sure to use consecutive numbers in the string id and make sure they don't conflict with previous entries in the event that you've modified this file already. The first entry above is the doctype's title, and the second is the doctype's description. In the CDATA part you can add a longer description if you like.

Next open the Dreamweaver MX\Configuration\DocumentTypes folder and open the MMDocumentTypes.xml file.

Add the following entry to it just before the closing </documenttypes> tag at the end of the file:

Code:

<documenttype id="SmartyTPL" internaltype="HTML" winfileextension="tpl" macfileextension="tpl" file="Default.tpl">
		<TITLE>
			<MMString:loadString id="mmdocumenttypes_64" />
		</TITLE>
		<description>
			<MMString:loadString id="mmdocumenttypes_65" /> 
		</description>
	</documenttype>

That will add the actual document type definition to the DreamweaverMX. Make sure that the numbers you use for your loadstring ids correspond to the string id you created in the first step.

Now for your final step, you should create a blank template document called "Default.tpl" which will be the default document that is created when you create a new .tpl document from DreamweaverMX's file menu. You can just leave the document empty, or start it off with a Smarty-style comment line such as:

Code:

{* Smarty Template *}

Or use whatever code you want to be automatically present each time you create a new template from scratch.

Now save this file as:
Dreamweaver MX\Configuration\DocumentTypes\NewDocuments\Defaul t.tpl

Now restart Dreamweaver and you'll notice that all your .tpl files look like native Dreamweaver docs, your templates will render properly as HTML in design view (but be careful that smarty tags don't get converted to HTML equivalents when you do edits), and if you create a new document, you'll have the ability to choose "Smarty Template" as one of the new document types. Pretty cool if you spend much time writing Smarty template code.

You can apply this technique to other file type as well. I recommend doing the same for your .inc file extensions (or just add the .inc extension to your HTML file type definition at the top of the MMDocumentTypes.xml file). If you decide to do that too, then you'll need to perform one final step to get .inc files to render in design view. Open your dreamweaver Edit-->Preferences-->File Types menu and remove the .inc file extension from the box at the top of the window labeled "Open in code view". Any file extensions in this list will only be viewable in code view.

TTFN.
Enjoy.

Tye · #10 11-26-2002, 09:51 AM

Hi

You can do a similar thing in dreamweaver 4. I'll try to explain this the best I can.

1. Create a new text file and place the following code in there:

Code:

<tagspec tag_name="smarty" start_string="{" end_string="}" detect_in_attribute="true" icon="smarty.gif" icon_width="17" icon_height="15"></tagspec>

2. Save this file as smarty.xml into the Configuration/ThirdPartyTags/.

3. Create an icon making sure its the same size as specified in the file "smarty.xml" (e.g. 17px wide, 15px high)

4. Open Dreamweaver 4 and open the preferences from the edit menu. Go down to the 'Code rewriting' option, check the 'Never Rewrite Code In files with Extensions' and add .tpl at the end of this list.

5. Next choose the File Types / Editors. Add .tpl to the extensions list - then select it - move to the Editors list and press the '+' button and browse to dreamweaver 4.

6. Make your self a nice cup of coffee - your done

This seems to be working for me - any problems - let me know

Cheers

Tye