Entering and Formatting Text

As seen in Figure 4.7, the basic Design view of FrontPage 2003 looks like many other interfaces in the Microsoft Office System, such as Microsoft Word or PowerPoint.

Figure 4.7. The Design view enables page entry and design much like other traditional Windows products.

The importance of this should be understood: The majority of the Web page design process through FrontPage 2003 is no different from the design process for any other text-related information in any other Windows product. There is no special interface to learn, there are no new keyboard shortcuts, and the average user can quickly start developing HTML content in little to no time.

It would be pointless in this level of book to go over items such as what the bold icon does or how to center your text. Instead, we'll examine the HTML specific issues of format headings, how the Web handles paragraph breaks, character formatting, fonts on the Web, the use of horizontal lines, and how Office's unique tools for cutting and pasting content are specially suited for Web design with FrontPage 2003.

Format Headings

HTML formatting is different from traditional text formatting. In many ways, it is more of a "recommendation" than it is an actual format command. Like other programs in the Microsoft Office System, FrontPage 2003 contains a format headings dropdown box in Design mode. The implications of this need to be understood.

If you are using themes or CSS in your Web design, format headings are vital; it is the way for you to tell FrontPage how to format a specific area of text. Simply select the text you want to format and choose the appropriate formatting from the dropdown list.

In addition to support theme or CSS work, the Format headings that come default with FrontPage 2003 represent the traditional HTML markup associated with the original HTML specifications of almost 10 years ago. Format elements, such as bulleted lists, simply insert the list tags in to the page. Different browsers interpret tags differently (many ignore them), and this needs to be taken into consideration during the Web design process. Never assume that because you assigned text to a specific format heading that it will look a certain way always test it in multiple browsers.

For more on the use of themes and how they are used in FrontPage, see "Using Themes," p. 133.

For more on the use of style sheets and CSS in Web design, see "Using Style Sheets to Format Web Pages," p. 385.

Line Breaks Versus Paragraph Breaks

When you press the Enter key in FrontPage, you will note that it drops two lines down, not a single line as it would in most other text editing products.

This happens because, by default, the HTML tag used in this case is the paragraph tag (the <p> tag). In short, FrontPage assumes that you mean to start a new paragraph and formats any tags accordingly.

If you don't want to start a new paragraph and simply want to move to the next line, press the Alt key when pressing Enter and FrontPage will accommodate; then place a <br> tag instead of a paragraph tag, resulting in a single line break.

TIP

If you want to see a paragraph break and a simple line break, toggle the Show All button in the Standard toolbar. (It's the one that looks like a backward P.)

Fonts and the Web

The Font dropdown menu in the FrontPage Design view needs to be thoroughly understood before it is used in the design process. Yes, you can select whatever font you'd like to see on your Web site, but in order to work as desired, it requires two things: 1) the user must have that font installed on her system and 2) the user must have a browser that actually shows fonts.

Whereas a good percentage of Internet surfers are Windows users with the standard font install, a good percentage of them aren't. If your Web site says use font "x" and the surfers don't have the font installed, they typically won't install it for your page. Although it is possible to embed a font into a Web page (as you would a PDF or Word document), such practice is considered a Web "no-no" and isn't a standard Web practice. In addition, some browsers (such as the one on my phone) have only one font and one font size.

The same is true for the font size dropdown capabilities and even options as "simple" as bold and italics. Some browsers don't support these options because, simply, they can't.

To make things even more interesting, you need to remember that some users won't even read your Web page at all. Assisted surfing devices for the handicapped user might read a page to her or offer site content in Braille. You need to plan your site accordingly.

With all these warnings about making your site work well on all browsers, someone could take my comments as meaning that you shouldn't use a wide font selection or even bold text. This couldn't be further from the truth. Use the technology you have at your finger tips to produce the best looking sites possible just make sure that you remember your entire audience and develop accordingly. This is the delicate "art" of Web design that makes it, for many, so exciting.

For more on using FrontPage to make an accessible Web site, see "FrontPage's Accessibility Features," p. 235.

So, in short, you can "suggest" font types and sizes, but you can't be sure that your user will be able to support them. Never design a site that requires the specific use of fonts because you can never be guaranteed their installation on the reader's browser.

TIP

If, for branding purposes, you must have a specific font somewhere in your site, you have two options: design graphics using the font on your system and place them in the site or design the content in Flash.

Obviously, this will require the user who can support images or Flash but does put you in a position of control if it is needed.

Adding Horizontal Lines

Although many elements of the FrontPage interface have counterparts similar in the publishing world, there is an element to Web design offered by FrontPage (and other Web development products) that simply doesn't have a counterpart elsewhere. This element is the horizontal line, or the <hr> tag.

Horizontal lines are used to break up text in a simple way. Using a basic horizontal line is browser friendly because it gives no specific directions other than insert the line however the browser sees fit. Figure 4.8 shows a page with horizontal lines used to divide text.

Figure 4.8. Horizontal lines used to divide key sections of a privacy policy text.

Double-clicking a horizontal line in FrontPage will open the Horizontal Line Properties dialog box, allowing you to set specific features for your horizontal line. As seen in Figure 4.9, you can edit elements of the horizontal line to better achieve the look you are striving for. As with all design elements described in this chapter, remember that your additional formatting might be ignored by certain browsers.

Figure 4.9. You can choose properties such as a width, height, and color for the horizontal line inserted with the <hr> tag.

Cutting and Pasting Text

It might seem that cutting and pasting text should be a simple process in a WYSIWYG design environment such as FrontPage 2003. This is not the case because a number of elements must be taken into consideration: not only is there the issue of the source font style and size, but also there is the addition of any metadata that might be included in the original content.

For example, a simple paragraph cut and paste from Microsoft Word might be the same font and size as the destination page, but the Word content might also include metadata such as original spacing and formatting. You don't want this additional content in your final HTML because it does little more than slow down the loading speed of the page.

As seen in Figure 4.10, when you paste content from another source into FrontPage, a paste options button appears next to the text that gives you choices of what to do with the content. Most of the time, the two choices are Keep Source Formatting or Keep Text Only. The first option will insert all cut content in to your page, whereas the second will eliminate all metadata associated with the content. The second option will also format the data in the same format as the area that the content was pasted on to.

Figure 4.10. Content pasted directly in to FrontPage is met with a paste options button that offers the ability to either keep the source formatting or only transfer the text content contained in the clipboard.

This feature was not available in previous versions of FrontPage and was a frustrating element for a number of previous users. If you were frustrated by the cut-and-paste features of earlier versions of FrontPage, you will enjoy this new element tremendously.

TIP

The options provided by FrontPage 2003 when pasting content in to your site make it very easy to paste content from pretty much anywhere in to your Web page. Because FrontPage will take the extra step of stripping all metadata from the content, there is no need to worry about it being sent to your page. In addition, because no style content is sent with the paste, content will conform to the font choice already in the area where content is being pasted.