Exploring an Existing Web Page

A Web site consists of one or more individual Web pages . When you develop a Web site, you work with the individual pages and the overall site structure. When you want to edit a Web page that is part of a FrontPage-based Web site, you first open the site in FrontPage, and then open the individual page. This avoids the possibility that you might make changes to a page and then disconnect it from the rest of the site.It also ensures that changes made on an individual page are reflected across the entire site, as appropriate.

Important

If FrontPage is your default HTML editor, you can open individual Web pages from outside FrontPage by double-clicking the page file in Windows Explorer. However, if FrontPage is not your default editor, accessing and changing files individually from outside FrontPage could result in damage to the Web site. To set FrontPage as your default HTML editor while starting FrontPage, click Yes when prompted to do so.

 New in Office 2003 ”Web Site tab  Page creation and editing tasks are done in Page view , which displays the open page or pages in the Page view editing window. At the top of the editing window is a tab for the current Web site and tabs for any open pages. You can open an existing page by double-clicking it on the Web Site tab. The tab at the top of each page shows the page s file name. If multiple pages are open, you can switch to another page by clicking its tab or by clicking its file name on the Window menu.

Tip

To see information about an entire site and access the Folders view, Remote Web Site view, Reports view, Navigation view, and Hyperlinks view options, click the Web Site tab at the top of the Page view editing window.

Page view provides four different ways to view your Web page:

•  New in Office 2003 ”Web page views  The Design pane displays the Web page as it will appear in a Web browser, except that additional design guides, such as shared border indicators and table and cell outlines, are also visible. You work primarily in this pane when creating Web pages.

• The Code pane displays the HTML code behind the Web page. Elements are color -coded to make it easier for you to discern text and content from thesurrounding code. Each line of code is numbered. Error messages often referto line numbers within the HTML code so you can quickly locate problems.

•  New in Office 2003 ”Split view  The Split pane simultaneously displays the design view and HTML code. Selecting a page element in the design view simultaneously selects the element in the code so you don t have to scroll through the code to find what you re looking for.

• The Preview pane displays the Web page as it will actually appear in a Web browser. Hyperlinks and most page elements are active in the Preview pane.

Most FrontPage users will do almost all page design work in the Design pane, which offers the simplest interface.

In this exercise, you will open an individual Web page in Page view and look at the page in the different Page view panes.

USE the GardenCo Web site in the practice file folder for this topic. This practice file is located in the My Documents\Microsoft Press\Office 2003 SBS\Understanding folder and can also be accessed by clicking Start/All Programs/Microsoft Press/Microsoft Office System 2003 Step By Step .

BE SURE TO start FrontPage before beginning this exercise.

1. On the Standard toolbar, click the down arrow to the right of the Open button, and then click Open Site in the drop-down list.

2. In the Open Site dialog box, browse to the My Documents\Microsoft Press\Office 2003 SBS\Understanding folder, click GardenCo , and then click Open .

   The Web site opens in FrontPage with the Folder List displayed.

   Tip

   If the Folder List is not displayed, click Folder List on the View menu to display it.

3. In the Folder List , right-click the contact.htm file, and then click Open on the shortcut menu.

   The file icon changes to an open Web page icon, and the file opens in the Page view editing window . Folder List and Navigation buttons appear at the bottom of the Folder List; you can click these to switch between the Folder List and the Navigation Pane.

   

   At the top of the editing window, tabs appear for the current Web site and the open page. You can use the four buttons at the bottom to switch between different views of the open Web page.

4. Use the scroll bars to look at the entire page.

   

   This page has shared borders at the top and left side of the page, delineated by dotted lines.

   Shared borders appear on every page of the Web site and contain the same information, giving the site a consistent look. The top shared border of this site contains a corporate logo and the page title, or page banner . The left shared border contains a link bar displaying graphic hyperlinks that you can click to jump to other pages in the site.

   The content area in the center of the page contains text, a graphic, a table, and two e-mail links .

5. At the bottom of the Page view editing window, click the Show Code View button to switch to the Code pane.

   

6. Find each section of text within the page code, and study the surrounding HTML code. Try to identify the code that creates each page element.

7. Click the Show Split View button to switch to the Split pane.

   

8. Click the Show Preview View button to switch to the Preview pane.

9. Click the hyperlinked buttons on the link bar to switch to other pages.

10. When you re done looking at the page, click the Close button in the upper-right corner of the Page view editing window to close the file.

CLOSE the GardenCo Web site. If you are not continuing on to the next chapter, quit FrontPage.