Using Web Components

FrontPage provides a very strong environment for designing and coding Web pages. In the previous chapters, we've examined how to use FrontPage to develop the exact pages you want to make.

Another part of FrontPage's strength and complexity is in the toolset that it provides to users for producing content rich Web sites with a low maintenance overhead. Included in these tools are the Web components, shared borders, and link bars.

Although FrontPage 2003 introduces no new elements to these tools, their role in the Web design process is considerable and needs to be examined here. Many of the tools provide benefits that can be replicated using other elements or design approaches. Take care to find which of these tools work best for your specific implementation.

We examine each of the Web component groupings installed with the standard install of FrontPage 2003, link bars and shared borders, in this chapter.

One of the more powerful elements of FrontPage is the Web component. A Web component is a FrontPage plug-in made available through the Insert Web Component dialog box (under the Tool menu) that adds HTML content to the FrontPage document. As a result, specific detailed code can be integrated into a Web page without requiring the developer to produce any HTML. This brings a new level of power to users uncomfortable with writing and implementing code of their own.

NOTE

Many Web components require either FrontPage Server Extensions or Windows SharePoint Services. If you are using one of these Web components, be sure that the server has the necessary extensions or WSS installed or the component will not work as intended.

Sometimes the HTML inserted is little more than code that pulls information or content from another source. Examples of this include a MSNBC component that lets you insert news headlines into your site. Other times, it inserts more complex code that interacts with a Web server to produce additional content (see Figure 9.1). Examples of this approach include search pages and SharePoint Web Parts.

Figure 9.1. A Web page with the MSNBC Web components pulls impressive content from a top 100 Web site without the need to enter a line of code in your Web site.

For a fascinating option on creating your own Web components, see "Making Your Own Web Components," p. 965.

Once a Web component is placed on your page, you can double-click the component to bring up its properties and edit or change the component as you want.

If you want to delete the component from your site, you can delete it with one click and not be worried that any code associated with the component will be left in your page.

The Web Component dialog box, mentioned throughout this chapter, is found by selecting Web Component from the Insert menu (see Figure 9.2). This will open the Web Components dialog box, which allows you to select from a number of Web components for insertion in your site.

Figure 9.2. The Internet Web Component dialog box.

If you having problems making your Web Component work on your Web page, see "It Doesn't Work" in the "Troubleshooting" section at the end of this chapter.

Dynamic Effects

Two options for dynamic effects are provided through this component type: the Marquee and the Interactive button.

The marquee is a simple tag that will cause text to scroll horizontally across the screen. You can control many of the elements of the effect through this component. The marquee tag is only supported in Internet Explorer and will not produce scrolling text if invoked from any other browser type.

The Interactive button is a new powerful feature of FrontPage 2003 and is examined in detail elsewhere in this book.

A full chapter is given to the Interactive button toolset in, "Using Interactive Buttons," p. 441.

Web Search

Two options for Web search are provided as a Web component: Current Web and Full Text Search.

Current Web requires a server with FrontPage Extensions in order to run and adds limited search functionality to your Web site. The results of this feature are limited in nature but can be used to provide out-of-the-box search functionality.

Full Text Search is a considerably more complex search feature, but it is only supported on servers running Windows SharePoint Services.

Spreadsheets and Charts

This component type provides the ability to add Microsoft Office spreadsheets, charts, or pivot tables to a site. In order to view this type of content on your site, the site visitor will need a copy of Microsoft Excel (version 2000 or higher) installed on his system (see Figure 9.3) and will need to be browsing the content with Internet Explorer version 4 or higher.

Figure 9.3. With the Chart Web component, specific charting and spreadsheet data can be quickly integrated into a FrontPage Web site.

NOTE

The licensing issues with these Web components prevent their general use in public Web sites, but they are powerful assets to intranet development when all users have Microsoft Office installed.

For more information on how Excel content is published to the Web, see "Working with Microsoft Excel and FrontPage," p. 771.

Hit Counter

Hit counters provide a simple way for users to see how many times their page has been hit (visited by another computer system).

The hit counter provided in this Web component is easy to use; however, it requires a server with FrontPage Extensions to run. You can choose from five counter type faces.

To insert a counter, simply select the Web component. FrontPage asks you which counter style you want to use, what number you want the counter to "start" at, and if you'd like your counter to be of fixed digit spacing. Simply select the appropriate options and check boxes and click OK (see Figure 9.4). You can create your own character set for your hit counter by selecting the Custom Picture option and entering the path of the graphics file.

Figure 9.4. The Hit Counter options are all accessible from this simple dialog box.

TIP

Hit counters do nothing more than tell you how many times a page has been hit. A Webmaster needs much more data than that and should be referencing server logs for this kind of information. Hit counters simply don't provide enough information.

If you must have a hit counter at your site, you might want to consider using one of the many free Internet services that provide attractive counter options, which also provide better statistics for your personal reference. One great free counter service can be found at http://counteroption.frontpagelink.com.

Photo Gallery

The Photo Gallery Web Component provides four different options for placing pages of images (usually photographs) in an attractive layout with thumbnails on a single page that directly click to the larger image files. One of the layout options, Slideshow, provides a slideshow type functionality that requires only JavaScript to use. Selecting any of the Photo Gallery options opens the Photo Gallery dialog box, seen in Figure 9.5.

Figure 9.5. The first tab of the Photo Gallery dialog box is used to add the pictures to the gallery, set the thumbnail size, and enter the desired content.

The first tab of the Photo Gallery dialog box will help you collect the photos you want to see in the gallery and define the order in which you'd like to see the images presented. The lower half of the screen is used to enter captions and descriptions for each of the images, if supported by your chosen layout.

The second tab lets you quickly switch between layout types and set the number of pictures per row (see Figure 9.6).

Figure 9.6. The second tab of the Photo Gallery dialog box lets you jump back and forth between the different Photo Gallery layout options.

For more information on the Photo Gallery and how to use it to integrate photos into your site, see "Enhancing Pages with Graphics and Multimedia," p. 113.

Included Content

The most powerful of the Web components are the included content options. They enable the user to include various types of external content throughout the Web site with ease. By using the included content options found through this Web component, automatic updates of a page or Web site can be done quickly and easily. In addition, changes made to included content can automatically update later throughout a Web site without having to touch all the pages the content is contained in.

The Substitution Component

The Substitution component lets you quickly enter a page configuration variable into your FrontPage Web site. Options for this include author, page modifier, URL, description, or any freeform text you want to insert.

The Page Component

The Page component lets you insert the entirety of another Web page inside an existing one. When content from an inserted page is updated, FrontPage automatically updates all pages in the FrontPage Web that have inserted the page content. When used and implemented correctly, inserted pages can be used to dynamically update an entire site by simply updating a single page.

Pages included through this process are usually smaller pages specifically designed to be elements of a larger site. Popular included page options contain headers, footers, menu bars, advertising zones, and the like.

When this option is selected, FrontPage opens a simple Include Page Properties dialog box that lets you find the page you want to include in your site (see Figure 9.7). Once selected, FrontPage integrates the included page content at the page location chosen when the component was inserted.

Figure 9.7. The Include Page Properties dialog box lets you select the page that will be inserted into your Web page.

NOTE

FrontPage strips the header content from an included file before it is inserted into a Web page.

TIP

It is important to remember that when you use an included file to update an entire site, every page updated will be changed, regardless of the content on that page. For instance, a two year old press release will be updated with new menu content if it includes a recently updated menu bar or new copyright information if a footer with copyright information has been updated.

If you are working on a site that uses included content, make sure that you publish or synchronize any page in your site that might be updated by such use.

The Page Based on Schedule Component

The Page Based on Schedule Component ads a twist to the included page concept by allowing you to have content added to your site at a specific time. This approach can be used to offer specific content at specific times such as a "good morning" or "closed for the weekend" notice, without having to be there to change the content when needed. Figure 9.8 shows how easy it is to program this information.

Figure 9.8. The Scheduled Include Page Properties dialog box lets you set the time for the included content and offer alternative content (if desired).

NOTE

Because this feature relies on the Web server to serve the content when needed, it only works on servers with FrontPage Extensions installed.

The Scheduled Include Page Properties dialog box asks for the location of the content, the start and finishing times for when the content should be presented, and the location of optional content to be shown when the scheduled content is not displayed.

TIP

You can have all sorts of fun with this component. Consider using it to add special holiday or birthday messages to your Web site.

The Picture Based on Schedule Component

The Picture Based on Schedule component follows the same concept as the Page Based on Schedule component, but it uses graphics instead of content files.

There are a number of ways this could be used. Examples included a "special offer" graphic that only appears at certain times in your site or holiday imagery that not only appears on your site on certain holidays, but also updates your site when you are (hopefully) out of the office.

TIP

The Scheduled Picture option will only show an image at the requested time. If you need anything else from the image, such as a hyperlink or accompanying text, you might want to consider using the Scheduled Content Include to include an HTML file with your image and whatever additional content you desire.

The Page Banner Component

Page banners are dynamically generated content that place a "banner" on the page based on the title of the page in the FrontPage Web site. Whenever the name of the page is updated anywhere, FrontPage will automatically update the page banner without the need for any additional effort on your side.

Page banners are part of the FrontPage theme engine and will create a banner graphic or will format the banner text based on the page theme. If no theme is select on the page with the page banner, no banner will be created.

To add a banner to a page, use the Page Banner component and choose either text or graphics for the banner. FrontPage will do the rest.

For more information on page banners and how Themes are integrated into a FrontPage Web site, see "Using Themes," p. 133.

Link Bars

Link bars are hyperlinked navigational elements for a Web site. They can be generated specifically for a single purpose, or they can pull data from an existing FrontPage navigational structure. In addition, if desired, link bars can pull elements from installed themes to produce a consistent look and feel that matches your Web site.

For more information on building site navigational structure and link bars and the Navigation view, see "FrontPage's Navigation Tools and Elements," p. 147.

Link bars help the Web design process because they provide a means to quickly manage and produce navigation elements without having to enter every hyperlink on every page. Link bars can be created and cut and pasted to as many pages as desired. When using the Link Bars component, you can save even more time by adding new pages using the site navigation structure, which results in the new pages automatically being reflected in the appropriate link bars throughout your entire Web site.

Three options are available for the Link Bar component: Bar with Custom Links, Bar with Back and Next Links, and Bar Based on Navigational Structure, which are covered in the sections that follow. Each of the options provides considerable variables resulting in the ability of the FrontPage user to produce the link bar navigational element of her choice.

Once a bar is inserted into a Web page, double-clicking the bar will bring up the Link Bar Property dialog box and allow you to edit the bar and its content (see Figure 9.9). You can also switch between bar types with this interface.

Figure 9.9. The Link Bar Properties dialog box lets you set, modify, and move links, as well as edit the style of the link bar if desired.

If your link bars don't contain all the content you think they should, see "Where's That Page?" in the "Troubleshooting" section at the end of this chapter.

Bar with Custom Links

The bar with Custom Links option lets you choose the style of the bar from the list of installed themes or lets you produce one of eight different text only bars that don't have a corresponding theme. Once this element is chosen, you can select a horizontal or vertical alignment and then a Link Bar Property dialog box opens that lets you build the link bar with the specific link and text elements that you require.

Bar with Back and Next Links

This bar option blends the Bar with Custom Links option discussed previously with the ability to add links to pages within your FrontPage navigational structure that are on the same level as the page to which the link bar is added. FrontPage will take the links you added and automatically produce additional links to any pages on the same level.

Bar Based on Navigational Structure

A bar based on navigational structure pulls the pages to be linked in the bar from the existing site navigational structure. The dialog box will show the different options for your bar and present a graphical representation of your options for quick selection. The Link Bar Properties dialog box, shown in Figure 9.10, shows the options for which links can be added.

Figure 9.10. When associated with a navigational structure, the Link Bar Properties dialog box doesn't allow you to add links but takes link information from your existing site.

Table of Contents

The Table of Contents Web component will produce, on-the-fly, a table of contents for your Web site. You can choose to have FrontPage create the contents for your entire Web site or only choose to catalog certain pages. You can also tell FrontPage to regenerate the table of contents if any page in your site is edited. FrontPage generates the table of contents file based on links to and from the files in your Web site.

The first of the two options in the Insert Web Component dialog box, For this Web Site, will open the Table of Contents Properties dialog box seen in Figure 9.11.

Figure 9.11. The Table of Contents Properties dialog box lets you set how you'd like the table of contents to appear.

You can control the following options from this dialog box:

• Page URL for starting point of the table Most users will select the home page, but if you want to start from a different area, this option will enable you to do so.

• Heading font size You can choose how large or small you want your table of contents to be.

• Show each page only once Because the table of contents is generated based on links, a page can be listed multiple times. Toggle this option on or off as desired.

• Show pages with no incoming hyperlinks If you'd like pages with no incoming links to be listed in the table of contents, check this box.

• Recompute table of contents when any other page is edited If you want FrontPage regenerating your table of contents on a regular basis, select this option.

TIP

The table of contents developed through this component is based only on what is contained in your site. Pages designed only to be used as included content and private pages will show up in your table of contents unless you specifically tell FrontPage that you don't want this to happen.

Be careful with an automatically generated table of contents. It is seldom what users are looking for and often requires a great deal of editing to get "just right."

Top 10 List

The Top 10 List Web component works in conjunction with FrontPage 2002 Server Extensions to provide quick top ten reports of elements related to your server traffic reporting. The Top 10 List options are as follows:

• Visited Pages Presents the top ten most popular pages on your Web site.

• Referring Domains Shows the top ten domains that are sending traffic to your site.

• Referring URLs Lists the top ten specific Web addresses that are directing traffic to your site.

• Search Strings Reports the top ten search entries in the search engines that were used to find your Web site.

• Visiting Users Offers whatever information is available on the top ten visiting users. If the users are registered with the site and not anonymous visitors, the information is significantly more useful.

• Operating Systems Records the top ten operating systems used by visitors at your site.

• Browser Gives details on the top ten browser types used by your audience.

Going Public wwith Top 10 Results

Making your site's traffic details public is always an interesting endeavor. It is great to be able to share content such as this with your audience, but before implementation, ask yourself if your competitors would benefit from these facts. If they will, or even possibly might, are they worth publishing for the world to see?

In addition, some data might give hackers the information they are looking for. If you have internal pages or elements that make it to the top ten lists, do you want to broadcast them to the world even if they are password protected?

If you want to make this information available to only certain people (such as employees, partners, and so on), consider placing the entire report behind a password protected area.

You need FrontPage 2002 server extensions installed for any of the Top 10 lists to work.

Double-clicking on any of these lists will let you format how they are presented on your Web page and will let you specify the time span represented in each of these reports. Figure 9.12 shows the options for formatting each list.

Figure 9.12. Top 10 List properties can be formatted a number of different ways.

If your Top 10 list contains now content, see "Top 10 List Shows Nothing" in the "Troubleshooting" section at the end of this chapter.

List View and Document Library View

Windows SharePoint Services provides a number of powerful Web Parts that can be added to a Web page to provided extended functionality to that page. Two of the most popular Web Parts, the List View and Document Library View can be added to the site through FrontPage directly. List View provides a means to view data from a data source in a list view. Document Library View generates a dynamic list of files in a document library.

Through the Web Component dialog box, you can add a Windows SharePoint Services List View or Document Library View Web Part to a Web page. You can then directly edit the Web Part and the look and feel of the content in FrontPage to make sure that it matches the rest of your site.

For more information on working with Web parts in Windows SharePoint Services, see "FrontPage and Web Parts," p. 735.

For more on Windows SharePoint Services, see "Windows SharePoint Services 2.0," p. 943.

Expedia Components

These Web components let you add map information to your Web site (see Figure 9.13). You can either choose to develop a link to Expedia that presents the map on the Expedia servers or place the map on your site directly.

Figure 9.13. The Static Map Properties dialog box lets you enter the very address of the map you'd like integrated into your Web site.

MSN Components

The MSN Web components provide two search box items for your site that either search the MSN search engine or provide a stock quote from MSN's Money Central Web site. There are no variables for these components; they simply insert the HTML that integrates with the MSN sites. Figure 9.14 shows both of these elements placed on a basic Web page.

Figure 9.14. The MSN search engine and MSN Money Central MSN Components.

MSNBC Components

The MSNBC components write code that pulls a news headline graphic from MSNBC and presents it at your Web site (see Figure 9.15). The Weather Forecast component enables you to place a weather update for the location of your choice at the site of your choice.

Figure 9.15. The MSNBC components provide basic dynamically updated content to your Web site with the simple insertion from FrontPage.

NOTE

The MSNBC components pull a graphic of the information you select and places that graphic in your Web page. As a result, there is no way for you to edit the size, color, or content of this component.

In addition, if your audience is unable to view graphics, the component offers nothing other than the recommendation to visit MSNBC.com to find news information.

NOTE

The MSN and MSNBC components only provide the initial information at your site and then direct the user to additional information at their sites once the graphic is clicked. Before choosing to use these components, determine whether the value of providing the data at your site outweighs the loss of your audience being redirected to another site.

A large percentage of Web developers consider items that direct traffic away from their site to seldom be worth the (usually limited) benefits.

Additional Components

The Additional Components option will let you choose from any third-party Web components installed on your system. Until an additional component is installed, the option is empty.

No additional components are installed in a standard FrontPage 2003 installation.

NOTE

Most third-party components (free and otherwise) come with their own installer program that will usually add the tool directly to FrontPage (often through the Tools menu). The additional components option is only for the (very limited) instances when a component needs to be added without an installer.

Advanced Controls

The Advanced Controls options give you a way to add content to your site that would otherwise have to be entered using Code view. These options provide an alternative way for those uneasy with editing HTML code in any way to add elements such as Java Applets and Flash movies.

The available controls are shown in Figure 9.16 and are as follows:

• HTML Lets you directly insert HTML into your FrontPage site. To prevent you from modifying HTML inserted in this manner, FrontPage will not allow you to edit or show the HTML from within Design view. This element is meant for times when a user has been given a piece of HTML to put in her site and is uneasy with Code view and the implications of being able to edit code directly.

• Java Applet This option enables you to insert a Java Applet into your Web site without requiring the editing of the page's HTML code. The Java Applet Properties dialog box makes it simple for you to be sure that appropriate information is associated with the insertion of the Applet (see Figure 9.17).

  Figure 9.17. The Java Applet Properties dialog box lets you enter parameters and layout information for your Java Applet.

  

• Plug-In If you need to insert a browser plug-in into your Web site, this control will make insertion easy.

• Confirmation Field This control is used to present confirmation field information to a site visitor for pages delivered after a form is filled out. These are also called "thank you" pages.

• ActiveX Control The functionality of this control is similar to the Plug-In and Java Applet control capabilities. You are presented with a dialog box in which you can make sure that the data needed to support your ActiveX control is also included in your Web page without coding it by hand.

• Design Time Control Using this control lets you install any design-time control available in your system. If none are installed on your system, you will not be able to use this feature. Design-time controls are controls specifically built for the developer that are never seen on a client system. In contrast, runtime controls are controls seen at runtime, or on the side of the client.

• Movie in Flash Format Walks you through the process of inserting a Flash movie into your Web site.

Figure 9.16. Enter the Advanced Control of your choice through this easy interface.