|
FP Techniques >
Dynamic Web
Templates Part II
by Tina Clarke
http://accessfp.net
DWT – Dynamic Web
Template FrontPage 2003, Part ll
Once you have created the template it’s time to
save as a DWT.
Go to File | Save As
Where it says ‘Save as Type:’ hit the scroll arrow
and select ‘Dynamic Web Template *.dwt’
Make a folder called _templates to store your
dwt’s in.
To do this click the Folder icon ‘save as folder’
on the menu of the 'Save As' dialog box or press Alt
+ 5 on the keyboard, name it and double click it to
enter.
Name your dwt e.g. blue_design.dwt
Press Save
If your following the dwtig guidelines make a
folder called graphics for your images (this is what
DW (Dreamweaver) uses)
NOTE: You must create an
editable region before you can attach a dwt to page,
though FrontPage will let you save it as a dwt
first.
Open your DWT template that you have just made.
To select your first editable region go to Page View
and select the Design tab, lets start for instance
with your main content. Place the cursor on the page
at the beginning of the content and drag your mouse
to the end of the content. Then Right click and
choose ‘Manage Editable Regions’ the ‘Editable
Regions’ dialog box will appear. 
Where it says ‘Other regions on this page:’ will
be listed already ‘doctitle’, the default editable
region that has already been saved. What you need to
do next is name the region you’re saving which is
maincontent. So enter that in the section where it
says ‘Region name:’ Then press 'Add', then 'Close'.
NOTE: The editable region name
must be all one word and in lower case and you can
call it anything you want, however relating it to
the placement on the page helps keep straight for
you.
Next do the same for other editable regions you
want, in my case I want an editable region for the
menu on the left hand side. So repeat as above
naming each region with its own unique name.
Your editable regions should look like the below
graphic, outlined in yellow with the name of the
editable region.
ATTENTION - I have outlined
further information under the below headings you
should pay particular attention to
the Head Tags and Scripts if you want to retain your
keywords and description Meta tags and any scripts
for each page.
~ Head Tags (
doctitle )
FrontPage will, by default add the following code
to the title tag in Code View.
<!-- #BeginEditable "doctitle" -->
<title>Page Title Here</title>
<!-- #EndEditable -->
Copy the editable code in Code View and encase it
around the Keywords and Description Meta tags, it
should look like the following.
<!-- #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 -->
This will preserve keywords and descriptions you
ALREADY have in place on your pages. If you want to
change your title, keywords or descriptions you can
right click on the page and choose Page Properties
or go to Code View and do it manually.
WARNING: With a page that has a
DWT attached you must not use FrontPage Meta Tag
addons to APPLY your tags, as they will change the
editable regions coding of the meta tags and the
FrontPage DWT will assume you are trying to change
this and ask you to save or restore. You want to in
fact keep your original code with the editable meta
tags around the meta’s. Of course you can use the
Addons as a tool and copy and paste meta tag to code
view or in page properties General Tab for each
Meta. The developers know about this problem and are
working to provide updates.
~ Scripts such as
_JavaScript (scripting)
If you have any scripts within the head tags when
you first attach a dwt to a page it won’t be
preserved. So you must save it to a notepad file,
attach the dwt to a page, and then reinsert your
script, thereafter it will be applied to any
subsequent attachments. Put the following code
around each of your scripts in the head tag.
<!-- #BeginEditable "scripting" -->
<!-- Scripting area here -->
<!-- #EndEditable -->
This is really useful for _JavaScript menus.
Using these menus with a dwt saves you a lot of
time. There are issues however be sure to see the *
Troubleshooting section.
~ ASP Pages
It is best to avoid attaching a dwt to a page
with ASP code on it, though you can attach to a .asp
page that does not have asp coding on it.
~ Banner this may
be a graphical advertisement, or the text H1 tag of
the title of the page.
It all depends on where you want to place
content, in my template I have placed a graphic
advertisement at the top of the page in the middle,
and I will make that area (banner) an editable
region. This is because I want to place different
advertisements on each page. The reason the
advertisements are graphical is for SEO purposes, I
don’t want the first text the search engine sees to
be an advertisement. Alternatively you can place
your H1 tag in this section instead, this will of
course be the title of the page and so will be
different for each page so again the region needs to
be editable.
However, I will need to visit each page and add
the graphical advertisement or the H1 tag to the
banner region. So if I’m using the region for the Ad
I will make the area non editable, when I first
apply the dwt to all my pages, so that graphic I
insert into the dwt will be at first displayed on
all pages. I can then, at my leisure visit each page
and in the meantime there is at least an ad on each
page even if it is the same one.
If I want to use the H1 tag I just leave the area
blank and make the region an editable one. If
previously my template did not contain a H1 tag
reflecting the title of the page it’s a simple
matter to visit each page and insert this, if
however I did (which is so in my case) I can just
cut and paste the H1 tag from the main content area
which I saved beforehand when I was preparing the
site for a dwt.
~ Menu
When you made your template I suggested you used
include pages for your menus, this will allow you
have different menus on different pages and you
retain all the control that include pages give you
over navigation bots, just remember to make this
area a editable region, because the content changes
from page to page.
~ Main Content
Depending on your template you might have columns
of main content I just have one and of course this
is to be made an editable region, name each region
accordingly. E.g. main_content1, main_content2 etc.
TIP: Editable regions are like
includes in that fact that they stretch across the
width of the page if you want to contain an editable
region you have to implement tables just like with
include pages.
Next you need to Attach a DWT to a page or all
your web, I suggest attaching to one page first to
make sure there are no problems.
Open the page you wish to attach the DWT to, it
should already be prepared as we discussed in
Organising your web in preparation.
Go to Format | Dynamic Web Template | Attach
Dynamic Web Template the ‘Attach Dynamic Web
Template’ dialog box will appear, listed will be
your DWT click it to select it and press ‘Open’.
The ‘Choose Editable Regions for Content’ Dialog
box will appear, in the Pane will be listed under
Old: (Body). If your maincontent region is not
listed under New: select (Body) and the ‘Modify’
button will ungrey. Click the ‘Modify’ button and a
small drop down box will appear click the down arrow
and select maincontent, press ok then press ok on
the ‘Choose Editable Regions for Content’ dialog
box.
A dialog box will appear telling you (1 of 1)
files have been updated. Press close on this dialog
box.
You can now apply any class or span.class styles
to the main content along with your H1 and H2 tags
(You may have chosen to use the H1 tag in the banner
area as previously discussed in ‘Creating
Editable Regions on a Dynamic Web Template’
above.)
NOTE: It is best to include your
classes and span.classes within your
CSS sheet.
If you switch to Code view you will see your:
- Title
- Description
- Keywords
Have been preserved.
~ Editing a DWT
You can at any time edit your DWT to make
changes. When you save your DWT those changes will
be applied to any attached pages to the DWT.
FrontPage lets you know how many pages are attached
and asks if you want to update them.
If you click Yes::
All attached pages will be updated
If you click No:
You can update attached pages at a later date by
opening them, then going to Format | Dynamic Web
Template | Update selected Page.
~ Attaching a DWT to two or more pages
In the ‘Folder List’, hold down CTRL and click
each page you want.
If the ‘Folder List’ is hidden, click ‘Folder
List’ on the ‘View’ menu.
Then apply as discussed above, and all your
selected pages will be attached to the DWT.
~ Automatically create NEW web pages that are
attached to the the DWT.
In Folders View or Folder list right click your
DWT and select 'New from Dynamic Web Template' from
the pop up menu. A new page will be created and
attached to the DWT automatically.
Open the.dwt file, on the file, right-click the
editable region that you want to rename, and then
click 'Manage Editable Regions'.
NOTE: You can identify editable
regions by the boxed areas on the page that include
a tab with the name of each region.
In the 'Region name' box, type the new name,
click 'Rename', and then click 'Close'.
Go to File | Save. Click 'Yes'.
NOTE: If the Dynamic Web
Template that you edited hosts attached files,
FrontPage will prompt you to update those files.
Open the .dwt file, on the file, right-click the
editable region that you want to remove, and then
click 'Manage Editable Regions'.
NOTE: You can identify editable
regions by the boxed areas on the page that include
a tab with the name of each region.
Click Remove, and then click Close.
Go to File | Save. Click 'Yes'.
NOTE: If the Dynamic Web
Template that you edited hosts attached files,
FrontPage will prompt you to update those files.
In the Folder List, double-click the Dynamic Web
Template file (with the .dwt file name extension)
that you want.
In the 'Folder List', select the file(s) that you
want to detach from the Dynamic Web Template.
NOTE:: To select multiple files,
holding down CTRL click the files that you want to
detach.
Go to Format | Dynamic Web Template, and then
click 'Detach from Dynamic Web Template'.
NOTE: If there is a conflict
among the Dynamic Web Template and attached pages,
when you attempt to update the attached pages,
Microsoft FrontPage will prompt you to resolve the
conflict.
Update Web pages from within the attached Dynamic
Web Template
Open your Dynamic Web Template, go to Format |
Dynamic Web Template, and then click one of the
following:
- Update All Pages
- Update Attached Pages
- Update a selected page in the Folder List
In the Folder List, click the page that you want
to update.
Go to Format | Dynamic Web Template | Update
Selected Page.
Open the Web page to which you want to attach a
different Dynamic Web Template.
NOTE: To attach the Dynamic Web
Template to more than one page, select the pages you
want by holding down CTRL and click each page you
want in the 'Folder List'.
If the 'Folder List' is hidden, Go to View |
Folder List
Then go to Format | Dynamic Web Template | Attach
Dynamic Web Template.
Locate and click the Dynamic Web Template you want
to attach, and then click Open.
NOTE: If the Web page you
selected contains editable regions specified by the
Dynamic Web Template previously attached to it, the
'Choose Editable Regions for Content' dialog box
appears. The dialog box displays the default
settings for mapping content from the previous
template to the new template. The 'Old' column lists
editable regions specified by the previous template.
The 'New' column lists editable regions specified by
the new template.
In the 'Choose Editable Regions for Content'
dialog box, do one of the following:
- To move all of the content in the body of
the Web page to the default editable region,
click OK. If the default editable region
contains content, that content is replaced with
the content in the page.
- To move content from an editable region
specified by the previous template to a specific
editable region specified by the new template,
click the 'region' in the 'Old' column, and then
click 'Modify'. In the 'New Region' list, click
the editable region you want to move the content
to. If the editable region in the new template
contains content, that content is replaced with
the content in the page.
- To maintain all of the content and structure
of the Web page, click 'Skip Current Page'. The
template is not attached to the page.
Open the Dynamic Web Template (.dwt) file, Go to
Page View | Design
Right-click a selection where you want to add an
editable region, and then click 'Manage Editable
Regions'.
In the 'Region name' box, type a name for the
editable region; for example, Archived News.
Click 'Add', repeat for any more editable regions
you want to add then click 'Close'.
In 'Code View' you can still access the html code
of any given page that you are viewing. However if
you change the code in a non editable region
FrontPage will alert you with a warning that you
have made changes to a non-editable region and that
the code will be changed back the next time the
page is updated. You can do either of the following::
- Always restore non-editable content while
editing this page. - FrontPage will restore any
changes and no longer prompt you when you change
code in non-editable areas.
- Keep all changes - FrontPage keeps your changes,
however next update of the page, the settings from
the DWT will be reapplied. For this to not happen
you must Detach the page from the DWT.
1. Any changes you make to a DWT
master page and its attached pages on a site that
uses a disk-based Web or against a Windows
SharePoint Services server might not update.
First you make your changes
Then 'Recalculate Hyperlinks' under 'Tools' say
'Yes' when asked to refresh
Click 'Format', point to 'Dynamic Web Template',
and then click 'Update all pages'.
NOTE: When the open Web is
located on a FrontPage 2002 Extended Server, on an
earlier version of FrontPage, or on a SharePoint
Team Services server, the Update all pages feature
is not available.
Read more about this at:
Attached Pages Are Not Updated When You Save Changes
to a Dynamic Web Template
2. After you make a change to a
DWT, the Update All Pages and the Update Attached
Pages menu commands are unavailable. If you are
prompted to automatically update the web pages that
have a Dynamic Web Template attached, only the web
page files that are open in FrontPage 2003 are
updated.
You can of course just open all the rest of the
pages in your site that you want to update, however
it is much simpler to only update a DWT when using a
disk-based Web or against a Windows SharePoint
Services server. If authoring against a FrontPage
2002 Extended Server, on an earlier version of
FrontPage, or on a SharePoint Team Services server
then I suggest publishing to a disk based web on
your hard drive.
Read more about this at:
Dynamic Web Templates do not work correctly when you
use the attach and detach operations in FrontPage
2003
3. Scripting inside the <Body>
Tag*
The body tag is considered a Non-editable Region
therefore upon attachment of a DWT to a page any
scripting contained inside the <body> tag will be
lost, E.g.
<body onfiltered=" resizeTo(382,430);">
This will happen with each and every attachment.
So you need to do the following.
- Include the code within the <body> tag, Or
- Rewrite the coding and insert the new code
within the scripting editable region.
4. FrontPage does not allow you
to link a CSS sheet to a page that is USING a dwt.
However you can link the sheet within the dwt and
then apply to a page.
5. When you attach a DWT to an
Active Server Page (*.asp) that contains code (for
example, code that creates a connection to a
database), the code may be deleted.
Anything outside the HTML tags e.g. ASP code is
deleted so you have to cut your ASP code from the
page, attach the DWT to the page, then paste your
ASP code back again.
6. When you apply a
default theme or a cascading style sheet to all
pages of your Web site, the theme or cascading style
sheet is not applied to Dynamic Web Template (*.dwt)
pages.
This problem occurs because the Dynamic Web
Template page extension of .dwt is not considered to
be an HTML file name extension by the SharePoint
Team Services server extensions, and if the
following conditions exist
• Your Web site is configured with SharePoint
Team Services from Microsoft version 1.0.
• You apply a cascading style sheet or a default
theme to your whole Web site.
See the above link for further details.
7. The Title of a page cannot be
changed.
In some instances the editable region called
doctitle (for Page title) is not created and so you
cannot make any changes. To fix this you need to add
code for the region.
<!-- #BeginEditable "doctitle" -->
<title>Page Title Here</title>
<!-- #EndEditable -->
NOTE: Make this change in the
DWT file and not the pages to which it is attached.
I think however if you follow my method of
preparing your DWT, this will happen very seldom.
8. The editable region is locked
and not available for modifying.
FrontPage won't allow you to make certain edits,
one of which is inserting tables. Any type of
formatting can be done (except applying styles), but
no layout functions are allowed to the changed
formatting.
However there is a workaround to have a table and
make changes to it.
First add a table with default settings to your
maincontent area and save the DWT.
Make a new page and attach the DWT to it.
Remove the table that will appear in the maincontent
area.
Insert a new table to your specifications, you will
be able to make any changes to the table you like.
NOTE: Providing a table exists
in the DWT, you can configure a table in any page
that is attached to that DWT.
by Tina Clarke
http://accessfp.net
Microsoft MVP - FrontPage. Copyright © 2004 All
Rights
Reserved - Do not copy or publish this article
without permission.
|
