Using Microsoft Office FrontPage 2003 to Customize SharePoint Products and Technologies Sites

Archived content. No warranty is made as to technical accuracy. Content may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Published: June 9, 2004

This is a sample chapter from the Microsoft SharePoint Products and Technologies Resource Kit. You can obtain the complete resource kit (ISBN 0-7356-1881-X), which includes a companion CD-ROM, from Microsoft Press.

Customizing your SharePoint site using Microsoft Office FrontPage 2003 can be done without coding, a degree in Web design, experience with XML or XSLT, or an understanding of database technologies. The WYSIWYG authoring environment combined with dynamic Web templates, auto-updating data views, prebuilt Web Parts, and Web connectors and built-in conditional formatting capabilities streamline the Web design and development process. With FrontPage 2003, site administrators and even end users themselves can rapidly extend and customize their SharePoint sites in hours—rather than days or weeks.

The combination of design and coding tools in FrontPage 2003 provides more control and greater flexibility over the layout of text, tables, navigation elements, graphics, Flash content, and other design elements on a Web page. Plus, you can apply fully customized themes and templates to design the SharePoint site you want.

On This Page

SharePoint Products and Technologies Fundamentals
Browser-Based Customization
How to Edit Sites in FrontPage 2003
Caveats to Editing SharePoint Portal Server Sites in FrontPage 2003
Most Common Changes Made in FrontPage 2003
Advanced Customization
Working with the Data Source Catalog
Working with Data
Windows SharePoint Services-Based Lists as Data Views
Using Reports to Measure Site Use and Performance
Summary

SharePoint Products and Technologies Fundamentals

There are some fundamental SharePoint Products and Technologies concepts that serve as the building blocks for customizing websites.

Web Parts

Web Parts are a major asset of SharePoint Products and Technologies. Web Parts are modular units of information that can be inserted into pages. Third parties or corporate developers can develop Web Parts for SharePoint Lists, and document libraries can be inserted into pages as Web Parts from within FrontPage 2003, or even from the browser. Web Parts used in the website—such as Announcements, Contacts, and Shared Documents—can be accessed from the Web Parts task pane, as can Web Parts located on the server and online in the Online Gallery of Web Parts.

Lists

Because Microsoft SharePoint Portal Server 2003 is built on Microsoft Windows SharePoint Services, you can add both predesigned and custom lists to sites created with SharePoint Products and Technologies. For example, you can create a picture library to share a collection of digital pictures or create an issue tracking list to maintain a history on a specific issue. You can also use calendar views for any SharePoint list that has a date and time column. In addition, you can add attachments to list items, including HTML pages, documents, and images.

SharePoint lists are collections of information you can share with visitors to your website. Lists can contain a variety of data types, including text, numbers, hyperlinks, pictures, and more. Default lists on Windows SharePoint Services sites include Contacts, Events, Links, and Announcements. You can easily create new lists from various ready-made list templates or even custom lists by using the FrontPage 2003 List Wizard. Lists you create are made available to others on your site and also in the Web Parts task pane. The primary reason for putting information in Windows SharePoint Services lists is that the lists are updatable by authorized users from their browsers, making it easy for content owners to keep information on the site current.

Libraries

SharePoint libraries are central repositories for files, including Word documents, Excel spreadsheets, PowerPoint presentations, pictures, forms, and more. You can think of libraries as file shares that are exposed within Web pages. Users can upload files to SharePoint libraries from their browser, and hyperlinks are automatically created to the files contained in them—no more waiting for a Webmaster to create a link to a document you post to a file share.

Form libraries are new with Windows SharePoint Services. Form libraries are used to store XML-based business forms, such as expense reports or travel requests. Form libraries are very powerful when combined with an XML editor such as Microsoft Office InfoPath. With InfoPath, you can create a form and then associate that form with the form library so that InfoPath opens with the appropriate form when a user clicks Fill Out This Form. When the user is finished completing the form and then saves it, it is automatically stored in the form library. Even more importantly, you can designate which fields from the form to display in columns in the form library, thereby making the form data available to visitors to the site.

Areas

Default portal sites created with SharePoint Portal Server 2003 contain a top-level site and a number of subordinate sites. Areas are new in SharePoint Portal Server 2003 and are a great way to organize information on a portal site. The portal site is a hierarchy of rich subordinate sites that enable content managers to add lists, images, and documents to one or more areas. Content managers can approve or reject items that are submitted to the area. In addition, security can be managed at the area level, allowing only specific users to make contributions or changes to the area.

Personal Sites

SharePoint Products and Technologies make it easy for users to store, find, and retrieve information and documents. My Site is a personal Windows SharePoint Services site that provides personalized and customized information for each user for quick access to links to documents, people, or websites, as well as alerts to track changes to content within the portal site and the organization. From My Site, you can also update your user profile and share links with other portal site users.

Views

Views are rules for how to present the data in a Web Part. By default, each list or library has a default view, and that view can be changed from the browser. The default view as defined in the browser is also the default view inserted into a page with FrontPage 2003. Views can be used to present data that is sorted by one or two fields, or even filtered according to a series of criteria that you set.

The true power to customize a site with FrontPage 2003 can be exploited by inserting views of data into pages where needed. For example, while you might have a complete staff list that includes address, title, areas of specialty, and more on an e-mail list page, you can reuse that staff list by presenting a view that includes only the name and e-mail address. Additionally, on a regional e-mail address page you could present a view of that same data that includes only the name and phone number for team members in a specific region. The ability to reuse data across your website saves time and reduces errors because you no longer have to duplicate information to use it in different places.

Browser-Based Customization

SharePoint Products and Technologies make updating sites and their content from the browser easier than ever. As you learn to customize SharePoint sites, you will become accustomed to editing some things from the browser and others from within FrontPage 2003. Here is a brief list of the items you will probably continue to edit from the browser even after you become proficient at customizing sites with FrontPage 2003:

Creation of lists, document libraries, discussions, and surveys.

• Creation of content Web Parts is most commonly done via the browser. You can create content Web Parts from your site at https://<myserver>/_layouts/1033/create.aspx.

List or document library contents.

• Adding and editing content contained inside of Web Parts on the site is done via the browser. You can even edit content in a datasheet view (such as a spreadsheet) to speed the editing of existing content and the addition of new content.

Changing fields in lists, document libraries, discussions, and surveys.

• If you want to add, reorder, remove, or add fields to lists or document libraries, you can certainly do these things via the browser.

Personal views.

• SharePoint Products and Technologies users can alter the shared view of a page that everyone sees to create views of a Web page that only they can see. These personal views can include different or rearranged Web Parts, and they do not have to include the Web Parts that everyone else sees in the shared view. These personal views are created and managed in the browser by each user.

How to Edit Sites in FrontPage 2003

Everything that can be done with SharePoint Products and Technologies from a browser can also be done from within FrontPage 2003 and much more. There are very strong capabilities in FrontPage 2003 that help the user avoid going back and forth between the browser and FrontPage 2003 to customize a site. But, first we need to get the site open in FrontPage 2003.

Opening a Site

Opening a site in FrontPage 2003 is easy. All you need is the Web address or URL of the site you plan to edit, as well as a user name and password (if necessary) and sufficient permissions to edit the site. Contact your server administrator if you have questions about the website address or permissions to edit the site.

To open a SharePoint site in FrontPage 2003

1. With FrontPage 2003 open, click Open Site (shown in Figure 32-1) on the File menu.

   

   Figure 32-1. Open Site menu

   The Open Site dialog box (shown in Figure 32-2) is displayed.

   

   Figure 32-2. Open Site dialog box

2. In the Site name box, type the website address (the URL) of your website. Examples include https://localhost, https://servername, or https://www.example.com. Then click the Open button. If prompted, provide the user name and password for opening the website in FrontPage 2003.

     You can also open a site in FrontPage 2003 by browsing to it in Internet Explorer, and then choosing Edit With Microsoft Office FrontPage from the File menu or clicking the Edit button on the Standard Buttons toolbar. FrontPage 2003 will open not only the current page but the entire SharePoint Products and Technologies portal site that contains the current page.

Becoming Familiar with FrontPage 2003

The FrontPage 2003 user interface gives you easy access to the tools you need. The left part of the screen allows you to view your website by folder list or by navigation pane (shown in Figure 32-3).

Figure 32-3. Internet Explorer Edit With Microsoft Office FrontPage 2003 toolbar button

The Folder List displays all the folders and files in your site. You can move or rename files or folders, and FrontPage 2003 will prompt you to automatically fix all the hyperlinks. When you view your site in the navigation pane, you can see the navigational structure and link bars in your site.

The Folder List also holds some significant SharePoint Products and Technologies capabilities. Right-click on any document library or on any list (found in the Lists directory). A dialog box that contains five tabs—General, Settings, Fields, Security, and Supporting Files—is displayed. Using these tabs is a very efficient way to make changes to these properties.

The middle of the screen shows the page that is currently being edited, with page tabs (shown in Figure 32-4) available to make it easy to switch to other opened pages in your site.

Figure 32-4. Page tabs

The Web Site tab at the top of the editing pane is used to give you options for managing your website, such as viewing the remote website, reports, navigation, hyperlinks, and tasks.

The bottom of the screen allows you to switch between Design, Split, Code, and Preview page views. (See Figure 32-5.)

Figure 32-5. Design, Split, Code, and Preview page views

Design View.

• Design view is the WYSIWYG editing mode. This view is the one used most often by FrontPage 2003 users, even those who are experts at coding HTML. The reason is simple: the buttons and menu options allow you to create Web pages faster. For example, creating a table in a text editor requires a lot of typing. Creating a table in the FrontPage 2003 Design view by clicking the Table button takes only a few seconds.

Split View.

• Split view allows you to see the HTML code in one part of the window and the WYSIWYG view in another part. When you make a change in the WYSIWYG window, the HTML code is automatically updated, and vice versa. The Split view is a great tool for users who know HTML and want to have the best of both worlds—that is, fast coding in WYSIWYG mode with precision control of the HTML code at the same time.

Code View.

• Code view allows you to see and edit the HTML code for a page. You can continue to use most menu options, but you must be familiar with HTML coding to be productive in this view.

Preview View.

• Preview view allows you to see what your Web page will look like in the browser before saving your page. This view is particularly handy when you have made a change that you are not sure you want to keep.

    New tools in FrontPage 2003 make creating code in Code view faster than ever. The new Code View menu in the Edit menu and shortcut keys in FrontPage 2003 make creating and editing code fast and easy. You can use the Code View menu and the corresponding keyboard shortcuts to quickly increase or decrease indents, select a tag or block, find a matching tag or block, insert a tag or comment, and more. In addition, new Intellisense technology makes code completion automatic if desired, and Code Snippets make it easy to reuse commonly used code among website editors.

Instant Updates

Many Web developers are accustomed to publishing files or sending them to a server via an FTP program when they are finished making their updates. When FrontPage 2003 users open a website created with SharePoint Products and Technologies, the changes they make are updated on the server immediately after they save the page they are working on. Therefore, FrontPage 2003 users simply need to save their pages when they are finished editing them. Saving pages is accomplished by clicking the Save option in the File menu.

Caveats to Editing SharePoint Portal Server Sites in FrontPage 2003

There are some differences in how websites created with Windows SharePoint Services and how portal sites created with SharePoint Portal Server 2003 are edited with FrontPage 2003. This section outlines some of the more important differences.

Web Part Display

Web Parts in Windows SharePoint Services sites are displayed in FrontPage 2003 with live data. However, some Web Parts in portal sites created with SharePoint Portal Server 2003 might be displayed with static previews that do not include live data.

Moving or Backing Up Websites

Portal sites created with SharePoint Portal Server 2003 should be moved or backed up by using SharePoint Portal Server 2003 backup tools instead of using FrontPage 2003 Backup, Restore, or Web Package options. Therefore, these features are disabled by default in FrontPage 2003 when editing sites created with SharePoint Portal Server 2003.

Working with Areas and Sub-Areas

SharePoint Portal Server 2003 sites can include Areas and Sub-Areas, which can be nested many levels underneath the root web. When opened in FrontPage 2003, all areas and subareas are represented as subordinate sites, and all are displayed underneath the root of the site. For example, if Area1 is below the root-level site and Area11 is below Area1, Area11 is simply a subsite of the root-level site and not a subsite of the Area1 site.

FrontPage 2003 users are not able to delete an Area or Sub-Area in a site created with SharePoint Portal Server 2003. When the root site of a site created with SharePoint Portal Server 2003 is open in FrontPage 2003, it is possible to create subordinate sites under that root. Subsequently, subordinate sites under those newly created subordinate sites are also possible, thus nesting them multiple levels deep. Yet Areas and Sub-Areas of the portal, represented as subordinate sites in FrontPage 2003, cannot have nested subordinate sites. When an Area or Sub-Area is open in FrontPage 2003, the Subordinate Site option seen when you right-click on a folder in the Folder List and then click New is unavailable. Visually, in the FrontPage 2003 user interface, you cannot differentiate between a subordinate site and an Area; both are represented with the same folder icon.

Editing Personal Sites

One of the biggest advantages to My Sites in SharePoint Portal Server 2003 is that each user browses to the same URL but each sees his or her own unique content. SharePoint Portal Server 2003 does this by assigning a unique GUID to each user and storing customization and content options for each GUID. The My Site template is shared by all users, so if a FrontPage 2003 user edits the default.aspx page in the My Site website, the change would affect all users with My Sites. The easiest way to open the My Site default.aspx page in FrontPage 2003 is by browsing to it in Internet Explorer, and then choosing Edit With Microsoft Office FrontPage from the File menu or clicking the Edit button on the Standard Buttons toolbar.

For example, if a Web designer opens the My Site Web in FrontPage 2003 and then replaces the logo in the upper left corner of default.aspx with her own image, all users on the portal site will see that new image when they browse to My Site. This has the benefit of allowing portal site administrators to use FrontPage 2003 to easily make changes to the My Site template that affect all existing and new users’ My Sites.

Changing Styles

The look and feel of a portal site created with SharePoint Portal Server 2003 is determined by the Cascading Style Sheet (CSS) files that define the selectors or styles to apply to elements in the portal site. The style sheets used by SharePoint Portal Server 2003 sites are located by default on the server in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\Layouts\1033\Styles folder. The two style sheets used by default are the sps.css and ows.css files. (Note that 1033 represents the language ID for U.S. English; replace this number with the appropriate language ID if you aren’t using U.S. English versions of SharePoint Portal Server 2003.) These files are not publicly accessible and require administrative access to modify them.

Because you might not have administrative access to modify style sheets on the server, you can instead create a new style sheet and then associate the pages on the site you are authorized to edit with that new style sheet. If the new style sheet includes definitions for formatting choices for the same selectors that are in the server’s style sheets, the new style sheet formats will be used. This is because if multiple style sheets are applied to a site or page, the selectors in the one that is applied last are used.

The easiest way to create a new style sheet is to start with one of the existing style sheets and then make edits to it. You can open a copy of the server-based style sheets in FrontPage 2003 by clicking Open on the File menu, typing the URL for the style sheet in the File Name box, and then clicking Open.

  The default URL for sps.css is https://<myserver>/_layouts/1033/styles/sps.css, and the URL for ows.css is https://<myserver>/_layouts/1033/styles/ows.css.

The style sheet opens in FrontPage 2003. Save the style sheet with a new name in the portal site opened in FrontPage 2003 by clicking Save As on the File menu. Make edits to the style sheet as desired, and then save the new style sheet. Next, browse to your website created with SharePoint Portal Server 2003 and then click the Site Settings link. To apply the new style sheet to other SharePoint Portal Server 2003 areas and subordinate sites, you should open the site in FrontPage 2003 and use the Style Sheet Links dialog box, which can be selected from the Format menu.

  If you have a custom Theme you want to apply to a site created with SharePoint Portal Server 2003, you can browse to the style sheet it uses (at the default location of https://<myserver>/_layouts/1033/styles/ows.css), save it with a new name, and then apply it to the SharePoint Portal Server 2003 site by using the technique just described.

Identifying the selectors that correspond to the elements to change in the site is made easier with a CSS Selector tool that allows you to hover your mouse over an area on a page and then see a ToolTip that displays the name of the selector used in that area. Each page you want to use the CSS Selector tool in should have the following modifications:

1. Replace the body tag with the following code:

   <body marginwidth="0" marginheight="0" scroll="yes" onmouseover="classInfo();">

2. Add the following code to the <body> section of your page:

   <script language="vbscript">
   

sub classInfo()   if window.event.srcelement.classname <> "" then     stsclass.innertext =       window.event.srcelement.classname   else     stsclass.innertext=""   end if end sub </script> <div>   <a id="stsclasstitle" width="25">   <font face="Arial">Classname</font></a>   <a id="STSclass" width="275">   <font face="Arial Black">&#xa0;</font></a> </div>

3. Preview the page in the browser. Move your cursor over the style you want to identify. The Selector will be displayed at the top of the page.

FrontPage 2003 Features Disabled when Editing a SharePoint Portal Server 2003 Site

Some features in FrontPage 2003 are disabled by default when you open a portal site created with SharePoint Portal Server 2003. These features are disabled so that they do not conflict with the way that portal sites are implemented.

Publishing

FrontPage 2003 users are accustomed to using the Publish feature to move pages or websites from one location to another. However, SharePoint Portal Server 2003 pages and sites should be moved using the SharePoint Portal Server 2003 backup command-line utility instead of the FrontPage 2003 Publish functionality. (For more information, see Chapter 18, “Managing SharePoint Portal Server 2003.”)

  The commands affected are Publish Site (on the File menu), Import File From Site (on the File menu), Remote Web Site (on the View menu), and Publish Selected Files (when you right-click a file or files in the Folder List).

Navigation

Portal sites created with SharePoint Portal Server 2003 have their own navigational structure and are edited using SharePoint Portal Server 2003 tools. Therefore, you cannot insert FrontPage 2003 link bars or navigation bars into sites created with SharePoint Portal Server 2003 and maintain the integrity of the existing SharePoint Portal Server 2003 navigation.

  The commands affected are Navigation (on the Insert menu) and Link Bars (when you click Web Component on the Insert menu).

Navigation View

Navigation view is managed by Windows SharePoint Services, and because SharePoint Portal Server 2003 uses its own navigational scheme, this view is not used when editing portal sites created with SharePoint Portal Server 2003.

  The commands affected are Navigation (on the View menu), the Navigation button (when you click the Web Site tab), and the Navigation button at the bottom of the Folder List.

Themes

FrontPage 2003 cannot be used to apply Themes to portal sites created with SharePoint Portal Server 2003, nor can themes be applied to individual pages in those portal sites. Themes should instead be applied to portal sites created with SharePoint Portal Server 2003 by clicking Change Portal Site Properties And SharePoint Site Creation Settings on the Site Settings page of the SharePoint Portal Server 2003 site and entering the Custom Cascading Style Sheet location.

  The commands affected are Apply As Default or Apply To Selected Page(s) (when you click Theme on the Format menu).

FrontPage 2003 Features to Understand when Editing a SharePoint Portal Server 2003 Site

With some features in FrontPage 2003, you can experience unanticipated results when editing portal sites created with SharePoint Portal Server 2003, so it is recommended that you understand these features.

Optimize HTML

FrontPage 2003 Optimize HTML is a tool that allows you to clean up HTML code by removing comments, white space, unused content, and HTML generated from Word HTML and other tools. Using Optimize HTML on pages in a portal site created with SharePoint Portal Server 2003 will not harm the pages; however, FrontPage 2003 might have difficulty displaying some pages after Optimize HTML has been used on them. Instead, optimize your HTML by hand.

  The command affected is Optimize HTML (on the Tools menu).

Dynamic Web Templates (DWT)

FrontPage 2003 allows you to create dynamic page templates that define regions that are editable by users. These templates are called Dynamic Web Templates (DWT), and they stay attached to pages even after they are created to make updating many pages at one time fast and easy. Most commonly, DWTs use Themes or attach to an external style sheet to define formatting for the pages attached to them. Because SharePoint Portal Server 2003 sites include links to style sheets used across the portal site, applying a DWT to a portal site very likely would replace the links to the SharePoint Portal Server 2003 style sheet, which could cause formatting problems on the pages attached to the DWT. DWTs can be used without problems on new pages in a portal site. However, because Themes and style sheets are commonly used in conjunction with DWTs, you should fully understand the effect of DWTs on portal sites created with SharePoint Portal Server 2003.

  The command affected is Dynamic Web Template (on the Format menu).

Additional FrontPage 2003 Features that Can Be Disabled when Editing a SharePoint Portal Server 2003 Site

FrontPage 2003 and SharePoint Portal Server 2003 make it possible for you to specify features to disable in FrontPage 2003 when portal sites created with SharePoint Portal Server 2003 are opened in FrontPage 2003.

Template Locations

Disabling features is done by flagging an attribute in an XML file called onet.xml that is associated with each SharePoint Portal Server 2003 template used in a portal site. The attribute in the onet.xml file tells FrontPage 2003 (and other authoring tools) to disable specific features.

To change the list of features and functionality to disable in FrontPage 2003 when SharePoint Portal Server 2003 sites are opened, you will need to edit the onet.xml file that corresponds with each template used on the site. Table 32-1 shows the list of templates used in SharePoint Portal Server 2003 sites, with their locations on the server:

Table 32-1. Default Site Template Locations

Site	Default Template Location on the Server
Root Site	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPS\XML\
MySite (personal sites)	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSMSITE\XML
CompanyNews, External News, PressAnnouncements, and all areas under the News area	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSNEWS\XML
News	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSNHOME\XML
SiteDirectory	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSSITES\XML
Topics	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSTOC\XML
Divisions, HumanResources, Locations, Marketing, Operations, Projects, Resources, Sales, Strategy & Support, and all areas under the Topics area	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSTOPIC\XML
Community Template	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\1033\SPSCOMMU\XML

DisableWebDesignFeatures Example

The attribute that flags FrontPage 2003 to disable features is named DisableWebDesignFeatures, and the list of features to disable follows it in the XML file. Here is a sample onet.xml file:

<Project Title="Team Web Site" ListDir="Lists"
xmlns:ows="Microsoft SharePoint"
AlternateHeader="PortalHeader.aspx"
DisableWebDesignFeatures="wdfbackup;
wdfrestore;
wdfpackageimport;
wdfpackageexport;
wdfthemeweb;
wdfthemepage;
wdfnavigationbars;
wdfnavigationview;
wdfpublishview;
wdfpublishselectedfile;
wdfopensite">

The example shows that features are being disabled (as shown by the inclusion of the DisableWebDesignFeatures attribute), and the list of features disabled follows. Table 32-2 shows the list of features you can disable:

Table 32-2. DisableWebDesignFeatures List

Feature to Disable	Value in onet.xml	Command Blocked inFrontPage 2003	Command Type	Result
Backup site	wdfbackup	Backup (when you clickServer on the Toolsmenu)	Menu command	Command disabled
Restore site	wdfrestore	Restore (when you clickServer on the Toolsmenu)	Menu command	Command disabled
Web Pack age import	wdfpackageimport	Import (when you clickPackages on the Tools menu)	Menu command	Command disabled
Web Pack age export	wdfpackageexport	Export (when you clickPackages on the Tools menu)	Menu command	Command disabled
Theme site	wdfthemeweb	Apply As Default (when you click Theme on the Format menu)	Task pane, contextmenu	Command disabled
Theme page	wdfthemepage	Apply To Selected Page(s) (when you clickTheme on the Format menu)	Task pane, contextmenu	Command disabled
Insert Navigation	wdfnavigationbars	Navigation (on the Insertmenu) and Link Bars (when you click WebComponent on the Insert menu)	Menu command	Command disabled
Show Navigation View	wdfnavigationview	Navigation (on the Viewmenu)	Menu command	Command disabled
Show Navigation View	wdfpublishview	Navigation button (when you click the WebSite tab)	View selector button	Show alert
Show Navigation View	wdfpublishview	Navigation button at the bottom of the Folder List.	View selector button	Show alert
Show remote site view	wdfpublishview	Publish Site (on the Filemenu)	Menu command	Command disabled
Show remote site view	wdfpublishview	From Site (when you click Import on the Filemenu)	Dialog box button	Button disabled
Show remote site view	wdfpublishview	Remote Web Site (on the View menu)	View selector button	Show alert
Publish selected file	wdfpublishselected file	Publish Selected Files (when you right-click a file in the Folder List)	Folder pane, context menu	Command disabled
Open Site	wdfopensite	Open Site (on the Filemenu)	Menu command	Show alert
New subordinate site	wdfnewsubordinate site	Subordinate Site (when you right-click a folder in the Folder List and then click New)	Folder pane, context menu	Command disabled

  At times, you might want a site created with SharePoint Portal Server 2003 to be locked down completely so that it cannot be edited in FrontPage 2003. For example, if you have processes and procedures for staging content on a different server and then publishing it when approved, you can restrict the site from even being opened in FrontPage 2003. Do this by including the wdfopensite value in the onet.xml file.

Most Common Changes Made in FrontPage 2003

This section includes instructions on how to make the most commonly needed changes in Microsoft Office FrontPage 2003.

Web Page Changes

FrontPage 2003 aids us in customizing our Web pages. The next several sections describe only some of these changes.

Adding Text

Adding text to pages in a SharePoint site is as simple as clicking on a region of the page outside of any Web Part Zone and then typing and formatting the text as desired.

  Some pages are formatted by using tables, and you might have to insert a new table row or column to create an area that is editable. You can insert a table row or column by clicking on the Table menu.

Adding Images

Adding images to your site is also straightforward.

To open a SharePoint site in FrontPage 2003

1. First you should make sure that the images are in your website. You can add images to your website by clicking the Import option on the File menu.

2. Once the files are in your website, make sure that the page you want the image on is open in Design View, and then you can simply move the image from the Folder List onto your page by performing a click-and-drag operation.

Deleting images is as easy as clicking on the image you want to delete and then pressing the Delete key.

  If you plan to insert another image after you delete a logo, press the Enter key after you press the Delete key. That will insert a space you can move your new image into by performing a click-and-drag operation.

Changing Images

After you add a new image to your site, you might want to make some changes to the image, such as cropping or resizing (and then resampling to reduce the size of the file) or rotating images. The Pictures toolbar is the key to making these changes.

Click on an image to open the Pictures toolbar. (See Figure 32-6.) If you do not see it, click Toolbars on the View menu and then click Pictures.

Figure 32-6. Pictures toolbar

The Pictures toolbar includes the functions listed in Table 32-3.

Table 32-3. Pictures Toolbar Functions

Image	Description
	Click to insert a picture from a file.
	Click to add text. You can insert text on top of a picture except when adding text to a .gif file. The text can be added, but it doesn’t display in Internet Explorer.
	Click to automatically create a thumbnail image to place on the page. When the user clicks the image, she is sent to the large version of the image.
	Click to position the image in a specific spot on the page.
	Bring the image forward.
	Send the image backward.
	Flip the image.
	Change the contrast on the image.
	Change the brightness of the image.
	Crop the image.
	Make a color in the image transparent. Use this when you want the background color or image to show through.
	Click to change the color of the image.
	Click to add a bevel border around the image.
	Click to select an image or a portion of an image.
	Click to add hotspots to image. The image and the hotspots make up an image map. When a visitor clicks on that region of the image, he is sent to a different page or place on the page.
	Click to make hotspots visible on the image.
	Click to restore an image to where it was before you started changing it.

You can use these functions to crop, rotate, or colorize images, or even turn them into image maps.

Adding Pages

You will create a new Web page for any number of reasons, such as for consolidating multiple Web Parts for easy viewing or hosting common Web Part content in a different format.

To add a new page to an existing SharePoint site

1. With a SharePoint site open in FrontPage 2003, click the Page option (shown in Figure 32-7) of the Create a new normal page button on the Standard FrontPage 2003 toolbar.

   

   Figure 32-7. Page option

     Alternatively, you can click the New option from the File menu and then click the More Page Templates link.

   The Page Templates dialog box (shown in Figure 32-8) is displayed.

   

   Figure 32-8. Page Templates dialog box

2. Choose a template from one of the four tabs, and click the OK button.

     As you click on each template, notice the Description on the center right of the dialog box below Options and above Preview. It can be very helpful in choosing the correct template. Below that there is a preview of how the page will look.

   If a Web Part Page template was chosen, a new page is created using the chosen template, and a new tab labeled new_page_1.aspx is added to the top of the editing pane. The file extension will vary if another type of template is chosen.

Lists and Document Library Views

One of the most commonly asked questions is how to change the way lists are viewed, such as changing the fields displayed and the sort order of list items, when you insert a List View Web Part (LVWP) into a page. The granularity within FrontPage 2003 is finer than can be achieved in a browser. Additionally, many users want to be able to insert these LVWPs in other pages in their site or insert additional lists or library views on their home page. This section describes how to make these changes.

Changing Fields Displayed in Lists

When you insert an LVWP into a page, it automatically displays data from specific fields in the list. For example, inserting the Announcements LVWP into a page by using the browser displays the announcement title, submittal date and time, submitter display name, and first few lines of the body for all recent announcements (shown in Figure 32-9) by default.

Figure 32-9. Sample Announcements List View Web Part

Incidentally, inserting the same Announcement LVWP into the page by using FrontPage 2003 will result in a slightly different default view that includes only the Title and Modified fields and a Full Toolbar. No difference in functionality results, just a different default.

The default fields might be fine for some applications. But SharePoint Products and Technologies let you change the columns displayed by the LVWP to any List View Page previously defined for the list. In fact, choosing the Edit The Current View link when modifying an LVWP in the browser, using the Data View Details task pane for the LVWP in FrontPage 2003, or choosing the Properties option from a list or library folder in the Folder List in FrontPage 2003 provides the ability to choose any of the fields on the list we would like to see displayed. None of these methods requires the creation of a separate List View Page.

To change the fields displayed in an LVWP by using FrontPage 2003 using the Data View Details task pane

1. From the page that contains the LVWP in FrontPage 2003, right-click the LVWP, and choose List View Properties from the menu to open the Data View Details task pane. (See Figure 32-10.) By default, it opens docked to the right side of FrontPage 2003.

   

   Figure 32-10. Data View Details task pane

2. Click the Fields link to open the Displayed Fields dialog box. (See Figure 32-11.)

   

   Figure 32-11. Displayed Fields dialog box for the Announcements list

3. To add fields to the LVWP, click on the ones you want in the Available fields box and then click the Add button.

     You can use Ctrl+click to select multiple items, and then click the Add or Remove button.

4. To remove fields from display, click on the ones you want to remove in the Displayed fields box and then click the Remove button. You will notice that some fields cannot be removed from some views. These fields are marked with an asterisk (*).

     Try changing to a different list style if there are fields you want to remove from the view on your page that are not removable. Changing list styles is covered next.

5. You can also change the order of the fields displayed by clicking the field in the Displayed fields box and then clicking the Move Up or Move Down button. When the fields are displayed as you want them, click the OK button. Save your Web page by clicking the Save option on the File menu. The fields displayed are changed.

Changing List Styles

In FrontPage 2003, there are ready-made templates called styles for LVWPs that rearrange the presentation of the list data. You can take advantage of these styles by changing the list style of the LVWP.

To change the list style of an LVWP

1. Right-click on the LVWP, and then click List View Properties to open the Data View Details task pane (shown earlier in Figure 32-11).

2. Click the Style link to open the View Styles dialog box. (See Figure 32-12.)

   

   Figure 32-12. View Styles dialog box, General tab

3. Click the style you would like to use in the HTML view styles scroll box, and then click OK. Save your Web page by clicking the Save option on the File menu. The style for the LVWP is changed.

Changing the Title Bar Displayed

By default, a list view Web Part is displayed with a title bar that contains the name of the list, such as Announcements, Events, or Lists. The title bar also includes a clickable down arrow, located on the far right side, that allows the user to access the Web Part menu.

You can change the display of the title bar of any list. First, right-click on the LVWP in FrontPage 2003, and then click Web Part Properties or double-click anywhere on the LVWP to open the Web Part Properties dialog box. You can then select from one of the following Frame Style values:

Default.

• This setting displays the default title bar display for the list. For Announcements, it includes the title bar and the border.

None.

• This setting removes the title bar and the border that surrounded the list. (See Figure 32-13.) If you choose this option, you might want to add some static text above the list so that the user knows what she is looking at.

  

  Figure 32-13. Announcements list with no title bar

Title Bar And Border.

• This setting displays the title bar and the border.

Title Bar Only.

• This setting displays just the title bar, with no border. (See Figure 32-14.)

  

  Figure 32-14. Announcements list with no border

Changing Toolbars Displayed

By default, an LVWP that is added by using the browser is displayed with the option to add new items at the bottom of the list.

To change the toolbar options for an LVWP

1. Right-click on the LVWP, and then click List View Properties to open the Data View Details task pane.

2. Click the Style link to open the View Styles dialog box. (See Figure 32-15.) Click the Options tab.

   

   Figure 32-15. View Styles dialog box, Options tab

You can select from one of the following toolbar options:

No Toolbars.

• If you deselect the check box to the left of Show Toolbar With Options For, all options for adding or filtering items will be removed. (See Figure 32-16.)

  

  Figure 32-16. Announcements list with No Toolbars

Summary Toolbars.

• Be sure that the check box to the left of Show Toolbar With Options For is selected, and choose Summary Toolbar from the drop-down list. This is the default when the LVWP is added by using the browser. The link option for adding items will be displayed at the bottom of the list.

Full Toolbars.

• Be sure that the check box to the left of Show Toolbar With Options For is checked, and choose Full Toolbar from the drop-down list. A toolbar just under the Title Bar will be displayed with the option to add an item to the list or filter the items in the list. (See Figure 32-17.)

  

  Figure 32-17. Announcements list with Full Toolbars

Changing the LVWP Filter

You can choose to display only a subset of the data in a List or document library by using a filter. For example, the Announcements list might contain postings from many different people. However, if we wanted to display the list with only the announcements that the authenticated user created, we can insert the LVWP into a page and then choose to filter it to display only those records.

To change the toolbar options for an LVWP

1. Right-click on the LVWP, and then click List View Properties to open the Data View Details task pane.

2. Click the Filter link to open the Filter Criteria dialog box. (See Figure 32-18.) By default, the Announcements LVWP added by using the browser already has two filter criteria. The date each announcement Expires cannot be Null and must be Great Than Or Equal To The [Current Date].

   

   Figure 32-18. Announcement list Filter Criteria dialog box

3. Click on the Click here to add a new clause gray bar, and select the field you would like to filter on by clicking the Field Name drop-down box. To limit the list to only the viewing user’s announcements, select Created By.

4. Click the Comparison drop-down box and then select the comparison option you want to use (such as Equals, Greater Than, or Less Than). Equals is chosen for us by default.

5. Click the Value drop-down list and then choose or type the value you want to compare against. For our example, we want to choose [Current User] from the drop-down list.

6. By default, And has been selected for how our new criteria will filter with the other criteria items. We could change the value to Or, as was done in the criteria set by default in the Announcements list, but we want it to remain as And.

7. When you are finished, click the OK button. Save your Web page by clicking the Save option on the File menu. The LVWP is now displayed with only the data that meets the criteria set.

Changing the LVWP Sort Order

To change the sort order of fields displayed in a LVWP for a list or document library, follow these steps:

1. Right-click on the list, and then click List View Properties to open the Data View Details task pane (shown earlier in Figure 32-11).

2. Click the Sort & group link to open the Sort and Group dialog box. (See Figure 32-19.)

   

   Figure 32-19. Sort And Group dialog box

3. If there are fields in the Available Fields box that you want to sort against, click them and then click the Add button.

4. If the fields you want to sort against are already in the Sort order box, you can click them and then click the Move Up or Move Down button to change their priority.

5. If there are fields in the Sort order box that you do not want to sort against, click the fields and then click the Remove button. By default, the Announcements LVWP added by using the browser is sorted by the date that the announcement was Modified in Descending order.

6. Make sure that the Ascending option button is selected for each field you want to sort against if you want the sort to go from lowest to highest, or that the Descending option button is selected if you want the sort to go from highest to lowest.

7. Click OK when you are finished. Save your Web page by clicking the Save option on the File menu. The LVWP is now displayed with the sort order you specified.

Changing List Grouping and Sorting to Make a Collapsible LVWP

Grouping list content is a great way to make a long list of data easier to navigate. For example, if we had lots of announcements, we might want to group them by the person who created the announcement. The LVWP could be displayed with each group collapsed, and when we wanted to see the announcements that were created by a certain person we would click on the plus sign (+), and the list of announcements for that creator would expand. Similarly, we would click on the minus sign (–), and the list of announcements for that creator would collapse.

To change the sort order of fields displayed in a list or document library

1. Right-click on the LVWP, and then click List View Properties to open the Data View Details task pane.

2. Click the Sort & group link to open the Sort and Group dialog box. (See Figure 32-19, shown earlier in the chapter.)

3. Click fields you want to sort on first, and then click the Add button to add them to the Sort order box. For our example, we want to add Created By to the Sort order box.

4. Make sure that the Ascending option button is selected for each field you want to sort against if you want the sort to go from lowest to highest, or that the Descending option button is selected if you want the sort to go from highest to lowest. The default value of Ascending will work for our example.

5. Because Group properties apply to all items in the Sort Order box, we need to make sure that the fields are in the correct sequence. We don’t want to group them by Modified Date and then group them by the Created By value. We could reverse the order, but we really just want to remove Modified from the Sort Order box. If we did want both fields, we could move the Created By field to the first position in the Sort Order box by selecting Created By and clicking the Move Up button. For our example, we just remove Modified by selecting it from the Sort order box and clicking the Remove button.

6. Make sure that the Show group header check box is selected. It is not selected by default, so we must select the Show group header check box.

7. Choose the default way to show each group’s content, expanded or collapsed. By default, each group will be expanded and its contents will be visible. For our example and for most applications of this option, you will want to select the Collapse group by default option button.

8. Click OK when you are finished. Save your Web page by clicking the Save option on the File menu. View the modified page in the browser. The LVWP is grouped and sorted as you indicated. (See Figure 32-20 and Figure 32-21.) The number in parenthesis (2 in this example) is the number of announcements that are grouped inside that item.

   

   Figure 32-20. Announcements list grouped by Created By—Collapsed

   

   Figure 32-21. Announcements list grouped by Created By—Expanded

Notice that when each group of announcements is expanded, the sort order is no longer the Modified date in descending order. But if we had left the Modified date as grouped in the Sort Order box, each date would have been grouped, requiring the user to click a second time to open each group of announcements modified on a given date. That would have been tedious for the user.

Inserting List or Library Views

Inserting list or document library views into pages is a great way to bring the information needed to the place where it is needed. For example, if you have a page that discusses a project you are working on, you can easily include a view of a team member list or a document library right in the page that discusses the project instead of linking the user to another page and then hoping they come back when they are finished. Now that you have learned how to filter, sort, and group LVWPs, you know that you can include only a subset of a list on a page as well.

To insert an LVWP for a list or document library into a page

1. Open or create the page you want to insert the view into by using FrontPage 2003.

2. Click the location you want the view to go, and then click the Insert Web Part option on the Data menu to open the Web Parts task pane. (See Figure 32-22.)

   

   Figure 32-22. Web Parts task pane

3. Choose the gallery of Web Parts you will use. Use the <Site Name> Gallery to look for Web Parts in the active site. Use Virtual Server Gallery to find a Web Part that is part of your virtual server. Use the Online Gallery to find a Web Part in the online library. FrontPage 2003 defaults to the list of Web Parts on the Team Web Site Gallery.

4. Click the name of the Web Part that you want to insert into the page from the Web Part List. If you can’t find a Web Part that you think should be listed, look to see if there is more than one page of Web Parts. If there is, the Next link should be present. Try clicking on that.

5. Click the Insert Selected Web Part button at the bottom of the task pane. The Web Part is inserted into your page.

6. If you are on a part of the page that doesn’t have a Web Part Zone, the New Web Part Zone button on the bottom of the task pane will be enabled. Clicking this button will create a new Web Part Zone that you and your browser users can add Web Parts to. If you don’t place your Web Parts in a Web Part Zone, you will end up with static Web Parts that the users will not be able to change in the browser.

7. Save your Web page by clicking the Save option on the File menu. FrontPage 2003 will ensure that the page is saved as an .aspx page, as is required. The list is now displayed on your page.

Inserting Interactive Buttons

You might want to insert a button into a page independent of the overall navigational structure of your site. You can create Interactive Buttons from within FrontPage 2003 without leaving FrontPage 2003 to use a graphics program to create separate graphics files for each button you want to use. Even more importantly, FrontPage 2003 automatically creates separate buttons for normal, hovered, and pressed states and automatically includes the Microsoft JScript code necessary to give the buttons their interactivity. Nice.

To insert an Interactive Button into a page

1. Open or create the page you want to insert an Interactive Button into using FrontPage 2003.

2. Click the location you want the Interactive Button to go, and then click the Interactive Button option on the Insert menu to open the Interactive Buttons dialog box. (See Figure 32-23.)

   

   Figure 32-23. Interactive Button dialog box

3. Click the button style you want to use in the Buttons scroll box.

4. Type the text you would like to appear on your button in the Text box.

5. Type the URL for the page you want the button to link to in the Link box.

6. Click the Font tab if you want to change the font used on the button, and click the Image tab if you want to change the button size or give it a transparent background around the edges.

7. Click the OK button when you are finished, and then you will see the button on your page. When you save your page, you will be prompted to save three images for every button. One represents the normal state, one represents the hovered state, and one represents the pressed state. When you view your page in the browser, the button will be included. When you hover the cursor over the button, the button changes; and when you press the button, it changes until the next page is loaded.

Advanced Customization

Once you are familiar with using FrontPage 2003 to customize websites created with SharePoint Products and Technologies, you will find that these sites have the potential to be unique and highly effective. This section outlines how you can use features in FrontPage 2003 to make creating and managing your site easier and give your site enhanced functionality.

Repeating the Same Content on Multiple Pages

Most websites start small and then grow larger as content is added to the site. As sites grow in size, they can become more difficult to manage because when content that appears on more than one page in your site changes, you have to spend time opening and editing multiple pages, which can be a tedious task that is prone to errors. FrontPage 2003 can help manage content that appears on multiple pages in some key ways.

Dynamic Web Templates (DWT)

Most website designs include a common header on all pages, common navigation on the side, and a common footer on all pages that contains copyright information, contact information, or terms of use. Perhaps the content for the page even has a separate designated area for the page title. (See Figure 32-24.)

Figure 32-24. Simple page design

In a corporate setting, the website is often designed and created by one person or team, and then updated and maintained by another person or team, such as the content owners. A new feature with FrontPage 2003 is that Web developers can create Web pages that contain editable regions, in which users can create and edit content, and leave the rest of the page uneditable. For example, a Web developer can create pages that have a header, navigational area, footer, and page title in them that the users cannot edit, but also open a large portion of the page for editing. This gives the Web developer control over the formatting on the page and prevents the user from accidentally removing or changing the page header, footer, or navigation, yet it gives the content owner freedom to create and edit his own content on the page.

Control of editable portions of Web pages is determined by the use of a Dynamic Web Template (DWT). DWTs can be thought of as page templates with definitions for editable regions that stay attached to pages even after they are created.

For example, you could create a DWT that is attached to 30 pages on your site, and if you wanted to change a section of the footer on all those pages, you would change it one time on the DWT and it would automatically update the footer on all 30 pages. Because you can have more than one DWT in a site, you could have some pages attached to one DWT, some pages attached to another DWT, and some pages unattached and therefore freely editable.

To create a DWT

1. Using FrontPage 2003, create the DWT. DWT pages are simply Web pages, so start with whatever page design you like. If you want to apply the home page look and navigation to other pages on your site, you can start with the default.aspx page and then remove the content you do not want on every page.

2. Name the page with a .dwt file extension. If the left-hand navigation is included on the DWT, each page will include the link bars that are on the home page. Any time one of the link bars changes, the link bars will automatically be updated on all the pages that use them.

3. Specify which region of the page you would like to be editable by authorized FrontPage 2003 users. You do this by selecting the area you want to designate as editable, clicking Dynamic Web Template on the Format menu, and then clicking Manage Editable Regions, which opens the Editable Regions dialog box. (See Figure 32-25.)

   

   Figure 32-25. Editable Regions dialog box

4. Type a name for the region in the Region name box, such as “content”, click the Add button, and then click the Close button. The editable region in the DWT has now been defined. Save the DWT by clicking Save on the File menu.

5. Attach the pages you want to use the DWT design. If you want to attach more than one page to a DWT at one time, the easiest way is to multiple-select them in the folder list by using Ctrl+click (for selective choices) or Shift+Click (for consecutive choices).

     If a DWT includes Web Parts or other ASP.NET controls or code, the attached pages must have the .aspx file extension. You will be prompted to save pages with the .aspx file extension when this condition occurs.

6. Once the page or pages are selected, click Dynamic Web Template from the Format menu, and then click Attach Dynamic Web Template to open the Attach Dynamic Web Template dialog box. Click the name of the DWT you want to attach to these pages, and then click Open to attach the DWT to each of the pages.

7. Open a page attached to the DWT and then edit the regions marked as editable. In this example, the editable region would be marked on the page with an orange border and the name given to the editable region would be “content.”

     Users are unable to edit regions that are controlled by the DWT.

Advanced Find and Replace

You can use the enhanced find and replace features in FrontPage 2003 to make updates to Web pages or directly to the HTML code. For example, you could replace all the links to a particular graphic file or change an e-mail address that appears throughout your site by using the find and replace feature in FrontPage 2003. To access this feature, click Find on the Edit menu. Or you can use the keyboard shortcuts Ctrl+f for Find and Ctrl+h for Replace. This opens the Find And Replace dialog box. (See Figure 32-26.)

Figure 32-26. Find And Replace dialog box—HTML Tags tab

A powerful aspect of the find and replace feature in FrontPage 2003 is the ability to set a series of criteria (including the use of regular expressions) for searches, including a specific set of actions to take once content is found that meets the search criteria. For example, you could use Find And Replace not only to find specific tags, but to replace only the contents in the tag. Find And Replace is a slick tool you can use to make updating and managing your website easier.

Themes

Themes are great ways to change fonts, formatting, and graphical elements on one page or throughout an entire website.

Cascading Style Sheets (CSS)

FrontPage 2003 Themes use industry-standard Cascading Style Sheets (CSS) to define formatting rules. However, the FrontPage 2003 user interface shields you from the technical intricacies so that you can create a custom Theme without ever opening a CSS file. In fact, although the themes use CSS, the CSS files cannot be successfully edited directly; they must be altered by using the Customize Theme user interface.

Find a Theme to Copy

If you want to create a custom Theme with your own colors, fonts, formatting, buttons, and more, you might want to customize an existing Theme rather than create a new one. There are hundreds of formatting options, and it is often easier to find an existing Theme that resembles the look you want and then customize it rather than start from a blank Theme and then make each formatting choice yourself.

For example, Themes allow you to specify formatting choices for such detailed items as the colors behind calendar entries or the font color used on the date-picker pop-up window. If you start with a Theme that already uses colors similar to the ones you want to use, you will not have to change the formatting for such detailed items because they will already be acceptable. Instead, you can concentrate on changing the formatting for the items that are important to you, such as body text formatting, hyperlink formatting, and more.

To customize an existing Theme, you should first look through the existing Themes in FrontPage 2003 to see what existing Themes contain fonts and formatting that are the most similar to those you want to use. Scroll through the list of available Themes that are installed on your computer using the Theme task pane. Click on the Theme option from the Format menu to open the Theme task pane. (See Figure 32-27.)

Figure 32-27. Theme task pane

Saving Your Custom Theme

To find a Theme that most closely matches the look of your finished site (discussed in previous section), and then save a copy of it as your own Custom Theme, follow these steps:

1. Using FrontPage 2003, click Theme on the Format menu to open the Theme task pane. (See Figure 32-27 shown earlier.)

2. Hover the cursor over the Theme you want to start with, click the down arrow on the right, which results in a pop-up menu being presented, and then click the Customize option to open the Customize Theme dialog box. (See Figure 32-28.)

   

   Figure 32-28. Customize Theme dialog box

3. Click the Save As button to open the Save Theme dialog box. (See Figure 32-29.)

   

   Figure 32-29. Save Theme dialog box

4. Type a new name for your Theme in the Enter new theme title box, click OK, and then click OK again. This process has saved your new Theme, but it has not applied it to your site yet.

     You can create a custom Theme from scratch if you do not want to start with one of the existing Themes and then customize it from there. Instead of choosing an existing them and then clicking Customize, simply click the Create New Theme option at the bottom of the Theme task pane. Click the Save As button, name your Theme, and then click the OK button two times. You new custom Theme is then saved.

Applying Your Custom Theme to Your Site

To apply your custom Theme to your site, find the Theme you just created in the Themes task pane, select a theme scroll box, hover the cursor over it, click the down arrow on the right (which results in a popup menu), and click Apply As Default Theme. If changes are made to your Theme from this point forward, FrontPage will prompt you to apply the new changes to your website. Responding affirmatively to the prompt will propagate your changes to all your pages. New pages will automatically use the custom theme.

Changing Colors, Graphics, and Fonts

Once your Custom Theme is applied to your site, change colors, graphics, and fonts in your site by using the Customize Theme dialog box (shown earlier in Figure 32-29) by following these steps:

• Click the Colors button, and then click the Custom tab to change the colors of headings, the page background, hyperlinks, and more.

• Changing graphics such as buttons, bullets, page banners, and background images is done by clicking the Graphics button. You can also change the font style on buttons here as well.

• Changing body text formats and heading formats is done by clicking the Text button. Additional styles can be added by clicking More Text Styles and then clicking New.

• When you are finished changing colors, graphics, and fonts, you click OK twice, and when prompted whether or not to save your changes, click Yes.

Advanced Theme Customization

There are over 300 styles you can change in each Theme. This collection of styles can change even the smallest elements in a website created with SharePoint. The vast majority of custom Themes that are created do not make changes to more than a fraction of the styles available. If the element you want to change is not exposed in the color, graphics, or fonts areas, you will need to find out what CSS style needs to be changed to affect that element.

  For more information on how to determine which CSS needs to change, you can read an article in the FrontPage 2003 Developer’s Toolkit titled “Customizing Themes for Sites Created with Windows SharePoint Services.” It includes details about how to hover your cursor over a screenshot of a default page of a site created with SharePoint and see a ToolTip that shows the corresponding style to change. The FrontPage 2003 Developer’s Toolkit is available at https://www.frontpagedevkit.com/wss/articles/themes-custom.htm.

Once you know what style you want to change, you can change it by clicking the Text button on the Customize Theme dialog box (shown previously in Figure 32-29), and subsequently clicking the More Text Styles button, which opens the Style dialog box. (See Figure 32-30.)

Figure 32-30. Style dialog box

The Styles scroll box displays all the styles currently in use in the Theme. Click the style you want to change, and then click the Modify button to open the Modify Style dialog box. (See Figure 32-31.)

Figure 32-31. Modify Style dialog box

Click the Format button, and then click the option that represents the change you want to make—Font, Paragraph, Border, Numbering, or Positioning. Each of these options give you full control over the formatting possibilities. For example, you could choose to change font color, increase the amount of space before or after the text, add a border only to the top of the text, or position the text to wrap to the right. The options are virtually unlimited.

When you are finished making your updates, click the OK button until you are asked whether you want to save the Theme, and then click Yes. You might need to repeat these steps for each style you want to change until your custom Theme is just the way you want it.

Image Tracing

You do not have to use default sites provisioned by SharePoint Products and Technologies. In fact, you can create a brand new page that doesn’t contain any SharePoint Products and Technologies functionality at all and then add list or document library views back into your site as needed. Because Windows SharePoint Services elements can be formatted to suit professional designs, some sites created with Windows SharePoint Services do not look like default sites and therefore are not recognizable as sites created with Windows SharePoint Services.

One new tool in FrontPage 2003, called image tracing, makes converting a professional design, which is usually delivered in the form of a large graphics image of what the site will look like when it is completed, into a fully functional website. Image tracing allows you to place your site design into the background of a page you are working on in Design view and then create your page on top of it. When your page is complete, you can remove the tracing image. The tracing image is used only for the purposes of editing and therefore will not be visible when you view your page in the browser.

To use image tracing

1. From within FrontPage 2003, import the design graphic into your site by clicking Import on the File menu.

2. Open an existing page or create a new page, and then highlight the Tracing Image option on the View menu. Click the Configure option under the Tracing Image option to open the Tracing Image dialog box. (See Figure 32-32.)

   

   Figure 32-32. Image Tracing dialog box

3. Click the Browse button, click on your design graphic, and then click Open. Use the Opacity slider bar to adjust the opacity or transparency of the tracing image. You will see a lightened version of the design graphic in the background of your page. You can use all the familiar tools to create your Web page, but you will be creating it on top of the tracing image. This ability to see your design while working on your page greatly simplifies the process of creating a page to exacting specifications from a designer.

4. When you are finished designing your page and no longer need the tracing image, open the Tracing Image dialog box again, delete the path to the tracing file, and then click OK.

Adding Effects to Your Pages with Behaviors

FrontPage 2003 makes adding JScript effects to your Web pages easier than ever. You can insert a graphic into a page, and then use Behaviors to change the status bar when clicked, launch a pop-up window, play a sound, open a separate browser window, and more. You can also use Behaviors to call JScript that you create when you click on text or hover over it. Click Behaviors on the Format menu to provide access to the many options in the Behaviors task pane. (See Figure 32-33.)

Figure 32-33. Behaviors task pane with Insert options showing

Layers (Absolute Positioning)

Some website designs call for design elements that overlap. For example, your design might dictate placing an image on a page and then placing text on top of that image that overlaps multiple table cells. FrontPage 2003 Layers Support gives you the ability to position multiple design elements in the same area on a page. Click Layers on the Format menu, and then click the Insert Layer button for each layer you would like to insert. This opens a blue box where you can place content of nearly any kind.

  Combine Layers with Behaviors (discussed earlier in this chapter) to add interactivity. For example, you could set one layer to trigger display of another layer by adding a behavior to the first layer.

Working with the Data Source Catalog

The Data Source Catalog acts as the central repository of all your data sources. It is the single location from which all your data sources can be accessed and managed. It doesn’t matter whether the data source exists on your server or on an external server. If you have access rights to the data source, you can interact with it by using the Data Source Catalog.

Adding a Data Source

FrontPage 2003 uses the Data Retrieval Services in Windows SharePoint Services to provide data access. These services retrieve data from many sources and present it in an XML format for consumption. Great Plains and SQL Server also have separate non–FrontPage 2003 data-retrieval services that can be added on to Windows SharePoint Services. Table 32-4 lists the many data source types that can be accessed using FrontPage 2003:

Table 32-4. Data Source Types

Data Source Type
Windows SharePoint Services lists
Windows SharePoint Services document libraries
OLEDB databases
XML files
Server-side scripts
XML Web Services

To add a data source to the Data Source Catalog

1. From within FrontPage 2003, click Insert Data View on the Data menu to open the Data Source Catalog task pane. (See Figure 32-34.)

   

   Figure 32-34. Data Source Catalog task pane

2. Determine what type of data source to add. Recently used data sources are listed at the top of the Data Source Catalog task pane under Recent.

3. Expand the folder for the type of data source chosen by clicking the plus sign (+) to expose the existing data sources. Clicking the minus sign (–) would collapse the list, making it easier to see the other folders.

4. Follow the steps under one of the following sections for the specific data source type you want to add.

Adding a SharePoint Products and Technologies Data Source

By default, you cannot specify the columns, sorting, filtering, or grouping on the SharePoint Products and Technologies List data source created by FrontPage 2003. You just get a default query. However, if you select the data source and then choose Copy And Modify, you will create a new data source that will have the ability to specify the columns, sort, filter, and group. The Copy And Modify feature works with all data source types but is most useful with lists and document libraries.

To add a SharePoint list

1. Under the SharePoint Lists folder, click the Create new SharePoint list link to open the SharePoint List dialog box to the Lists tab.

2. By default, FrontPage 2003 shows the Lists tab, and you simply select the type of SharePoint list you want to add from the list.

     On the top right side of the SharePoint List dialog box, there are two toggle buttons. The default Large Icons button on the left is one that presents the SharePoint lists by using difficult-to-read large icons. Click the List button on the right to see the SharePoint lists presented in a readable list.

3. Try the New List Wizard if you are unsure what type you want to add. Otherwise, type a name for the new list in the Specify the name for the new list box under the Option section on the right side of the dialog box.

4. To add a SharePoint library instead, you have two options. You can click the Document Libraries tab of the already open SharePoint List dialog box, or you can choose to Cancel the dialog box, Expand the SharePoint Libraries folder, and click the Create New Document Library link to reopen the SharePoint List dialog box to the same Document Libraries tab.

5. On the Document Libraries tab in the SharePoint List dialog box, select the type of document library you want.

6. Again, for additional help, you can double-click the New Document Library Wizard option. Otherwise, type a name for the new document library in the Specify The Name For The New Document Library box under the Option section.

7. There isn’t a separate folder in the Data Source Catalog task pane for SharePoint surveys, so choose either of the two previously mentioned methods to open the SharePoint List dialog box and then click the Surveys tab.

8. Double-click the New Survey Wizard option, or type a name for the new survey in the Specify the name for the new survey box under the Option section.

9. New surveys will be added to the SharePoint Lists folder in the Data Source Catalog task pane.

Adding a Database Connection Data Source

This example creates a database connection to the Customers table in the Northwind sample database for Microsoft SQL Server.

To create a new database connection

1. In the Data Source Catalog task pane, expand the Database Connections folder and click the Add to catalog link. This opens the Database Data Source Properties dialog box. (See Figure 32-35.)

   

   Figure 32-35. Initial Database Data Source Properties dialog box

2. Accept the defaults for fields on the General tab. On the default Source tab, click the Configure Database Connection button to bring up the Configure Database Connection Wizard, Page 1. (See Figure 32-36.)

   

   Figure 32-36. Configure Database Connection Wizard, Page 1

3. Enter the name of the server—in this example, our database is on the (local) server.

4. Choose the authentication type; the following choices are available:

   • Save this username and password in the data connection. This option allows you to type in a specific database user name and password that identifies you to the data source.

   • Use Windows Authentication. This option uses integrated security—your Windows credentials are used for authentication at the data source. If you choose this option, make sure that integrated security is supported by the data source (for example, Microsoft SQL Server) and that it is configured to accept Windows sign-on credentials. If your SQL Server is on a physical machine other than the Windows SharePoint Services machine, you will need to use one of the other authentication types.

   • Use Single Sign-On authentication (requires SharePoint Portal Server).This option can be used when this site is part of a portal site created by using SharePoint Portal Server 2003 and the administrator has enabled and configured Single Sign-On.

   • Use Custom connection string. This option lets you specify an OLEDB connection string used to connect to the database. This option can be used for fine-grained control of the connection.

In this example, we use the Use Windows Authentication option. This assumes that the SQL Server and Windows SharePoint Services exist on the same machine. If connecting to an external database is required (common), you must use another authentication type because Windows Authentication allows only “one hop” of the credentials. So, you cannot authenticate against an external SQL server using the Windows credentials captured by the Windows SharePoint Services server.

To use the Use Windows Authentication option to create a new database connection

1. Click Next to navigate to the Configure Database Connection Wizard, Page 2. (See Figure 32-37.)

   

   Figure 32-37. Configure Database Connection Wizard, Page 2

2. Select the table, view, or stored procedure that you want to use as the source of data for this connection. Note that stored procedures will be available only if the Enable Update Query Support setting has been turned on in the Data Retrieval Services settings on the Windows SharePoint Services server. In this example, we choose the Northwind database in the drop-down list of databases.

3. Select Customers from the Table, View, or Stored Procedure list.

     If you select the Use Custom Query check box, you can specify any SQL query you want.

4. Click Finish to complete this wizard and you are returned to the Data Source Properties dialog box. (See Figure 32-38.)

   

   Figure 32-38. Database Data Source Properties dialog box

5. Click the Fields button on the Data Source Properties dialog box to open the Displayed Fields dialog box. (See Figure 32-39.)

   

   Figure 32-39. Displayed Fields dialog box

6. Using the Ctrl key, highlight all the fields in the Displayed fields box on the right except the CustomerID, CompanyName, Address, City, and Country fields and click the Remove button. Click the OK button to remove the fields from the data source.

7. Click the Filter button on the Data Source Properties dialog box to open the Filter Criteria dialog box. (See Figure 32-40.)

   

   Figure 32-40. Filter Criteria dialog box

8. Click the Click here to add a new clause gray bar, choose Country from the Field Name drop-down list, leave the Comparison value as the default Equals, and type the text USA into the Value text box. (This text box looks like a drop-down list, but it is initially empty.) Click the OK button to apply the filter.

9. Click the Sort button on the Data Source Properties dialog box to open the Sort dialog box. (See Figure 32-41.)

   

   Figure 32-41. Sort dialog box

10. Click the CompanyName in the Available fields box, leave the default Sort Properties option of Ascending, and then click the Add button. CompanyName will be added to the Sort order box. Click the OK button to apply the sort.

11. Click OK on the Data Source Properties dialog box to complete database connection setup.

    The new data source, named “Customers on Northwind” in our example, is listed in the Database Connections folder in the Data Source Catalog task pane.

Adding an XML FileData Source

FrontPage will automatically create a data source in the catalog for any XML file in the site. This works the same as SharePoint lists and document libraries.

To add a new XML File data source

1. First you must have an XML file. You have the following options for obtaining an XML file:

   • Create a new XML file. (In FrontPage 2003, create a new Text file and then save it as XML.)

   • Search your hard drive for an XML file installed with some other sample. (This is the option we took.)

   • Use an XML file you find on the Internet.

   For this example, we will use an XML file available on the Internet called cust-ord.xml.

     Download the actual XML file used in this example, and save it on your local machine as cust-ord.xml. The File is available at https://www.sharepointcustomization.com/resources/whitepapers/webpartdocs/cust-ord.xml.

   A fragment from this XML file follows:

   <?xml version="1.0" encoding="utf-8" ?>
   

<CustomerOrders>   <Customer>     <CompanyName>Ernst Handel</CompanyName>     <Orders>       <OrderID>10258</OrderID>       <OrderDate>1996-07-17T00:00:00</OrderDate>       <Products>         <ProductName>A Widget</ProductName>         <Quantity>65</Quantity>         <UnitPrice>17.0000</UnitPrice>         <total>1105.0000</total>       </Products>     </Orders>   </Customer>   <Customer>     <CompanyName>Frankenversand</CompanyName>     <Orders>       <OrderID>10267</OrderID>       <OrderDate>1996-07-29T00:00:00</OrderDate>       <Products>         <ProductName>B Widget</ProductName>         <Quantity>70</Quantity>         <UnitPrice>44.0000</UnitPrice>         <total>3080.0000</total>       </Products>     </Orders>   </Customer> </CustomerOrders>

2. In the Data Source Catalog task pane, expand the XML Files folder and click the Add to catalog link. This opens the XML Data Source Properties dialog box. (See Figure 32-42.)

   

   Figure 32-42. XML Data Source Properties dialog box

3. Accept the defaults for fields on the General and Login tabs. On the default Source tab, click the Browse button to bring up the traditional File Open dialog box.

4. Navigate to the XML file you want to use. Select it and click the Open button. Then click OK on the XML Data Source Properties dialog box.

5. If the XML file isn’t already located within your website, you will be prompted to import it. Click OK on the Alert Message box. (See Figure 32-43.)

     If the XML file is located at an HTTP URL, it does not need to be imported to the local site. For example, you can use an external XML file such as an RSS feed without importing it. This is why the proxy settings can be important for these data sources.

   

   Figure 32-43. Import Alert Message box

6. Subsequently, an Import dialog box (shown in Figure 32-44) will prompt you to place the imported file somewhere on your site. For now, save the XML file to the default location, the website root, by clicking the OK button.

   

   Figure 32-44. Import dialog box

An XML data source corresponding to the imported XML file should now exist in the XML files folder of the Data Source Catalog task pane.

Adding a Server-Side Script Data Source

A server-side script begins to run when a browser requests any kind of script file (such as an .asp file) from the Web server. The Web server then calls the script, which processes the requested file from top to bottom, executes its commands, and sends back a block of data as XML. Because scripts run on the server instead of on the client browser, the Web server does all the work that is involved in generating the XML that is returned to FrontPage.

To add a new server-side script data source

1. Expand the Server-Side Scripts folder in the Data Source Catalog task pane, and click the Add to Catalog link to open the Script Data Source Properties dialog box. (See Figure 32-45.)

   

   Figure 32-45. Script Data Source Properties dialog box

2. Type the path to the script in the URL box, and then select from the Method drop-down list whether to run the script using an HTTP Get (default) or an HTTP Post.

3. To add the parameters to use when running the script from a Web page, click the Add button.

     If there is a proxy server involved, note that the Data Retrieval Services do not look for the proxy settings in the default web.config file. To make data requests through a proxy, the administrator must enable the proxy server by changing the web.config located by default in the C:\program files\common files\microsoft shared\web server extensions\60\config\ folder on the WSS server.

Adding an XML Web Service Data Source

To add a new XML Web service, follow these steps:

1. Expand the XML Web Services folder in the Data Source Catalog task pane, and click the Add to Catalog link to open the XML Web Services Data Source Properties dialog box. (See Figure 32-46.)

   

   Figure 32-46. XML Web Services Data Source Properties dialog box

2. In the Service description location box in the Data Source Properties dialog box, type the URL for the Web service.

3. Click Connect Now to read the Web Service Description Language (WSDL) associated with the Web Service. FrontPage 2003 will create an XML Web Service data source based on that definition.

     As discussed in the previous section, Data Retrieval Services do not look for the proxy settings in the default web.config file. See the previous tip.

Referencing External Catalogs

Each Windows SharePoint Services site has a collection of data sources that consists of at least the lists and document libraries on that site; in addition, it can have other data sources that the site administrator or users have added.

The Data Sources Catalog from any Windows SharePoint Services site can be made available at your site. This is a powerful feature that allows the user to share data sources instead of having to re-create them.

To reference a catalog from a different site

1. Click the Manage Catalog link near the bottom of the Data Source Catalog task pane to open the Manage Catalog dialog box. Click the Add button to open the Collection Properties dialog box. (See Figure 32-47.)

   

   Figure 32-47. Collection Properties dialog box

2. In the Collection Properties dialog box, type the display name and location for the collection you want to add.

Searching for Data Sources

As a site changes and users create or reference multiple data sources, it is often difficult to keep track of the sources that you are interested in. This is when the search feature of the catalog becomes useful.

To search for a data source

1. Click the Find a Data Source link near the bottom of the Data Source Catalog task pane to open the Find a Data Source task pane. (See Figure 32-48.)

   

   Figure 32-48. Find a Data Source task pane

2. In the Search box, enter the location you want to search.

3. In the For box, type the search term.

4. Click Search Now.

Note that the search occurs on the name of the data source. The search process simply looks for the presence of the search string within the data source name without worrying about word boundaries.

Deleting Data Sources

Deleting a data source is as simple as right-clicking it and selecting Remove. FrontPage 2003 creates a data source for each SharePoint list or document library in your site. So, these data sources can be removed only by removing the SharePoint list or document library.

Working with Data

FrontPage 2003 makes working with data easier than ever by allowing you to modify and present live data from a variety of data sources (as shown earlier in Table 32-4) to create sophisticated data-driven websites that lower maintenance costs and allow users to post data to your website by using only their browser.

Data-driven websites in FrontPage 2003 are enabled by the Windows SharePoint Services Data Retrieval Service and support a complete set of WYSIWYG tools for creating and modifying XSLT. They are industry-standard Web Parts for sorting, grouping, filtering, and conditionally formatting data. You can use these Web Parts to create high quality, dynamic Web pages for presenting live data.

You can also use a Windows SharePoint Services–based XML editor such as Microsoft Office InfoPath to create XML forms that are saved to a form library. (For more information, see Chapter 39, “Using Microsoft Office InfoPath with SharePoint Products and Technologies.”) The XML data is not just stored to the form library, but fields in the form data can be presented to site visitors as lists. These lists can be sorted, filtered, and even connected to other Web Parts to extend the data even further.

Data Views

Data View Web Parts, also known as Data Views, are the primary component used for data presentation when building data-driven websites using FrontPage 2003 and Windows SharePoint Services. Data Views never store static data. Instead, Data Views always point back to the original data source for the data found in the Data Source Catalog. The display is managed using the formalism of an Extensible Stylesheet Language Transformation (XSLT), which is a powerful, industry-standard language used for formatting the presentation of XML data. A Data View retrieves data from the data source in the form of XML and applies the XSLT to it. This gives the developer a powerful and standards-based way to display formatted data.

XSLT is an XML-based language that enables you to transform one class of XML document to another. XSLT offers great flexibility for presenting and exchanging data between disparate devices and business systems. For example, with XSLT style sheets, you can dynamically transform an XML purchase order from one schema to another before sending the order to a supplier. In addition, with XSLT you can dynamically transform an XML document so that it can be rendered on a variety of Internet-enabled devices.

From within FrontPage 2003, you can format the data within a Data View by directly applying formatting from Design view. FrontPage 2003 applies formatting to all data points at the same level in the XML by modifying the XSLT style sheet attached to the page. You can change the XSLT style sheet without having to know anything about XSLT. FrontPage 2003 even generates the XPATH query for you. This new feature in FrontPage 2003 is the first-of-its-kind WYSIWYG XSLT editor on the market today.

Data-Driven Web Sites

FrontPage 2003 has many features for building live, data-driven webs. Central to any data-driven Web page is the ability to collect and present live customer data on the fly on a page—that is, you are effectively building a page based on data (hence the term data-driven). These features fall into the following two categories:

Sites based on ASP or ASP.NET.

• This method uses the Database Results Wizard and the Database Interface Wizard. You can create Web pages that display interactive views of data by using ASP code or ASP.NET controls.

Sites based on Windows SharePoint Services.

• This method uses the Data Source Catalog and Data View task panes. With it, you can access a wide range of data sources. (See Table 32-4 earlier in the chapter).

In the following sections, we focus on the second category.

Windows SharePoint Services Data Retrieval Service

The key technology enabling this versatile data access is the Data Retrieval Service, which is a new data-binding mechanism in Windows SharePoint Services. The Data Retrieval Service enables data consumers and data sources to communicate with each other through Simple Object Access Protocol (SOAP) and XML. In essence, it is an XML Web service that returns XML data from different data sources or manipulates data against those data sources. The Data Retrieval Service is installed and runs on any server running Windows SharePoint Services.

The Data View is a special Web Part that acts as a client to the Windows SharePoint Services Data Retrieval Service, as it can retrieve and manipulate data from any data source registered in the Data Source Catalog. As we mentioned before, the Data Retrieval Service is a Web service; thus, it returns data in the form of XML and the Data View uses XSLT to format the data. (See Figure 32-49.)

Figure 32-49. Windows SharePoint Services Data Retrieval Service

A key feature of the Data View is that it provides WYSIWYG authoring of XSLT to produce formatted views of data. The visual editor produces XSLT code that is inserted directly into the HTML of your page. Once inserted on your page, you can use any WYSIWYG formatting tools from within the Data View in FrontPage 2003, such as adding table columns with certain font formatting, and FrontPage 2003 will generate the new XSLT on the fly. You can also change or add to the XSLT in the Code view of the FrontPage 2003 editor.

Because of the Data Retrieval Services Web service architecture, live data is available at authoring time. Furthermore, data is available as XML regardless of how it is stored at the data source.

Data Views can be connected to build rich pages that combine data from multiple sources, provide rich views on top of hierarchical data (such as master-detail), or both.

Adding a Data View

Add a new page to the root directory of the FrontPage 2003 Folder List, and name it DataView.aspx. We will use this empty page in the next several sections.

We start interacting with a Data View on a Web page by selecting the desired data source from the Data Source Catalog task pane. The Data Source Catalog is described in detail in a previous section of this chapter.

Inserting Data View into the Page

To add a Data View to your Web page, follow these steps:

1. From within FrontPage 2003, open the empty page DataView.aspx in Design mode. Click Insert Web Part Zone from the Data menu to create Zone 1 at the top of the empty page.

     Like any other Web Part, a Data View can reside either within or outside a Web Part Zone. A Web Part that is not in a Web Part Zone is called a Static Web Part and is subject to certain limitations in its ability to be customizable at run-time. It is common practice to put Web Parts inside a Web Part Zone, and we have followed that convention here.

2. Click Insert Data View on the Data menu to open the Data Source Catalog task pane. (See Figure 32-48.) As described in the previous section, there are many data sources that you can use. (See Table 32-4 earlier in the chapter.) Notice that FrontPage 2003 has automatically created data sources for the lists and document libraries that exist in your Windows SharePoint Services site.

3. Expand the Database Connections folder by clicking the plus sign (+), which exposes the Customers on the Northwind data source that we created earlier in the section about the Data Source Catalog task pane.

4. Position the cursor on the Customers on Northwind data source, and click the right arrow at the end of the name.

5. Click the Insert Data View option at the top of the context menu.

6. Save the new page and then view it in your browser. (See Figure 32-50.)

   

   Figure 32-50. Plain Data View in Internet Explorer

As you can see, with a few simple drag-and-drop actions, your Web page can easily be extended with data from the source of your choice. The display comes complete with pagination. Because the Data View is essentially a Web Part, all the advantages of the Web Part Infrastructure—such as runtime customization, applying themes, shared and personal views, and so on—are available to the user from the browser or to the developer from within FrontPage 2003. If we hadn’t placed the Data View into the Web Zone, the drop-down menu in the top right corner would not have been available.

Formatting the Data View

What we have seen so far are just the basics. Data Views have many rich and powerful capabilities built into them, such as grouping, filtering, sorting, toolbars, layout and formatting capabilities, the ability to work with hierarchical data, and more. In the next few sections, we will explore formatting the Data View in more detail.

One of the most powerful features of the Data View is that it allows XSL-based WYSIWYG formatting of data, thus providing multiple presentation options with just a few mouse clicks. The power of WYSIWYG lies in the fact that you can work entirely in the Design View. The powerful design tools in FrontPage 2003—such as formatting toolbars and so on—are readily available to format the output any way you want right in Design View.

Applying Styles

FrontPage 2003 provides several built-in styles to format the data in the Data View. Application of these styles is done using the Style link in the Data View Details task pane. Similar to the way we formatted the SharePoint Announcements list earlier in this chapter, we will continue formatting the Data View we added to the DataView.aspx page in the previous section.

To apply a style to the Data View

1. Ensure that the Data View Details task pane is displayed for the Data View. If it is not, you can display it by right-clicking anywhere in the Data View and choosing Data View Properties in the pop-up menu.

2. In the Manage view settings section at the top of the Data View Details task pane, click the Style link. This opens the View Styles dialog box.

3. In the list of available HTML styles, change the selection from the Basic Table to the Two Column Repeating form with border style (which is the fifth choice in the list). The style name shows as a ToolTip when you hover the cursor over the style.

4. Click the Options tab and in the Record Sets section at the bottom of the dialog box, change the value in the text box to the right of Display items in sets of this size from 10 to 4. Click the OK button to apply the changes.

5. You might be warned that changing the view style will remove any custom formatting and asked if you want to continue. Click the Yes button.

6. Save the DataView.aspx page and then view it in your browser. (See Figure 32-51.)

   

   Figure 32-51. Data View with new style in Internet Explorer

As mentioned before, Data Views provide WYSIWYG formatting using XSL Transformations. The mouse clicks and other actions performed in the previous steps generated XSLT code and put this code inline within the HTML of your page.

To see this, ensure that DataView.aspx is open in Design view in FrontPage 2003, and click anywhere on the Data View. Now switch to Split view by clicking on Split in the View Selection bar at the bottom left of the page. This displays both the code and the design surface simultaneously. The code corresponding to the Data View is automatically highlighted in the code pane. Notice that XSLTs appear as CDATA with the <dvwp:XSL> tag. FrontPage 2003 generated these stylesheet transformations because of your actions in the WYSIWYG user interface.

Manually Editing XSLT

The auto-generated XSLTs can also be manually edited to allow a high degree of flexibility to the author of the page. We will look at a simple illustration of this. Suppose that you wanted to change the string CompanyName in the Data View so that it is italicized instead of boldfaced. Again, we will continue formatting the Data View we added to the DataView.aspx page in the previous section.

To manually edit the XSLT

1. Position the cursor anywhere on the Data View on the DataView.aspx page and switch to the Split view. By positioning the cursor first, FrontPage 2003 will position the Code pane at the location of the cursor on the page, making it easier to find the code associated with the element on the page.

2. In the code pane, locate the set of lines in the highlighted text that set the format for CompanyName.

   It should look like the following fragment. (If you have followed the steps exactly the way they were shown in the previous sections, it should start at or close to line 180.)

   <tr>
   

<td width="25%" class="ms-vb">      <b>CompanyName:</b>   </td>   <td width="75%" class="ms-vb">     <xsl:value-of select="@CompanyName"/>   </td> </tr>

3. Change the third line to the following:

   <i>CompanyName:</i>

4. Save the DataView.aspx page and then view it in your browser or choose the Design View tab at the bottom of the FrontPage user interface. (See Figure 32-52.) Return the page to the FrontPage 2003 Design view.

   

   Figure 32-52. Data View with custom XSLT in Internet Explorer

This example is admittedly rather simple. The same effect could have been achieved within the Design view by simply selecting the desired text and clicking Format/Font. But without teaching you XSL, the example highlights the ability to edit FrontPage 2003–generated XSLT transformations directly within the Code pane of FrontPage 2003. XSLT editing can be used to accomplish things that are not available in the Design view.

Working with Data View Toolbars

The Data View is more that just a great way to present data; it also allows the user to interact dynamically with the data by grouping, filtering, and sorting. These actions are enabled using the Data View toolbar.

  Grouping, filtering, and sorting can also be done at design time. When done at design time, these operations determine the shape, contents, and order rows in the Data View itself; at run time, these operations affect what data is presented to the user, not the actual contents of the Data View.

By default, when a Data View is inserted into a page, it does not come with a toolbar. However, the page author can choose to add one to the view. The following steps build on the DataView.aspx from the previous section.

To add a toolbar to the Data View

1. Ensure that the Data View Details task pane is displayed for the Data View.

2. In the Manage view settings section at the top of the Data View Details task pane, click the Style link. This opens the View Styles dialog box.

3. Click the Options tab and in the Toolbar section at the top of the dialog box, select the check box to the left of Show Toolbar With Options For.

4. Filter, Sort, and Group are all selected by default. Click the OK button to apply the changes.

The toolbar has a button to specify the filter and two drop-down lists to specify the sorting and grouping. When you click the Filter button in the browser, the Filter Choices pane is displayed. This allows you to specify a filter on the desired column. Note the following:

• Any Data View column can be used for filtering.

• The user interface (UI) for choosing the filter is a drop-down list. The only possible filter is of the form column=value, where value is one of the known-to-exist values for that column (and therefore is presented as an entry in the drop-down list).

• Filter choices are limited to the values on the immediate page.

Sorting is accomplished by choosing a column to sort on from the drop-down list. A directional arrow appears next to the drop-down list, showing the sort order—ascending or descending. Clicking the arrow changes the sort order from one to the other.

Grouping is accomplished by choosing a column to group by from the drop-down list. Groups can be expanded and collapsed. The Data View toolbar is enabled only at the top level of the Data View; subviews cannot have toolbars of their own.

Setting Data View Record Options

The Data View allows the author to control the number of records displayed. This is done under the Options tab of the View Styles dialog box, within the Record Sets category. The following three options are available, which appear as option buttons:

Display all items.

• This option displays all records in the view on a single page.

Display items in sets of size.

• This option displays records in sets of the specified size. Navigation buttons are provided at the bottom of the Data View, which allow the user to move to the next set of records (next), the previous set of records (previous), or the first set of records (reset).

Limit the total number of items displayed to.

• This option is the same as the one just listed, except the number of records displayed is limited by the specified size. These are design-time settings; the end user cannot modify this in the browser.

Conditional Formatting

Data Views offer another powerful feature: the formatting applied to the various fields in the view can be driven by conditions on the data. For instance, this feature will allow us to underline the CompanyName for companies in a specific city. Data Views also allow conditional display; whether a field is displayed or not can be controlled by predicates on other data within the view. The following steps build on the DataView.aspx from the previous section.

To add a conditional formatting to the Data View

1. Ensure that the Data View Details task pane is displayed for the Data View.

2. Select a Data View field value for the field we want to format on a given condition. In our example, the value for a CompanyName should be selected (such as “Great Lakes Food Market”).

3. In the Manage view settings section at the top of the Data View Details task pane, the Conditional Formatting link will now be enabled. Click it to open the Conditional Formatting task pane. (See Figure 32-53.)

   

   Figure 32-53. Conditional Formatting task pane

4. Choose Apply Formatting from the Create menu to open the Condition Criteria dialog box. (See Figure 32-54.)

   

   Figure 32-54. Condition Criteria dialog box

5. Click the Click here to add a new clause gray bar, choose City from the Field Name drop-down list, leave the Comparison value as the default Equals, and type the text San Francisco into the Value text box. Click the OK button to apply the criteria.

6. This will open the Modify Style dialog box. (See Figure 32-55.)

   

   Figure 32-55. Modify Style dialog box

   In the previous steps, we specified the conditions that trigger the application of special formatting. This dialog box allows you to spell out what this formatting is.

7. Note the many options available for formatting. For our example, choose Font from the Format menu to open the Font dialog box. (See Figure 32-56.)

   

   Figure 32-56. Font dialog box

8. In the Effects section of the Font dialog box, simply check Underline. Then click the OK button twice to save the changes and close the dialog boxes. The new formatting condition is added to the Existing Conditions section of the Conditional Formatting task pane. (See Figure 32-57.) Note that the context menu on the condition allows us to edit the condition, modify the style, or do both.

   

   Figure 32-57. Existing Conditions in Conditional Formatting task pane

9. Save the DataView.aspx page and then view it in your browser. (See Figure 32-58.)

   

   Figure 32-58. Data View with Conditional Formatting in Internet Explorer

Conditional formatting can also be used to control visibility. For instance, in our previous example we could have chosen to not display the name of the company if the City was San Francisco. The steps in accomplishing this are almost exactly the same as the steps previously outlined except instead of choosing Apply Formatting from the Create menu, we would choose Hide Content from the Create menu.

Conditional formatting can apply to only one field at a time; thus, it is not possible to create a single criterion that will modify the style/visibility of two fields. To accomplish this, you have to create two criteria. You can, however, compose a single criterion of multiple predicates on different columns (such as underline the CompanyName when the City=San Francisco OR City=Walla Walla AND Country=USA).

Data Views as Web Parts

At its heart, the Data View is a Web Part. This means that in addition to all the formatting, grouping, sorting, filtering, and so on, it automatically leverages all the features of the Web Part Infrastructure available in Windows SharePoint Services.

Specifically, this means the following:

• Data Views support personal and shared views (when inside a Web Part Zone), just like every other Web Part. This means that a user can make personalizations that are visible only to him; the user can also customize the shared view of the same Data View.

• Data Views support run-time customization by using a browser-based interface when inside a Web Part Zone.

• Data Views have the standard set of customizable properties shared by all Web Parts, such as Title, Height, Width, Frame State, and so on.

• Data Views support Web Part connection authoring, but they require FrontPage 2003 to create the connection string.

    For more information about working with Web Parts in SharePoint Products and Technologies, see Chapter 31, “Working with Web Parts.” For more information about using Visual Studio .NET to create Web Parts, see Chapter 37, “Using Visual Studio .NET to Create Web Parts.”

Grouping, Filtering, and Sorting

In the previous section, we examined how the Data View toolbar can be used to group, filter, and sort the data displayed. This was performed at run time in the browser by the end user. The author might want to perform similar operations at design time.

Conceptually, when a filter condition is applied to a Data View at run time using the Data View toolbar, it affects only the presentation of the data; the Data View itself contains the entire set of records. When a Data View is filtered at design time, however, the filter is actually limiting what records are available in the Data View. Similar comments apply to design time vs. run time sorting and grouping.

In this section, we examine how Data Views can be filtered, sorted, and grouped at design time. These operations can be performed under the Manage View Settings category of the Data View Details task pane.

We want the Data View to contain records for companies whose names start with an “L”. These records should be sorted by the Company Name field, and they should also be grouped by the same field. The following steps build on the DataView.aspx from the previous section.

To group, filter, and sort the data displayed at design time

1. Open DataView.aspx in FrontPage 2003 Design view.

2. Ensure the Data View Details task pane is displayed. If it is not, you can display it by right-clicking anywhere in the Data View and choosing Data View Properties in the pop-up menu.

3. Select a Data View field value for the field we want to format on a given condition. In our example, the value for a CompanyName should be selected (such as “Great Lakes Food Market”).

4. In the Data View Details task pane, click Filter under the Manage view settings category to open the Filter Criteria dialog box. (See Figure 32-44 earlier in the chapter.) Note that the Data View filter defaults to the filter originally created for the Customers on the Northwind data source.

5. Click the Click here to add a new clause gray bar, choose CompanyName from the Field Name drop-down list, change the Comparison value to Begins With, and type the text L into the Value text box. Click the OK button to apply the criteria.

6. Save the DataView.aspx page and then view it in your browser. (See Figure 32-59.) Only companies that begin with the letter “L” will be displayed.

   

   Figure 32-59. Data View with additional filtering in Internet Explorer

The filter criteria are XPath expressions. If it’s available, the Filter Criteria dialog box is simply a visual editor that translates the UI into XPath. However, like all visual editors that sit on top of a language formalism, there are things that cannot be expressed visually but can be achieved by directly editing the XPath. The XPath behind a filter can be edited by clicking the Advanced button in the Filter Criteria dialog box, and it can also be edited from the conditional clause composition dialog box for conditional formatting.

Sorting and grouping are related operations, and they go hand in hand. If you are sorting by a field, the effect is that all records that have the same value for this field are displayed one after the other. This is an elementary form of grouping. Thus, you can group only fields for which you have specified sorting.

1. In the Data View Details task pane, click Sort and Group under the Manage view settings category to open the Sort and Group dialog box. (See Figure 32-60.) Note that Data View Sort and Group defaults to the values originally created for the Customers on the Northwind data source.

   

   Figure 32-60. Sort and Group dialog box

2. The Data View is already sorted on the CompanyName field; you can optionally add group headers or group footers to each group. A group is defined as a set of records that have the same value for the grouping field. When you add a group header, the records in the group will be bunched together under a header; the header displays the value of the grouping field. You can also expand or collapse a group of records. In the Group Properties section of the Sort and Group dialog box, select the Show group header check box and the Collapse group by default option button.

3. Save the DataView.aspx page and then view it in your browser. (See Figure 32-61.)

   

   Figure 32-61. Data View with grouping in Internet Explorer

You can click the plus sign (+) to expand the group and subsequently click the minus sign (–) to collapse the group.

In addition to or instead of displaying a header, you can choose to display a footer. This causes records in a group to be bunched with a footer containing the title of the group. However, you cannot expand and collapse a group unless you display the header.

You might also want to show all records belonging to a group in a single screen regardless of how many records you have chosen to display at one time. FrontPage 2003 allows you to specify that the group size should override the set size in a Data View—this is accomplished by selecting the Keep Group Items Together check box in the Sort And Group dialog box.

If you check the Hide Group Details check box, only the group captions are displayed and the individual fields are hidden.

Working with Hierarchies

The Data View works with data in XML format. The XML formalism can be used naturally to describe hierarchical data. Consequently, the Data View has built into it the intelligence to deal with data hierarchies. In this section, we will examine these features.

Sample XML Source

In this section we will use the cust-ord.xml file we imported in that section.

Our sample XML file contains the data we need throughout the rest of this section. The cust-ord.xml contains a list of customers. For each customer, there is the list of orders and for each order, there is a list of the products that comprise that order. Shown in Figure 32-62 is an illustration of the XML’s hierarchical structure.

Figure 32-62. XML hierarchical structure

Our sample file contains 63 Customer records. Each of them has zero or more Orders, and each Order has zero or more Products.

Add Data View

The cust-ord.xml file contains data that is hierarchically organized. We will now select data from various places in the hierarchy and create a Data View that presents the data in the desired way. Specifically, we want to display the name of each company and the names, quantity, unit price, and total price of the products they have ordered.

In doing so, we want to preserve the hierarchy—that is, we want the product information for a given company to appear under that company name. Add a new page to the root directory of the FrontPage 2003 project, and name it Hierarchy.aspx.

To add an initial Data View of the XML to your Web page

1. From within FrontPage 2003, open the empty page Hierarchy.aspx in Design mode. Click Insert Web Part Zone from the Data menu to create Zone 1 at the top of the empty page.

2. Click Insert Data View on the Data menu to open the Data Source Catalog task pane.

3. Expand the XML Files folder by clicking the plus sign (+), exposing the cust-ord.xml data source that we created earlier in the section about the Data Source Catalog task pane.

4. Position the cursor on the data source, and click the right arrow at the end of the name.

5. Click the Show Data option on the resulting context menu to open the Data View Details task pane. (See Figure 32-63.)

   

   Figure 32-63. Data View Details task pane showing XML data

6. Under the Work With Data section, you see the actual data in this file displayed. Note the following:

   • The hierarchy inherent in the structure is preserved.

   • You can use the left and right arrow buttons to navigate among the records in the file.

7. Click CompanyName and select Insert Data View. Doing this inserts only the name of the company in the view. Notice that because FrontPage 2003 detected that you have selected only one field from your data to insert as a view, it picked the most appropriate style, which is the bulleted list.

8. In the Manage View Settings section of the task pane, click the Style link to open the View Styles dialog box. (See Figure 32-13 shown earlier in the chapter.)

9. In the list of available HTML styles, change the selection to the Repeating Form style (which is the second choice in the list). The style name shows as a ToolTip when you hover the cursor over the style.

10. Click the Options tab and in the Record sets section at the bottom of the dialog box, change the value in the text box to the right of Display items in sets of this size to 2. Click the OK button to apply the changes.

11. Add details to the product data for each customer by using a Subview. Position the cursor below the line under the first record just above the second record in the Data View (in this case, just above Frankenversand).

12. Click the Products node in the Work with data section of the Data View Details task pane, and then click the Insert Subview link in the same section.

13. Click anywhere in the subview just added, and then click the Style link to open the View Styles dialog box.

14. This time, change the selection to the Two-column repeating form with border style (which is the fifth choice in the list). Click the OK button to apply the change.

15. Save the Hierarchy.aspx page and then view it in your browser. (See Figure 32-64.)

    

    Figure 32-64. XML Data View in Internet Explorer

Windows SharePoint Services-Based Lists as Data Views

Data is stored in Windows SharePoint Services in the form of lists. SharePoint lists can act as a data source to a Data View. Windows SharePoint Services also ships with several Web Parts, each of which is tailored to access data in a particular SharePoint list. FrontPage 2003 allows the conversion of these Web Parts into Data Views. The advantage of converting them to Data Views is that the rich formatting, filtering, sorting, grouping, and other features can be used on this data.

  The List View Web Part itself allows operations such as filter, sort, group, and so on. However, when these operations are compared with Data Views on a feature-by-feature basis, the Data View is more comprehensive in its ability to work with and enable presentation of data.

We will be converting a List View Web Part (LVWP) to a Data View Web Part (DVWP). In the process, FrontPage 2003 will generate the XSLT necessary to (almost) exactly match the Collaborative Application Markup Language (CAML) that was used to render the LVWP. To mimic the interaction that we expect in an LVWP, FrontPage 2003 generates several events. Whenever an LVWP is converted to a DVWP, you will see some extra functionality because this is what makes conversion valuable.

If you don’t care about trying to mimic the LVWP, create the DVWP from scratch by choosing Show Data on the context menu of a SharePoint list in the Data Source Catalog. Select the specific fields that you want to insert, and click Insert Data View. Doing this will cause less XSLT to be generated, and then you can build your links and formatting using the table and other formatting tools in FrontPage 2003.

In the following example, we will actually convert the Links LVWP into a DVWP and leverage Data View–specific features to create a customized presentation. To follow along with this example, we suggest that you add a few links to the default Links Web Part.

Again, we will add a new page to the root directory of the FrontPage 2003 project. This time we’ll name it Links.aspx.

To convert the Links LVWP into a DVWP

1. From within FrontPage 2003, open the empty page Links.aspx in Design mode. Hover the cursor over the Insert option on the Table menu. On the resulting flyout menu, click the Table option. Accept all the defaults, and click the OK button to insert the table.

2. Position the cursor in the first cell. Click Insert Web Part Zone from the Data menu to create Zone 1. This will contain the “before” view.

3. Position the cursor in the first cell of the second row. Click Insert Web Part Zone from the Data menu to create Zone 2. This will contain the “after” view.

4. Click the Click to insert a Web Part link in Zone 1 to open the Web Parts task pane. (See Figure 32-65.)

   

   Figure 32-65. Web Parts task pane

5. Select Links in the Web Part List section of the Web Parts task pane, and click the Insert Selected Web Part button at the bottom of the task pane. You will briefly see a message stating that FrontPage 2003 is “Fetching information about the Web Part from the web server...”.

6. Click the Click to insert a Web Part link in Zone 2.

7. Select Links in the Web Part List section of the Web Parts task pane, and click the Insert Selected Web Part button at the bottom of the task pane.

8. Right-click anywhere on the Web Part in Zone 2, and choose Convert to XSLT Data View in the resulting pop-up menu.

   As soon as the Web Part is converted to a Data View, FrontPage 2003 automatically displays the Data View Details task pane. You can see all the fields that are available in this SharePoint list under the Work With Data category.

9. Click the Style link for the Data View, and change the HTML view from Basic table to the Repeating form (centered) style (which is the third choice in the list). This style is not an available choice on the Web Part in Zone 1.

10. Click the Options tab, and in the Toolbar section deselect the Show toolbar with options for option. Click the OK button to apply the changes.

11. In the Data View, select and delete any one of the rows that contain a field that begins with “URL:”. Press the Delete key to remove the field from the Data View.

12. Select any one of the remaining rows with a link, and set the data to be left-aligned using the toolbar.

13. Save the Links.aspx page and then view it in your browser. (See Figure 32-66.)

    

    Figure 32-66. Converted view in Internet Explorer

As you can see, you can use Data Views to format and display SharePoint lists data, thereby enabling powerful authoring capabilities that seamlessly integrate the authoring platform provided by FrontPage 2003 with the data-driven infrastructure of Windows SharePoint Services.

Using Reports to Measure Site Use and Performance

FrontPage 2003 includes powerful tools to help track site use and performance, and identify potential problems so that you can take action to fix them. These tools are available to use on sites created with Windows SharePoint Services and SharePoint Portal Server 2003, and usage analysis reports are available as long as the server administrator has turned reporting on. Site usage analysis reports are run on a regular basis, with the frequency and time determined by the server administrator.

To access reports from within FrontPage 2003, open your website, and select Reports from the View menu. You can choose from a variety of reports, including Site Summary, Files, Shared Content, Problems, Workflow, and Usage. (See Figure 32-67.)

Figure 32-67. Reports in FrontPage 2003

The Site Summary report presents key information about your site, including the number of hits and downloads, number of files and pictures in your site, the number of files that aren’t linked to and therefore might not be necessary, slow pages, older files, links to reports displaying lists of all of the pages, and more. You can use this report to find many common problems with your site and then fix them.

You can also use the usage analysis reports to find out which pages in your site are being accessed most frequently and which pages might not be necessary or might need to be updated on your site because they are not accessed frequently.

The usage summary report also gives you a snapshot of your site’s usage at a glance, including number of visits, page hits, bytes downloaded, top referrers, top referring domains, and more.

Summary

Microsoft Office FrontPage 2003 and SharePoint Products and Technologies really deliver a powerful set of tools. After we covered some basic SharePoint Products and Technologies fundamentals such as Web Parts, Lists, Libraries, Areas, Personal Sites, and Views, we touched on browser-based customization of SharePoint Products and Technologies and took a high-level tour of FrontPage 2003 itself.

We learned that there are some caveats to editing SharePoint Portal Server 2003 sites in FrontPage 2003. But Microsoft has provided a high level of granularity in our ability to disable some functions.

Then we turned to the most common changes people make using FrontPage 2003 when editing a SharePoint site. We covered adding text, images, and pages and changing almost everything about how a list can be displayed. In the section about Advanced Customization, we discussed using Dynamic Web Templates, Themes, and other new features in FrontPage 2003.

We boned up on using the Data Source Catalog and the huge variety of data sources available through FrontPage 2003. Then we turned our attention to getting the most out of Data View Web Parts. These display workhorses capitalize on the power of XSLT and the Data Retrieval Service in Windows SharePoint Services. We covered displaying, filtering, sorting, grouping, and more. This was followed by a brief example of an XML hierarchy.

We demonstrated how SharePoint lists can be converted to Data Views for additional capabilities for formatting the output. And finally we discussed the various prepackaged reporting functionalities available from within FrontPage 2003.

The next two chapters go a layer deeper and discuss the object models underlying SharePoint Products and Technologies in detail.