Basic DWT, Dynamic Web Templates. Page 1

Check out sites I created with DWTs

• http://PVEA.org
• http://UPEA.org

Read this site first, http://DWTIG.com

Practice first to understand

1. Create a folder in your CIA_Portfolio web site called DWT. This will hold your template and graphics.
2. Create a new web page called "Site_Name1" and save this as a DWT into your DWT folder.
        Example: CIA_Portfolio1.dwt
   
   1. NOTE: Turn off shared borders and themes for your DWT at this point.
3. Insert a table to design your template.
   Study this page and look at the table layout.
4. Create a 5 column by 5 row table.
5. Set the table properties height to 100%.
6. Set row 1, 3, and 5 to 20 pixels high.
7. Set row 2 to 60 pixels high.
8. Set column 1 to 175 pixels wide.
9. Set column 2 and 3  to 10 pixels wide.
10. Set column 4 to NO WIDTH with no check in the width box.
11. Set column 5 to 150 pixels wide.
12. Add your colors to the selected rows and columns.
13. Your DWT will now look like this....
    
     

Set your page margins

1. Right click your DWT page and select page properties.
2. Set your top and left margins, on the "Advanced tab" to 0 pixels.
   
3. Click OK.
4. Save the DWT again into your DWT folder as a Dynamic Web Template.
   See below. Use the "Save as type" drop down option.
   
    

Add the EDITABLE REGIONS.

1. With your mouse selected in the center white cell, right click your DWT, and select "MANAGE EDITABLE REGIONS."
2. Enter the name "body1" as your main editable region. Click Add, then close.
   
3. An editable region will be added to your DWT. This is an area where you can add text, graphics, etc. (SEE BODY 1 BELOW)
   
4. Save your DWT. This is the minimum amount of info needed for a Dynamic Web Template. This template is ready to be applied to a page.
            (NOTE: This DWT needs a navigation bar or an editable region for a navigation bar. For now this is step #1 of learning DWTs)

What else is needed?

1. Graphics, banners, and navigation bars need to be added.
2. Page banners can also be added.
3. A theme or CSS can be added to the DWT.
4. Any information that will be on ALL pages can be added to the DWT.
   1. If adding graphics, make sure that you save your graphics into your DWT folder.

Attach the DWT to a page

1. Open a web page and prep it for a DWT.
2. Turn off shared borders.
3. Turn off your theme.
4. Now, with the page stripped, apply the DWT.
5. Click format, then "Attach Dynamic Web Template.
   
6. Select your DWT page and click OK.
7. Your web page now is controlled by the DWT file.

Very COOL, but, how do I attach the DWT to ALL pages?

1. In folder view, select all your html pages using the shift key to select a range, or the control key to select individual pages.
2. With several pages selected, attach the DWT template.

Congratulations...
Your first Dynamic Web Template is finished!

Additional topics to learn

• Adding Navigation Bars, read Page 2
• Adding page banners text or graphics
• Adding cell background images or gradients
• Adding themes and CSS files
• Adding regions to the document head
• Tables vs Layout Tables in FP2003

Read Page 2, Inserting a navigation bar