Working with Page Related Views

The first groups of views are all page related because they deal with the specific design and editing of individual Web pages. They provide a means to directly develop site content or edit what already exists. Design view provides a means to edit a page in a WYSIWYG interface, Code view enables for direct entry and HTML of Web page code, and Split view offers a split-screen option that shows the other views at the same time.

Design View

The view most users will spend the most significant amount of their time in is Design view. It mimics the interface of most Microsoft Office System products and provides a WYSIWYG interface for designing most of your Web site content. Figure 3.3 shows another site in Design view.

Figure 3.3. If you are working on a site, the Folder list appears to the left of the Design view.

Design view combines the ability to see what you are building as you build it with the tools in the FrontPage interface and the standard Microsoft and Office keyboard shortcuts. It is also the best interface for building your vision as quickly as possible.

NOTE

Although Design view is a WYSIWG environment, the nature of such an approach requires that some elements appear on the screen that won't appear on your site and vice versa. Make sure to examine your work in Preview view and on various browsers to determine if you are getting the exact effect you are looking for.

For more detailed information on developing site content through Design view, see "Developing the Basic Page: Text, Lists, and Hyperlinks," p. 77.

Code View

Code view offers an interface for entering and editing code directly through the FrontPage interface.

Code view does not limit you to only working in HTML or with simple client-side scripting elements. ASP, JSP, PHP, and other scripting languages can be edited in Code view.

NOTE

If you are programming in a scripting language that FrontPage can't render in the Preview view such as PHP, FrontPage will not allow a jump to Design or Split view.

For more on developing code through the FrontPage interface, see "Working in Code View and Split View," p. 519.

Split View

FrontPage 2003 introduces a Split view option that offers a full-screen look at both the Design and Code views. As seen in Figure 3.4, editing the content in one panel will automatically update the other panel's content accordingly.

Figure 3.4. Split view presents both Design and Code views, allowing editing in either panel.

Split view provides a unique opportunity for Web design because it allows the developer to edit site HTML or site content and instantly see how the information is presented in the other panel. This view is ideally suited for times when a slight nudge or editing of HTML is needed and you want to see exactly how it will be rendered.

NOTE

Split view will only work when developing HTML Web pages. Because FrontPage can't render scripting languages such as PHP and ASP, these can't be edited through Split view.

One way around this issue is to work on the ASP or PHP files as HTML files and then save them accordingly as the last step in the design process. FrontPage won't be able to render any of the active content but can still be used for a considerable part of the design process.

TIP

Want to learn HTML? Consider developing several pages in the Design part of the Split view and watch how FrontPage writes the HTML as you do. It is a fascinating way to learn HTML through deconstruction.

Preview View

Preview view gives the developer the chance to view site content in a browser interface without having to open an additional window. As seen in Figure 3.5, Preview view not only shows site content, but also shows effects such as hyperlink rollovers. It is the same screen as Figure 3.3 but demonstrates the added hyperlink rollover effect. Note the location of the cursor.

Figure 3.5. Preview view shows you how the page you are working on will look in a browser window. Compare to Figure 3.3.

TIP

Because Preview view will accept a form field entry and will link to other sites within the Preview window, you can do a considerable amount of basic functional testing in Preview view without having to open a browser.

NOTE

FrontPage uses the version of Internet Explorer installed on your system to provide the rendering engine for Preview view. As a result, it will present a pretty solid view of how your site will look in Internet Explorer, but won't be as predictable with other browser types.

For more on viewing site content in a browser (as opposed to Preview view), see "Developing the Basic Page: Text, Lists, and Hyperlinks," p. 77.