What's New in FrontPage 2003 for Developers

Article
07/11/2006

Kevin Spencer
Microsoft MVP

October 2003

Applies to:
    Microsoft® Office FrontPage® 2003
    Microsoft Office SharePoint™ Portal Server 2003
    Microsoft Windows® SharePoint Services

Summary: Review the latest enhancements and new features of Microsoft Office FrontPage 2003 including Extensible Markup Language (XML), Extensible Stylesheet Language Transformations (XSLT), Microsoft ASP.NET, and Microsoft SharePoint Products and Technologies. (15 printed pages)

Introduction
Cutting-Edge Tools for Cutting-Edge Technologies
Productivity Tools
Powerful New Features
Conclusion

Introduction

Microsoft® Office FrontPage® 2003 is a professional Web development application with many new and enhanced features designed specifically for professional Web developers. Whether you're a site manager or a Web programmer, there are plenty of tools and features that help you to optimize your development time. The FrontPage 2003 Web site creation and management tools puts all the power in your hands to accomplish your tasks, and you retain full and granular control over the final product.

This article discusses some of the most exciting of these tools and features some elegant enhancements of existing features and some designed for working with the most cutting-edge emerging technologies on the Internet today. If you want to capitalize on the power of technologies like Extensible Markup Language (XML), Extensible Stylesheet Language Transformations (XSLT), Microsoft ASP.NET, and Microsoft SharePoint™ Products and Technologies, FrontPage has the tools to get the job done. These include such powerful tools as the FrontPage WYSIWYG XSLT Editor, Web Parts, and ASP.NET Database tools.

Cutting-Edge Tools for Cutting-Edge Technologies

Two of the most noteworthy technologies to come from Microsoft recently are Microsoft Windows SharePoint Services and Microsoft ASP.NET.

A component of the Microsoft Windows® Server 2003 operating system, Windows SharePoint Services ties together with Microsoft Office SharePoint Portal Server 2003 to form a Web site solution that facilitates collaboration within a team or across an enterprise. A SharePoint site includes built-in capabilities for document sharing, information sharing, group discussions, alerts, and other types of group collaboration.

ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and Web services. ASP.NET goes beyond Active Server Pages (ASP) in many ways, including full object-oriented programming.

FrontPage 2003 includes some powerful productivity tools for developing Web sites, built on Windows SharePoint Services and ASP.NET database-driven Web applications.

Web Parts

Web Parts are an important part of a Web site based on Microsoft SharePoint Products and Technologies. Web Parts are modular units of information that consist of a title bar, a frame, and content. Web Parts are the basic building blocks of a Web Part Page. A Web Part is the combination of a Web Part Description file (.dwp) and a Web Part assembly file (.dll). All Web Parts are based on Web Custom Controls. You add Web Parts to Web Part Pages. A Web Part Page is a special type of Web page that contains one or more Web Parts. A Web Part Page consolidates data, such as lists and charts, and Web content, such as text and images, into a dynamic information portal built around a common task or special interest. Typically, you add Web Parts to Web Part Zones on the Web Part Page. A Web Part Zone is a container with a set of properties that can be configured to control the organization and format of Web Parts on a Web Part Page. Web Part zones can also be used to provide protection against changes to Web Parts.

FrontPage 2003 has the capacity to easily insert Web Part Zones, which are regions in a page where Web Parts can reside and which can be controlled by the user. In addition, FrontPage 2003 has WYSIWYG tools for dragging and dropping Web Parts and a gallery of ready-made Web Parts from which to select.

The Data View Web Part can display data from a variety of data sources including traditional databases, XML data sources, and Web services. You can use FrontPage 2003 to create custom Data views and link Data views together, as illustrated in Figure 1.

Figure 1. Connecting Web Parts together

WYSIWYG XSLT Web Editor

Data View Web Parts use the power of XML and XSL to create Extensible Stylesheet Language Transformations. XSLT is used to obtain the granular level of formatting illustrated in Figure 1. Note the difference in background color between the rows in the result sets. This effect is achieved with conditional formatting, which is enabled by using XSLT.

Editing detailed XSLT can be a time-consuming and tedious task. Below is just a snippet of the XSLT code that creates the view illustrated above:

        <xsl:template name="dvt_1.body">
            <xsl:param name="Rows"/>
            <xsl:param name="FirstRow"/>
            <xsl:param name="LastRow"/>
            <xsl:for-each select="$Rows">
                <xsl:variable name="KeepItemsTogether" select="false()"/>
                <xsl:variable name="HideGroupDetail" select="false()"/>
                <xsl:variable name="GroupStyle" select="'auto'"/>
                <xsl:if test="true()">
                    <xsl:if test="not($HideGroupDetail)" ddwrt:cf_ignore="1">
                        <tr>
                            <xsl:attribute name="style">display:auto;<xsl:if test="position() mod 2">
background-color: #EEF0C6;</xsl:if></xsl:attribute>
                            <td class="ms-vb" style="font-family: Arial; font-size: 10pt; color:#333399">
<xsl:value-of select="@ProductName"/></td>
                            <td class="ms-vb" style="font-family: Arial; font-size: 10pt; color:#333399">
<xsl:value-of select="format-number(@Quantity, '#,##0.#;-#,##0.#')"/></td>
                            <td class="ms-vb" style="font-family: Arial; font-size: 10pt; color:#333399">
<xsl:value-of select="ddwrt:FormatDate(string(/dsQueryResponse/Rows/Row/@OrderDate) ,1033 ,1)"/></td>
                        </tr>
                    </xsl:if>
                </xsl:if>
            </xsl:for-each>
        </xsl:template>

With FrontPage 2003, you never have to look at the XSLT code if you don't want to (although you can if you want more control). Instead, you can work with an array of visual tools that enable you to apply styles in the same manner as you would apply formatting in previous versions of FrontPage and in other Microsoft Office System programs.

In addition, special tools are included such as the ability to use conditional formatting, which allows you to apply styles according to conditions. For example, the alternating row colors in Figure 1 were achieved by applying a rule regarding whether the row number was even or odd (see Figure 2).

Figure 2. The Condition Criteria dialog box is used for setting conditional formatting

ASP.NET Tools

In addition to continuing support for the popular Microsoft ASP technology, FrontPage 2003 introduces powerful new tools for creating ASP.NET database solutions. These tools are incorporated into the FrontPage Database Results Wizard and Database Interface Wizard. You now have a choice of ASP or ASP.NET for connecting with your data source.

FrontPage 2003 uses the power of ASP.NET to its greatest extent. For the first time, you can develop an ASP.NET database-driven Web application in FrontPage without the use of FrontPage Server Extensions or FrontPage Components. FrontPage 2003 uses ASP.NET server controls, such as the DataGrid and custom User Controls (template interface components that are embedded in Web Forms), to create its database-connective pages. FrontPage uses the object model of these controls to read and modify their properties. As a result, you can use the many visual tools that FrontPage provides for productivity and, if you need more granular programming control, you can edit the source code.

FrontPage 2003 offers a full spectrum of database-driven solutions with ASP.NET, including the ability to create pages that display filtered result sets, search forms, and forms for inserting new records or editing and deleting existing records. FrontPage can also set up an entire database-driven Web application for you from scratch. From that starting point, you can customize and build on it as much as you need.

Productivity Tools

Visual tools and wizards aren't just for non-developers. Professionals need all the productivity tools they can lay their hands on. FrontPage comes with a variety of tools that were built with the professional developer in mind.

Advanced Find and Replace

FrontPage 2003 has the most customizable "find and replace" capability ever built into a version of FrontPage. Not only can you find and replace text throughout your Web site, but you also have total control over how FrontPage filters content. You can use regular expressions for added flexibility and create searches that distinguish between HTML elements and text.

You can find and replace text or HTML that spans multiple lines, or set up rules and regular expressions to filter the content that you find and/or replace. You can also specify which parts of your Web site to search. You can even save your search settings and rules as .fpq query files so that you can use them in the future or distribute them to design partners when sweeping changes need to occur. For example, you could save a query that provides a missing "alt" attribute for a Web site that must adhere to accessibility standards and have all of your partners run it on their work as well.

Figure 3. The drop-down list indicates the variety of text strings that you can find and replace

HTML Rules are conditional rules that you can use or create. An HTML Rule indicates whether or not a given HTML tag or its contents matches your search criteria based on a highly configurable set of conditions. For example, you can specify that if a given tag has a certain attribute, it is or is not a match. You can specify whether the tag is contained inside another tag, such as a font tag that is inside a table cell.

Using the HTML Tags tab of the Find and Replace dialog box, you can search for specific HTML tags and specify what sort of action to take when the tag is a match (see Figure 4). You can set an attribute of a specific HTML tag for every page within a Web site. You can also remove all occurrences of the tag and its contents or remove only the contents and leave the tags.

Figure 4. The drop-down list indicates the breadth of the HTML Find and Replace options

Code Snippets

At some point, every developer begins to build a library of code that he or she can reuse. FrontPage 2003 has a built-in code snippet library that you can use to build your collection of custom code snippets. It comes with a number of common HTML code blocks such as a JavaScript script block, a Microsoft Visual Basic® Scripting Edition (VBScript) script block, several DOCTYPE tags, and some metatags. But you can add, modify, and remove custom code snippets as much as you wish.

Inserting a code snippet is as simple as pressing CTRL+ENTER when in Code view. This brings up a list of code snippets from which you can select a piece of code, or you can type the name of the code snippet to insert it in your page (Figure 5).

Figure 5. The code snippet library places commonly used pieces of code at your fingertips

IntelliSense

FrontPage 2003 now includes IntelliSense® technology, which provides auto-completion of commands and context-sensitive lists of alternative code elements such as HTML attributes. FrontPage 2003 provides IntelliSense for HTML and XSLT, as well as for several scripting languages including JavaScript and VBScript. This enhances productivity and helps to prevent typographical errors in your code.

Quick Tag Tools

The FrontPage 2003 Quick Tag tools—the Quick Tag Selector and the Quick Tag Editor—give you quick access to individual tags, as well as a means of navigating up and down a hierarchy of nested tags (such as table cells inside table rows inside tables).

Whether a page is in Code view, Design view, or Split view when the cursor is inside a tag, the Quick Tag Selector displays that tag and all tags containing that tag in hierarchical order at the top of the window. You can use this to analyze the HTML structure of your document, as well as to locate and quickly edit any tag in the Quick Tag Editor.

When you place the pointer over one of the tags displayed in the Quick Tag Selector, an arrow appears to the right of the tag name, allowing you to select from one of several editing options such as editing the tag, wrapping the tag inside another tag, inserting HTML, removing the tag, selecting the tag, selecting the tag's contents, or opening the property dialog.

Figure 6. The Quick Tag Editor

The Quick Tag Editor presents a floating window in which you can directly edit the tag or select from several alternate options such as editing the tag (as shown in Figure 6), wrapping the tag inside a new tag, or inserting HTML inside the tag. FrontPage 2003 provides IntelliSense in the Quick Tag Editor just as when you edit a tag directly in Code view.

The power of these FrontPage tools is even more evident when you use them in combination, such as using the Quick Tag Selector in Split view. You can select an object in the Design window of Split view an image, paragraph, or table, for example and the associated code is automatically selected in the Code window.

Powerful New Features

FrontPage 2003 includes several new features that provide greater extensibility and give developers more granular control, including features that address the expressed desires of developers who have used FrontPage over the years.

Dynamic Web Site Templates

Often, Web sites have a consistent design theme across many pages, with design elements that are used in the same way on every page in the Web site, or at least in every page in some logical section of a Web site.

FrontPage 2003 introduces its most extensible and versatile design solution to date with Dynamic Web Templates. A Dynamic Web Template is a do-it-yourself page layout over which you have total control, both in the design and deployment of your Web site. You can create as many Dynamic Web Templates as you wish, and use one or more of them in a Web site.

Creating a Dynamic Web Template is as easy as creating a Web page. You start with a Web page and save it as a Dynamic Web Template (.dwt) file. You can define editable regions, which allow you to control which regions of the page can be edited when the Dynamic Web Template is used in another page. You can define as many editable regions in the page as you wish, and assign a name to each one (see Figure 7).

Figure 7. In a Dynamic Web Template, you can define editable regions

To apply a Dynamic Web Template to any page

From the Format menu, click Dynamic Web Template, and then click Attach Dynamic Web Template.
Select the desired .dwt file from the list of available Dynamic Web Templates in your Web.

Similar to the Include HTML Web component and shared borders, when you make changes to a Dynamic Web Template, you can apply those changes across an entire Web site or to any page attached to that template.

Web Packages

Web Packages are bundled collections of files that you can use as the starting point for a Web site. They can include Web pages, templates, themes, graphics, and other Web components. You can import a Web Package for use in a new Web site or export it for use as a starting point for other Web site projects (see Figure 8).

Figure 8. The Export Web Package dialog box

As you can see in Figure 8, when you create a Web Package, you select which pages or elements from your Web site that you want included in the Web Package. When you select an element that has dependencies, such as a Web page that contains graphics, the Export Web Package dialog box automatically identifies and includes them in the Web Package. You can use this dialog box to check the dependencies of various components in a Web Package.

FrontPage 2003 comes with ready-made Web Packages for use with SharePoint sites, including an out-of-the-box "blog" (Weblog) site and an issue-tracking site, both of which can be customized in FrontPage to match your needs.

Web Packages make deployment of ready-made Web site solutions fast and easy.

Accessibility Checker

Accessibility, the design of HTML documents for accessibility by people with disabilities, is such an important aspect of the Internet today that the Worldwide Web Consortium (W3C) has adopted a set of guidelines for designing accessible Web sites. The Web Content Accessibility Guidelines (WCAG) closely follow Section 508 of the U.S. Rehabilitation Act.

For some Web sites, adherence to the WCAG is not optional; it is a necessity. FrontPage 2003 has tools for evaluating the accessibility of an entire Web site, identifying elements that violate the guidelines, and finding ways to correct the violations. The accessibility checker provides all of this functionality in a single dialog box.

To access the accessibility checker on the Tools menu click Accessibility. You can****use the accessibility checker to check a single page or an entire Web site. As you can see in Figure 9, the accessibility checker checks for varying levels of accessibility and specifically for adherence to Section 508 of the U.S. Rehabilitation Act. You can check for errors or warnings, and you can add a manual checklist.

Figure 9. The Accessibility dialog box

Once the Accessibility dialog box completes a check for accessibility issues, you can double-click on each issue to navigate to the location of the HTML element having the issue. The Accessibility dialog box remains on top while you make your changes, enabling you to move easily to the next issue when finished with the current one.

FrontPage 2003 can also generate a manual checklist in the form of an HTML report (as shown in Figure 10) with checkboxes for keeping track of your changes.

Figure 10. An HTML Accessibility report

Conclusion

FrontPage 2003 is a high-power Web development application that was specifically designed for professional Web developers. FrontPage 2003 has tools that can automate the creation of Web solutions. These solutions take advantage of the latest cutting-edge technologies such as SharePoint Products and Technologies, ASP.NET, XML, and XSLT, as well as international standards for such things as accessibility and adherence to other HTML standards. These tools help the professional Web developer to optimize the time spent on development of Web sites and Web applications.

About the Author

Kevin Spencer started his Internet Web application programming business, Site Design by TAKempis, in 1996. He is a senior application developer for AutoMark Marking Systems, and develops Microsoft .NET Framework classes for AutoMark's 4,000+ Web applications.