Before working with Dynamic Web Templates or DWTs
as we shall call them for short you should back up
your web. See my previous article on
Backing up your FrontPage web.
A Dynamic Web Template is an HTML based master
copy of a Web page that you can create to contain
settings, formatting, and page elements such as
text, graphics, page layout, styles, and regions of
a Web page that can be modified. You can attach a
Dynamic Web Template to the pages in a Web site, and
that template defines the layout for those pages.
When making a template for your site the most
important concept is to maintain a consistent look
and feel.
Webmasters should attempt to provide.
Previously FrontPage users used the Shared
borders feature to introduce page elements that are
shared throughout a site, however shared borders are
a very limiting feature, they can only be used in
four places Top, Bottom, left and Right, and if you
want to show something different in one of those
locations on different sections you can not.
You can however use Include pages that can be
placed anywhere and they overcome these limitations,
but they in their turn have one limitation, they
cannot in one click of a button insert themselves
throughout the site, you have to place the coding on
each individual page Now that is where DWTs come
into their own, they allow you to design your site
in one go and change it’s look in one go. That’s why
the above guidelines were set out; maintain a
standard and the look can easily be changed.
DWTs are good for working with two or more people
as you can protect area’s you don’t want others to
touch, a big boon for web designers today. If you
want even more control on this aspect consider using
a CMS (Content Management System) FrontPage Addon
called
Content Seed. There is
a Free version, it's quite cheap, and FrontPage is
not the only web editor it will work with.
You can use one or more DWTs throughout a web if
you wish, and change editable or non editable
regions any time you wish. You can use includes and
CSS sheet(s) too. All this makes for one easy to
maintain site and one which you can change the look
of easily whenever you want with a few clicks and a
few minutes of your time, what could be better?
The best method to prepare a site that did not
previously use Dynamic web template is, I think, the
following.
There really is only one way to do that and that’s
working on each page one at a time. There is
something you can do at the same time though that
will SAVE you time later on.
Your Title should be a phrase about the page that
people will search for and the exact page title
should be repeated in your main heading H1 tag, if
you have not done this before now is a good time to
do it.
Your Description again should contain an EXACT
repeat of your title whilst also including short
descriptive sentences.
Your keywords should contain your main keywords
and phrases.
Your content should contain your H1 tag which is
your main heading and should not be used more than
once usually. It should also contain subheadings
which will be your H2 tags with short descriptive
paragraphs or blocks of text which are not centered.
Centering text makes it harder to read because
the starting position of each line changes, forcing
the reader to work harder to find where each line
begins to continue reading and can cause potential
difficulties for persons with low-vision using
screen enlargers. English and most European
languages are read from left to right. Centered text
is very hard to read and follow, because it's not
how people normally read text. Only Headings or
subheadings should be centred if necessary, to give
emphasise to the heading.
At this point also you can check your spelling
and run a report for
broken hyperlinks, if
you click the column of the file names you can sort
the pages so that any broken hyperlinks for a page
will show up altogether and you can check those
hyperlinks for the page your working on, by
selecting them and then right clicking with the
mouse and choosing Verify.
You don’t need to bother with Formatting as this
should be taken care of with a
CSS sheet
To find out more about SEO Techniques –
search engine
optimization Techniques – join the above FREE
class, if you don’t fancy a class check out the
comprehensive E-Book
SEO Techniques
– Step by Step
~ One Page at a time
Open up your site and start with the first file
in your Folder List, open the page, now depending on
what your old template consists of you will find
your own way to do this, this is the basic method I
used.
My template has navigational includes and a main
content that I want to save, the template consists
of a main table. I want to gather what I want to
save and place it above the old table. To position
the cursor above the table put the cursor in the
first cell of the table before any content and press
Control + Enter.
I select my main content by positioning my cursor
at the beginning of the content and holding down the
left mouse button, I drag the mouse to the last
character of my main content and then right click
and press Cut. (Or use the keyboard shortcut CTRL +
X or SHIFT + DELETE) I then position the cursor
above the main content and right click then press
Paste (or use the keyboard shortcut CTRL+ V or SHIFT
+ INSERT).
Next I want to gather my menu include as my menus
are unique to only a few pages within each section
and category and change as you move through the
site, I can either select the content of the include
that appears on the page or copy and paste the path
to the include, this will remain the same as the new
page files will be the same.
NOTE: You don’t want to lose your existing
standing (or page rank) within search engines by
making a lot of new file names for your old pages,
if you do want to change file names at this point,
make sure you use a
301 redirect for the old file to the new file.
Double click on the include and the ‘Include Page
Properties’ Dialog box will appear select the
include path that shows and right click and press
Copy, (or use the keyboard shortcut CTRL + C or CTRL
+ INSERT ) paste this just below your main content
that you previously pasted just above the old table.
Select everything below the main content and the
include path you have just copied and pasted and
then press delete.
Next select everything on the page and go to
Format | Remove Formatting (Or use the keyboard
shortcut Control + Shift + Z) this will clear out
any old formatting and you won’t get anything
transferring over to the new template and
interfering with any new styles or CSS sheets you
may have made, this is a factor in my own case.
If you have shared borders, now is a good time to
scrap them and use
Include pages for menu’s this can be done when
you’re designing your new DWT. This gives you much
more control over your navigation and allows you
in-depth menus you could not use with a shared
border and navigation web bot.
For SEO, accessibility and usability purposes you
should always maintain a text menu if you use a
graphic or _JavaScript based menu. If you are using
a _JavaScript menu when you apply such to a site in
a shared border or include you need to include some
of the code within the actual page, this makes for
some time consuming effort when you want to delete
or add content to the menu, as you have to go to
every page to make the changes. Though you can use
an external _JavaScript sheet, there is a FrontPage
Add on that works this all out for you called
All Web Menuss.
However now with a DWT you can just insert the
menu coding into the template and it will be applied
to each page you can make any changes on the dwt and
then apply once more throughout the site, very neat.
Do this for each page on your old look site that
you want to change to the dwt new look.
NOTE: You only have to do this once, that’s why I
suggest revamping your content as your doing each
page it will save you time later on.
Now you have prepared your site for
implementation of the dwt.
When you create your new DWT this is an
opportunity to put other design effects into play
and get rid of those old out of date ones.
You make your template at first like any other.
Decide if you want to use Divs –
table less design (pure CSS layout) or
tables. Take a piece of paper and draw out your
design and navigation this really helps you see how
the layout works. When designing your template you
should keep in mind a few basic design principles.
- In your CSS sheet make sure your using a
sans serif fontt, and think about other
Typography and
font issues
- If you can’t work with em’s use pixels not
points for font sizes at least.
- Use H1 and H2 tags which you can define the
size of via your CSS sheet.
- Apply SEO methods on
your
- File Names
- Heading Tags
-
Content - 250 words at the very minimum
- Title Attribute
- Meta tags –
Page Title – Description – Keywords
- Alt Tags –
Free
FrontPage Add on TP_Erromi will remind
you
- Anchor Text ( linked text )
- Keep as much formatting as possible in the
CSS sheet to keep your code
cleaner and validate your
HTML and
CSS.
- Design for a browser window
resolution of no less then 800x600 which is
the smallest designers now design for generally.
If you know your audience will be using
smaller viewing platforms design for that
specifically. You can test your site in various
sizes with Any Browser or the
Preview option under File | Preview in Browser -
choose your size.
- Include your
copyright details
- Give your template
visual
design appeal
- Brand your site with a
Logo, if you have not done this before, now
is the right time. A brand is the total
perception of your service or product your logo
has to fit tight with the substance of your
site, develop a philosophy for you and your site
Google does this with
panache. YOUR personality should permeate the
site and this can be reflected in the logo, so
that anyone seeing it instantly realises it’s
yours, you instantly recognise
Coke-a-colaa don’t you?
- Label your site so that parents
and users of software to protect children know
your site is safe, this is a useful time to do
this because the coding should be part of the
Meta tags on every page. Depending on your
content of course, some of your pages may be
labelled differently. Just note the pages and
change the coding for those pages, when applying
further changes to the dwt you will have to use
find and replace or you could make this section
of your coding an editable region once applied.
- Include favicon Ico coding, again
something that is used on every page
While you’re making your new template you might
like to think of a few pages you may not have
included before.
- Sitemap – or Table of Contents. FrontPage
uses either a TOC or
Categories to make a sitemap.
- Contact page – as well as your Fax, phone,
address,
email and
IM also add a contact form with a
customised confirmation page for those that
don’t have access to other methods at the time
of reading your site. Also place your email
address on every page.
- Privacy Policy – You must have one by law in
California if you run a business or
commercial site - Some Privacy Policy resources.
- Search box and Advanced search page there is
an excellent FrontPage Add on for a
Site Search
Engine available in ASP or PHP and it will
also search across subwebs.
-
Disclaimerr or Terms of use – If
you provide goods for sale or information you
should implement this.
- If you produce a ‘what’s new’ newsletter or
journal about
your site, or an
ezine about
information relating to your site subject, the
sign up box should go in the top fold of your
site, so should your search box if possible.
- About page – Give details and a photo if
possible about yourself and provide linking
information for visitors – always make it easy for
them, include coding for sign up boxes for your
newsletters as well.
Instruct your visitor on what
they can do for you if they so wish.
- Make a
custom 404 page
Features that should be dumped see
Confessions of a FrontPage Crafter
- Hit counters
- Shared borders
- No right Click
- Under construction pages and graphics
- Too many animations
- Scrolling marquee
- Splash page
- Sound without controls
- Large graphics or too many on a page
Once your template design is complete obtain
feedback you will avoid many mistakes believe
me. Ask your friends and any web design or FrontPage lists
you’re a member of.
Now you’re ready to save your template design as
a Dynamic Web Template.
More in Part ll
by Tina Clarke
http://accessfp.net
Microsoft MVP - FrontPage. Copyright © 2004 All
Rights
Reserved - Do not copy or publish this article
without permission.
