Dynamic Web Template Tutorial
 |
|
 |
NOTE: As with any major change to a website, we recommend
that you back up your web prior to attaching a DWT as a precautionary
measure. Backing up in FrontPage 2003 is much easier than in
prior versions. Simply select File, Publish Site, then click the
radio button for the File System option. Browse to a location on
your hard drive, then type in an appropriate web directory name (such
as backup_web) and press OK. You will receive a prompt that the
web does not exist, asking if you would like FrontPage to create one.
Select Yes, and publish as usual.
If your existing web was not built with a template, or was not laid
out with tables defining the design and layout, you will not need to
follow these steps. Your web, prior to attaching a DWT,
should be free of all elements EXCEPT the actual page content.
Simply remove all menus, page banners, and shared borders prior to
attaching a DWT.
If you currently use a web template, you will need to remove the
template, link bars, etc., from your web pages (basically, you remove
everything except for your content). You may make the initial
transition one of four ways (note - you only have to go through this
once!):
- Strip out the existing menus and design by selecting the content
to be saved. To do this, open a page. With your mouse,
highlight the body content to be preserved. On the keyboard,
press:
- CTRL + C
- CTRL + A
- Delete (hit the delete key)
- CTRL + V
Save the page and repeat on remaining pages until the process
is completed. This is the preferred method, and will keep
the page names and navigation structure of your existing web
intact. SEE OUR STEP BY STEP
INSTRUCTIONS ON THIS METHOD HERE
- Build a new, empty web without a design template, and add blank
pages one by one, copying the content of your existing web pages
into the pages of the new web. You will, of course, have to
rebuild the web navigation with this method, as well as rename the
pages. Afterward, you may attach the DWT.
- Do it the same way you changed design templates in the past:
Build a new web, import the DWT folder into the root of the web,
then open the DWT of your choice. Select File, Save As, type
in the new page name, navigate up to the web's root directory, and
"Save as type" HTML Files. You may then copy and
paste your content from your existing web template into the
Editable Regions of the page. Repeat until your web is
complete.
- Remove the design manually (piece by piece) from the existing
web, then attach the DWT. This method will keep your
navigation structure and page names intact. If you aren't
experienced with converting tables to text and deleting unwanted
design elements, or if your existing design template is very
complex, you may not want to try this.
|
|
|
|
|
|
If you've downloaded templates from us in the past (non-dynamic, of
course), when you license one of our DWT Packages for the first time
you'll notice things are a bit different! Not to worry, we've
gone through a lot of testing to ensure an easy process for you!
Start with the Download
- Download the .exe file to your hard drive (note where you
download it, as you will need to locate it to execute it).
- Execute the file. The default installation location for
TWC Graphics Design DWT packages is c:\Program Files\TWC Graphics
Design\ - then the name of the particular design. If you
elect to unzip the file to a different drive or directory, you
will need to remember where it is and substitute that directory
for all other instructions we provide.
Get the Needed Files into Your Web
We're assuming you have either an existing web, or you've already
started a new web. If not, then you'll want to first start your
new web in FrontPage 2003, probably using the "One Page Web
Site" template option. Now, there are two different ways
you can get the files into the web:
Manually
To place the files in the appropriate location to attach the DWTs,
open the web you wish to attach in FrontPage 2003. Open the
Folder List (View, Folder List) if it is not already open and ensure
that the top level directory is selected (left click over it to
highlight it). From the FrontPage menu, select File, Import -
then click "Add Folder." Navigate on your hard drive
to c:\Program Files\TWC Graphics Design\ - then select the folder for
the design. Once imported to your web, you will be able to
attach the DWT (proceed to Attaching DWTs in this tutorial).
Automatically
 Use
the DWT
Manager/Browser from DPA Software. The DWT Manager/Browser
comes with a 30-day free trial period, and provide you the means to
quickly and efficiently locate the DWT packages on your hard drive
(complete with screenshot if provided by the designer!), select one to
copy to the current web, and copy it in with the click of a button.
Afterward, you will be able to attach the DWT (proceed to Attaching
DWTs in this tutorial).
With FrontPage 2003 open and the DWT Manager/Browser already
installed, select Format, Dynamic Web Template, Browse/Copy Dynamic
Web Template to Web. You will get a pop-up box (click screenshot
above for larger view), which will allow you to select which DWT
Package you wish to import. Note: the individual DWT pages
are listed separately in the listing; however, selecting one which
also includes other layouts in the same DWT Package will copy the
entire package automatically. |
|
|
|
|
|
NOTE: As with any major change to a website, we recommend
that you back up your web prior to attaching a DWT as a precautionary
measure. Backing up in FrontPage 2003 is much easier than in
prior versions. Simply select File, Publish Site, then click the
radio button for the File System option. Browse to a location on
your hard drive, then type in an appropriate web directory name (such
as backup_web) and press OK. You will receive a prompt that the
web does not exist, asking if you would like FrontPage to create one.
Select Yes, and publish as usual.
New Web, or New Page within Existing Web
Open a new page in FrontPage 2003 (click the "blank page"
icon to Create a New Normal Page in the upper left toolbar).
Select Format, Dynamic Web Templates, Attach Dynamic Web Template...
Locate the DWT you wish to attach in the pop-up window, and select
Open.
Existing Web, No Template Used
You may attach a DWT either one page at a time, or you may elect to
attach a DWT to several pages at once. If you are attaching your
very first DWT, you should attach to only one page first (much easier
to Undo than attaching to multiple pages) to familiarize yourself with
the process.
- One page at a time: Open the page in Design view.
From the Menu, select Format, Dynamic Web Template, Attach Dynamic
Web Template... Locate the DWT you wish to attach in the
pop-up window, and select Open. You will then be prompted to
assign content to regions.
- Multiple pages at once: Open your Folder List (View,
Folder List). With the CTRL key on your keyboard depressed,
left-click over each file name you will be attaching the DWT to,
releasing the CTRL key when finished. Your selected files
will be highlighted in your Folder List. From the Menu,
select Format, Dynamic Web Template, Attach Dynamic Web
Template... Locate the DWT you wish to attach in the pop-up
window, and select Open. You will then be prompted to assign
content to regions.
Existing Web Built within NON-DWT Template
You must prepare your web by removing the design elements of the
template currently in use, as well as existing navigational and banner
elements (see our Step by Step
Instructions for the recommended method). We have provided
methods of accomplishing this in our "Preparing
an Existing Web to Attach DWTs" tutorial. When your
existing web is prepared, you may proceed to your choice of Step One
or Step Two as defined above. |
|
|
|
|
|
Dynamic Web Templates use "Editable Regions" - which are
defined as any region (area) on the html or asp web page having the
DWT attached that can be modified. EVERYTHING can be modified on
the actual DWT file (otherwise you wouldn't be able to put your
company name in place!), but only the page content areas themselves
can be modified on the web page using the DWT file.
If that sounded complicated, don't worry. You don't *have* to
now the technical stuff; you simply need to know what to do if and
when FP2003 prompts you to Select Editable Regions. Below are
the three scenarios, and if you are following our Tutorials along in
succession, the Case I below outlines the initial instructions.
Case I - Initial Attachment of DWTIG Compliant DWT
On the initial attachment of the DWT, the FrontPage pop-up window
provides a screen to select which regions in the new page will receive
content/regions from the old page (see thumbnail below). A
listing is provided; however, since this is the first DWT attachment,
the only "region" on the old page is (body).
Assign the new region as follows:
- Left-click over (body) to select it
- Click on the "Modify" button
- Use the pull-down to the right of "New Region" to
select body1
- Click OK to assign the region
- Click CLOSE to close the confirmation window
Note that your web page has now assumed all the characteristics of
the attached DWT design, and all existing information on the page has
been placed in the main body area of the design.
Case II - Changing from One DWTIG Compliant DWT to Another
On an attachment of a DWTIG compliant DWT to a page already having
a DWTIG compliant DWT
attached, you receive no region pop-up window, as the regions were
already defined in the prior DWT. You simply attach the DWT, and
it's done!
Case III - Changing Between DWTIG Compliant & Non-Compliant
Designs
If you begin with a page having an attached DWT that is NOT DWTIG
compliant, and are attaching a DWTIG compliant DWT, you should study
the DWTIG
Editable Regions to determine which regions in the new page will
receive content/regions from the old page.
If you begin with a page having an attached DWT that IS DWTIG
compliant, and are attaching a DWTIG non-compliant DWT, you are on
your own unless the company providing the new DWT provides you with a
list of editable regions and their purposes/characteristics prior to
attaching the DWT. |
|
|
