I'm not a designer, so any time I find myself with a design template that I would like to use in the future I like to keep track of it and use it from Dreamweaver's File > New dialog box. Community MX Jumpstarts make use of this functionality by use of an extension that puts all the files in the correct location. I will show you how to save your own pages in this special location so that your own designs can show up in File > New.

The Special location

Dreamweaver, since version 6, keeps track of your individual user files -- extensions, snippets, and other things that are unique to you. If you log into your machine as Administrator, for example, install an extension, then log in as Jim, the extension will likely not show up for that second user. This is managed by Dreamweaver and the operating system by storing each user setting in a hidden file location. In Windows, this is typically under:

C:\Documents and Settings\[your username]\Application Data\Adobe[or Macromedia]\Dreamweaver [version number]\Configuration\.

or in Windows Vista

C:\Users\[your username]\AppData\Roaming\Adobe[or Macromedia]\Dreamweaver x\Configuration\

On Macs, this location is typically:

Mac HD:Users:[your username]:Library:Application Support:Adobe[or Macromedia]: Dreamweaver x:Configuration

Where "x" is your Dreamweaver version number. These directories are hidden by default in Windows and have to be turned on by checking "Show hidden files and locations" using Windows Tools > Folder Options > View from the main Windows menu bar. We'll refer to this as [your configuration directory] from now on. You should locate it now for future use if you haven't already.

It's helpful, if you use this location frequently, to put a shortcut on your desktop, since it is tucked into 6-8 subfolders.

If you have any of Community MX's Jumpstarts installed, you'll see the location in [your configuration directory]\BuiltIn\CMX JumpStarts. In this folder you'll see the different Jumpstarts in subfolders, and in those folders are the html/javascript/css files/images required by those designs.

The good news is that you can use this BuiltIn directory yourself. Adobe/Macromedia, in their infinite wisdom, provided no easy access to this functionality. However, knowing the location, you can use it yourself.

Creating your files

All you really need to know is that you can save the entire working design into this directory and it will appear for you in the File > New dialog. To demonstrate, I'll create a new page design using Dreamweaver CS3's new page design functionality: 2 column fixed, left sidebar, header and footer. This is a good start to a typical page layout I might use. I'll make sure the CSS is saved in an external stylesheet named main.css, and then save the page as index.html. The initial page design contains sample text and sample headers that you are meant to replace with your own content, but what I'll do is replace this before saving the page as a page design. The page code looks something like this, after adding my rudimentary menu and eliminating the sample text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content=""
<title>Untitled Document</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />

</head>

<div id="container">
<div id="header">
</div>
<div id="sidebar1">
<h3>This Site</h3>
<p><a href="/home.php">Home</a></p>
<p><a href="/about.php">About</a></p>
<p><a href="/blog/">Blog</a></p>
<p><a href="/store/">Store</a></p>
<p>

</p>
</div>
<div id="mainContent">
<h1>Today in the news</h1>
<p> </p>
<h2> </h2>
</div>
<br class="clearfloat" />
<div id="footer">
<p>Copyright 2007 Acme Web Design</p>
</div>
</div>
</body>
</html>

You can see there is a stylesheet named main.css stored in the /styles/ directory. If you look in that file, you'll see a rudimentary background image named logo.jpg used as a logo on the page, stored in /images/. If you browse the sample page, you'll see the design:

Figure 1: Simple page design in Internet Explorer

To turn this into a page design that Dreamweaver will show to you in the File > New menu, you'll have to use your Windows/Mac file system to browse to the [user configuration directory]/BuiltIn/ directory. Create a new directory within this directory called My Designs or something that you will remember, and within that directory create another directory called Design 1 (or something similar) and save your page design. You will have to save the index.html file, create subfolders for /styles/ and /images/, and save the main.css and logo.jpg files in that directory. In other words, the /[user configuration directory]/BuiltIn/My Designs/Design 1/ folder will mimic the way the files are stored in your web site. This is important, because this is how the files will be copied to your site when you use the File menu.

With those files in place, you can now use your page design in Dreamweaver.

Using the design

If you have Dreamweaver open during this saving process, close it now. Dreamweaver loads the sample designs in at startup, so if you save files to the user configuration directory while it is open, you have to restart Dreamweaver to get the program to recognize these files.

Open Dreamweaver. Click File > New, and click the Page From Sample button (in Dreamweaver CS3). You'll see your designs here:

Figure 2: The New File dialog in DW CS3

In older versions of DW the page designs show up right in the dialog box:

Figure 3: The New File dialog in DW 8

Conclusion

Saving page designs in Dreamweaver is easy if you know how. There are no hints within Dreamweaver to allow you to create page designs this way, but knowing the correct folder location allows you to create your own starting points.