Building a DWT in FP2003 from an Existing Design

1. Open an existing design.  Immediately select File, Save As...  then give it the name you want it to have (preferably something like design_namesplash or design_name1), and use the pull-down to set the file type as "Dynamic Web Template."
    
2. Make a file folder to contain your DWT files.  In the top level of the folder list, right-click and select New, Folder.  Name your folder appropriately (design_name_dwt).
    
3. Inside THAT folder, make a folder to contain your images.  Name the folder graphics (as the Dreamweaver platform uses that name for all images).
    
4. Now, still in the Folder List, drag everything you need for the design into the new DWT folder.  The .dwt file itself will go in the root directory, as will any flash/swish files and .css files.  All necessary images will go into the "graphics" directory.
    
5. Go back to the newly created DWT page in Design view.  IF the original design uses any includes pages, delete the bot calling for the included page and insert the contents that were once there.
    
6. Delete all content (i.e., filler words, NOT design stuff), leaving only the main menu bot, sub_menu bot (if already present), banner bot (if already present).
    
7. You should now have a page that has only design elements and a minimum of ONE bot on it (the main menu).  Sections such as the Copyright and YourNameHere are considered design elements.  The page should now look similar to this page if previewed in browser.
    
8. Now, set the Editable Regions.  Put your cursor where the body1, body2, body3, special1 and special2 regions will appear on your design, and insert comments with FrontPage, such as "Main body content here (body1)," "Secondary body content here (body2)," etc.
    
9. IF you do not already have bots in place for the Editable Regions sub_menu and banner, set those now using the FrontPage insert commands.  All sub_menu defaults should be set to "child level".
    
10. Now that the layout is complete, assign the Editable Regions.  Right-click over each area, and select "Manage Editable Regions" from the pop-up.  Type in the appropriate DWTIG region name for each.  Your DWT should now look similar to this:
    
    
     
11. Clean up the <p> tags.  You will need to go over the HTML source in either the Split or Code tab to do this.  Ensure that your <p> tags are DWTIG compliant.  The tags must be contained WITHIN the editable region comment sections, as shown below:
    
    Correct Placement (example shows body1 Editable Region): 

    <!-- #BeginEditable "body1" -->
    <p><!--webbot bot="PurpleText" PREVIEW="Main body content here" --></p>
    <!-- #EndEditable -->
     

12. Add the DWTIG compliant header tags.  This is best done by copying and pasting into the header sections.  This is how it should look:
    
    <!-- #BeginEditable "doctitle" -->
    <title>Page Title Here</title>
    <!-- #EndEditable -->
    <!-- #BeginEditable "keywords" -->
    <meta name="KEYWORDS" content="site keywords here">
    <!-- #EndEditable -->
    <!-- #BeginEditable "description" -->
    <meta name="DESCRIPTION" content="site description here">
    <!-- #EndEditable -->
    <!-- #BeginEditable "scripting" -->
    <!-- Scripting area here -->
    <!-- #EndEditable -->
    <meta name="DWT Version" content="1.00"> <!-- mm.dd.yy / Initial Release -->
    <LINK REV="Made" HREF="http://www.YOURName.com">
    
    Where mm.dd.yy is the numerical month, day, year, and YOURName is your actual URL name.