Now that you are thinking about what you want to put on your site, you probably want to start building your own pages. You should have a fairly good idea of the types of pages you want to put in your web. Roll up your sleeves, because it is time to start building those pages. This chapter starts with the basics: working with headings, paragraphs, and text styles.
This chapter shows you how to add basic content to your pages, using headings, paragraph styles, and fonts. After the basic content is on your pages, you can develop navigation bar pages, such as those discussed in Chapter 7 "Getting from Here to There," to navigate to other pages in your web. Then, use the Include bot to place the navigation bar on the main pages in your web. You can create a text version of the navigation bar first. This way, you can make sure that you like how the links flow before you make the graphics. You can even put pages on the web at this point. At least they will do something while you develop the graphics.
After you create your page content and add the navigation bar to your pages, you can develop and add images to your pages. Chapter 10, "Sprucing Up Your Pages," shows ways that you can add images to your pages and includes some tips on how to create them.
As you read along, you should reproduce the examples in this chapter and the chapters that follow. Use the File | New FrontPage command in the FrontPage Explorer to create a normal web. When you create a normal web, it contains a single blank page. You already know the procedure: Simply specify a Normal web in the FrontPage Editor's New Web dialog box. After you create the web, open the page in the FrontPage Editor to complete the examples.
Now, take a look at the basic building blocks that you use in your pages-headings and paragraphs.
You have a blank page in front of you, and you are wondering where to start. You can begin your page by entering headings first. Starting this way gives you a feel for the content that you want to include on a page. It is also easier to create bookmarks when there is not much text between headings-you have less to scroll through.
You can add headings to your page in a number of different ways. One method is to apply the heading formatting to each heading as you enter it on the page. The following example shows how to do this.
Here is one way you can create the headings shown in Figure 8.1:
Figure 8.1 : Organize your thoughts by placing headings on your page first.
NOTE |
When you position the insertion point at the end of a heading and press Enter, the next line is automatically formatted as a normal paragraph. When you position the insertion point at the beginning of a heading and press Enter, the heading moves down one line, and the space it formerly occupied is formatted with the same heading style. |
Another way to create the headings on the page is to enter all items as normal text and then use the Change Style drop-down menu in the Format toolbar to reformat the headings appropriately. You can also reformat headings from the Paragraph Properties dialog box, which is discussed in "Setting Paragraph Properties," later in this chapter.
After you enter the headings, enter the content beneath each heading. Look at the section and decide what best conveys the information that you want to include. Sometimes, plain text is all that is necessary. Other times, a list or a table might be more effective in getting the message across. As you enter the content, you can create links to other pages in your web. You can create new pages as you create the links and add them to your To Do list so you can work on them later.
You can use three different types of paragraph styles to add the
content to your pages-normal, formatted, and address. A paragraph
is a line or a group of contiguous lines that use the same format
and are separated in the FrontPage Editor with white space. Once
you hit the Enter key at the end of a line, you start a new paragraph.
The paragraph is separated by what appears to be an extra space.
TIP |
You can use line breaks to start a new line in the same paragraph without adding extra space. |
You use some of the same methods discussed earlier to add text content to a page. For example, you can use the Change Style drop-down menu in the Format toolbar or the Format | Paragraph command to choose your paragraph style. When you format a paragraph, all the text contained in the paragraph changes to that format. You cannot mix paragraph styles in a paragraph. You can, however, mix character styles in a paragraph, which is discussed later in this chapter.sing Normal Paragraphs
Normal paragraphs are the meat-and-potatoes paragraphs of your web page. You use them for most of your content.re several ways that you can insert a normal paragraph on a page:
To enter a normal paragraph on your page, follow these steps:
Stuffed potatoes. Boy, I really like them a lot. And I've
figured out some great ways to make them, too. If you follow the
tips I've included on this page, you'll want to have stuffed potatoes
for dinner every night. Sound boring? Not really, because you
can top potatoes with just about anything you can think of.
Use formatted paragraphs when you need to provide content in a fixed-width format. FrontPage 97 enables you to place tabs within formatted paragraphs, which makes creating formatted text like the one shown in Figure 8.3 very easy. Formatted para-graphs are typically used for text-based tables, ASCII art, and code. Figure 8.3 shows three examples of formatted paragraphs. Line breaks split each paragraph into several lines.
Figure 8.3 : Use formatted paragraphs when you need to use fixed-width text with layout.
Enter the text shown in Figure 8.3 on your page, using the following steps:
Address paragraphs format text in italics. The traditional use for an address paragraph is to place author information at the beginning or the end of a page. Most commonly, this information is placed at the end of a page, as shown in Figure 8.4.
To insert an address paragraph on a page, perform the following steps:
Once you have text or headings on your page, it's very easy to reformat it to another heading or paragraph style. You can reformat a paragraph or heading in a couple of ways.
You can change between normal, address, or formatted paragraphs, paragraphs to headings, or you can change heading styles very easily. To change the formatting of a paragraph or heading, you need only follow these simple steps:
You can use the Format | Paragraph command to format a paragraph or heading. When you use this command, the Paragraph Properties dialog box, shown in Figure 8.5, appears.
To format a paragraph or heading from the Paragraph Properties dialog box, follow these steps:
TIP |
Use the Align Left, Center, and Align Right buttons on the FrontPage Format toolbar to align paragraphs or headings quickly. |
Extended attributes are used to apply HTML tag attributes that are not supported directly by the FrontPage Editor. These attributes are added to the HTML code that FrontPage generates for the paragraph. You can add extended attributes to paragraphs by clicking the Extended button in the Paragraph Properties dialog box. You use three dialog boxes to add an extended attribute, all of which are shown in Figure 8.6.
Figure 8.6 : Adding an extended attribute to a paragraph.
To add extended attributes to a paragraph, do the following:
Although FrontPage allows you to format the text in your pages into any font style you have on your system, there's something you should know. When you work with FrontPage, it's all too easy to forget that you aren't working with a word processor or page layout program. You're working with an advanced HTML editor, and a Web page is a slightly different animal. HTML code is basically data that specifies how a page should be displayed, and it's designed so that it's not specific to one computer platform.
When you choose a font in FrontPage, you're choosing a font that resides on your computer. The name of the font appears in the HTML code, but the actual font does not. In order for the user to see the same font you design in your pages, the user must have a browser that supports the use of different font faces. The font face must also reside on the user's system. If the user does not have the font face, the default fonts (usually Times Roman for proportional font and Courier for fixed-width font) are used on the user's end instead.
How do you know which fonts are safe to use? As a general rule, it's safe to use the fonts in the following list. Examples of the fonts are shown in Figure 8.7.
Figure 8.7 : Windows and Internet Explorer 3.0 fonts.
Windows (Windows 3.1, Windows 95, and Windows NT) furnishes the following fonts: Arial (normal, bold, italic, and bold italic), Courier New (normal, bold, italic, and bold italic), and Times New Roman (normal, bold, italic, and bold italic).
Microsoft Internet Explorer 3.0 furnishes additional fonts that can be viewed in your web pages and are readily available to those who use this browser. They are Arial Black, Comic Sans MS (normal and bold), Impact, and Verdana (normal, bold, italic, and bold italic).
You can download all the fonts mentioned previously from Microsoft's site in Windows and Mac format in the section True Type Fonts for the web. Although Windows and Microsoft Internet Explorer come furnished with the previously mentioned fonts, the Web versions come with additional characters. Coming soon are Trebuchet (normal, bold, and italic) and Georgia (normal, bold, italic, and bold italic). If you use these fonts, mention that your pages look better if the user downloads them. Provide a link to the following pages:
You can find the Windows versions of the fonts at
http://www.microsoft.com/truetype/fontpack/win.htm
You can find the Mac versions of the fonts at
http://www.microsoft.com/truetype/fontpack/mac.htm
After you download the TrueType fonts for the Web, you need to install them on your system. In order to install the new versions of the fonts, you have to delete the old versions first. You add and delete fonts to your system from the Windows 95 Control Panel. From your Windows desktop, click My Computer. Then, choose Control Panel and click the Fonts folder. The Fonts dialog box, shown in Figure 8.8, appears. To delete fonts, highlight the fonts you want to delete and choose File | Delete. To add new fonts, choose File | Install New Font and locate the directory that contains the fonts you want to install.
Figure 8.8 : You can install new fonts from the Fonts dialog box, accessed from the Windows 95 Control Panel.
In the FrontPage Editor, the Font dialog box is divided into two tabs. The Font tab allows you to choose a font face, size, and color. As you select your font options, a preview of the result is shown in the lower-right section of the dialog box.
Use the Format | Font command to apply formatting
to the text on a page. You can apply formatting to a single character,
a word, a group of words, a sentence, a paragraph, or even the
entire page. You can also set five traditional HTML character
style tags from the Font dialog box, as shown in Table 8.1.
Style | HTML Tag | Typical Use |
Emphasis | <em> | Select Italic from the Font Style section. Renders text in italics. |
Strong | <strong> | Select Bold from the Font Style section. Renders text in bold letters. |
Underline | <u> | Underlines text. |
Strikethrough | <strike> | Renders text with a line drawn through it. It is often used in legal online documents. |
Typewriter font | <tt> | Renders text in fixed-width format. |
To format the fonts on your page, follow these steps:
You can designate a default proportional and fixed-width font
to use in the FrontPage Editor. If you would rather use Arial
instead of Times Roman, for example, you can configure FrontPage
to do so. You can also specify what character set you want to
use for your pages. For example, if you need a character set that
supports special characters for French or Spanish, you can configure
FrontPage to do that as well.
NOTE |
In the Beta 2 release of FrontPage 97, the font you select in the Font Options dialog box is the default font for the FrontPage Editor only. If you want to use the font in your pages, you must format your page content accordingly. The easiest way to format an entire page to use a specific font is to choose Edit | Select All and select your font from the Font drop-down menu in the Format toolbar. |
To set font options, follow these steps:
If you don't want to take a chance on different font faces, you
can also use several different types of character styles that
are built in to HTML code. These character styles are basically
nothing more than variations on one proportional font (usually
Times New Roman) and one fixed font (usually Courier New) and
are shown in Table 8.2. You can format any text on your page to
use a different color, alignment, or font size.
Style | HTML Tag | Typical Use |
Citation | <cite> | Marks a citation from a book or other published source. |
Definition | <dfn> | Marks a definition. It is usually preceded by a term. |
Sample | <samp> | Renders sample text or special characters. |
Blink | <blink> | Causes selected text to blink on and off. Use it sparingly. |
Code | <code> | Marks computer source code. It is rendered as fixed-width text in FrontPage Editor, but it is rendered as monospaced text in some browsers. |
Variable | <var> | Marks a variable used in computer code, equations, or similar work. It is usually rendered in italics. |
Bold | <b> | Renders text as bold. You can use the Bold button on the FrontPage Editor toolbar. |
Italic | <b> | Renders text as italic. You can also use the Italic button on the FrontPage Editor toolbar. |
Keyboard | <kbd> | Marks instructions that a user enters by keyboard. It is rendered as fixed-width text in FrontPage Editor, but it is rendered as monospaced text in some browsers. |
Superscript | <sup> | Renders text above the normal text baseline by a specified amount. |
Subscript | <sub> | Renders text below the normal text baseline by a specified amount. |
To apply character styles to your text, follow these steps:
In Figure 8.13, the three aligned paragraphs are selected for formatting. The font size is increased from the default font size-3 (12 point)-to 5 (18 point) by clicking the Increase Text Size button on the toolbar. The Italic button is used to put the text in italics. The Font Color button is used to change the text to blue.
Figure 8.13 : Normal text can be reformatted in interesting ways when you combine different formats.
The words "They're great", shown in Figure 8.13, demonstrate how you can apply character formatting to a portion of a word. The font size is increased a few letters at a time. As you can see, you can use character formatting to achieve interesting effects without relying on graphics.
To add special characters and text formatting to your page, follow these steps:
If you change the format of your text-such as if you increase or decrease the font size-you can return the text to the default format. Simply select the text and choose Format | Remove Formatting, or press Ctrl+Space. The text returns to the default format for its paragraph style (normal text for normal paragraphs, italic text for address paragraphs, and preformatted text for formatted paragraphs).
FrontPage enables you to insert symbols in your pages without using ASCII codes. You can also add comments to your pages that appear in the FrontPage Editor but are not visible in other browsers.
Special characters are items such as trademark, registration, and copyright symbols; accent marks on text; special currency symbols; and common fractions. In the following example, you replace the word copyright with the copyright symbol.
To insert a special character, follow these steps:
You can apply comments to your pages to remind you of items that need to be changed or addressed. Comments display in the FrontPage Editor only. If you view the pages in another browser, they are undetectable. In other words, your pages appear as if the comments don't exist on the page.
To insert a comment on your page, follow these steps:
You use horizontal lines (traditionally known as horizontal rules)
to distinguish the beginning or end of sections on your pages.
For example, if you have a page that describes the main sections
on your site, you use horizontal lines at the end of each section's
description.
NOTE |
If you want a fancier divider, insert a divider graphic into your page. Your dividers can be gradients, dots, stars, metallic bars, or whatever else you can think of. Refer to Chapter 10 for more information on using images in your pages. |
To insert a horizontal line into your page, follow these steps:
You can change the appearance of a horizontal line by using the Horizontal Line Properties dialog box. When you edit the appearance of a horizontal line, FrontPage remembers the settings until you close the FrontPage Editor. Any time you insert another horizontal line afterward, the previous settings are used.
To change the appearance of a horizontal line, perform the following steps:
NOTE |
You can also double-click the horizontal line to quickly open the Horizontal Line Properties dialog box. |
When you press the Enter key to start a new line on a page, it
starts a new paragraph and inserts white space after the preceding
paragraph. You can use line breaks to begin a new line without
adding white space, as you have already learned in the examples
for this chapter. You can also use line breaks to enhance the
layout of images.
TIP |
To view where the line breaks are on your page, click the Show/Hide button, which shows and hides paragraph marks. This button has the paragraph mark on it; it is located just to the left of the Create or Edit Link button on the toolbar. |
The most common type of line break is the normal line break, which is the default selection in the Break Properties dialog box. You insert a normal line break quickly by pressing Shift+Enter at the point where you want the line break to appear. You have already inserted normal line breaks in the tasks in this chapter. Three other types of line breaks are most commonly used in conjunction with image layout.
To insert a line break, follow these steps:
What if you want to rearrange your content and place some of it on a different page? What if you placed section 3 before section 4 instead of after it? Mistakes sometimes happen, but it is not tough to fix them.
FrontPage has a multiple-level Undo function. This means that you can undo several steps. When you choose the Undo command from the Edit menu, it lists the command or action that it will undo when you use the command.
To undo an action, choose Edit | Undo (Ctrl+Z) or click the Undo button in the Standard toolbar for each step that you want to undo. Choose Edit | Redo (Ctrl+Y) or click the Redo button in the Standard toolbar for each undo that you want to place back on your page.
If your hot list or other page you create is so long that you have to scroll to read all of it, you might want to split it into several pages. To do this, you can cut the text from one page, place it in the clipboard, and paste it into another page.
Likewise, consider all those Back to Top links that you must create on a page after the bookmarked sections. You actually need to create them only once. Make the first link, copy it to the clipboard, and paste the text and its link into all the other sections. The same applies for graphics used as bullets or dividers on your pages. Copy the first one into the clipboard and paste it somewhere else.
To copy and paste text and images to and from the clipboard, follow these steps:
You have two ways to delete text. One method places the text into the clipboard for pasting into another location. The other method deletes the text from the page without placing it into the clipboard.
To delete text from a page and place it into the clipboard, use the Edit | Cut command or click the Cut button. To delete text from a page without placing it into the clipboard, choose Edit | Clear or press the Delete key.
You can also delete the character before the insertion point by pressing the Backspace key for each character you want to delete. To delete text after the insertion point, press the Delete key for each character you want to delete.
Suppose that you are writing a page about flowers, and you forget what you wrote about petunias earlier. You need to find exactly what you said about it. To find text, do the following:
You realize that what you said about petunias actually applies to daffodils. Instead of retyping everything, you can use the Replace command. To replace text, do the following:
It is always a good idea to spell-check your pages before they go out to the public. FrontPage has a built-in spell-checker at your disposal. The spell-checker starts at the beginning of the page and checks the spelling of each word. When a spelling error is found, it is displayed in the Not in Dictionary field in the Spelling dialog box. If the spelling resembles a word in the standard dictionary, replacement words are suggested. To use the spell-checker, perform the following steps:
The thesaurus allows you to search for other words that have the same meaning as words on your page. You can use the thesaurus to find a word that means the same as a word you select or that means the opposite.
To use the thesaurus, follow these steps:
Once you have an idea of the information you want to include on your web, entering content into your pages is very simple. Starting with basic headings helps you organize your thoughts. You can use character styles and formatting to add your content. Using different character styles, you can add emphasis to areas on your Web page. After the content is complete, you can use the FrontPage spell-checker to verify that your content is spelled correctly.
Your text can be more than simple text. You can use color, change the alignment, increase or decrease the font size, select different formats, and even insert special characters.
As you'll quickly learn, Web pages can be far more than text and headings. You'll learn some additional techniques in the following chapters:
Q: | Why do the headings get smaller as the numbers get larger, and the character styles get larger as the numbers get larger? |
A: | The reason the headings get smaller as their numbers get larger is that they correspond to hierarchical logic. Typically, your page title is displayed in Heading 1, topics beneath it in Heading 2, topics beneath them in Heading 3, and so on. Text styles increase in size as their designations increase because it is most logical. A small number indicates a small font size; a large number indicates a large font size. |
Q: | Are there any rules regarding what font size to use following a heading? |
A: | Not really, except that you might want to use a heading that is at least the same size or larger than the text beneath it. Normal paragraphs use a default font size of 3 (12 point), which means that Heading 1 through Heading 4 look all right with it. If you use smaller headings, such as Heading 5 or Heading 6, you might want to decrease the font size. |
Q: | Can I change the default size of the font in the FrontPage Editor? |
A: | Although you can change the default fonts you use, you cannot set the default font size. You must set the font size or use the Increase Font Size or Decrease Font Size buttons on the toolbar to change the size of your text. |