Project Management

Download this Dreamweaver MX template to jump-start your dev efforts

Even the best Web developers need a helping hand. Our free Dreamweaver MX template can help you work more efficiently and may put a spark in your design efforts.


Most Web sites are laid out in more or less the same way: the ubiquitous C-clamp. You have a logo at the top, a menu along the top, bottom, or sides of the page (or any mixture of the four), a section header, a portion of the page where the content actually goes, and, finally, a footer, which holds the small details like copyright information. Primarily, it's the content section you want to play with on each page. Templates, such as the one we're providing as a free download, allow you access to that section while making sure that the rest of the page maintains consistency throughout the Web site, regardless of the author. Go ahead and download our template, and we'll take a look under the hood.

The particulars of this template
To appreciate the beauty of templates, sit back, launch Dreamweaver MX (make sure line #s in the Code View are visible), and open up the template. Now, click here, and you'll see the template in action. (Note that some of the dynamic ColdFusion elements of the site are not included in this template.) After the splash page loads, click on the Shorts - Short Stories link and you'll find yourself on a template-based child page.

First, notice the Page Title in the browser's title bar. This is built based on two parameters, the section_name and the page_title, and some template programming logic code. Currently, it displays Fiction Mag - Shorts (Short Stories)."

Take a look at the template, line19.
 
@@(section_name !="" ? '-' : '')@@ @@(section_name)@@
 

This houses an if-then-else logic in the template. If the section name is not empty (i.e., it has a value), add "-" to the title; if it is empty (i.e., no value was passed), you do nothing. The section_name will always print, even if it's blank.

In lines 21 to 34, you have a TemplateMultipleIf statement. This allows you to add extra text after the section_name but before the page_title:
 
Line 25            <!—TemplateBeginIfClausecond="section_name=='Shorts'" —>
Line 26            (Short Stories)
Line 27            <!— TemplateEndIfClause —>

 

This says that if the section_name equals "Shorts" (and it is a case-sensitive match), add line 26 to the output of the <title> tag, which we can see by glancing at the title bar of the browser.

To see the page_title logic, line 36, in action, click the Web link next to Unemployment. You see that "Unemployment by Thomas Ortega II" is added to the browser's title bar. We manually added "by Thomas Ortega II" to the page_title value.

We could break that up and use a parameter for the author's name. See if you can figure out how by using line 36 of the template as a foundation. Why would you put the author's name into its own template parameter? If you look at the Web page, you'll see an image tag used in the content area of the page. Although it was manually added to the content section, if you used a template parameter for the author name, you could add that to your template as well.

Lines 165 to 226 of the template control the main menu's appearance. Using the same logic syntax as line 19, you evaluate whether the current page is in a certain section or not. If it is, you show the "-over" image with no link; If it's not in that section, show the regular image with a link and mouse-over code.

Lines 230 to 259 of the template control whether we show an additional section image on index pages. According to the template, we currently have only two images. This is fine; if we need more, we can simply add more Template IfClause statements.

Line 259 is, in essence, your play space. This is where you put all your content when you make child pages from this template. Of course, you're not restricted to one line. You can expand to as many lines as needed.

Using this template will allow you to build an online magazine/newsletter of your own in no time. Not to mention that with just a few Find And Replace runs from the Edit menu in Dreamweaver MX, you could quickly build a simple business Web site or prototype.

 

Editor's Picks