Use multiple monitors to work with your code

By Marian Myerson

Applies to
Microsoft Office FrontPage® 2003

With earlier versions of the Microsoft FrontPage Web site creation and management tool, I found it tedious and time-consuming to have to switch between Code view and Design view to review and edit my Web pages. With Microsoft Office FrontPage 2003, this is no longer the case.

Using the new Split view, I can simultaneously view and edit content in Code and Design views. If I need more space in either view, I can extend FrontPage 2003 across two monitors, so I can view and work with code on one monitor while looking at the resulting design changes on another.

I can also view two different applications simultaneously. For example, I can have FrontPage open in one monitor, and Microsoft Word open in another. I can document my steps in FrontPage using Word, without ever having to switch application windows.

Setting up your monitors

You have several options for setting up your computer to use multiple monitors:

  • If you use a laptop with a docking station, you can use both monitors, or plug a second monitor directly into your laptop.
  • If your CPU has two video inputs, you can plug in two separate monitors.
  • If you have a Y adapter, you can use it to split the video output to two different monitors.

Regardless of the configuration, once you have set up your second monitor, you can begin configuring your desktop.

Configuring the display properties

You must configure the Display properties before you can view your desktop on more than one monitor.

To set the Display properties
  1. On the Start menu, click Control Panel, and then double-click Display.
  2. Click the Settings tab. In the gray window in the top half of the dialog box, there are two monitor icons (1 and 2). If the secondary monitor icon is shaded (see Figure 1), make sure the second monitor is plugged into the video port of your computer and then click Apply.
  3. To extend your desktop to the secondary monitor, on the Settings tab, select the Extend my Windows desktop onto this monitor check box.

The Settings tab of the Display Properties dialog box.

Figure 1: The Settings tab of the Display Properties dialog box before the second monitor has been recognized by the computer.

For the purposes of our example, arrange the monitor icons so that the primary icon is above the secondary icon. This will allow you to better use Split view, which displays the Code window above the Design window. We will extend this window so that the Code window is in the primary (upper) monitor, and the Design window is in the lower (secondary) monitor (see Figure 2).

Primary monitor is above secondary monitor.

Figure 2: The monitor icons arranged so that the primary monitor is above the secondary monitor.

To identify your primary and secondary monitors, click Identify. This will help you identify your primary and secondary monitors by displaying the numbers 1 and 2 on the associated screens (see Figure 3). For easier viewing, change the background to a solid color.

The Identify Button on the Settings Tab in the Display Properties box shows numbers 1 and 2 in the monitors.

Figure 3: The Identify button in the Settings tab of the Display Properties dialog box displays the numbers 1 and 2 in the monitors. The numbers correspond to the primary and secondary monitors.

 Note   After you apply the changes, you will no longer see the desktop icons on the secondary monitor, as you only need one set of icons per desktop.

You can test the new settings by dragging one of your desktop icons from one monitor to the other.

Using FrontPage across multiple monitors

FrontPage can be used two primary ways in a multiple monitor environment:

  • You can stretch the application window across two monitors.
  • You can open two windows, one in each monitor.

First I will show you how to stretch FrontPage in Split view across two monitors. In this scenario, you can make changes in Design view and have the changes automatically appear in Code view. Second, I will show you how to open a new window of the same page in the secondary monitor.

Extending the Split view window across multiple monitors

To view your Web page in Split view across two monitors, you must configure your Display settings so that the primary monitor is above the secondary monitor.

To stretch a single FrontPage view across two monitors
  1. Open FrontPage on the primary monitor. If it takes up the entire screen, minimize it. If you do not minimize the window, you will not be able to drag it to the other monitor.
  2. Open a Web page. At the bottom left of the document window, click Split.
  3. Click anywhere on the edge of the FrontPage application window with your cursor, and drag it until the application window extends to the second monitor. The code half of Split view should display on the primary monitor, and the design half of Split view should display on the secondary monitor.

You can continue to make adjustments. For example, in the primary monitor, grab the top edge of the FrontPage window and drag the application window to stretch to the width and height of the screen. Do the same for the secondary monitor, grabbing from the bottom edge of the FrontPage application window.

Further refine your view by placing your cursor on the dividing line between the two views and dragging the line to the top of the second monitor (see Figure 4).

With Split view you can extend the Code window across the primary monitor.

Figure 4: With Split view, you can extend the Code window across the primary monitor, and the Design window across the secondary monitor.

Opening a new window on the secondary monitor

Not only can you stretch a single FrontPage view across two monitors, you can also open a new window of the page you are working on in the secondary monitor.

To open a new FrontPage window in the secondary monitor
  1. Make sure the view in your primary monitor is Design view.
  2. Right-click the mouse to bring up a submenu, and choose Open Page in New Window (see Figure 5).
  3. Click Code to view the page in Code view.
  4. Drag the new window to the secondary monitor.

Right-click menu and choose Open Page in New Window

Figure 5: Open a new window by right-clicking the mouse and selecting Open Page in New Window.

Design view displays in primary monitor and Code view displays in new window in second monitor.

Figure 6: Design view is displayed in the primary monitor, and Code view is displayed in a new window in the second monitor.

Conclusion

A number of advantages can be had by working with a multi-monitor setup. With a multi-monitor environment, you can spend more time designing or coding your Web site, rather than switching between views. With more than one view of a single application, or with several different application windows open at the same time, you can display more information on each screen, making the desktop more user-friendly, and application access more convenient. Coupled with FrontPage 2003 multi-monitor support, it is now easier and more convenient than ever to view and edit your Web site.


Marian Myerson is a systems architect and engineer, and a vice president for Web site management. A noted columnist and writer with over 200 published articles, Marian is the editor of Enterprise Systems Integration (2nd edition) and the author of The Complete Book of Middleware.

 
 
Applies to:
FrontPage 2003