How to Use Templates in Dreamweaver CS4 to Help Develop & Maintain your Web Site

| | TrackBacks (0)

If I knew then what I know now. Ever uttered those words? Looking back on my progression of web skills, one omission stands out » incorporating the use of templates to help develop & maintain the pages of my web site.

Templates are both powerful & flexible for two reasons:

  1. They speed up site development, by allowing the rapid creation of web pages based on a preformed (uniform) structure .. so all your pages have the same look & feel.

  2. They facilitate site maintenance, by enabling structural changes site-wide via the editing of a single-file .. similar to how CSS works. This aspect of templates is considerably more significant than item #1.

Dreamweaver TemplatesIf your web site grows bigger than expected (as they usually do), and you want to make structural changes (non CSS-based changes) to your web pages, you'll have to edit each page individually (.. which suks giant goose eggs). Tedious maximus.

When CSS came along, website designers could transfer all style controls into a single file, so that the look of an entire site could be modified by editing a single file (provided, of course, the entire site was based off of the same style sheet). Very cool development.

But what about structural changes? That's where templates come in. To be honest, I'm not sure if web design programs (such as Dreamweaver and Expression) had the ability to generate templates back when I launched the site. But they do now.

••• today's entry continues here below •••

I began with Frontpage, just mucking around. Yippie kiya! Look at my new web site. Microsoft discontinued Frontpage in 2007, corresponding to the release of the Office 2007 suite.

Not long after launching the site, I posted the 'Rad Guide to Norton Ghost,' and the site quickly became more popular than I ever anticipated (especially for somebody just mucking around) .. because back then, Ghost was not easy to figure out, but it provided killer functionality.

So it was well worth learning. Many geeks sent links to friends saying, "Check this out, homes." (As my folks would say, "You kids today don't know how good you got it.")

I migrated to Dreamweaver when I began to get more serious about generating pages that contained quality markup. That was a major step, cuz Dreamweaver was a far-superior tool for web design. But it was also more complicated, which meant it required more study.

This is just a pretty picture to break up a large amount of text.Anyway, today I created my first template .. and used it as the basis for a new guide about (what else?) » How to use Templates in Dreamweaver.

This is also the first Rad guide into which I incorporated the CSS tabbed menu that I use at the top of the home page. It's also the first guide I've written that validates as XHTML Strict.

First, lemme say that I never intended the guide for public consumption. Those pages were generated from my notes on the subject, that I made for myself, acquired during my research into how templates work in Dreamweaver CS4.

But my notes (now a published guide) may benefit those wanting to learn how to use templates on the front-end of their foray into the world of web design (.. as I wish I had done back when I launched the site) .. instead of waiting until later.

My experience » it took considerably longer to get up-n-running with templates than I expected. There is, of course, the initial research to assimilate, which involves scaling the slopes of a learning curve. But even after that, there were things I didn't fully grasp until the practical-application phase (as is often the case with any new techie-venture).

Since Radified is about learning-by-doing, I figured the best way to learn how to use templates in Dreamweaver would be by cranking out a guide » on how to use them .. and basing all the pages of that guide on a template that I created (my first).

Once I got the template up-n-running however .. yes, it was significantly faster to assemble a bunch of pages from it. (I wrote 5 for this guide.) But note that I had already generated all the content for the guide .. from my notes on the subject.

So webpage creation became a simple function of generating a new page based on the template (File » New » Page from Template) and simply pasting content into that page (which was siting in a text file). Pretty easy .. once the template was created.

So if there was one piece of advice I'd give new web site authors .. it would be to learn how to use templates (.. which you can do » HERE). It's not difficult. Can't imagine a professional site ever being designed without them, espedially if the site will involve many pages.

One thing I learned creating this guide is that the XHTML Strict web standard does not allow you insert a <div> element into a list, either an ordered list or unordered list. I wrap the Google AdSense Javascript code in a <div> tag and float it. Div's can't go inside a list. (So I put them before or after.)

Python graphic used to break up large amount of text.[ I used to simply align the AdSense Javascript <div>, but the Strict web standard does not allow use of the align attribute. ]

One thing I don't like about templates .. is that they put lots of extra code (markup) into your web pages, such as » <!-- InstanceBeginEditable name="mainContent" -->. If you "View source" on those pages, you'll see what I mean. Guess this is the price we pay for the ability to modify the structure of our entire site by editing a single page. (Definitely worth it, tho.)

Before templates, my work-flow was to use the last page I was working on and "Save it As" the next page (Save with new name). Then delete all the stuff that changes, and add new content in the empty space. This is the method I used, for example, with the VPS guide (20 pages). I still use this method with the monthly archives (~100 pages there).

For web page creation, this "Save As" method is not bad. The only problem is .. if I want to go back and make a structural change to all the pages in a particular gude (which I always want to do), I'd need to edit each page individually. So natually, I don't. (Seeing that even the most minor revision would require the editing of 20 pages.)

This is why I say that item #2 (site maintenance) listed at the top of this page is "considerably more significantly" than item #1 (site development) .. because you can easily work around the loss of item #1, but not item #2.

UPDATE » Just edited the template that I created (by adding a link to the site Archives in the tabbed menu at the top of all the pages) .. in order to test-verify that all web pages based on the template would indeed be updated .. and YES! .. it worked! The pages were all updated. Magic!

Ooh! Just had an earthquake! Wow, that was a good one. Felt like a bulldozer was outside the house, trying to knock it down. Called my buddy Tom. He's good at judging quakes. He said it "felt like a 4.5". Looks like it was a 4.7 .. centered up in LA. So he was pretty close.

For more along these lines, here's a Google search preconfigured for the query » how to use templates in dreamweaver cs4 guide tutorial

« Previous Rad entry ||| NEXT Rad entry »

0 TrackBacks

Listed below are links to blogs that reference this entry: How to Use Templates in Dreamweaver CS4 to Help Develop & Maintain your Web Site.

TrackBack URL for this entry:

About this Entry

This page contains a single entry by Rad published on May 18, 2009 6:17 PM.

From the Inbox was the previous entry in this blog.

Pure CSS-based "Perfect" Rounded Corners is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.