Introduction

 

Welcome to the Microsoft® Office FrontPage® 2003 Product Guide. The purpose of this document is to assist your evaluation of FrontPage 2003, and give you a sense of the enhanced features and functionality that FrontPage 2003 offers.

Web sites are becoming more and more sophisticated, and they require a sophisticated application that can keep pace with your Web development skills and abilities. Microsoft Office FrontPage 2003 is the Web site creation and management application with the tools, power, and features to help you produce professional sites that are dynamic and interactive. FrontPage 2003 empowers users with advances in three key areas:

 

1. Designing: New layout tools make it easier to design the site you want, giving you the precise layout control you need. Improved graphics support makes working with graphics from other applications much easier.

2. Coding: Use design tools to generate better code, or expand your code skills. Use built-in scripting tools for interactive results. With professional coding tools, write code faster, more efficiently, and with greater accuracy.

3. Extending: Build rich interactive Web sites using live data from a variety of sources. Easily develop dynamic XML data-driven Web sites in a WYSWYG (what you see is what you get) environment. And the enhanced publishing features help you get the Web sites you build on line in no time.

 

This Product Guide will walk you through the new features and benefits of using FrontPage 2003, and show you how you can build on your Web design and development skills to create engaging, dynamic Web sites.

Uses for FrontPage 2003

FrontPage 2003 provides Web designers and developers with a set of tools to enable the creation of dynamic Web sites quickly and easily. FrontPage 2003 centralizes all of the design, coding, and publishing functions to provide a total Web creation and management solution with the flexibility to match your design and coding skills, as well as push them to new levels.

FrontPage 2003 takes advantage of the latest technologies such as XML and Microsoft SharePoint™ Products and Technologies to create powerful data-driven Web sites. FrontPage also provides easy-to-use layout and design tools to help you design great-looking sites.

For example, you could use the pre-made template and layout options and the scripting features in FrontPage 2003 to easily implement a quick site with simple interactivity. Or you can develop a more sophisticated site complete with pop-up menus.

With Microsoft Windows® SharePoint Services in Microsoft Windows Server™ 2003, FrontPage 2003 easily allows you to edit and present live data, such as Windows SharePoint Services data, XML, Web Services or OLE DB data sources, to build rich interactive data-driven Web sites that both lower your maintenance costs and allow your users to post to the Web using just the browser.


Overview of FrontPage 2003 Features

Microsoft Office FrontPage 2003 offers new features that help you design, code, and extend your Web efforts.

Enhanced design power to produce better-looking Web sites. FrontPage 2003 provides a number of easy-to-use tools to create professional-looking Web sites that let you:

Control the layout of your Web site quickly, easily and precisely.

Design with the graphics tools you prefer for best results.

Make your sites more accessible with tools to help ensure that people will be able to see your work.

Generate better code, faster. FrontPage 2003 helps you push your coding capabilities to new heights with powerful coding tools. With FrontPage 2003, you can:

Expand the power of your HTML.

Create interactive sites with built-in scripting tools.

Code faster and more accurately with professional coding tools.

Extend the power of your Web site into dynamic new directions. FrontPage 2003 takes the great code and Web design you create and helps you connect with people and information in exciting ways by allowing you to:

Choose from a range of publishing options.

Extend the power of your Web site to connect with people and information in new ways.

FrontPage 2003 in Action

Design Better Web Sites

FrontPage 2003 helps Web designers create great-looking Web sites, giving you the freedom to create the Web sites you want, offering a host of layout and graphics features. And FrontPage layout and design tools help you realize your Web design vision, without requiring any knowledge of HTML.

 

Feature

Description

Invocation

Layout Tools

 

 

Layout table tools

 

Take pixel-precise control of your layout. FrontPage 2003 provides a special set of tools for creating and manipulating tables that are used for layout purposes. Tables that are created using these tools work equally well in different types of browsers, as well as in different browser versions.

 

Use Autostretch to prevent columns and rows from being distorted when the Web page is viewed under conditions that vary, such as browser resolution or the size of the window. You can enhance the look of your page with rounded corners, shadows, borders, and other elements.

 

Use the Layout Tables and Cells task pane to insert a layout table by selecting from a variety of layout styles. You can also draw or create any sort of layout table with the table pencil tool.

 

 

For the Layout Tables and Cells task pane:

·                      In Design view, point to the Table menu, and select Table Layout Tables and Cells to open Layout Tables and Cells task pane.

To apply a layout table template:

·                      In the Layout Tables and Cells task pane, go to Table layout, and scroll through layout table templates.

·                      Click a template to apply it to the current document.

For the Draw Table tool:

·                      In Design view, point to the Table menu, and select Draw Table to view the Tables toolbar. Alternately, click the View menu, point to Toolbars, and then click Tables.

·                      Click the Draw Table icon (the table pencil tool).

·                      Use the table pencil tool to “draw” another table within the page layout

 

 

Layout Tools

 

 

Dynamic Web Templates

FrontPage 2003 has added support for much richer Web site templates than it has had in the past. You can create multiple templates, each containing multiple content regions, and apply these to pages in your Web site. When authoring a page linked to a template, the user is prevented from changing those parts of the page that come from the template. When you update the template file, those changes are automatically propagated to the pages linked to that template. If the editable regions have changed on the template, you simply use FrontPage 2003 to map the regions.

 

Further, Dynamic Web Templates are syntax compatible with templates from Macromedia Dreamweaver 4, so you can easily move your Dreamweaver Web site to FrontPage 2003 or work with Macromedia Dreamweaver users on a single site.

 

To apply a Dynamic Web Template to a new page:

·                      On the File menu, click New.

·                      On the New Page or Web Site task pane, under More Web Templates, select Web site templates.

·                      In the Web Site Templates dialog box, click the appropriate template.

To apply a Dynamic Web Template to a new page:

·                      On the Format menu, point to Dynamic Web Template, and click Attach Dynamic Web Template.

Design-time layers

FrontPage 2003 includes support for design-time layers, making it much easier to work with multiple pieces of content that all sit in the same space and are made visible with code at runtime. You have complete control over layer creation, placement, and visibility. It is simple to use Behaviors in FrontPage 2003 to write script to control the visibility of these images at runtime and to create sophisticated visual effects such as expanding menus.

 

·                      On the Insert menu, select Layer.

 

Page rulers and layout grid

Precision design and placement is a snap with helpful positioning guides such as page rulers and the background layout grid.

·                      On the View menu, click Ruler and Grid.

·                      Select Show Grid or Show Ruler.

Layout detection

Automatically identify layout tables with the Enable layout tool. You have complete control of the layout detection feature —you can turn the layout table tools on and off for a given table, or turn this feature off altogether to control the layout tools manually.

·                      Click (or select) the table.

·                      In Design view, on the Table menu, point to Table Properties, and then select Table.

·                      Check  Enable layout tools or Automatically enable layout tools based on table content.

 

 

Layout Tools

 

 

Tracing Images

 Create a mock-up of a Web page image in a graphics program and then use it as a visual guide to re-create or trace the Web page design. After setting a tracing image, it appears in the background of the document window in Design view. Show or hide the image in FrontPage, set its opacity, and change its position. However, site visitors will not see the tracing image when viewing the site by using a Web browser.

 

To configure and show a tracing image:

·                      On the View menu, point to Tracing Image, and select Configure.

·                      Type the file name in the File Name box, or click the Browse button.

·                      Under Opacity, move the slider to adjust the image opacity to the desired level.

To toggle the tracing image on/off:

·                      On the View menu, point to Tracing Image, and select Show Image.

 

Improved themes

Because FrontPage 2003 uses CSS (cascading style sheets) rather than HTML to apply themes, files are smaller, more transparent, and easier to control and modify. Pages with HTML themes applied in previous versions still work in FrontPage 2003.

·                      On the Format menu, select Theme.

·                      In the Theme task pane, under Select a Theme, scroll through the list of available themes.

·                      To select a theme, click on the thumbnail for the theme, and from its drop-down menu, choose Apply to selected page(s).

Improved work environment and bigger design area

FrontPage 2003 centralizes all of the Web controls and gives you a panoramic view of your entire Web site to make creation and updates easier than ever. And, the bigger design area reduces scrolling.

 

 

 

Graphics Tools

 

 

Improved graphics support

Working with graphics from other applications is easier than ever. New interfaces and default behaviors clearly explain what will happen when importing images into your Web site and what behavior to expect while editing imported images. This helps give you more control over how images are displayed and saved.

·                      Click the image to reveal image borders.

·                      Click on image border and drag to resize the image.

·                      In the Picture Actions drop-down menu that appears, select Only Modify Size Attributes or Resample Picture to Match Size to complete the modification of the graphic.

Multiple editor configuration

Choose which editor to use for particular content when you edit it. For example, if you have a number of .gif files, some of which are photos and some diagrams, you can edit the photos using Adobe PhotoShop and the diagrams using Microsoft Visio® by automatically selecting that editor when you go to edit the file.

·                      On the Tools menu, click Options.

·                      In the Options dialog box, click Configure Editors tab.

Add Macromedia Flash-based content

Including Macromedia Flash-based content in your Web site is as simple as dragging it into your work area. FrontPage 2003 provides a dialog box so you can set properties on a movie in Flash format by double-clicking it, and FrontPage 2003 supports scripting Flash objects using the script authoring functionality.

·                      On the Insert menu, point to Picture, and then click Movie in Flash Format.

 

 

 

Compatibility Tools

 

 

Browser and resolution reconciliation

Target specific page size settings to see how your site will look in various combinations of browsers and resolutions —including simultaneous previewing of multiple browsers.

To target a specific browser size:

·                      On the View menu, point to Page Size and select target browser size.

·                      Gray borders are added to the view if the target is smaller than the available space and a dotted line is displayed to show where the first screen ends.

To Preview in Browser:

·                      On the File menu, point to Preview in Browser.

·                      Select target browser, or choose multiple browsers in various screen sizes. Browser lists are fully customizable.

To customize browser compatibility:

·                      On the Tools menu, point to Browser Compatibility.

·                      Click Change.

·                      In the Authoring dialog box, change desired settings to target specific browser(s).

·                      Click OK to close Authoring dialog box.

·                      Click Check to check browser compatibility.

Accessibility checking

Select guidelines (including US government section 508 guidelines) to discover issues that are identified as being in conflict with the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) or the accessibility guidelines for Section 508 of the U.S. Rehabilitation Act. Accessibility suggestions are shown in a list and you can jump back and forth between that list and your site to address the issues.

·                      On the Tools menu, select Accessibility.

·                      Under Check Options, select desired options.

·                      Click Check.

Generate Better Code

Along with better design tools, FrontPage 2003 has powerful coding tools to help you apply and increase your knowledge of various coding languages, as well as help you easily create interactive scripts. In addition, the design tools in FrontPage 2003 generate efficient and clean HTML and give you more control over the code.

 

Feature

Description

Invocation

Coding Tools

 

 

Split view

The new Split view helps you create and update sites more quickly by showing both the Code view and the Design view at the same time. When editing the Design view in split-screen, the code updates automatically as you work, so you can monitor the code and use this as a learning tool. When editing directly in the code, you manually update the Design view by pressing F5 to incorporate batches of your changes at once.

·                      In Page view, click Split to view both Code view and Design view at the same time.

 

Support for
Multi-Monitor Configuration

 

 

 

Take advantage of multi-monitor support by opening two instances of the same page, dragging the second instance over to your second monitor, and then keeping one in Design view and changing the other one to Code view.  Make a change in Design view on one monitor and see it instantly reflected in the Code view on the second monitor.  Likewise, enter new code into the Code view, save it, and then see it reflected in the Design view on the other monitor.

*Requires a 2nd video card and 2nd monitor.

·                      Start a new page or open an existing one.

·                      Right-click on the page and choose the command Open Page in New Window.

·                      Drag the new instance of the page over to your 2nd monitor.

·                      Now you can switch one instance to Code view and leave the other one in Design view.

Quick Tag Selector

 

See the HTML tree structure below the insertion point in the user interface, and select or manipulate items in Design view. If you are working on a page with a number of nested tables, it can be difficult to select just the table or cells you want to work on. The Quick Tag Selector lets you select the exact element you need.

·                      In Design view, the Quick Tag Selector is located immediately below the page tab.

·                      Click a tag to highlight associated elements in Design view.

·                      Switch to Code view to see highlighted code.

Quick Tag Editor

Create and alter tags easily with the Quick Tag Editor. Select text and edit tags that surround it, wrap it in a new tag, insert new HTML, or remove a tag.

·                      In Design view, click the element on the page you want to edit.

·                      On the Quick Tag Selector, open the drop-down menu associated with the highlighted tag.

·                      In the tag drop-down menu, click Edit Tag.

·                      On the Quick Tag Editor toolbar, make desired changes.

·                      Click the green checkmark to accept changes and close the Quick Tag Editor toolbar.

 

 

HTML Tools

 

 

Smart find and replace

FrontPage 2003 provides basic find and replace functionality, as well as a rules engine for doing HTML searches. You can quickly search and replace on attributes or tags across your entire site or on specific pages. You can save your queries for later use or to share with other authors. This allows you to do fast updates across your Web site with great accuracy. For example, you could specify a rule to “find all pages in the site that lack a keyword meta tag and add the keyword tag before the </head> tag.”

Press CTRL+F to open Find and Replace dialog box.

 

Click the Find tab to find text, attributes, or values.

 

Click the Replace tab to quickly find and replace text, attributes, or values.

 

Click the HTML Tags tab to quickly find and replace tags.

·                       

Edit text files

FrontPage 2003 allows you to edit text files, such as JavaScript/JScript, XML files, XSLT, etc. directly within the FrontPage editor, taking advantage of all the new code editing features without having to switch to a different editor.

 

·                      On the File menu, click Open.

·                      In the Open File dialog box, in the Files of Type box, use the drop-down menu to display desired file types.

Optimize HTML

FrontPage 2003 allows you to clean up the HTML in your pages in two different ways.

 

You can clean up your HTML at author time by simply going to the Tools menu and clicking Optimize HTML. Here, you are able to have FrontPage 2003 automatically clean up your code including removing “white space,” cleaning up HTML created in other programs, nonessential tags, comments, white space and VML code for vector-based graphics.

 

You can also clean up the remote version of your site when you publish, optimizing the files that you post online. This enables you to have full HTML editing capabilities on the local version of the site, while minimizing the size of the page that the user launches in a browser.

 

To optimize local HTML:

·                      On the Tools menu, click Optimize HTML.

·                      In the Optimize HTML dialog box, check or uncheck the elements to be removed.

To optimize remote HTML:

·                      In the Remote Web Site view, click Optimize Remote HTML.

·                      In the Remote Web Site Properties box, under the Optimize HTML tab, check or uncheck the elements to be removed.

·                      C