8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 1/39
Best Practices Working with HTML Code inMicrosoft FrontPage version 2002
White Paper
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 2/39
Table of Contents
Overview.................................................................................................................... 1
Abstract.................................................................................................................. 1 Audience................................................................................................................. 1
The Design of FrontPage............................................................................................... 2 HTML Preservation and Editing................................................................................... 2
Chronology of FrontPage HTML Parsing........................................................................ 3 Strengths of FrontPage 2002.....................................................................................5
HTML Dos and Don'ts Using FrontPage 2002....................................................................6 Web Components and Bots........................................................................................ 8
Role-based Administration......................................................................................... 9 Browser Compatibility............................................................................................... 9 HTML on the Clipboard............................................................................................ 10 Importing HTML from Microsoft Office........................................................................ 11 SharePoint Team Services.......................................................................................11 Themes and Shared Borders....................................................................................12 Page Margins......................................................................................................... 17 Web-style Tables.................................................................................................... 18
Table and Cell Properties......................................................................................... 18 Marquee Web Component........................................................................................ 20 WordArt and Drawing Tools...................................................................................... 20 CSS with Netscape Navigator version 4.x...................................................................24
Other Suggestions...................................................................................................... 25 Preventive: Version-Control Systems......................................................................... 25 Formatting............................................................................................................25 Managing Complex Web Pages.................................................................................26
Conclusion................................................................................................................36 The Future of Web Authoring...................................................................................36 HTML Coding Best Practices ....................................................................................36
References................................................................................................................ 36
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 3/39
BestPractices Working with HTML Code inMicrosoft FrontPage version 2002White Paper
Published: May 2002
For the latest information, please see http://www.microsoft.com/frontpage
Overview
Abstract
Microsoft® FrontPage® version 2002 contains many improvements
to support advanced Web authors better than any previous versionof FrontPage. It preserves unusual HTML constructions, HTML
formatting, ASP scripts, and many other customizations that Web
authors create in their Web pages. Even so, Web authors need tounderstand some of the issues regarding customizing HTML by hand
and writing complex Web sites. This paper covers best practicesworking with HTML code in FrontPage 2002 including some issues
using FrontPage that affect HTML code and general Web authoringtechniques that can simplify creating complex Web sites.
Audience
This whitepaper should be read by:
• Experienced Web content authors, interested in a deeper
understanding of how FrontPage generates HTML and how it
preserves and handles existing HTML while editing.
• IT professionals researching Web authoring tools to determine
the strengths and weaknesses of each with specific focus on howthese tools handle existing HTML pages as well as how they
meet interoperability and standards-compliance requirements.
The reader is expected to have:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 1
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 4/39
• Experience with authoring Web pages,
• A solid grasp of HTML,
• Experience with FrontPage's WYSIWYG Editor (the Normal pane)and the HTML Editor (the HTML pane).
This document does not attempt to show the reader how to useelemental features of FrontPage.
The Design of FrontPage
HTML Preservation and Editing
Earlier versions of FrontPage did not preserve the HTML author’s
personal choice for the case of tags or attributes, white space and
indenting styles, and even the presence or absence of certain startand end HTML tags, giving it a bad reputation with some Webauthors. While the preservation of the original form of the content
may not have been evident to authors that worked strictly with theNormal pane, it definitely affected the authors that worked within
the HTML pane or used other tools in combination with FrontPage to
edit the HTML code directly. These authors worked hard to "tweak"their code just right for cross-browser compatibility, or for server-
side scripting. These authors wanted or needed to make changes tothe raw HTML, and have FrontPage preserve those customized
changes.
With FrontPage 2000, and more so with FrontPage 2002, all that
changed. FrontPage 2002 is excellent at preserving HTML whileediting. Microsoft worked very hard on FrontPage 2002 to create a
WYSIWYG HTML editor that works as well for experienced authors
as it does for those that do not want to learn HTML in depth. Asalways, FrontPage generates proper HTML and it now also
preserves existing HTML very well. It even preserves HTML thatappears to be malformed.
FrontPage goes to great lengths to make common Web authoring
tasks work across a wide variety of Web servers and browsers, sothat authors don't have to edit the HTML as much. Most tasks thatrequired editing HTML can now be done using features built into the
latest version of FrontPage.
However, this whitepaper’s goal is to help the Web author fully
understand how FrontPage works with HTML and to be as
productive as possible using FrontPage’s design and code authoring
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 2
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 5/39
features. Most would agree, the goal is to create Web sites asquickly as possible and sometimes that requires directly authoring
HTML.
So, for some purposes, editing raw HTML is inevitable, and
FrontPage 2002 supports it well. Additionally, some techniques of writing HTML work better with the editor in FrontPage than other
techniques do. This whitepaper will also cover some ways to reducethe time you spend working with scripts and other complex HTML
pages.
Chronology of FrontPage HTML Parsing
This chronology reviews how the FrontPage HTML parser hasevolved since FrontPage 97. FrontPage 1.x is not discussed.
FrontPage 97
The HTML parser in FrontPage 97 treated HTML files much as aword processor treats a single document. This design was
consistent with the way all WYSIWYG editors worked at the time.This design also meshed well with the way many new Web authors
viewed Web pages as formatted documents resembling desktop
publishing documents.
The file was read and reorganized into a memory structure that wasoptimized for editing and rendering. The overall visual layout and
formatting semantics of the initial HTML would be preserved.However, the actual HTML text, including tag ordering, spacing,indentation, and so on, was discarded, and the memory structure
was used for editing instead. Whenever FrontPage needed torecreate the HTML as text, it would do so from this memory
structure.
FrontPage used its own rules for uppercase/lowercase, indentation,
whitespace, line break, and other formatting. Missing tags wereadded. Nesting was adjusted. Extraneous tags were removed. It
fixed HTML that appeared broken, even if it worked perfectly well in
most browsers. Because at the time FrontPage 97 was released,many web pages, built in text editors by authors new to HTML, did
contain many unintentional errors, the intent was to create wellformed HTML and correct errors.
Also at the time FrontPage 97 was developed, server-side scriptpages were relatively rare. Because of its automatic error-
correcting feature, FrontPage did not work well with server-side
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 3
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 6/39
script in HTML pages. The presence of server-side script can makean HTML document appear to have errors to the HTML parser in any
authoring tool.
However, Web authors sometimes wanted or needed to adjust
FrontPage-generated HTML so that it would display properly ondifferent browsers. These handmade modifications would
sometimes be overwritten when the file was saved or published.
FrontPage 98
The HTML parser in FrontPage 98 had an important, but subtle
change in behavior. In an effort to preserve the manual
modifications Web authors made, FrontPage 98 preserved theoriginal tag structure of the HTML. For example, a single <font>
text-level element that surrounded the several <p> block-level
elements would be preserved as is, rather than being replaced withmultiple <font> elements inside each <p> element.
FrontPage continued to regenerate HTML text from its internal
memory structure every time. This happened even if the file wasmerely read from disk and then saved as a new document with no
editing. The Web author's formatting was ignored in favor of FrontPage's formatting. Missing or "broken" tags and attributes
were repaired.
This design seemed justifiable at the time. In an unpublished study,
the FrontPage group found that a significant percentage of all Webpages had misspelled tag and attribute names, improperly nested
tags, erroneous multiples of single-entity elements (such as the<body> element), unmatched end tags, and other errors not
normally caused by WYSISYG editors. Many browsers are forgiving
about these errors, but they complicate the task of editing the
document properly for HTML editors.
FrontPage 2000
Beginning with FrontPage 2000, FrontPage automatically preservedthe formatting and layout of your existing HTML text, for increasedreadability and maintenance because the HTML parser in FrontPage
2000 used a completely new approach. The entire HTML documentwas preserved whitespace, uppercase, lowercase, quoted or
unquoted attributes, line breaks, and so on. Even more, when the
Web author edited the page using the WYSIWYG editor, FrontPagewould attempt to mimic the style of the original HTML.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 4
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 7/39
Broken HTML was not fixed, except in a few cases. Missing tags andextra tags were left alone as much as possible. FrontPage 2000
could still add tags in order to place new HTML properly, but it didnot try to balance every element's start and end tags unless
explicitly directed to using the Reformat HTML command. Some
elements were automatically reorganized to get the code to complywith HTML standards, even though these changes were not required
by many browsers. For example, multiple <body> tags were
consolidated into one <body> element. Children elements of the
<head> element, such as <title>, <meta>, and <style> were
relocated from the <body> element to the <head> element.
Incorrect HTML now was usually left unfixed and the Insert HTMLMarkup command could be used to explicitly mark HTML that the
Web author wanted unmodified in any way. Although the contents
or effects HTML inserted this way would not appear in theWYSIWYG editor, it would be processed in the Preview pane. In
most cases, this Web Component was unnecessary; FrontPage didnot usually remove tags it did not recognize, anyway.
Control over HTML formatting was better because FrontPage 2000allowed the Web author to decide whether to reformat HTML
automatically or to preserve the formatting. It also provided controlover how each tag and its children would be reformatted. It could
even automatically set these formatting controls based upon an
existing HTML page. This made it easier than ever to work with
server-side script and apply custom formatting in the HTML.
FrontPage 2002
The HTML parser in FrontPage 2002 continues the approach takenwith FrontPage 2000. Now, even complete violations of the HTML
standards are generally left untouched unless the Web authormakes major changes to the document. It can even preserve
multiple <head> and <body> tags. HTML character entities are
preserved better, and the handling of SGML processing instructions,
such as <?IMPORT>, is improved.
Strengths of FrontPage 2002
This is an abbreviated list of the strengths of FrontPage 2002
regarding HTML preservation and management.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 5
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 8/39
• It implicitly preserves HTML much better than any of itspredecessors did, while still offering the ability to create and edit
proper HTML.
• The Insert HTML Web Component offers total preservation of
server-side script or any other text that must not be altered bythe FrontPage editor.
• The Format HTML command allows you to apply your own
preferences to any HTML text, and can be automatically set froman existing page.
• While FrontPage 2002 is not an XHTML editor, it makestransforming an HTML page into XHTML painless.
• The Apply XML Formatting Rules command is a simple way to
make a document well-formed. It does not change any textinserted with the Insert HTML Web Component.
• Programmers can create their own Web Components to handlespecific requirements not covered by the built-in Web
Components.
However, as with all other WYSIWYG HTML editors, there are no
perfect solutions yet to working with script in apparentlymalformed HTML. The best solution for this problem is to
modularize the Web site, which we will cover later.
HTML Dos and Don'ts Using FrontPage 2002
This section covers some specific features in FrontPage 2002 that
deserve closer examination regarding how they alter or work withHTML. It also gives recommendations on how to use them to
control your HTML.
Below is a table outlining these features as follows:
• The terms "use" and "avoid" are recommendations only if youare working on the HTML directly and need to control it. They
are not meant to be recommendations on FrontPage featuresin general, since all of the features work very well.
• "Test" simply means that you should be careful using the
feature to make sure it fits your needs.
• The Comments column is a summary of the information in
this section, which follows.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 6
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 9/39
The following table lists these recommendations.
Feature Use Test Avoid Comments
Web Components Strongly recommended.
Role-based
Administration
Strongly recommended for
FrontPage Server Extensions 2002.
BrowserCompatibility
Settings
Must be set before creating Webpages. Has no effect on existing
HTML.
Pasting HTML
from Clipboard Use Paste Options button to control
formatting.
HTML file saved
from Officeapplications
Use Save as Filtered HTML, or
Export to Compact HTMLcommands instead.
SharePoint™
Team Services
Best with latest browsers or
Microsoft Office applications.Adds XML to <html> tag and
document.
Themes Apply themes using CSS if possible. Watch out for scripted UL
tags if not using CSS to apply atheme. Best on pages with no
scripting in the <html> or
<body> tags.
Shared Borders Best on pages with no scripting inthe <html> or <body> tags (e.g.
multiple BODY tags, selected usingserver-side script).
Page Margins Automatically disabled if BrowserCompatibility is set correctly.
Web-style Tables FrontPage 2002 creates MicrosoftWord-styled tables by default.
Table and CellProperties
Applies only to certain border andbackground attributes.
Marquee Element Automatically disabled if BrowserCompatibility is set correctly.
WordArt andDrawing Tools
Creates unwieldy VML.
Downlevel Images Required only if using WordArt orDrawing Tools, and browsers that
do not support VML.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 7
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 10/39
CSS withNetscape
Navigator 4
Automatically disabled if BrowserCompatibility is set correctly.
Web Components and BotsWeb Components, sometimes referred to as WebBots, or just Bots,
are one of the most useful ways to create Web pages that work onthe widest variety of Web servers and browsers. Web Components
have been greatly improved since earlier versions of FrontPage.
How They Work
A Web Component starts as a specially formed comment. Software
on the authoring system or the server system recognizes the
comment and processes it either at publish-time or at browse-time.
The structure of this comment is simple. A Web Componentcomment always begins with <!--webbot and is followed with
named arguments. For example, this Web Component is used to
display the time and date the page was last edited:
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%m/%d/%Y %I:%M:%S %p" -->
The comment includes the name of the Web Component,"Timestamp" and its settings. As the Web page is published to the
server, FrontPage finds the comment and replaces it with HTML,
which performs the function required by the Web Component, likethis:
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%m/%d/%Y %I:%M:%S %p" startspan -->03/18/2002 07:04:44 PM<!--webbotbot="Timestamp" i-checksum="29968" endspan -->
Most Web Components use this technique. Most Web Components
are expanded at publish-time, rather than at browse-time. Thisway, Web Components are properly handled for Web servers that
do not have FrontPage Server Extensions, or Microsoft InternetInformation Services, or anything except an FTP or WebDAVconnection. Web Components are a good platform-independent
solution to many common Web authoring tasks.
When editing HTML, avoid modifying the contents of the Web
Component comment. Instead, use the Web Component'sProperties menu; right-click the Web Component in the Normal
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 8
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 11/39
pane of the Web file, then click Properties... on the shortcutmenu.
Web Components Requirements
As stated earlier, Web Components do have to be processed. Mostof this processing takes place within the FrontPage 2002 client.
Some Web Components, however, require the FrontPage ServerExtensions. A Microsoft Product Support Services KnowledgeBase
article identifies all those components.
FrontPage 2002: Features That Require FrontPage Server
Extensions 2002 (Q281532)
http://support.microsoft.com/default.aspx?scid=kb;en-
us;Q281532
This article also lists features that require SharePoint Team Serviceson the Web server.
Role-based Administration
FrontPage Server Extensions 2002, as used by FrontPage 2002,introduced a new feature to help administer Web sites, called roles.
Web authors are given an account user name and password. Thisaccount, in turn, has a role assigned to it. These roles provide much
better control over access to features.
This feature is especially important for themes and shared borders.Assigning a Web author to the Author role allows that author to add
pages, tasks, and lists to a Web site, but it prevents that Webauthor from changing the theme for a Web site or changing the
shared borders. Only users assigned the role of Advanced Author orAdministrator can change the theme for a Web site. By limiting the
assignment of Advanced Author and Administrator to a small set of users, Web administrators can reduce the chances that a Web
author will inadvertently change the theme for an entire Web site.
Browser Compatibility FrontPage allows you to target specific browser and Web serversupport of various technologies. On the Tools menu, click Page
Options.... This will display the Page Options dialog box. Click theCompatibility tab. You should see this dialog box:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 9
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 12/39
Figure 1 Page Options / Compatibility dialog box
This dialog box controls the availability of menu commands anddialog box options within FrontPage. The Browsers, Browserversions, and Servers boxes control the settings in the Available
Technologies... set of checkboxes. These checkboxes, in turn,control whether certain menu commands and dialog boxes settings
are enabled or disabled.
The Page Options / Compatibility dialog box does not alter an
existing Web site or HTML page in any way. FrontPage will notremove any existing HTML that is incompatible with these settings.
It will not add any new HTML to support technologies that you
enable in this dialog box. The best time to use this dialog box isbefore creating a new Web site or any new pages.
HTML on the Clipboard
When copying or cutting part of an Office document to theWindows® clipboard, Office applications also include round-trip
editing information. FrontPage 2000, when it pasted the clipboard
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 10
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 13/39
contents from an Office document, would often paste this extrainformation. FrontPage 2002, however, removes most of the
unnecessary information. It also gives you the ability to paste witha variety of options. When pasting, a Paste Options button
temporarily appears, allowing you to control the formatting of the
pasted text.
Importing HTML from Microsoft Office
Microsoft Office applications support round-trip editing of HTML
documents on Web servers. To do this, each application places agreat deal of proprietary information inside the HTML document.
This information is rarely displayed by the browser. When the HTMLfile is reloaded by the application, the application can resume
editing the file as though it were in its native format. This extra
information is stored using XML inside the HTML file.
FrontPage does not remove this extra information automaticallyfrom Office documents that were saved in HTML. This can make
editing difficult and error-prone. If you are saving an Office
document as HTML that you want to edit later using FrontPage, usethe Export to Compact HTML add-in, or the Office 2000 HTML Filter,
or the Save as Filtered HTML command. This will prevent the Officeapplication from editing the HTML document as though it were a
native document, but it will make the file's HTML much easier to
read and maintain.
SharePoint Team Services
Some of the features in SharePoint Team Services use XML
elements to preserve document properties. These XML elementsrequire XML namespace declarations.
An XML namespace is a method for preventing two or more XMLelements in the same file from using a single tag name to mean two
different things. The technique for making an XML namespaceinvolves placing an abbreviation for the namespace, called the
prefix, combined with a Uniform Resource Identifier (URI), in theroot element of the document. In the case of HTML, the rootelement is the <html> element itself.
The HTML specification does not include any references to XMLnamespaces in the <html> element, although the XHTML
specification does. For this reason, it's possible that some HTML-
based applications, such as browsers, editors, parsers, and so on,
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 11
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 14/39
may not recognize HTML files that have these XML namespacedeclarations. Even further, they may attempt to display the
contents of the XML elements themselves.
Themes and Shared Borders
Themes and shared borders can significantly alter the HTML in a
page when they are applied. This can be important if you attemptto customize the HTML in a page, or write client-side or server-side
script that makes assumptions about the final HTML document as it
exists on the server.
How Themes Work
When you first choose to apply a theme to a page or a Web,
FrontPage creates a folder called _themes in the root of the Web.
The contents of this folder are described in the Microsoft FrontPageSDK documentation, which can be found on MSDN athttp://msdn.microsoft.com/library/default.asp?url=/library/en-
us/fpsdk2002/html/ThemesAppendixB.asp
For each file that is to have the theme applied to it, FrontPage adds
a <meta> element to the <head> element of the file. The <meta>
element identifies the theme that should be applied to the page. For
example, applying the Blank theme to a page would insert thefollowing <meta> tag:
<meta name="Microsoft Theme" content="blank 1011">
This is the extent of the changes made to the HTML before
FrontPage saves the file to the Web, except that it may removesome attributes from the <body> tag that conflict with the theme
settings.
As the file is saved, FrontPage applies the theme using either CSS
or additional HTML. If the theme is to be applied using CSS, then
FrontPage adds this <link> element to the line with the <meta> tag,
replacing the text THEME.CSS with the actual file name of the CSS
file for the theme:
<!--mstheme--><link rel="stylesheet" type="text/css"href="_themes/THEME.CSS">
If you have selected to enable collapsible outlines in bulleted or
numbered lists, then an event handler, called dynOutline, is added
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 12
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 15/39
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 16/39
<body><p>Single paragraph</p><ul><li>Bullet 1</li><li>Bullet 2</li>
</ul></body>
The Normal pane of the file reflects the Theme. If we apply thetheme using CSS, FrontPage saves this HTML to the Web server:
<head> <!--mstheme--><link rel="stylesheet" type="text/css"href="_themes/blank/blan1011.css"> <meta name="Microsoft Theme"content="blank 1011"></head><body><p>Single paragraph</p><ul>
<li>Bullet 1</li><li>Bullet 2</li>
</ul></body>
That's it. No other changes are made to the HTML. Now, let's seewhat happens when we apply the theme to the page without using
CSS. The HTML pane of the file does not change in FrontPage, butthe HTML saved to the Web server certainly does!
<head><meta name="Microsoft Theme" content="blank 011">
</head><body background="_themes/blank/blbkgnd.gif" bgcolor="#FFFFFF"text="#000000" link="#999999" vlink="#990000"alink="#666666"><!--mstheme--><font face="Arial, Arial,Helvetica"> <p>Single paragraph</p>
<!--mstheme--></font><!--msthemelist--><table border="0"cellpadding="0" cellspacing="0" width="100%">
<!--msthemelist--><tr><td valign="baseline" width="42"><imgsrc="_themes/blank/ablbull1.gif" width="15" height="15"hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial, Arial, Helvetica"> Bullet 1<!--mstheme--></font><!--msthemelist--></td></tr>
<!--msthemelist--><tr><td valign="baseline" width="42"><imgsrc="_themes/blank/ablbull1.gif" width="15" height="15"hspace="13" alt="bullet"></td><td valign="top" width="100%"><!--mstheme--><font face="Arial, Arial, Helvetica"> Bullet 2<!--mstheme--></font><!--msthemelist--></td></tr> <!--msthemelist--></table><!--mstheme--><font face="Arial,
Arial, Helvetica"> <!--mstheme--></font> </body>
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 14
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 17/39
As you can see, quite a lot was added to the original HTML.
FrontPage provides support for editing CSS files by using the
FrontPage built-in text editor. On the Format menu, click Style...to display the Style dialog box for editing CSS files. You can also
use a CSS editor such as the one in Microsoft
®
Visual InterDev
®
Web development system, version 6.0. Don't edit the CSS files
found in the _themes folder of your web; FrontPage may overwriteyour changes without warning. Instead, use the Format/Theme
command to create a customized theme. Once you have created a
customized theme, you can use the Format/Theme command toedit the theme or you can directly edit the theme files.
How Shared Borders Work
When inserting a shared border to a Web page, FrontPage creates a
folder on the Web root called _borders, and places HTML files in thisfolder, corresponding to the top, right, bottom, and left sharedborders. These are full HTML files, including <html> and <head>
elements. FrontPage automatically extracts the inner HTML from
the <body> elements and uses it as the contents of the border when
it publishes each page. It does not use server-side includes.
This is a big advantage in using shared borders over server-side
includes. Shared borders are easily edited using FrontPage. You canedit the contents of the shared border in any page that uses that
border, or you can open the shared border file in the _bordersfolder. Either way, you do not have to manually remove the tags
surrounding the <body> tag. Better still, any HTML editor will
recognize and edit the contents of the file.
With the shared border files in place, FrontPage adds a <meta> tag
to the <head> element. The <meta> tag looks like this:
<meta name="Microsoft Border" content="tlrb">
The letters "tlrb" merely stand for top, left, right, and bottom,
respectively. The presence of each one of these letters indicatesthat the page uses the appropriate shared border. If you remove all
shared borders, then the content attribute is assigned the value"none".
When the file is published, FrontPage surrounds the contents of thebody with one, two, or three <table> elements. The first table is for
the top border, if it is present. The second table has a single-row
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 15
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 18/39
and one, two, or three columns. The first column is for the leftborder if it is present, the second column is for the main body of
the document, and the right border is placed in the third column.The third table is for the bottom border, if it is present.
FrontPage inserts the comment <!--msnavigation--> just prior toeach of the table elements and some of the table detail elementsthat it inserts.
Here's a very simple HTML page that uses a top, left, and rightshared border, but not a bottom shared border.
<head><meta name="Microsoft Border" content="tlr">
</head><body><p align="justify">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</p></body>
When the file is published, the shared borders are expanded. Theshared borders don't need to be stored on the server, though they
might be. The expanded file looks like this:
<head><meta name="Microsoft Border" content="tlr">
</head><body><!--msnavigation--><table border="0" cellpadding="0"cellspacing="0" width="100%"><tr><td> <p align="center">TopBorder</p>
</td></tr><!--msnavigation--></table><!--msnavigation--><tabledir="ltr" border="0" cellpadding="0" cellspacing="0"width="100%"><tr><td valign="top" width="1%"> <p>Left<br>Border</p> </td><td valign="top" width="24"></td><!--msnavigation--><td valign="top">
<p align="justify">Lorem ipsum dolor sit amet, consectetueradipiscing elit. </p> <!--msnavigation--></td><td valign="top" width="24"></td><td valign="top" width="1%"> <p>Rightmost<br>Border</p> </td></tr><!--msnavigation--></table> </body>
The bolded text in this example represents the table element that
FrontPage added to the file. The italicized text represents the innerHTML that was extracted from the shared border files and expanded
in this file.
Avoid creating unbalanced HTML tags in any of the shared border
files. For example, don't insert an opening <div> tag in the left
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 16
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 19/39
border file and a closing </div> tag in the right border file. The
results will be unpredictable for most browsers.
Page Margins
The Page Properties dialog, available by selecting the File menu,Properties... command, has a Margins tab that appears onlyunder specific conditions. The tab on this dialog box appears only
after you have selected "Microsoft Internet Explorer only" in theBrowsers box of the Page Properties / Compatibility dialog box
(see Figure 1 Page Options / Compatibility dialog box). If you
select any other browser in the Browsers box, except for the"Custom" browser setting, then the Margins tab will not appear in
the Page Properties dialog box.
Figure 2 Page Properties dialog box with Margins tab
This is important because the way that this dialog sets pagemargins does not conform to the HTML specification. Specifically, it
adds topmargin and leftmargin attributes to the <body> element.
The HTML specification does not include margin attributes in the<body> element tag. See this example:
<body topmargin="0" leftmargin="0">
A better technique for setting page margins in modern browsers is
to use CSS. This conforms to the current standards, and gives youmuch more flexibility in targeting browsers. Here's how the samedocument above would appear using only CSS:
<body style="margin-left: 0; margin-top: 0">
These changes must be made manually using the HTML pane of the
page editor.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 17
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 20/39
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 21/39
</table>
The table looks like this:
Figure 3 Table using Internet Explorer Properties
The bordercolorlight and bordercolordark properties can be
replaced using CSS. The modified HTML might look like this:
<head>
<style>table.Greenish{border-style: solid;border-width: 1px;
border-color: lime green green lime}td.Greenish{border-style: solid;border-width: 1px;
border-color: green lime lime green;}
</style></head><body><table class="Greenish" style="width: 100px; height=100px;"><tr><td class="Greenish"> </td><td class="Greenish"> </td>
</tr><tr><td class="Greenish"> </td><td class="Greenish"> </td>
</tr></table>
</body>
As you can see from the following image, the modified tableappears identical to the original.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 19
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 22/39
Figure 4 Table using CSS
Additionally, CSS can be used to specify background images for
tables and cells, rather than using the background attribute which
is no longer part of the current HTML standard. The CSS property
background-image can set a background image, as shown in this
example:
<td style="background-image: url('artbul1a.gif')"> </td>
Marquee Web Component
The Marquee Web Component in FrontPage uses the <marquee>
element, which is not part of the HTML specification. It is onlysupported by Internet Explorer.
There are several ways to create moving text without the Marquee
Web Component. Probably the simplest way is to use Dynamic
HTML effects. Also, try researching the FrontPage Add-In Center onthe Web, at
http://www.microsoft.com/frontpage/downloads/addin/default.asp.Add-Ins can automatically insert scripting or Java applets to
accomplish similar effects.
NOTE: Be careful placing critical information in marqueetags, scripts, or applets. Many users need accessible
Web pages in order to use them with screen readers orbrowsers that do not execute script or applets.
WordArt and Drawing Tools
WordArt and the drawing tools in FrontPage use Vector Markup
Language (VML) to draw images, rather than referencing image
files, such as GIF, JPEG, and PNG files. Like the workgroup featuresof SharePoint Team Services discussed earlier, VML is an application
of XML and requires XML namespace declarations.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 20
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 23/39
VML versus CSS/DHTML positioning
Although VML generally takes fewer bytes to store an image than
many graphic files, it's not an ideal solution for some problems. Forexample, let's suppose you want to display a small paragraph of
text in the center of the page, with a tight border around theparagraph. First, you create the paragraph using line breaks. Thenyou select the Outside Border command from the toolbar to put
the border around the paragraph. The borders reach to the left andright edges of the window, as this illustration shows:
Figure 5 Outside Borders on a paragraph
You want the borders closer to the edges of the paragraph, so you
grab the resize handle on the left, and attempt to bring it into thecenter of the page. The results are a little surprising the
paragraph isn't centered at all:
Figure 6 Outside Borders after attempting to adjust the left
border
Since the bordered paragraph resists every attempt to center it on
the page, you might be tempted to replace it with a bordered TextBox from the Drawing toolbar. Indeed, you will get the visual result
you wanted:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 21
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 24/39
Figure 7 Text Box from the Drawing Tools
Unfortunately, the HTML is a little messier. It's correct, but it's hard
to read.
<html xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns="http://www.w3.org/TR/REC-html40">
<link rel="File-List" href="New_Page_1_files/filelist.xml"><!--[if !mso]><style>
v\:* { behavior: url(#default#VML) }o\:* { behavior: url(#default#VML) }.shape { behavior: url(#default#VML) }</style><![endif]--><!--[if gte mso 9]><xml><o:shapedefaults v:ext="edit" spidmax="1027"/></xml><![endif]-->
<body><p><v:shapetype id="_x0000_t202"coordsize="21600,21600" o:spt="202"path="m,l,21600r21600,l21600,xe"><v:stroke joinstyle="miter"/><v:path gradientshapeok="t" o:connecttype="rect"/></v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t202"style='position:absolute;left:131.25pt;top:15pt;width:162.75pt;height:69pt;z-index:1'><v:textbox><table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center">Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, <br>sed diem nonummy nibh.</td>
</tr>
</table></v:textbox></v:shape></p></body>
</html>
There is a better way, at least for this particular example. Using
CSS, the paragraph, with its border, can be positioned on the page
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 22
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 25/39
anywhere we like. Use the Position... command on the Formatmenu.
Figure 8 Borders using CSS absolute positioning
The resulting HTML is much easier to read and understand, as well.
<div style="position: absolute; left: 194; top: 15; width: 188;height: 59; border-style: solid; border-width: 1; padding-left:4; padding-right: 4; padding-top: 1; padding-bottom: 1"><p align="center">Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit, <br>sed diem nonummy nibh.
</div>
This clearly won't work for more graphical uses of the drawing tools
or WordArt. If you use these features, be prepared to lose some of the readability in the HTML.
Downlevel Images
For the browsers that do not support VML, the drawing tools and
WordArt will automatically generate a graphic file for the image.This is called a downlevel image file. Special code in the HTML will
display the VML if the browser supports VML, and the downlevelimage file using an <img> element if the browser does not support
VML.
Often, these files take more bytes than VML, and they don't scaleas well for resizing, which happens when printing. However, if you
are planning to support browsers that do not support VML, turn ondownlevel image file support. Use the Page Options / Compatibility
dialog box, as shown earlier. If you are supporting only VML-compliant browsers, such as Internet Explorer, then you may wantto disable support for downlevel image support, since it tends to
add complexity to the HTML and takes additional server space.
This example shows the HTML and VML for a single short
paragraph, followed by a yellow circle with a 3-point blue borderand a gray shadow.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 23
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 26/39
Figure 9 Yellow circle with blue border and shadow
This is the file without downlevel image support:
<p>Normal paragraph</p><p><v:oval id="_x0000_s1028" style="position:absolute;left:27pt;top:37.5pt;width:54pt;height:54pt;z-index:1"fillcolor="yellow" strokecolor="blue" strokeweight="3pt"> <v:shadow on="t" opacity=".5" offset="6pt,6pt" /></v:oval> </p>
Here's the same HTML file with downlevel image support.
<p>Normal paragraph</p><p><!--[if gte vml 1]> <v:oval id="_x0000_s1028"style="position:absolute;left:27pt;top:37.5pt;width:54pt;height:54pt; z-index:1" fillcolor="yellow" strokecolor="blue"strokeweight="3pt"> <v:shadow on="t" opacity=".5" offset="6pt,6pt" /></v:oval> <![endif]--><![if !vml]> <span style="mso-ignore:vglayout;position: absolute;z-index:1;left:34px;top:48px;width:84px;height:84px"><imgwidth="84" height="84" src="New_Page_1_files/image001.gif"
v:shapes="_x0000_s1028"></span> <![endif]> </p>
While this may not seem like much for this small example, it canmake a page with many images difficult to comprehend.
CSS with Netscape Navigator version 4.x
Netscape Navigator version 4.x does not always correctlyimplement CSS styles that are generated by FrontPage. This applies
especially to images, image bullets, and table border properties.
You can avoid this problem by properly selecting the right browsers
in the Page Options / Compatibility dialog box. The only browserthat FrontPage recognizes as correctly supporting CSS is Internet
Explorer.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 24
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 27/39
Other Suggestions
This section covers some general suggestions for working with
HTML files using FrontPage.
Preventive: Version-Control Systems
Professional software developers store their programs, called source
code, in databases known as version-control systems. Each time aprogrammer wants to change a file, he has to retrieve the file from
the version-control system, make changes to the file, check the
changes to make sure they are good, and then place the file backinto the version-control system. The version-control system then
records the new version of the file, along with all previous versionsof that file. Version-control systems prevent more than one
programmer from making changes to a file at once. This particular
feature is so useful for team-oriented development that FrontPageServer Extensions have supported it for a very long time.
Good version-control systems do much more than simple check-
out/check-in. Most importantly, version-control systems allow
authors to revert to an earlier version of a file. Even better, manyversion-control systems offer file-difference viewers to determine
what was changed between one version of a file and the next, orbetween a version that exists in the version-control database and a
file that exists in the file system.
Microsoft Visual SourceSafe® version control software provides allthese features, and it can directly integrate with FrontPage ServerExtensions. Using Visual SourceSafe gives you the freedom to
experiment with new ideas without worrying about losing a working
file.
Formatting
Half of knowing what to change in your HTML files lies in knowing
where something needs to be changed. The automatic formattingcommands built into FrontPage can help you make sense of
complex HTML documents. The Reformat HTML and the ApplyXML Formatting Rules commands are on the shortcut menu that
appears when you right-click in the HTML pane.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 25
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 28/39
Reformat HTML
Using the HTML pane of the FrontPage editor, you can reformat the
HTML in almost any way you like. You can remove all indentation,or indent every tag, or anything in between. You can specify where
you want line breaks to occur. You can start with a Web page thatis already formatted the way you want, and FrontPage will adjust itsformatting of future HTML pages to match that page.
The Reformat HTML command will also generally produce balanced,
proper HTML, with the notable exception of any HTML included with
the Insert HTML Web Component. If you do use a version-controlsystem to compare differences between file versions, it's generally
much easier for the file-difference viewer to find and highlightdifferences if the HTML is reformatted before comparing.
XML Formatting
The Apply XML Formatting Rules command will create a well-formedXML document from the Web page, without altering the HTML
layout. It does this by adding end-tags or making self-closing tags
in order to nest the elements properly within a document. It alsochanges reserved characters to their equivalent character entities.
The result is a well-formed XML document that is suitable for use inan XML-enabled application.
The Apply XML Formatting Rules command does necessarily
produce a valid XML document. It ignores any text that wasinserted using the Insert HTML Web Component. Additionally, it
does not alter the HTML that Web Components produce at publish-time or browse-time; it alters only the source HTML file.
Managing Complex Web Pages
Creating a complex Web is as challenging as developing software.It's true that programming languages, such as C# and Visual
Basic® development system, have more powerful controlmechanisms than most Web pages. However, complex Webs use
many included files as well as client-side scripts and server-sidescripts in many separate files. Each response to a request for anHTML file requires the server to use several files. Managing all these
files and making sure the HTML responses are correct is difficult,but similar to the modern processes used to manage software
development.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 26
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 29/39
HTML as a Single File
The earliest Web servers were very simple. In response to a
browser's request for a URI, the Web server would merely copy oneentire file into an output buffer and send it to the browser. Web
authors quickly discovered that many Web pages duplicatedcommon elements across a web. For example, on most Web sites,every Web page includes a footer, which identifies the owner of the
Web site. The HTML that creates that footer is replicated on everypage.
Early WYSIWYG HTML editors could safely assume that a singleHTML file contained all of the HTML that would be sent to the
browser. The browser would separately request all other files thatwould be required to properly display a Web page, such as images
and audio files. These HTML files were checked and corrected for
validity and conformance to the HTML standards by the HTMLeditor.
Common Gateway Interface (CGI) technology introduced a new
perspective. Rather than merely copying a file from the file system,
the Web server executed a program. This program generated HTMLto be placed in the output stream.
All programming languages are especially designed to reducerepetitiveness. CGI programs, at the appropriate point while placing
HTML into the output stream, can merely execute a program in a
library that will generate the repetitive HTML.
Problems and Solutions in the Single File Approach
As you might guess, creating a CGI program is not as simple ascreating HTML files. Simpler ways of reducing repetitiveness were
produced.
The server-side include feature allows a Web author to insert a
complete copy of a file into an HTML file. The feature works fine,but some early HTML editors did not have a way to identify files
that were meant to be used in a server-side include. If a Webauthor used one of these editors on such a file, the editor wouldusually make sure the included HTML file had an <html> element
and <body> element, at least. When this file was included in the
response output, extra <html> and <body> elements would be
transmitted to the browser.
For example, this is New_Page_1.htm:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 27
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 30/39
<html><body><p>Main body paragraph.</p><!-- #include file="footer.htm" -->
</body></html>
And this is footer.htm:
<html><body><!-- Global footer begin --><hr><p><font size="2">Common footer</font></p><!-- Global footer end -->
</body></html>
The HTML that is sent to the browser looks like the example below.The extra <html> and <body> tags are in bold:
<html><body><p>Main body paragraph.</p><html>
<body> <!-- Global footer begin --><hr><p><font size="2">Common footer</font></p><!-- Global footer end -->
</body>
</html> </body></html>
FrontPage got around this problem by using Web Components toperform the equivalent of a server-side include. When FrontPage
publishes a page with the Include Page Web Component, it
automatically strips out the extra tags, and inserts only the innerHTML of the <body> element into the response stream. It also does
this whether the server supports server-side includes or not. This
can result in a modest increase in server storage requirements, but
makes editing these files tremendously easier than trying to hand-edit server-side include files, or find an alternate way to pull in onlythe inner HTML just like the Include Page Web Component does.
Active Server Pages (ASP) also made creating CGI-style pagessimpler. However, they are so simple that it's simpler to make
mistakes as well.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 28
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 31/39
This example shows an ASP page that uses a common library file tocreate a quote of the day:
<!-- #include file="qotd.asp" --> <p>Main body paragraph.</p><hr>
<div style="text-align:center;"><table style="background:buttonface;"><tr><td style="color:buttontext;font-size:10pt;"><% Response.Write QuoteOfTheDay(DatePart("y", Date)) %>
</div>
Here is qotd.asp. Repetitive code has been replaced with ellipses:
<%Function QuoteOfTheDay(nDate)Dim nOnesDigitnOnesDigit = nDate Mod 10
Select Case nOnesDigitCase 0Response.Write "Energy and persistence conquer all things."
Case ...Response.Write "..."
......
End SelectResponse.Write "<br>~~Benjamin Franklin"Response.Write "</td></tr></table>"
End Function%>
The first file uses a server-side include to make the QuoteOfTheDay
function available to itself. Then it creates a centered table elementwith a single cell. Within the cell, it executes the QuoteOfTheDay
function. The QuoteOfTheDay function selects one of ten quotes,
based on the one's digit in the day of the year. For example, if
today is the 79th day of the year, it selects the 9th quote.
If you look carefully, you'll see something unusual, even if you don't
know VBScript or ASP. The HTML in the first file appears incorrect:the <table>, <tr>, and <td> start tags should be matched with
ending </td>, </tr>, and </table> tags. However, in the secondfile, we see that the QuoteOfTheDay function writes ending
</table>, </tr>, and </td> tags into the response stream, using
the Response.Write method.
When the ASP pages are executed, they do produce correct HTML,
like this:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 29
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 32/39
<p>Main body paragraph.</p><hr><div style="text-align:center;"><table style="background:buttonface;"><tr><td style="color:buttontext;font-size:10pt;">Energy and persistence conquer all things.<br>~~Benjamin Franklin
</td></tr>
</table></div>
Unfortunately, no WYSIWYG editor can predict the output of ASP
pages. Earlier versions of FrontPage would have automatically
corrected the HTML in the first file by adding the "missing" endtags. Even FrontPage 2002 will add those end tags if you use the
Reformat HTML command. Fortunately, unless you select the
Reformat HTML command (or the Apply XML Formatting Rulescommand), FrontPage 2002 will not automatically add these tags,
even if you edit the page in the Normal pane.
While this example is trivial and easily corrected, most Web pagesare far more complex and more difficult to correct. Rather than
depend on FrontPage to try to understand your HTML coding, you
should use a method that software developers use to write complexcomputer programs.
Loosely-Coupled Modular HTML and Scripts
In software development, a great deal of emphasis is placed oncreating loosely coupled modules. A module is a block of code in a
file by itself. A loosely coupled module is one that can be easilyused in many locations. When software developers say they are
modularizing their code, they usually mean they are creating
loosely coupled modules.
The example demonstrated above showed a tightly coupled module.
The table is created in one file, and closed in another, creating atight interdependency between the files. This makes it difficult to
make changes.
For example, this file also executes the QuoteOfTheDay function:
<!-- #include file="qotd.asp" --><p>Main body paragraph.</p><hr><div style="text-align:center;"><table style="border: 1pt solid green; font-size: 10pt">
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 30
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 33/39
<tr><td style="background-color: yellow; width: 1in;">Today's quote:
</td><td style="background-color: silver;"><% Response.Write QuoteOfTheDay(DatePart("y", Date)) %>
</td><td style="background-color: yellow; width: 1in;">Brought to you by QuoteOfTheDay
</td></tr>
</table></div>
Without knowing that the QuoteOfTheDay function closes the table,
we might expect to see a table with three cells. The left and right
cells should have yellow backgrounds, and the center cell should
have a silver background and our quote of the day inside, like this
figure:
Figure 10 Expected Quote of the Day footer
Instead, we see a table with only two cells; the left cell is yellowand the right cell, silver. The contents of the cell that should havebeen on the right are now displayed below the table, as shown in
this figure:
Figure 11 Unexpected Quote of the Day footer
In this example, the results don't look too bad, but for pages that
are more complicated, they could be disastrous.
The technique for modularizing involves treating each file as though
you could know almost nothing about where it will be used. The
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 31
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 34/39
modularized file should not require tags to be created or endedoutside of itself. For example, our QuoteOfTheDay function should
either fully create the entire table, with matching start and end<table>, <tr>, and <td> tags in the function, or else it should not
write any table tags at all.
If you always wanted the table to have the same appearance, everytime it is used, then you should include the table tags in the
function. In this case, it would also make sense to rename the
function to QuoteOfTheDayTable. On the other hand, if you think
you might want the quote of the day to appear elsewhere, perhaps
not in a table at all, then merely remove the table tags entirely
from the function, and leave it named as it is. This technique shouldbe applied not only to ASP files, but also to server-side include files,
Web Component Include files, shared border files, and any otherfiles that are meant to be used within a file to generate a single
HTML document.
Make sure that each HTML file, whether it is meant to be part of the
navigable structure of a Web site or a file that is only included
within other files, contains balanced tags. Better still, make surethat every HTML file is a whole, complete HTML file, and use the
Include Page Web Component to include other HTML files, ratherthan a server-side include.
Functionally Cohesive Modules
Another aspect of modularizing parts of a Web site is calledfunctional cohesion. That's another way of saying that a module has
one, clear, easily-understood purpose. An ASP or HTML file is one
module that is, it should begin and end in one file. An ASP pagewith HTML should contain the structure of an HTML file. Most
procedures should be located in a separate ASP file, rather thanbeing tightly interwoven with the HTML tags.
For example, look at this ASP file:
<%
DayColors = Array("red", "green", "blue", "purple", "black")IsIE = (InStr(1, Request.ServerVariables("HTTP_USER_AGENT"),"MSIE") > 0)%><% If IsIE Then %><body topmargin="0" leftmargin="0"><% Else%><body><% End If %>><% If WeekDay(Date, vbMonday) < 6 Then %><table style="color:white;">
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 32
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 35/39
<tr><td style="background-color:<%= DayColors(WeekDay(Date,vbMonday) - 1) %>">
Your IP address is <%= Request.ServerVariables("REMOTE_ADDR")%><br>
Today is <%= DayColors(WeekDay(Date, vbMonday) - 1) %> day</td></tr>
</table><% Else %><p>Today is a weekend</p>
<% End If %></body>
This is a small example of poor functional cohesion. The ASP file is
doing several different things that create a single page.
• It initializes some variables.
• It determines whether the browser is Internet Explorer.
• It contains the structure of an HTML page, with several possiblepaths.
• It determines whether to change the body margins based on
whether the browser is Internet Explorer.
• It selects whether to display a table or a paragraph based on the
day of the week.
• It changes the color of the table based on which weekday it is.
•
It determines and displays the client's IP address.
One way to modularize this is to think of this file as an HTML
"stream generator". That is, instead of looking at this as one HTMLdocument, think of it as a series of characters that, after they are
sent one character at a time to the browser, form an HTML
document on the browser. At certain points in this HTML streamgeneration, alternate paths might be taken. Each alternate path is a
different stream generator. The trick is to separate these streamgenerators into separate procedures or modules.
Here are the four possible streams generated by our example:The browser is Internet Explorer and the day of the week is a
weekday.
The browser is Internet Explorer and the day of the week is aweekend.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 33
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 36/39
The browser is not Internet Explorer and the day of the weekis a weekday.
The browser is not Internet Explorer and the day of the weekis a weekend.
At each place in the file where the ASP script could branch to one of
the possible paths, separate that path into a function that can be
called by the ASP file. For example, the example page above couldbe rewritten using three files. The first file is the core HTML
skeleton, and it uses the Include Page Web Component to includethe second file, which is a library of procedures. The third file is a
reusable HTML snippet that has had its <head> element, <html>
tag, and <body> tag removed.
<!--#include file="options2.asp" --><body <%= BodyTagAttributesForBrowsers %>>
<% If IsWeekday ThenServer.Execute "ColorDay.asp"
Else%><p>Today is a weekend</p>
<% End If %></body>
Here is options2.asp:
<%Option ExplicitDim DayColorsDayColors = Array("red", "green", "blue", "purple", "black")
Function IsIE()IsIE = (InStr(1, Request.ServerVariables("HTTP_USER_AGENT"),
"MSIE") > 0)End Function
Function BodyTagAttributesForBrowsers()If IsIE Then BodyTagAttributesForBrowsers = "topmargin=""0""
leftmargin=""0"""End Function
Function IsWeekday()
IsWeekday = (WeekDay(Date, vbMonday) < 6)End Function
Function TodaysColor()TodaysColor = DayColors(WeekDay(Date, vbMonday) - 1)
End Function%>
This is ColorDay.asp.:
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 34
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 37/39
<table style="color:white;"><tr><td style="background-color:<%= TodaysColor %>">Your IP address is <%=
Request.ServerVariables("REMOTE_ADDR") %><br>Today is <%= TodaysColor %> day
</td></tr>
</table>
A special note about ColorDay.asp: FrontPage 2002 will not try to
add <body> or <html> tags to this file, although other WYSIWYG
HTML editors or earlier versions of FrontPage might.
Naturally, this amount of modularization for this sample seems
excessive, but this is a sample. For larger, more complex Webpages, this level of modularization would be more appropriate.
If you are concerned about performance, then, after you have built
your site this way, measure its performance with testing tools and
isolate the slow pages. It will be very easy to optimize performanceafterwards.
Use Web Components
One of the simplest and easiest ways to modularize is to use WebComponents. If possible, transform your own libraries into Web
Components. The FrontPage 2002 SDK (see References) gives
detailed instructions on creating your own FrontPage Components.
Use the Insert HTML Web Component
There are rare circumstances where FrontPage 2002 will reformator edit HTML in a way that will break server-side scripts. The Insert
HTML Web Component will prevent FrontPage from making any
changes to the HTML at all, at the cost of eliminating the contentsof that HTML from the Normal pane's WYSIWYG editor.
TIP: If you do use the Insert HTML Web Component
often, you may find it much easier to edit the contentsusing the Microsoft Script Editor that comes with
FrontPage 2002. Simply press ALT+SHIFT+F11 to seethe current file using the Script Editor.
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 35
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 38/39
Conclusion
The Future of Web Authoring
Since FrontPage was introduced, in less than a decade, Web
authoring and Web browsing have already gone through onerevolution, and they stand poised to begin another. XML isbecoming the foundation upon which all text-based content is being
managed and transmitted, and it may soon become the basis for allcommunication on the Internet. HTML is merging with XML, into
XHTML, making it simpler to create content that reaches further
and is more compatible with all browsers than ever before.
Think about keeping things simple, because everything is about tochange. Take your complex HTML documents and make them
modularized. Use CSS, or XSL, or modularized script. Even if you
don't jump on the bandwagon of the latest and greatest craze, suchas XHTML, you'll find it much easier and less time-consuming to
make modifications to your HTML files.
HTML Coding Best Practices
For most common Web authoring tasks, you can spend fifteen
minutes doing something with a text editor that you could do in oneminute with FrontPage. But often you do need to work in HTML, so
keep your organization as simple and straightforward as possible.
FrontPage 2002 has been carefully designed and engineered toallow you the greatest amount of freedom in customizing yourHTML pages so they do what you want, while still allowing you to be
highly productive at creating and editing your pages. The idea is
that your time is better spent further developing finished Webpages, not trying to finish them in the first place. FrontPage 2002
helps you meet that goal.
References
•
Editing ASP Files with Microsoft FrontPage 2000.http://msdn.microsoft.com/library/en-us/dnfp2kta/html/FP2000ASP.asp.
• FrontPage SDK
http://msdn.microsoft.com/library/en-
us/fpsdk2002/html/GettingStarted_About.asp
Best Practices Working with HTML Code in Microsoft FrontPage version 2002 36
8/7/2019 Best practices working with HTML code in FrontPage 2002
http://slidepdf.com/reader/full/best-practices-working-with-html-code-in-frontpage-2002 39/39
http://msdn.microsoft.com/downloads/default.asp?url=/downloads/sample.asp?url=/msdn-
files/027/001/710/msdncompositedoc.xml
• Microsoft Developer's Network (MSDN) Library ,
http://msdn.microsoft.com/library/default.asp.
• FrontPage 2000 Reviewers Guide.http://www.microsoft.com/TechNet/prodtechnol/office/evaluate/
featfunc/fp2revgd.asp.
• World Wide Web Consortium®. http://www.w3.org/.
The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of thedate of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitmenton the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.
This White Paper is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, AS TO THEINFORMATION IN THIS DOCUMENT.
Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of thisdocument may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic,mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of MicrosoftCorporation.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter inthis document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document doesnot give you any license to these patents, trademarks, copyrights, or other intellectual property.
© 2002 Microsoft Corporation. All rights reserved.
Microsoft, FrontPage, the Office logo, Visual Basic, Visual InterDev, Visual SourceSafe, and Windows are either registeredtrademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
The names of actual companies and products mentioned herein may be the trademarks of their respective owners.