by William Robert Stanek
Although you can easily create boring, run-of-the-mill documents with FrontPage, it is your design that helps sell your ideas, products, or services to a global audience. You do not have to be a programmer or a computer wizard to design dazzling HTML
documents. What you need are a firm understanding of HTML design concepts and the pointers you will find in this book.
When Tim Berners-Lee envisioned the World Wide Web, he envisioned it having a common and easy-to-use interface that would allow anyone to publish. To accomplish this, he and others at the European Laboratory for Particle Physics (CERN) developed the
Hypertext Markup Language (HTML), which is based on a subset of the Standard Generalized Markup Language (SGML). Using SGML as the basis of HTML ensured that the new markup language for the Web was rooted in a solid standard that was already proven to be a
cross-platform solution.
Only the essential elements of SGML were adopted to form the original specification for HTML. This drastically reduced the complexity of the original HTML specification and reduced the overhead for transferring hypertext documents over the network.
Another advantage of using SGML as the basis for HTML was that SGML document type definitions (DTDs) provided an easy way to extend the HTML standard. It was the intent of the developers of HTML to create a language for Web documents that was initially
simple, yet could grow more complex over time.
Browsers: Windows to the Web
You will see references to HTML and the format of markup code throughout this book, and you might wonder why. Although FrontPage automatically puts your documents in HTML format, you should know the basic structure of HTML and the level of HTML used in your document at any particular time. This helps you understand what is going on behind the scenes and why your document might not look the way you want it to in a particular browser. A browser is a software application that enables you to access the Web. You can think of a browser as your window to the Web. Change your browser and you get a whole new view of the Web. When you use Lynx, your window to the Web has only text. Text-only browsers are the original browsers for the Web. Although it might be hard to believe, several text-only browsers are still being developed.
When you use NCSA Mosaic, your window to the Web has text and graphics. Browsers that enable you to view Web documents containing text and graphics are the second generation of browsers. These browsers are largely responsible for the phenomenal success of the Web.
When you use Internet Explorer, your window has text, graphics, and live animation. Browsers that enable you to view Web documents containing text, graphics, and inline multimedia are the third generation of browsers. These browsers are driving the Web's transition to an extremely visual medium that rivals television for information content and entertainment value.
The HTML specification has come a long way since the early days. Presently, three specifications for HTML are defined. Each new specification is fully backwards-compatible with previous specifications and includes many enhancements to the HTML
standard. In addition to these specifications, many Web publishers use extensions to the standard. These extensions offer Web publishing solutions that current HTML specifications do not support.
The following sections take a look at the HTML standard and extensions to the standard, including
HTML Version 1 is the original specification for HTML. Because of the limited capabilities of the specification, documents created with HTML 1.0 have very basic designs. The primary features of HTML 1.0 documents include
FrontPage is fully compliant with HTML 1.0. Although all HTML browsers can display HTML 1.0 documents, few Web publishers produce documents written exclusively in HTML 1.0. This is primarily because of the significant improvements offered by later HTML
specifications. Consequently, if you plan to publish HTML documents, you should look to the later specifications described in the following sections.
HTML Version 2 offers better control over the layout and highlighting of text within Web documents and is based on the features and extensions Web publishers used in their documents before June 1994. The primary enhancements HTML 2.0 provides to the
HTML standard are
FrontPage is fully compliant with HTML 2.0. Being able to display images with the text on the page finally enabled Web publishers to tap into the multimedia capabilities of the Web. Fill-out forms provided Web publishers with a quick and easy way to
get participation from users.
When the final draft of HTML 2.0 was ratified recently, the HTML 2.0 specification became a Request for Comment (RFC). Most HTML documents on the Web meet the specification for HTML 2.0. You will find dozens of HTML browsers that are HTML 2.0
compliant. If you plan to publish HTML documents on the Web, HTML 2.0 should be your basic publishing solution.
Even before the HTML 2.0 draft was ratified, Web publishers, eager to create better and more powerful documents, started looking to the advanced features offered by HTML Version 3. HTML Version 3 is the next level in HTML publishing and offers powerful
features such as
The original specification for HTML Version 3 was called HTML 3.0. Although HTML 3.0 was widely discussed, the specification was never fully implemented in client browsers largely because of the complexities involved with implementing the advanced
features found in HTML 3.0. Instead of fully implementing HTML 3.0, many browsersincluding the Netscape Navigator, Internet Explorer, and NCSA Mosaiconly supported key enhancements of the HTML 3.0 specification.
As you might expect, the supported enhancements are high on most Web publishers wish lists but are not extremely difficult to implement. The supported enhancements include the following:
This subset of the original HTML 3.0 specification was reworked into a new specification called HTML 3.2. Just as HTML 2.0 is based on the features and extensions used in documents before June 1994, HTML 3.2 is based on features and extensions used in
documents before May 1996. HTML 3.2 is designed as a replacement for HTML 2.0 and, as such, is fully backward-compliant with HTML 2.0 features.
NOTE
The subset of enhancements supported by HTML 3.2 does not include all the extensions proposed in HTML 3.0. For example, HTML 3.2 does not implement the full HTML 3 table model. Instead, HTML 3.2 implements the tables as supported by browsers such as Netscape and Internet Explorer.
The features that HTML 3.0 promised to bring to Web publishing are not gone with the death of HTML 3.0. Instead, many advanced features are being developed as separate specifications. For example, a complete specification is in development for style
sheets. There is also a specification for the HTML 3 table model.
FrontPage directly supports all the elements defined in HTML 3.2. A growing number of HTML documents have features defined in the HTML 3.2 specification. You will find thousands of documents featuring tables, client-side image maps, and
client-pull/server-push. If you plan to publish HTML documents on the Web, you should strongly consider using HTML 3.2 enhancements.
NOTE
The next version of HTML after HTML 3.2 will add support for embedded multimedia objects, client-side scripting, style sheets, and extensions to fill-out forms. The draft specification for this future version of HTML, code-named Cougar, is expected to be released in Fall 1996.
Netscape Communications Corporation developed the most popular extensions to the HTML standard. Netscape has many unique extensions. These extensions, like the HTML specification itself, are changing. Many Web users confuse Netscape extensions and HTML
3.2 enhancements. Although it is true Netscape created extensions to HTML that are incorporated into current draft specifications for HTML 3.2, Netscape adopted key features, such as tables, from early drafts of the HTML 3.0 standard.
Netscape implemented the following unique extensions with the release of Netscape Navigator 1.0:
Although these extensions were once unique to the Netscape Navigator Version 1.0, other companies are adopting these extensions for use in their browsers as well. For example, when Microsoft released the Internet Explorer browser for the Web, the
browser featured full support for most Netscape Navigator 1.0 extensions.
The development team at Netscape didn't stop with the original extensions. Netscape introduced the following extensions with the release of Netscape Navigator 2.0:
Version 3.0 of the Netscape Navigator also introduced new HTML extensions. These extensions include support for the following:
The frame enhancements enable you to specify a color for frame borders and also to remove frame borders. Although Navigator 3.0 does not introduce as many new extensions as previous versions, it is bundled with many client applications including
CoolTalkan Internet phone software packageand features broader support for new Internet technologies such as JavaScript and Java.
NOTE
Throughout the book, I discuss HTML elements used by browsers that support Netscape extensions. Although I usually refer to these extensions as Netscape extensions, keep in mind that many browsers support these extensions. For example, the Internet Explorer 2.0 and later versions support all Netscape Navigator 1.0 and 2.0 extensions. The team at Netscape is hard at work on the next version of Netscape Navigator. The 4.0 version of the Navigator is targeted as a client/server solution for networked environments. You'll see this version in action in Spring 1997.
FrontPage directly supports all Netscape 1.0 and 2.0 extensions and most of the Netscape 3.0 extensions. Netscape extensions offer terrific solutions for your advanced Web publishing needs. Keep in mind that if you use Netscape extensions, only
browsers capable of handling Netscape extensions will display your document as you intended. Because approximately 80 percent of Web users have at least a Netscape Version 1.0-capable browser, using Netscape extensions in your publications is something you
should seriously consider.
Until recently, if you used video or sound in your Web publications, users had to select and download the files to preview them. Yet before they could play the sound or video, they needed to have a helper application configured and available for use
with their browser. This required an extra step that not all Web users are willing to take. Even the countless millions of users that want to play sound and video files have to install a video or audio player on their system, which isn't always easy.
To solve this problem, Web programmers and developers looked at ways to play multimedia files directly in a user's browser. The first result of this effort came from the computer industry giant, Microsoft. Microsoft's Internet Explorer is the premier
browser that directly supports internal multimedia. With direct support for internal multimedia, users are freed from the hassles of installing and configuring helper applications to view the multimedia and Web publishers have greater freedom to include
multimedia in their publications.
Like the Netscape Navigator, the Internet Explorer supports unique extensions. FrontPage 97 directly supports all Internet Explorer 1.0 and 2.0 extensions. Extensions unique to Internet Explorer 2.0 include the following:
Internet Explorer extensions are powerful multimedia solutions for your advanced Web publishing needs. However, only browsers capable of handling Internet Explorer extensions can use these features. Currently, Internet Explorer extensions support video
in Microsoft AVI format and sound in WAV, AU, and MIDI formats. If you plan to incorporate sound and video into your Web publications, you should seriously consider using Internet Explorer extensions in addition to hypertext references to the multimedia
files.
NOTE
Sound and video formats are fully explained later in the book. See Chapter 11, "Adding Sound and Video to Web Pages," for complete details on multimedia formats.
Internet Explorer (IE) version 3.0 was released in early 1996. This version of Internet Explorer features complete support for HTML 3.2 and has the broadest support for the latest Internet technologies and standards. When IE 3.0 was introduced, it was
the only browser to fully support the HTML table model standard first proposed in HTML 3.0 and the only browser to fully support the cascading style sheets standard. IE 3.0 also supports TrueType fonts, ActiveX, client-side scripting, Java, VRML, and
features enhancements for frames. FrontPage 97 fully supports all Internet Explorer 3.0 enhancements except true cascading style sheets.
TIP
With IE 3.0, you can view documents with borderless frames and floating frames. See Chapter 14, "Using Frames and the Frames Wizard," for more information on frames. For more cool frame enhancements, look for the upcoming release of Internet Explorer 4.0 in early 1997.
Java is Sun Microsystem's contribution to Web publishing. With Java, you can create extremely dynamic documents that feature inline applications called applets. Not only are Java applets displayed on the page, they are self-running, interactive
programs that can be previewed on any Java-capable browser. The Java language is simple and easy to learn, and like HTML, Java provides a common language that can be used on any computer platform. The implications of a common language for creating
applications had such a far-reaching effect that Java became an instant hit with Web publishers and users.
Java introduces only a single extension to HTML: the applet tag. However, the applications you can create with Java are limitless. Already hundredsperhaps thousandsof Web sites feature Java applets. You can use Java to create games, product
demos, utilities, and business applications. Because of the tremendous demand for Java-enhanced publications, many browsers already support or plan to support Java applets. However, keep in mind that only users with a Java-capable browser can view or use
an applet. Several browsers currently support applets. The HotJava browser, created by Sun to showcase Java, directly supports applets. The Netscape Navigator 2.0 and Internet Explorer 3.0 can use Java applets as embedded applications. Oracle PowerBrowser
versions after 1.5 also support Java. You should use Java applets as feature attractions but not as the only attractions at your Web site.
Using FrontPage 97, you can create pages featuring applets. You'll learn all about Java in Part IX, "JavaScript and Java."
NOTE
Throughout most of 1995, the Java programming language was evolving and the latest version of Java is not compatible with the original alpha release. Because of this, older versions of popular browsers such as HotJava do not work with the current version of Java. If you want to use Java, you should ensure that you use the following versions:
HotJava version Beta 1 or later
Netscape Navigator version 2.02 or later
Internet Explorer version 3.0 Beta 2 or later
Oracle PowerBrowser versions after 1.5
ActiveX is a technology for creating live documents with powerful and easy-to-use interfaces. Although Microsoft has been developing ActiveX for some time, it is only recently that ActiveX technology has come to the forefront as the hottest Internet
innovation. ActiveX is so hot that it is stealing the Java programming language's spotlight. This is primarily because ActiveX technology is the key to fulfilling all the needs of Web publishers and users for years to come.
FrontPage 97 fully supports Active X. At the heart of ActiveX is a base concept for merging technologies using an enhanced object linking and embedding interface. Following the broad guidelines of the core ActiveX specification, developers can create
add-on modules, which provide additional functionality. Add-on modules currently available include ActiveX controls, ActiveX scripting, ActiveX documents, and ActiveX conferencing.
ActiveX controls are the key to adding live and interactive multimedia to your Web documents. Using ActiveX controls, you can embed and execute software applications in a Web page. These applications allow users to view and interact with movies,
animation, and audio.
NOTE
ActiveX controls are similar to Netscape plug-ins. Both ActiveX controls and Netscape plug-ins enable you to embed applications in your documents. Just as Netscape allows third-party developers to create plug-ins for the Navigator, Microsoft allows third-party developers to create new ActiveX controls. In the coming months, you should see an avalanche of cool ActiveX controls from third-party developers.
Recently, client-side scripting languages have gained popularity. Two of the most popular scripting languages are JavaScript and VBScript. With ActiveX scripting, you can use any client-side scripting language in your documents. You can also link your
client-side scripts to Java applets, embedded applications, and ActiveX controls. (See Part IX, "JavaScript and Java," and Part VIII, "VBScript and ActiveX," for more information on client-side scripting.)
The ActiveX documents module is really very similar to FrontPage's support for Microsoft Office applications. You can use ActiveX documents to import documents formatted for Word, Excel, PowerPoint, Schedule, and Access into your Web pages. These
documents are imported using a special viewer that is inserted into the browser's viewing windows. This viewer has its own toolbars, menus, and interface.
Another giant step forward for Internet technology integration is Microsoft's ActiveX conferencing, which enables real-time, multi-party communications over the Internet. Other specifications that use ActiveX technology include Active VRML and
ActiveMovie Stream.
To help you understand how HTML works, I'll briefly discuss the basic structure of HTML and HTML documents. The formatting of HTML documents depends on markup codes called tags. Tags define the structure of the document and include an element name
enclosed by brackets, such as <H1>, which indicates the start of a level one heading. HTML is not case sensitive; <h1> and <H1> both denote the same
thing.
As you read this section, keep in mind that FrontPage automatically adds markup tags for you whenever you create a new document. Most tags are used in pairs. A tag called the begin tag tells the browser a document element is beginning. Another tag
called the end tag tells the browser an element is ending. The only difference between a begin tag and an end tag is that the end tag contains a forward slash before the element name. For example, the begin heading tag <H1> is paired with the end heading tag </H1>. The initial <H1> tag tells the browser a level one heading is starting, and the end tag </H1> tells the browser the heading is ending.
Typically, when you create documents in a word processor or text editor, the documents contain text formatting such as tabs, spacing, paragraph markings, or page breaks. A key concept to keep in mind as you create your first Web page is that American
Standard Code of Information Interchange (ASCII) text formatting is usually ignored. When your browser sees any of these text formatting techniques, no matter how many times you repeat them, the browser interprets them as a single space.
Because FrontPage knows that this type of text formatting is ignored, the FrontPage editor does not allow you to unintentionally add multiple spaces, tabs, or page breaks. However, because the developers knew that sometimes publishers want to add empty
paragraphs for spacing, FrontPage allows you to create empty paragraphs and adds special markup instructions so the empty paragraphs are displayed properly. The developers also knew that sometimes you want to intentionally add extra spaces. For this
reason, FrontPage allows you to add hard spaces using Ctrl+Shift+Space.
In HTML, you can also define a special character to display. Special characters are described by an element name preceded by an ampersand and ending with a semicolon, such as & for the ampersand symbol. When a
browser sees a special character, the browser interprets the special character and displays the corresponding symbol if possible.
Every HTML document should begin with the markup tag <HTML> and end with the markup tag </HTML>. The begin tag <HTML> tells the browser the
document is an HTML-formatted document and marks the beginning of the document. The end tag </HTML> marks the end of the document and is always the last item in any HTML document.
Every HTML document should also have a header and a body. The header immediately follows the first <HTML> tag. The header is used to specify key aspects of the document, such as the title of the document. The
beginning of the header is specified with the begin header tag <HEAD>, and the end of the header is specified with the end tag </HEAD>.
Following the header is the main section of the document called the body. The body contains the text and objects you want to display in the reader's browser. Like the header, the body has a begin tag <BODY> and an end
tag </BODY>.
Most markup tags have attributes that assign default formats for text or graphics associated with the tag, such as the attribute ALIGN=CENTER. This attribute is used to center a text or graphic element on the page. Most
markup tags have one or more attributes.
Using the three markup tags discussed in this section, you can create the framework for an HTML document as follows:
<HTML> <HEAD> . . . </HEAD> <BODY> . . . </BODY> </HTML>
NOTE
In the example, the ellipses are used to show where additional information would go in an actual document.
Well, that's enough on markup tags for a while. Amazingly, this section showed only a small part of what FrontPage does for you in the background, but that's the wonderful thing about FrontPage. FrontPage takes care of inserting the necessary markup
and you only have to learn about markup tags if you want to.
Before you create your first Web page, you should create a new web. Create a new web called test. To do this, start the FrontPage Explorer, use the mouse to open the File menu, and select New Web or simply press Ctrl+N. Because you want to base this
new web on the normal web, select Normal Web and then press return or click the OK button. This opens the dialog box shown in Figure 8.1.
Now choose to create the web with or without a server. If you want to create the web using a server, enter a designator for the server and a name for the web. If you use the Internet Protocol address of 127.0.0.1 as the
server designator, you can set up the test web without connecting to the Internet or a corporate intranet. If you want to create the web without using a server, FrontPage creates the web on your local file system. For this reason, you need to select a
destination directory and then enter a name for the web.
Figure 8.1. Creating a test web.
NOTE
On networked PCs, the local address 127.0.0.1 should allow you to isolate the test web to the computer you are currently using. In this way, you can experiment with the features of FrontPage without interfering with current network operations.
Your first Web document is based on the Normal template. You can access this document by double-clicking the document labeled Normal Page in the Link View of the FrontPage Explorer. If the FrontPage Editor is not running,
double-clicking any document icon automatically starts the FrontPage editor and loads the document into the current frame. If the FrontPage Editor is running, double-clicking any document icon loads the document into the editor's current frame.
Alternatively, you can access the Normal Page by starting the FrontPage Editor, selecting Open from the File menu, and double-clicking Normal Page in the Current FrontPage Web tab of the Open File dialog box.
Now that you have a new page, look at its default properties. All pages, even new pages, have default attributes. Figure 8.2 shows the Page Properties dialog box. Each input area lets you define attributes for markup tags used in the HEAD element of your documents.
Figure 8.2. Setting page properties.
To set page properties, select Page Properties from the File menu. Alternatively, you can click the right mouse button and then select Page Properties on the submenu that appears.
FrontPage allows you to define attributes for the HEAD element tags without learning the specifics of each tag. Not only does the point-and-click interface save you frustration, but it also saves you time. Most of the input
fields pertain to setting base attributes for the document, such as the background color. If you've played the color guessing game with your HTML pages before, you know how cool it is to see a color palette and select a color from this palette at the touch
of a button.
The following sections teach you how to use these properties. Admittedly, setting page properties by pointing and clicking is easy. What is not so easy is knowing why and when to use these page properties.
The General tab of the Page Properties dialog box is the catch all for page properties. Using this page, you can check a page's filename. You can set a document title, base location, and default target frame. You can even select a background sound for
the page.
By default, FrontPage bases the document uniform resource locator (URL) on the name of the template used to create the document, on the path to the current web, and sometimes on the purpose of the page. If you refer back to Figure 8.2, you see that the
location for the page is set to (New Page). After you save the page, the URL to the page appears in the Location field. A typical URL for this page could be
http://127.0.0.1/test/index.htm
http specifies the document is transferred using the Hypertext Transfer Protocol. The Internet Protocol (IP) address 127.0.0.1 is the numeric equivalent of the host name for the local machine.
This is just as easy for the computer to interpret as an actual host name, such as mcp.com. In fact, all host names are equated to numeric addresses by networked computers anyway. Because you created a new web called test,
test is the name of the primary directory on the local host that contains your files for this web. The final part of the page URL is the name of the file. When you publish the test web or if you look in the test directory in
the FrontPage webs folder, you see the file index.htm.
NOTE
Most server software, including the Personal Web Server, allows you to specify a base document in a directory that is displayed whenever the user doesn't fully specify the URL path to a directory rather than a document. This base document is typically called index.html and can be accessed by adding a forward slash to the directory name in the URL path. Using the slash, you can reference shorter URLs and provide shorter URLs to those who might want to visit your Web site. For example, if you want to access the index.htm document in the newly created test web, you could point your browser to http://127.0.0.1/test/.
Because the URL property is grayed out in the properties window, you cannot update this field directly. If you want to change the filename, you must select Save As from the File menu and make the changes in the pop-up window, as shown in Figure 8.3.
Figure 8.3. Changing the filename.
You define document titles in the General tab of the Page Properties dialog box. By default, FrontPage bases the document title on the name of the template used to create the document. If you refer back to Figure 8.2, you see that the default title for
Normal Page is Untitled Normal Page. The rules for titles are simple. Each document can only have one title. Your title should be short but descriptive. A general rule to follow for the length of the title is 65 characters or less. If your title is over 65
characters in length, it might get truncated when the document is displayed. Additionally, the title can contain no extra formatting or markup. This means it should only contain plain ASCII characters.
NOTE
Think carefully about the title for your document and the information it provides to readers. The title is the most referenced component of any document. It appears on a user's bookmark or hot list, which contains a list of a user's favorite online places saved for future reference. The title appears on the user's history list, which is a list of places visited during the current session. Most search engines list the page title in the query results. Further, most Web browsers prominently display the document title in a special location. Browsers such as NCSA Mosaic display the title in a clear window appropriately called Document Title. Browsers such as Netscape Navigator display the title at the top of the browser's viewing area. Other browsers, such as Lynx, do not display the title unless the user enters a set of keystrokes that tell the browser to display the title.
Because the title might be referenced separately from your document by the user, it should provide insight into the contents or topic of the document. A good title for an extreme sports service in Australia is Extreme Sports Australia. Depending on the
focus of the document, a better title might be Extreme Sports in Australia and New Zealand or Extreme Sport Experiences in Australia and New Zealand.
The Base Location property on the properties page allows you to set a base URL for your page. Usually, you access files on a local Web server using a relative file path. When you use a relative path to locate a file, you are locating the file in
relation to the current file. Although this is the normal way to use relative paths, you can define a base path for all relative links in your document. Using the Base Location property, you can tell the browser to locate files in relation to a specific
path that could actually point to a remote server.
You could define a base path as follows:
http://tvp.com/
The base path example tells the browser to add http://tvp.com/ to all relative links in the document. You will find that defining a base path is most useful when your document is available at two different locations and you
want to relate them to documents at a specific location. For example, you could publish your home page at a free Web mall without changing relative addresses to absolute addresses.
Whenever a user accesses the sample document, no matter where the document is actually located on the Web, any links the user follows lead him to pages at the tvp.com Web site. The base path also ensures that other relative
paths on the page are valid at the new site, including the path to the images on your page.
Using the previously defined base path, the relative references vpbg.html, vpttl11.gif, bboard.gif, and vphp.htm are interpreted as
http://tvp.com/vpbg.html
http://tvp.com/vpttl11.gif
http://tvp.com/bboard.gif
http://tvp.com/vphp.html
The Default Target Frame property on the properties page is used with frame-enhanced pages. You'll find a more thorough discussion of frames in Chapter 14, "Using Frames and the Frames Wizard." Likewise, a discussion of background sound is in
Chapter 11, "Adding Sound and Video to Web Pages."
Most browsers display all text on a slate gray background. Netscape Navigator 1.0 introduced extensions that let you add images and color to the background. Other Netscape extensions let you specify the color of normal text and links. These extensions
are so popular that they were worked into the HTML 3 specification. FrontPage introduces a powerful what-you-see-is-what-you-get (WYSIWYG) interface for selecting the background images and colors to be used in your documents.
In the Page Properties dialog box, click the Background tab to set background and colors for your new page. Figure 8.4 shows two basic ways to add background and colors to the page. You can get the background and colors from another page, or you can
specify your own background and colors.
Figure 8.4. Using the Background tab to set colors and backgrounds.
One page property you might be tempted to use often is Get Background and Colors from Page. This property lets you set background images, background colors, and color definitions for text and links based on another page. To use this property, enable
the Get Background and Colors property on the Property Page by clicking the checkbox beside the property label, as shown in Figure 8.5. Next, specify the name of the file you want to use as the source for these settings. If you don't know the name of a
file, you can use the Browse button to view a list of all HTML documents in the current web.
Figure 8.5. Getting background and colors from another page.
NOTE
Notice that when you enable the Get Background and Colors property, the properties for background images, background colors, text colors, and link colors are grayed out. This tells you these properties cannot be set at the present time and any current settings for these properties are not used.
Although the process of basing color and background definitions on another documents seems fairly straightforward, this is a good example of FrontPage shielding the publisher from the complexities of what's actually taking place. If you use this
feature, the file you name is used as the style sheet for the current document. As you learn in Chapter 16, "Exploring Style Sheets and 2-D Layout," style sheets are a very complex feature of HTML 3.
At the present time, there are inherent problems with using style sheets as implemented for page backgrounds. FrontPage attaches the style sheet as an attribute of the BODY tag, which is nonstandard and not well supported.
What this means is if you use the Get Background and Colors from Page property, many browsers do not display the page as you want it to be displayed.
Keep in mind that in your corporate intranet environment, you have control over the servers and browsers used. You can test the environment to see if it supports style sheets as implemented for page backgrounds. If it does, you might want to consider
using this feature as long as you do not plan to introduce new server or browser software into the environment in the short term.
With the Background Image property, you can specify an image to be used as the background for the document. The image is tiled or repeated to fill the background area. You can use tiling to create design effects using small images. The best image
formats to use for background images are Graphical Interchange Format (GIF) and Joint Picture Experts Group (JPEG), which are fully supported by all graphics-capable browsers.
You enable this property for editing by clicking the Background Image checkbox beside the property label as shown in Figure 8.6. Then, to specify a background image in FrontPage, enter the filename of the image you want to use. If you don't know the
name of a file, you can use the Browse button to view a list of available images. Using background images in your pages is discussed in detail in Chapter 10 "Enhancing Your Web Publication with Imagesthe Easy Way."
Figure 8.6. Using background images.
Usually, your background pattern scrolls with the page. Using FrontPage, you can create background patterns that do not scroll. Nonscrolling background patterns are called watermarks. Watermarks are much more effective than the traditional scrolling
backgrounds. To create a watermark, activate the Watermark property. Watermarks are supported by all browsers that are compliant with Internet Explorer 2.0 extensions.
The Specify Background and Colors property allows you to specify a color for the background. To select a background color, activate the Background property's drop-down list by clicking and holding the left mouse button. As you see in Figure 8.7, you
can then select one of the available colors. Initially, you have 18 choices. The Default value returns the background color to the browser default. If the color you want is listed in the initial list, select it.
Figure 8.7. Using background colors.
To access additional colors, select the Custom value. You see a pop-up window similar to the one shown in Figure 8.8. You can now select a color.
Figure 8.8. Accessing additional background colors.
With the additional color palette open, FrontPage gives you 48 colors from which to choose. The currently selected color is highlighted by a thin black border. To select a different background color, move the mouse pointer to the color you want to use,
click the left mouse button, and then click the OK button.
TIP
FrontPage allows you to set a background color and a background image for the same document. I highly recommend you use this feature when you want to ensure that your pages are displayed in a unique way. If the background image cannot be displayed for any reason (for example, because the user turned off the auto load image feature of her browser), the background color you specified is displayed. Additionally, if you do not specify a background color and the background you specified cannot be displayed, the browser does not use your color assignments for text and links. This fail-safe method ensures that the browser doesn't use text and link colors that conflict with the standard gray background.
Until recently, the color of the font used in your documents was either black by default or was set by the users to a specific color if their browsers supported a color option. However, black text on a black background is unreadable. When you use
background images or colors, you usually need to specify the color for text and links to ensure the text and links are readable.
To ensure text and links on the page are readable no matter the background color or type of image you use, FrontPage allows you to set text and link colors using the following properties:
Text | Specifies the color for normal text |
Hyperlink | Specifies the color for links that are unvisited |
Active Hyperlink | Specifies the color for active links |
Visited Hyperlink | Specifies the color for visited links |
To select a color for text or links, activate the property's drop-down list by clicking and holding the left mouse button. Initially, you have 18 choices. The Default value returns the background
color to the browser default. If the color you want is listed in the initial list, select it.
To access additional colors, select the Custom value. FrontPage lets you select from a palette of 48 basic colors. The currently selected color is highlighted by a thin black border. To select a different background color, move the mouse pointer to the
color you want to use, click the left mouse button, and then click the OK button.
If the 48 colors in the basic palette aren't enough, you can create custom colors for text, links, and backgrounds. FrontPage also lets you store values for up to 16 custom colors for use in your other pages.
To create a custom color, click on the property you want to associate the color with and then choose the Custom color value. This opens the Color dialog box shown previously in Figure 8.8.
You define custom colors using one of the following methods:
The Color/Solid field displays the dithered and solid colors that correspond to your current color selection. When the custom color is set to your liking, click the Add to Custom Colors button to use the value for the current property.
TIP
If you want to save the custom color, select a rectangle in the Custom Colors grid, create your custom color, and then click the Add to Custom Colors button.
Internet Explorer 1.0 introduced a way for Web publishers to control font color anywhere in the text of the document. When you set a font color, you override the default text color you set in the Page Properties dialog box. Start by moving the pointer
to where you want to insert text in the new color or by selecting text to change to the new color.
Although you set the font color using the same dialog box you use to set custom colors for the page, the way you access this color window is different. To access the color window, you choose one of the following methods:
As you see in Figure 8.9, the Color dialog box is slightly different from the Color dialog box shown earlier. Using this dialog box, you can select any of the 48 preset colors. To create custom colors, click the Define Custom Colors button. This
expands the Color dialog box so that it appears the same as the one shown previously in Figure 8.8.
Figure 8.9. Customizing your colors.
NOTE
Although the capability to assign font colors is extremely useful, the use of color in publications has always caused problems. Some color combinations just don't go togetherfor example, purple, green, and hot pink text all on the same web page would be unattractive. Don't use color in your publication because you can; instead, use color as a design technique to enhance your page. When using colorful text in Web publications, you should follow three general rules:
- Use basic colors for text whenever possible, such as black, gray, red, yellow, green, blue, and white.
- Ensure your font colors are readable on the background you chose.
- Limit the number of colors you use on any single page, and if practical, follow the same color scheme throughout your publication. Four colors are usually sufficient.
Margins can enhance the appeal of your pages by making them more distinct. Settings margins for your page is easy with the Margins tab of the Page Properties dialog box (see Figure 8.10).
Figure 8.10. Setting margins.
The first step is to select the checkbox related to the margin you want to set. To set the top margin, select the Specify Top Margin field. To set the left margin, select the Specify Left Margin field.
Next, set the width of the margin by entering a numeric value directly in the input field or by using the up and down arrow buttons. The width of the margin is set in pixels. If the top margin is set to 50, there are 50 pixels of space between the top
of the page and the top-most element on the page.
NOTE
Currently, Internet Explorer 3.0 is the only browser that support margins used in this manner. For a more widely supported way of setting page margins, see Chapter 16, "Exploring Style Sheets and 2-D Layout."
Using the Custom tab of the Page Properties dialog box, you can enter meta information for your pages. As shown in Figure 8.11, all pages created in FrontPage have two default meta values. The first meta value pertains to the type of document and
character set in use. The second meta value states that the page was generated with FrontPage. You can add new meta information using a button labeled Add.
Figure 8.11. The Meta property.
When you click the Add button, you see the dialog box shown in Figure 8.12, where you can enter the meta information and an associated value.
Figure 8.12. Adding meta information.
When a client application requests an HTML document, a Web server usually passes the document with a response header prepended. This header is separate from the HTML HEAD element and contains information the client needs to
interpret the document. Sometimes, you want to modify the standard header or create your own header for special situations. Other times, you want to provide information to the client that you could not pass using standard HTML elements.
Using the META property, you could pass this extra or specialized information in the HEAD element of a document. The server retrieving the document includes this information in the response
header for the client's use.
Two types of variables are associated with the META property
System variables allow you to specify information to be included in the response header using the HTTP-EQUIV attribute. When you use system variables, you should use a valid HTTP header name and supply a value for it.
If you do not know the valid HTTP header name or do not want to supply a header name using HTTP-EQUIV, you should use a user variable instead. User variables allow you to reference meta information. FrontPage uses the
standard user variable generator and sets an associated value that tells anyone viewing the HTML markup for the page that it was generated using Microsoft FrontPage.
In general, you use the META property only when there wasn't a more standard HTML tag you could use to provide the information. Using the expires system variable, you could specify an expiration
date for your document. A Web server adds this meta information to the document's response header as
Expires: Mon, 31 Dec 1998 10:00:00 HST
Using the keywords system variable, you could set keywords for the document, such as publishing, books, and magazines. A Web server adds
this meta information to the document's response header as
Keywords: Publishing, Books, Magazines
Using the refresh system variable, you could specify a time interval that the client should re-request the file, such as every thirty seconds. A Web server add this meta information to the document's response header as
Refresh: 30
If you use user variables, the server does not generate a response header. Some information you might want to pass in this way includes an e-mail address for the document's author, the date the document was published, and other information not
specifically addressed by other HTML tags. You could specify the e-mail address of the document's author with a user variable called author and the document's publication date with a user variable called published.
The General Tab of the Page Properties dialog box has a pushbutton labeled Extended, which allows you to define new attributes for the current HTML tag. Generally, you use this feature to add HTML extensions that FrontPage does not directly support.
Clicking the Extended button invokes the Extended Attributes dialog box. This window shows all currently defined extended attributes and lets you add new attributes using a button labeled Add (see Figure 8.13).
Figure 8.13. Using the Extended property.
When you click the Add button, you see the dialog box shown in Figure 8.14, where you can enter the new attribute and the associated value.
Figure 8.14. Adding an attribute.
Well-designed documents achieve their impact from simplicity of design. They are organized in a way that is coherent and flowing. Yet designs that seem simple and natural to the reader are often the result of intense efforts to make them seem this way.
You can use many techniques to structure the document in powerful yet uncomplicated ways.
Sometimes, it is not what you have on the page that helps convey your message, but what you do not have. Empty space on the page makes material easier to read and helps focus the reader's attention on your ideas. Interestingly enough, it is the
separation of the material that creates the emphasis and draws the reader's attention. Two key components of the page that can help you create white space are paragraphs and headings.
Browsers typically display an empty space between paragraphs, so a page with many paragraphs has more white space. You should use short paragraphs the most and long paragraphs the least. A short paragraph has fewer than six lines. A long paragraph has
ten or more lines. Varying the length of paragraphs is a key technique to keep the reader's attention. If you use the same paragraph length repeatedly, even the most lively material seems monotonous.
Browsers also display an empty space between headings. Using headings, you can divide the document into sections or topics. A document broken into topics looks more manageable and interesting. Headings help the reader identify the main points of the
document at a glance. They also help the reader quickly find topics of interest.
Color is another key feature you can add to the document. Most browsers display your document on a gray background. Netscape introduced an extension that enables you to add images and color to the background. Other Netscape extensions enable you to
specify the color of text and links. If you plan to enhance your documents specifically for users with browsers that use Netscape extensions, the background color element can be a good extension to manipulate.
Often the best way to add color to the page is through graphic images. A few pictures placed strategically on the page can dramatically increase the impact of the page. Your pictures do not have to be sophisticated or high resolution. Simplicity is
usually best. You should place the images so they focus the reader's attention on the key aspects of the page. For example, place a small eye-catching graphic at the beginning of a key paragraph. Adding pictures to your documents is featured in Chapter 10,
"Enhancing Your Web Publication with Imagesthe Easy Way."
The key components of a basic HTML document are headings and paragraphs. Most basic documents also use comments and special characters and text elements such as preformatted text or addresses. The next sections discuss the five basic document
components:
By using headings, you can better organize your ideas. The chapters of most nonfiction books use many levels of headings. You usually find chapter headings, sections headings that pertain to each major topic, and subheadings pertaining to subtopics.
Headings appear in a bold type that is larger than the normal font size. The size of the font is often related to the level of the heading. Chapter headings use the largest font size, section headings use a slightly smaller font size, and so on. The
boldfaced text at the top of this section is an example of a subtopic heading level.
HTML enables you to create up to six levels of headings. HTML headings display in bold type. In general, a level one heading uses the largest font of heading sizes, and a level six heading uses the smallest font of heading sizes. Browsers typically
insert a space before and after the heading. This white space is proportional to the size of the heading. Figure 8.15 shows how the FrontPage editor displays the six heading levels.
Figure 8.15. Using headings in your pages.
You set the heading level in FrontPage using a pull-down menu on the Format toolbar. To make selections from the pull-down menu, click and hold your mouse button and then move the mouse pointer up or down. The pull-down menu that allows you to set text
properties is in the left corner of the Format toolbar, shown in Figure 8.16.
Figure 8.16. Selecting a heading level using the Format toolbar.
To add a heading to your document, move the cursor to the point where you want to insert the heading or select the text you want to format in a particular heading and then select a heading level from the Format toolbar's pull-down menu. Another way to
set heading levels is to open the Format menu and select Paragraph. This invokes the Paragraph Properties window, which you can use to set the heading level at the current insertion point.
NOTE
As the Web publisher, you only have direct control over font size by using style sheets. Because style sheets are not widely supported, the majority of Web publishers can only control the relative size of a font. With relatively sized fonts, the size of the font is determined by configurations set up in the browser displaying the document, and font sizes are consistent relative to each other and the main text. Most browsers display visible differences only in heading levels one to four. Consequently, a level four heading is often displayed in the same font size as level five and six headings.
After years of casual or professional writing, you might find that some processes of writing are automatic. You probably don't think about the need to place a period at the end of a sentence or why we use apostrophes in contractions. Similarly, when
you start a new paragraph, you probably add a blank line, indentation, or both to separate the new paragraph from the previous one without giving much thought about why. You add the blank line or indentation because it makes sense and because it is what
your grammar teacher told you to do. Blank lines and indentation serve to visually separate the paragraphs and break up the document.
In HTML, the way to visually break up the document into paragraphs is to use the paragraph tag <P>. When a browser sees the paragraph tag, it ends the current line and inserts a blank space before inserting the text
or object following the paragraph tag.
FrontPage eliminates the need to insert tags and allows you to add paragraphs just as you would with any word processorby using the normal format. If you change text formats, you can use the Format toolbar's pull-down menu to set the format back
to normal.
NOTE
Keep in mind that when you add empty paragraphs to your document, FrontPage adds special markup that ensures your document is displayed with the spacing you select.
FrontPage offers pushbutton ease for changing the alignment of all text elements. To align a paragraph, heading, or other text element on the page, just move the insertion point to the text element you want to align and then select the alignment you
want to use from the Format toolbar, as shown in Figure 8.17. Alternately, you can select any portion of the text element and then select the alignment you want to use from the Format toolbar. Three alignment options are currently available: Center, Align
Right, and Align Left.
Figure 8.17. Using the Format toolbar to select text alignment.
You can also indent text using the Format toolbar's Increase Indent button. Each time you click this button, the FrontPage Editor indents the text element about an inch. To decrease the indentation, use the Decrease Indent button.
An Inside Look at Text Alignment
Behind the scenes, FrontPage is hard at work ensuring that the text alignment works with the widest range of browsers. Text alignment is a feature of HTML 3 that was originally introduced by Netscape Navigator 1.0. Originally, the Navigator only allowed you to center text using a unique tag. Unique tags present problems to Web publishers because they aren't supported by some browsers. When the designers of HTML 3 implemented text alignment, they did not adopt the Netscape tag for centering text. For this reason, when FrontPage centers text, it inserts both the HTML 3 and Netscape tags for centering. This ensures your text is centered in nearly every current browser. To achieve text indentation, FrontPage adopts a favorite trick of the Web publishing gurus, which is bending the rules to meet your needs. Here, the developers of FrontPage needed a way to indent text. They knew that if they inserted an HTML BLOCKQUOTE element, browsers would indent the text without altering the style of the text. To indent multiple levels, FrontPage actually inserts multiple BLOCKQUOTE elements. An unfortunate side effect of using the BLOCKQUOTE element to create indentation is that it can cause strange results with some HTML elements. Although this problem is more a function of how FrontPage terminates HTML elements when starting a new element, it is a problem you should be aware of.
By using superscript and subscript text, you can add more variety to the textual portions of your page and create more advanced documents. You display superscript text by raising the vertical alignment of the associated text. Similarly, you display
subscript text by lowering the vertical alignment of the associated text.
FrontPage allows you to add superscripts and subscripts using the Font Properties dialog box, which is shown in Figure 8.18. To access this dialog box, select Font Properties from the Format menu or click the right mouse button and then select Font
Properties on the submenu that appears. Next, select the Special Styles tab.
Figure 8.18. Setting superscript and subscript values.
On the Special Styles tab is a field labeled Vertical Position. Initially, the vertical position of any text element is normal. You can change this position to superscript or subscript using the pull-down list provided.
FrontPage allows you to specify the number of points the alignment is offset. In this way, you can create multiple levels of superscript or subscript text. To set the level of the superscript or subscript, adjust the value in the By field.
The type of font used to display the text on your page is usually set in the user's browser. This gives the user control over the font face. Often, you as the publisher want to use a certain font face for headings, such as the highly readable Arial,
and another font face for paragraph text, such as Century Schoolbook. You might want to use a decorative font, such as Augsburger Initials, to create a fancy first letter for the first letter of a paragraph.
Advanced browsers solve this problem by putting relative control over font type into the publisher's hands. FrontPage also supports font typing. If the font type is available on the user's system, the specified font is used to display your text. If the
font type is not available on the user's system, the default font as specified in the user's browser is used to display your text.
FrontPage uses the default font type unless you specify otherwise. You add unique fonts as you create pages by selecting a font type from the Format toolbar. When you want to change fonts, you simply select a new font from the Format toolbar. Behind
the scenes, FrontPage adds all the necessary markup.
Another way to add font types is after you create a page. Select a section of text and then select a font type for the text.
TIP
A key concept in using fonts in your Web publications is to limit the number of font styles you use on any single page. To be consistent, you should also limit the number of fonts you use throughout the publication. A good rule of thumb is to use no more than three different font styles on any page. You should also try to use the same fonts throughout the publication.
The original HTML specification had no way to define a specific font size to use. This is primarily because the font size is traditionally controlled by configurations in the user's browser, and the user is the one who selects the font size she would
like to use for viewing Web documents. Using various heading levels, Web publishers had some control over font size. Generally, you could use a level one heading to create text with an approximate font size of 36, you could use a level two heading to
create text with an approximate font size of 24, and so on. However, this still didn't give Web publishers accurate control over font sizes, especially if the publisher wanted to change font size in the middle of a line of text.
Netscape corrected this shortcoming by allowing Web publishers to define the font size relative to a base font size. You can define the size for the font using values between 1 and 7. A value of 1 indicates the smallest
text. A value of 7 indicates the largest text. The default value of 3 usually corresponds to the size of standard text on the page.
FrontPage allows you to quickly decrease or increase the size of selected text using the Decrease Text Size and Increase Text Size buttons of the Format toolbar, respectively. You can also use the Font Properties dialog box to set the size of select
text. To access this dialog box, select Font Properties from the Format menu. You can also click the right mouse button and then select Font Properties on the submenu that appears. As shown in Figure 8.19, the Font tab of the Font dialog box has a field
labeled Size. You can use this field to adjust the relative size of selected text.
Figure 8.19. Using the Font dialog box to adjust the size of text.
Being able to adjust the font size is very handy. A small font size is useful for disclaimers or copyright notices that should appear on the page but not eat up page space. A large font size is useful when you want to draw attention to specific
keywords or paragraphs of text. You can adjust the font size to create a large first letter for keywords or the first word in a paragraph. You can also create word art by adjusting the font size within words or sentences, as shown in Figure 8.20.
Figure 8.20. Creating word art with relative font sizes.
If you are a programmer or have looked at the printout of a computer program, odds are you have seen comments inserted in code. Comments are used in computer code to make notes or explanations to anyone who might see the code. Even the original
programmer finds the comments useful when changes or additions to the code are necessary, especially if they come up months or years after writing the program. Programmers use comments because working through the logic of code every time it must be changed
is a waste of time and resources.
Web publishers can similarly use comments to save time and resources when making changes and additions to HTML documents. You can use comments to track the update history of the document, make notes about text, links, or objects in the document, or
pass information to anyone who might be reading the source code. Comments are not displayed by the browser with the text and objects on the page and are only viewable if you look at the source code for the document.
In FrontPage, you add comments by selecting Comment from the Insert menu. This opens the dialog box shown in Figure 8.21, where you can enter your comments. When you are finished, click the OK button.
Figure 8.21. Adding comments to your page.
FrontPage inserts your comments on the page. Although this text can be viewed from the FrontPage Editor, it is not displayed by a Web browser unless the reader views the HTML markup for the page. Annotation text is displayed in purple and retains the
character size and other attributes of the current paragraph style.
TIP
Comments are inserted in the page using a simple WebBot called the annotation bot. When you move your pointer over the annotation text, you see a robot icon. This icon indicates that a WebBot is embedded in the page. You access an edit window associated with the bot by double-clicking when the robot icon is visible. Double-clicking when the robot icon is visible opens the Comment dialog box.
In HTML, special characters are also called entities. The two types of entities are character entities and numeric entities. Character entities use actual text characters to define the special character, such as "
for the double quotation mark symbol. Numeric entities use numbers to define the special character and add a hash mark before the number, such as | for the vertical bar (|) symbol. The
numbers used with numeric entities correspond to character positions in the ISO Latin I character set.
With FrontPage, using special characters in your Web document is easy, and you don't have to memorize character values. Wherever the special character should appear in the text of your document, you simply open the Insert menu, select Symbol, and then
choose a character to insert (see Figure 8.22).
Figure 8.22. Select a symbol to insert.
When a browser sees that special character, the browser interprets the character and displays the corresponding symbol, if possible. For example, when a browser reads the entity value |, it displays the vertical
bar symbol.
NOTE
In HTML, you must use entity values for any characters used in markup tags, which include the following symbols: #, <, >, and &. Fortunately, FrontPage automatically inserts these special characters for you.
In addition to headings, paragraphs, and special characters, many Web documents contain other text elements, such as
In HTML, addresses get special attention. Browsers typically display address text in italics with a paragraph break before and after the address. No other special formatting is associated with addresses.
To add an address to your document, move the cursor to the point where you want to insert the address or select the text you want to format as an address and then select Address from the Format toolbar's pull-down menu.
Another way to add an address is to open the Format menu and select Paragraph. This brings up the Paragraph Properties dialog box, which you can use to add address formatting at the current insertion point. While this dialog box is open, you can also
select an alignment for the address with the Paragraph Alignment field, as shown in Figure 8.23.
Figure 8.23. Select an alignment for address text.
TIP
An address entered in multiple lines using the Enter key has a lot of empty space. This is a function of HTML formatting and not a fault of FrontPage. To avoid extra spacing, use Shift+Enter, which inserts a line break.
Defining a section of text as formatted is extremely useful and enables you to use standard ASCII text formatting techniques to format text in your documents. In a section of text declared as formatted, you can use any of your favorite ASCII spacing
tricks, including tabs, multiple tabs, multiple spaces, and multiple blank lines without fear that a browser will discard them. Usually, formatted text is displayed in a monospaced font such as Courier.
When you use formatted text, the FrontPage Editor really works overtime. Not only is the editor adding HTML tags, but it is also inserting ASCII formatting that is saved with your document. Figure 8.24 shows a sample document with formatted text.
Figure 8.24. A document with formatted text.
To add formatted text to your document, move the cursor to the point where you want to insert the formatted text or select the text you want to be in this format and then select Formatted from the Format toolbar's pull-down menu.
Another way to add formatted text is to open the Format menu and select Paragraph. This brings up the Paragraph Properties dialog box, where you can add formatted text at the current insertion point.
CAUTION
When using preformatted text, keep in mind that monospaced fonts appear much wider than proportional fonts. Proportional fonts use the amount of screen space proportional to their size, which means that an i uses less screen space than a w. In a monospaced or nonproportional font, each letter uses the same amount of screen space.
FrontPage makes Web publishing easy. Using the techniques discussed in this chapter, you can create simple yet effective Web documents. Although dozens of HTML tags are used to create the features discussed in this chapter, FrontPage allows you to
create pages without worrying about tags and their attributes. Not only does this save you time, it also allows you to concentrate on building the visual impact of your documents.