FrontPage 2003: The Missing Manual

Content preview·Buy reprint rights for this chapter

Many Web design graybeards consider their ability to write HTML code by hand a badge of honor. But for someone who's new to the Web, this approach is pretty over the top. Just because you'd like to post your party photos doesn't mean you want to become a programmer. Novices aren't the only ones who need a hand. Pretty much every Web developer has popped a page into a visual Web editor like FrontPage at some point.

People use FrontPage and similar programs because they make the creation of Web pages fast and easy. Advantages of using FrontPage include:

Hands-on editing. Of all the benefits FrontPage offers, nothing beats its ability to let you see the changes to your Web page as you make them. While you're working, you pretty much see pages as visitors to your site eventually will. You add and edit visual elements—like images and hyperlink buttons—by clicking on them directly. When you move or resize an object, the results show immediately.
Speed. Tasks that are extremely tedious when coding manually, like creating a table, are a snap in a program like FrontPage. In fact, many professionals who write their pages by hand often hop into programs like FrontPage just to add a table. In the process, they save themselves tons of typing.
Visual aids. FrontPage provides diagrams to help manage even the abstract aspects of your site, like hierarchy and site navigation. An illustration can be a big help when you're having trouble organizing pages.
Guidance. FrontPage menus and toolbars provide direction that's lacking in an all-text HTML world. For instance, even if you don't know exactly how to do something, like format a table border, you can most likely figure it out by searching through menus called Format or Table to find the right command.

This chapter introduces you to the FrontPage workspace. After a look around, you'll take a turn at the wheel, using FrontPage to create a simple Web site. Along the way, you'll get to know FrontPage's controls and windows and catch a glimpse of what the program makes possible.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

When you launch FrontPage, you see the basic program layout that you'll come to know well. This workspace is your control center for creating Web sites and pages.

The FrontPage 2003 editing window looks similar to that of other Microsoft products, so if you're familiar with programs like Word and Excel, you'll be at home in FrontPage. This familiar setup, pictured in Figure 1-1, features a menu along the top of the screen. Below that, toolbars feature shortcut buttons to menu commands.

Figure 1-1: When you first open FrontPage, a window like this appears. As you perform different tasks, the window's layout changes. For example, the task pane, shown on the right side, presents new options, based on what you're doing.

The menu bar contains program commands. They follow the basic layout of Microsoft menus. (See Appendix A for a detailed explanation of every menu.)
Two toolbars—Standard and Formatting—display the first time you open FrontPage. These two get top billing because they contain the most commonly used commands. Hold your cursor over a button to display its function. You'll probably want to keep these toolbars around, but if not, you can get rid of them. Select View → Toolbars to add or hide FrontPage toolbars.
The screen is dominated by the document window, in which you'll do most of your work. This is your canvas, where you'll create and edit your Web pages. Buttons on the lower-left corner of the document window, pictured in Figure 1-2, let you change the way this window shows your page. Your choices are described next.

Figure 1-2: These page view buttons let you look at your page in different formats.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You've barely scratched the surface of what FrontPage has to offer. The menu and toolbar choices that you have yet to explore help you do things like create actual Web pages, so it's time to start moving around in the program a bit. Make your way through the simple steps below for creating a sample Web site. In the process, you'll learn more about the program's layout and get to check out some additional views and features. Complete coverage of all the skills you'll need to create the full-blown Web site of your dreams follows throughout the rest of this book.

Sure, you can create an individual Web page with no ties or connections to other pages, but Microsoft designed FrontPage to create and manage entire sites. The focus of the program is always on your Web site as a whole. As a result, the first thing you'll do when working in FrontPage is create a new Web site.

In previous versions of FrontPage, Microsoft used the word "Web" to mean Web site. Because this term understandably created some confusion, Microsoft finally switched to the more appropriate "Web site." However, you'll still occasionally see the old moniker "Web" pop up from time to time.

Launch FrontPage.

When the program first opens, a blank page appears. To avoid creating pages within an existing site, make sure you don't already have a Web site open by selecting File → Close Site. If the option is grayed out, you don't have a site open.
Select File → New.

The New task pane displays on the right, presenting you with a bunch of choices for creating new sites or pages.
Within the New task pane, beneath the New Web Site heading, click More Web Site Templates.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Whatever your site is about, one thing is always true: to get your message out there, you've got to get it onto your Web pages. Fortunately, FrontPage's features for adding text, pictures, and other elements are plentiful and easy to work with.

Even Web pages that consist mostly of pictures include a few words. For all the ins and outs of working with text in FrontPage, check out the next chapter. Meanwhile, the following steps give you a rudimentary start.

Click to place your cursor within the table cell on the top right of your new page and type a few words that will serve as the heading for your page.
Leaving your cursor on the line you just typed, click the Style drop-down menu on the formatting toolbar (where the current choice is Normal) and select Heading 1 from the list.
On the formatting toolbar, click the Center button.

The text is now centered within that cell. If you weren't using a layout table, your text would be centered on the page.
Highlight all the text you just typed.

To do this, drag your cursor across the entire line (just as though you were selecting text in Microsoft Word). Don't leave out any letters. The additional formatting you're going to apply is character-based, meaning it applies only to the characters you select.
On the formatting toolbar, click the drop-down arrow to the right of the Font Color button and select red.
Click to place your cursor in the cell on the lower right (just below the cell your heading's in).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Don't let your new miniature Web site go unsaved. Actually, you already saved the site itself when you created it. After that, you'll always be saving your site content—like pages and images. Should you try to close a site by selecting File → Close Site, FrontPage prompts you to save changes to individual pages one by one. You've seen these kinds of prompts before when you've tried to close a program that still has files open.

You're better off saving changes as you work. Saving frequently helps fend off the danger of data loss (and nervous breakdown) due to a computer meltdown. If you never lost work to a computer glitch, consider yourself one of the few and fortunate. Caution aside, you'll find that saving your pages regularly eases site maintenance.

If you have several pages open that contain unsaved changes, you can save them all at once by selecting File → Save All. FrontPage saves everything that's open and unsaved.

In the course of working on your site, FrontPage frequently prompts you to save pages. Often that's because the program needs you to save in order to do things that you've asked it to do, like preview your page in a browser.

Start now by saving the edits to your site's new page. The tab for your new page still contains an asterisk, as illustrated in Figure 1-6, which tells you that the page needs to be saved. Get rid of the asterisk with a simple click of the Save button on the toolbar. Or select File → Save (Ctrl+S). When the Save dialog box appears, FrontPage usually wants to name the page something like new_page_3.htm. Rename it so that the file name actually means something to you within the context of your site. As with a Web site name, don't include any spaces, capital letters, or special characters in the name, and keep it short. The process of saving this page also takes care of some basic site maintenance, as you'll see.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Your new site has only two pages, but imagine that you've got 20 or 200. At that size, keeping track of all your files is a real challenge. How can you see what's going on?

FrontPage has got you covered. As you've already seen, the program provides different views for individual pages, so you can see and manage what's on your pages effectively. In much the same way, FrontPage's site views let you keep track of your entire site. You get a few different options. Use Folder view to group relevant files together so they'll be easy to find and edit. At a glance, Hyperlinks view assures you that your links lead to the right pages. Click and drag in Navigation view to rearrange the hierarchy or navigation of your site.

The next two sections show you all the different ways FrontPage lets you look at everything from individual pages to your entire site.

You've read about FrontPage's different page views (Section 1.1), but now that you have an actual Web page open in FrontPage, you can see them in action. Your document window has been set to Design view as you've been working. You'll probably spend most of your time there, but check out all your options, like Split view, pictured in Figure 1-8.

Figure 1-8: In Split view, when you highlight text and elements in the Design pane, they appear highlighted in the Code pane, too. Use this feature to find a tag quickly or to learn HTML.

Explore some other page views by clicking the buttons on the bottom-left corner of the document window. For details on page view options, flip back to Figure 1-2.

Managing an entire Web site means that you'll be handling lots of information. You've got to keep track of where things are, what files are linked to each other, and who's working on them.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Of course, your Web site is going to look great, but what's it going to say? In spite of all the fancy multimedia whirligigs out there—like digital video, audio, and Flash animations—text is still the lifeblood of the Web. Just ask your favorite search engine.

While FrontPage looks a lot like a word processing program, you'll soon find that you're not in Microsoft Word anymore. Sure, your cursor is plainly visible in the document window, typing is a breeze, and you can center text and italicize just like you always have. But something very different is going on behind the scenes. Your options for organizing text on the Web are more limited than they are in programs designed to produce printed pages.

The first thing you need to understand is that the choices you make in FrontPage don't always appear intact once your pages get out on the Web. Your viewer's Web browser ultimately determines the appearance of your Web pages. For example, if a visitor to your Web site doesn't have a special font you included on your page, her browser will replace it with another font. Because the browser's in charge, you never quite know how your text will display.

Sure, the browser is powerful—but so are you. There's a lot you can do to steer browsers in the right direction. This chapter covers everything you'll need to get your message down in writing. First, you'll learn to add and manipulate text. Then you'll move on to the finer points: making your words look great by using all the formatting tools FrontPage offers.

FrontPage makes adding text pretty straightforward. When you open a new blank page, your cursor sits at the top-left corner of the editing window. As you type, text moves from left to right, and when it's reached the right margin of the page, your words wrap automatically, continuing on the line below. Text aligns left and wraps like this within table cells, too. When you want to start a new paragraph, just press Enter. So far, so good.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

FrontPage makes adding text pretty straightforward. When you open a new blank page, your cursor sits at the top-left corner of the editing window. As you type, text moves from left to right, and when it's reached the right margin of the page, your words wrap automatically, continuing on the line below. Text aligns left and wraps like this within table cells, too. When you want to start a new paragraph, just press Enter. So far, so good.

Where things get a bit tricky is when you start to insert spaces—either between paragraphs or between words. Most of the problems stem from the funky rules HTML has for dealing with spaces and the way FrontPage interprets those rules.

Section 2.1.1.1: Spaces between paragraphs

You may already have noticed that when you type a line, press Enter, and type another line, the text appears double-spaced and there are no options to adjust it.

What's happening is that when you hit Enter, FrontPage creates a new paragraph. In HTML-ese, each paragraph is nestled between paragraph tags (), which translates into a big honking double space between each paragraph. But what if you don't want that space? What if you want a garden-variety book-style single-space between each paragraph?

Enter the line break. A line break inserts a return without creating a new paragraph. To insert a line break hold down the Shift key when you press Enter or select Insert → Break → Normal line break (see Figure 2-1).

Figure 2-1: To see how HTML differentiates paragraph and line breaks, write a few lines of text, separating them with a few breaks of each kind. Then highlight the text and click the Split view button on the lower-left corner of the document window. In the HTML code for the page, you'll see that wherever you entered a line break, FrontPage has inserted a break tag instead of a end paragraph tag.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Once you get some text on your page, you'll want to edit it, and FrontPage gives you all the usual tools to cut, copy, and paste text. (If you'll be copying and pasting lots of content from other Microsoft Office programs, see Chapter 18 for more information.)

Before you can move or format text, first you've got to select it. Selecting or highlighting text tells FrontPage what text you want to modify. FrontPage gives you a variety of ways to select text:

To select a word, double-click it.
To select a paragraph, triple-click in it.
To select any amount of text, drag your cursor over it.
Use your keyboard to select any amount of text by pressing Shift and using the four arrow keys (left, right, up, down) to highlight the text you want.
Press Ctrl+Shift and press your right or left arrow keys to select a word at a time.

Your symbol looks fine when you take a look at your site on your Windows computer, but on your friend's Mac, it displays incorrectly. Like a lot of other browser display problems you'll encounter throughout this book, this quirk stems from FrontPage's Microsoft-centric approach.

Depending on what the character is, FrontPage uses one of three different methods to insert it in your page's HTML code:

Where possible, FrontPage inserts the character itself. This method applies to the most common symbols—those that appear when you first open the Symbol dialog box.
The program inserts a numeric code, which you'll find on the bottom of the Symbol dialog box. FrontPage uses the numeric code for symbols beyond the basic set—those with a number code greater than 255. (Figure 2-2 shows the number code in the "Character code" box.)

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

If you typed all your pages using only the simple formatting that FrontPage applies automatically, your readers' eyes may glaze over in boredom. Besides, you'll inevitably want to do things like emphasize specific words or characters within a paragraph. FrontPage gives you a ton of options to adorn your words and enhance your message.

You can really punch up the text on your page by playing around with font, size, italics, and text color. FrontPage dubs these selections "character formatting" options, because the program applies these changes character by character. But the fact is you can make any amount of text—be it a single character, a word, a sentence, or even multiple paragraphs—italicized, extra-large, pink, and so on.

The instructions that follow tell you how to use FrontPage's basic text-formatting features. You do need to understand these options and how to use them in order to get the most out of FrontPage. However, Cascading Style Sheets (CSS) are a much more efficient and effective way to format your Web pages. You'll read all about CSS in Chapter 7.

Using different fonts can do a lot to make your pages more appealing. You can use them to distinguish headings from text and to complement your content in subtle but meaningful ways. The list of fonts that come with FrontPage is long and varied. Maybe you've already taken a peek and are excited to use Papyrus font in your page on Egyptian crop yields. Are you sure you want to use that font? Yes, you say, you've thought out the design and think that your visitors will have no trouble deciphering the font. Fine, but what about their browsers? If a visitor doesn't have that Papyrus font loaded on his system, the browser will substitute another font, and suddenly your clever design idea looks terrible.

The best way to avoid unexpected results is to stick to the following basic fonts: Arial, Arial Black, Courier New, Comic Sans, Georgia, Impact, Times New Roman, Trebuchet, Verdana, Symbol, Webdings, and Wingdings. If you want to use type that's easy to read on a computer screen, try Georgia, Trebuchet, or Verdana. These three were created specifically for the Web.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Character formatting can pep up your prose, but FrontPage offers formatting control at an even higher level. Paragraph formatting expands your powers by letting you modify the way your text looks on an even broader scale.

A paragraph is just a collection of a bunch of characters, so what's the difference? Start at the basics. When you type a few words and press Enter, you create a paragraph. FrontPage's Design view indicates a paragraph break with a ¶ paragraph mark. (Click the ¶ Show All button on the Standard toolbar to reveal paragraph marks.) If you switch to Code view, you'll see that in the HTML, each paragraph is surrounded by a pair of tags (the closing tag is a tag). This means FrontPage applies certain formatting, like alignment, to entire paragraphs. Web designers often refer to this as block-level formatting. You've already learned how to apply other formatting, like italics or color, on a character level; that is, to a single character, word, or area of text. Paragraph formatting affects an entire block of text—everything between the tags, for example.

When you apply paragraph formatting, you don't need to select all the text you want to format. Just click once in the paragraph and then apply the new format.

FrontPage provides a variety of built-in paragraph styles such as headings and lists to help you organize your page. After you've applied one of these styles, you can format other attributes of any paragraph (like changing the alignment or the color), and you can also easily copy formatting from one paragraph to another.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Lists are a common item on most Web pages. You might use a list to organize links to other spots within your site or just to organize information concisely so that it fits nicely within a browser window. Technically, a list is nothing more than a set of paragraphs that FrontPage groups together and bullets or numbers according to your instructions. You can choose from a variety of list types such as bulleted, numbered, and outline (see Figure 2-11), and then customize them to suit your needs.

Figure 2-11: HTML features these basic list formats. FrontPage does most of the work for you, adding bullets and numbering automatically. You can customize these lists a bit by choosing from different bullet and number styles.

You might think that bulleted and numbered lists are quite different from each other. For instance, numbered lists are, by definition, ordered, and bulleted lists aren't. However, they actually work the same way and therefore share a FrontPage dialog box.

To create a bulleted or numbered list:

Within the document window, place your cursor where you want to insert the list.
Apply list formatting.

The fastest way to do this is to click either the Bullets or the Numbering button on the Formatting toolbar. These buttons automatically add the standard bullet or numbering styles. You can also choose Format → Bullets and Numbering, which gives you the chance to select alternate bullet or number styles. Later, you can always right-click within any list and select List Properties to change a list's appearance.

The Style list on the Formatting toolbar also offers Bulleted and Numbered list styles. Selecting these styles is equivalent to clicking the Bullets or Numbering button on the toolbar.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

In your travels around the World Wide Web, you've clicked on thousands of hyperlinks. Without hyperlinks, how would you move from page to page and site to site? How would you access your Google search results? The latest movie listings? Your American Idol contestant tracker? Hyperlinks make the Web possible.

Now that you're ready to create your own hyperlinks, you need to understand exactly what they are and how they work. FrontPage gives you an assortment of hyperlink types to add to your site, all of which you'll learn about in this chapter. You can link to pages or files within your site or anywhere out on the Web. You'll also learn how to send a viewer to a specific spot on a Web page and create a link that lets visitors send emails to your inbox.

Sure, you know what a hyperlink is. You've clicked them to check the weather at the beach, to learn about giant squid, and to find bobble head dolls on eBay. But do you really know exactly what's happening behind the scenes when you click on a link?

A hyperlink is an HTML command that tells a browser to display a specific Web page. A link can lead to another spot on the same Web page or across the world to a different Web site.

Sounds pretty simple. But since you're about to create hyperlinks, not just click them, you'll need to learn a bit more. For example, there are different kinds of hyperlinks: absolute and relative. FrontPage helps you manage each type, but you should know how they work.

A Hyperlink in HTML looks like this:

	<a href="http://www.cnn.com/">Get news
	now.</a>

A viewer sees only the text between the tags, of course. It appears as a hyperlink. In other words, the phrase "Get news now." is underlined or displayed in a different color, depending on how you've formatted the link's appearance.

When a cursor passes over the phrase, its arrow changes into a "click here" pointing hand.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Sure, you know what a hyperlink is. You've clicked them to check the weather at the beach, to learn about giant squid, and to find bobble head dolls on eBay. But do you really know exactly what's happening behind the scenes when you click on a link?

A hyperlink is an HTML command that tells a browser to display a specific Web page. A link can lead to another spot on the same Web page or across the world to a different Web site.

Sounds pretty simple. But since you're about to create hyperlinks, not just click them, you'll need to learn a bit more. For example, there are different kinds of hyperlinks: absolute and relative. FrontPage helps you manage each type, but you should know how they work.

A Hyperlink in HTML looks like this:

	<a href="http://www.cnn.com/">Get news
	now.</a>

A viewer sees only the text between the tags, of course. It appears as a hyperlink. In other words, the phrase "Get news now." is underlined or displayed in a different color, depending on how you've formatted the link's appearance.

When a cursor passes over the phrase, its arrow changes into a "click here" pointing hand.

What do the tags mean? The a at the beginning of the tag stands for anchor. An <a> tag marks the hot spot that links to another page or file. The href attribute (short for "hypertext reference") specifies the address of the page the link opens. The sample link above opens CNN's home page.

Say you've just published your new Web site. It looks great out there on the Web, but wait! Your links aren't working. Your images don't show up. What happened?

A lot of new Web authors run into problems like these because no one ever told them about the difference between absolute and relative URLs. This section tells you everything you need to know.

Section 3.1.1.1: What's a URL?

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Okay, so now that you know the theory behind URLs, you're ready to actually create a linking, breathing hyperlink. The first step is to select the element on your Web page that'll serve as the clickable link. You can create a hyperlink out of text or an image. (You've got a few other options for linking from images, which you'll learn about in the next chapter.)

Next, you'll set the destination for your hyperlink. Most often, links lead to other Web pages. But you can link to pretty much any type of file—Adobe Acrobat (PDF) files; Microsoft Word, Excel, or PowerPoint presentations; even zip files or actual programs (sometimes called executables, because they carry out a series of programmed instructions). Below, you'll learn to link to any page on the Web, to a page in your site, or to an email address.

To create a hyperlink:

In the document window, select the text or a picture that you want to turn into a hyperlink.
Insert a hyperlink.

To do this, select Insert → Hyperlink, or press Ctrl+K, or right-click the selection and choose Hyperlink. You can also click the Hyperlink button on the Standard toolbar. All these commands open the Insert Hyperlink dialog box (see Figure 3-2).
Set the Text to Display.

The Text to Display field, at the top of the dialog box, shows the text that appears on your Web page as the hyperlink. The field automatically displays any text you selected on the page. You can edit the text here, if you want.

Figure 3-2: The Insert Hyperlink dialog box includes many options for setting the destination of your hyperlink. Link to a file within your site, a URL out on the Web (by clicking the Browse the Web button, circled), or help a visitor email you by linking to your address.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Say you've got a hyperlink on your page that links to an article somewhere on the Web that relates to what you're discussing. If a viewer clicks the link, she might get engrossed in the article and click further links within that page. Next thing you know, she's so far away exploring other Web sites that she forgets where she was in the first place. Point is, you may not want people to leave your site entirely. Maybe it would be better for you (and your fragile, neglected ego) if your viewer's browser opens up a new window when a visitor clicks on the article link, keeping your site open at the same time.

You not only have the power to send your visitors where you wish, you can control how destination pages display on their screen. For example, you can launch a linked page in a new, separate browser window. In this section, you'll also learn how to provide viewers with additional information about a hyperlink so they'll know whether or not they want to click it. You can even draw attention to your links using color and rollover effects.

Unless you specify otherwise, hyperlinks open the destination page in the same browser window as the original page containing the link. The new page replaces the first page in the window. While a viewer can always press the back button on a browser, you may prefer to keep the original page open, while also displaying the destination page in a new window.

You can set this preference by adding a Target attribute to the hyperlink. This attribute specifies where the destination document opens—in this case, a new browser window. To do this, click Target Frame within the Insert Hyperlink dialog box. Then, from the list of choices, select New Window. Other selections under Target Frame let you control hyperlinks created on pages that exist within a frameset. You'll learn all about frames and what these target options mean in Chapter 6.

The more information you share with your visitors, the better their experience is bound to be. While text often serves as a hyperlink and indicates where the link might go, it's not always so clear cut. What if the hyperlink is a graphic? In some cases, you'll want to provide more info about a link. You can do this by creating a

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Suppose you'd like to link to another page, but the relevant material is so far down the page that your viewers won't see it when the file first opens in their browser. Your readers could get confused when the information they're looking for doesn't seem to be there.

You can solve this problem with a bookmark. A bookmark allows you to create a hyperlink that jumps to a specific location within a page. The location can be within the same page as the hyperlink or on another page altogether.

You have to set the bookmark first. Then you can create a hyperlink to it.

You can create bookmarks only on pages that you yourself can edit. This means you can't bookmark to a passage within somebody else's page out on the Web.

When a visitor clicks a link that's keyed to a bookmark, the browser displays only a portion of the Web page. You get to designate what portion by placing a bookmark at the top of the part of the page you want viewers to see (see Figure 3-6).

Figure 3-6: To link directly to this page's game scores, you'd insert a bookmark anywhere on the heading line for that section of the page. A bookmark displays as a small flag icon that's visible in FrontPage's Design view, but not in a browser.

To insert a bookmark:

Click to place your cursor at the point on the page where you want to place the bookmark.
Select Insert → Bookmark.
Within the Bookmark dialog box, type in a name for the bookmark and click OK.

Give each bookmark an original name that's easy to identify. Clear names and labels help you manage links throughout the life of your Web site. Keep bookmark names short (eight characters or less) and don't include spaces, capital letters, or special characters.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Graphics fill pages all across the Web. For better or for worse, if something can be photographed, illustrated, animated, or videotaped, you can probably find it online. Miss the news on CNN? Just go to their Web site and watch the streaming video.

Whether you plan to use images as an integral part of your site or just for visual accent, FrontPage makes it easy to include graphics. After you read about the basics of image file formats, you'll learn how to place a picture, video, or Flash animation anywhere on your page. Or why not let FrontPage create an instant photo gallery for you? You can then annotate each snapshot with your own clever commentary. Images can even display as a page background or act as hyperlinked navigation buttons. Read on to learn how.

Know your medium. Before you start loading up your site with image files, it helps to know a little bit about the many graphical species roaming around out there and which ones make sense for you to use.

Graphic files today come in all shapes, sizes, and types. Some high-quality graphic file formats, like TIF (Tapped Image Format) and BMP (Windows bitmap), provide terrific detail and color, which is a big reason why these formats are popular with people who want to print their images. But, as in real life, quality costs. The bandwidth and disk space these files require can slow the speed at which your Web pages load.

You can tell a file's format by its file suffix. For example, house.jpg, house.gif, house.tif, and house.bmp are all different formats of the same image file.

Most Web browsers are limited and can display only two image types: GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). These two formats take image information and compress it, while retaining the most important details so that the image remains recognizable. FrontPage also supports a new technology called

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Know your medium. Before you start loading up your site with image files, it helps to know a little bit about the many graphical species roaming around out there and which ones make sense for you to use.

Graphic files today come in all shapes, sizes, and types. Some high-quality graphic file formats, like TIF (Tapped Image Format) and BMP (Windows bitmap), provide terrific detail and color, which is a big reason why these formats are popular with people who want to print their images. But, as in real life, quality costs. The bandwidth and disk space these files require can slow the speed at which your Web pages load.

You can tell a file's format by its file suffix. For example, house.jpg, house.gif, house.tif, and house.bmp are all different formats of the same image file.

Most Web browsers are limited and can display only two image types: GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). These two formats take image information and compress it, while retaining the most important details so that the image remains recognizable. FrontPage also supports a new technology called PNG (Portable Network Graphics). PNG is an improvement on the GIF format, but isn't recognized by all browsers, especially older ones. As you add images to your pages, you'll probably want to use the two more standard file types, GIF and JPEG. GIF files are best for displaying images that have flat areas of color and simple lines, like a cartoon or company logo. JPEGs are good for images that contain subtle color variations, like photographs.

GIF files can also include multiple images within a single file. These simple GIF animation loops are used—annoyingly, for some peoples' tastes—throughout the Web to add movement to pages. Viewers don't need any special software to view them.

The bottom line: go with a GIF or a JPEG and be careful not to use too many images on one page since they'll affect your page's download time.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

FrontPage's talents as a visual Web page editor really start to shine as you begin to add graphics to your site. The program provides a few easy options for inserting images.

To insert a picture on a page, place your cursor wherever you want the picture to appear and select Insert → Image → From File, or click the Insert Picture button on the Pictures toolbar. (To access the toolbar, select View → Toolbars → Pictures.) A Picture dialog box like the one in Figure 4-1 opens. Browse to your image file and click Insert. The picture then displays on your Web page.

FrontPage lets you retrieve a graphic that's stored anywhere on your computer so that you can add it to a page on your site. The program prompts you to save the image file in your site when you save the Web page. However, you may want to import a graphic into your site's images folder before you insert it on a page—especially if the picture's a JPEG (see the "Editing JPEGs" sidebar on Section 4.3.2 to learn why and how).

Figure 4-1: If you're having trouble remembering what your images look like, use the Views button on the Picture dialog box toolbar to change the way files are displayed. Both the Preview and Thumbnails options show your actual pictures.

You may find yourself using the same images over and over on many different pages throughout your Web site. To speed things up, FrontPage lets you drag images directly onto your page.

To insert a picture that's already saved within your site, find it within the Folder List and drag it onto your page within the document window. The image appears wherever you drop it.

You can also drag an image file from another location, outside your site's directory. If you've used Windows Explorer to find a file, just drag it onto the page you're editing. When you save your Web page, FrontPage prompts you to save the image file as part of your site. If you want to get a picture file into your site, but not necessarily onto a page right away, you can also drag a file directly into your images folder.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Okay, so you've got an image on your page, which is very exciting. But perhaps it came out larger than you wanted it to? Also, maybe it's shoved your text off to the side, and the page layout is now a disaster.

Inserting the image was a breeze, but you may need to work a bit harder to make it fit nicely and really look good. FrontPage is far from a sophisticated image editor, but it offers a handful of tools to help you edit, resize, and adjust the placement of your graphics.

Web designers who edit pictures extensively rely on software programs created for the job, like Adobe Photoshop. For best results, you should, too. But if all you need to make are simple edits or small tweaks, like cropping or rotating an image, FrontPage can save you the trouble of opening a separate program. To access FrontPage's rudimentary editing features, open the Pictures toolbar (see Figure 4-2). Select View → Toolbars → Pictures and run your cursor over each toolbar button to display a tool tip, which tells you what each button does.

Figure 4-2: The Pictures toolbar serves as a mini graphics editor.

To edit a graphic within FrontPage, select the image, and then choose from the following options on the Pictures toolbar:

Rotate images with the four rotate and flip buttons. Rotate buttons turn the picture 90 degrees, while flipping creates a mirror image.
To place text over a picture, click the Text button and type within the box that appears. Click and drag to move the text box around. FrontPage adds the text to the image itself, so you'll be prompted to resave the image when you save the page.
Click the Color

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Static pictures don't seem to be enough in today's world. Flash animations and videos add life to Web sites around the globe. In fact, many sites' sole purpose is to present videos, movies, and other moving images.

FrontPage makes incorporating moving images just as easy as adding still pictures—all you need to do is click a button.

It's easy to add videos to your site. But make sure you've considered all the angles first. Video files are large. As you'll see, it's easy to embed a video directly within your page, but your page could then take forever to download. To avoid frustrating your visitors, you might want to place a hyperlink to the video on your page, instead of inserting the file itself. This way, your page will load quickly but viewers still have access to the video.

Also, video files require their own players in order to function. Are your visitors likely to have this software installed on their systems? Even if you think so, make sure you provide information on what's required. You could even include a link to a site that offers downloads.

What kinds of moving images can you add? FrontPage can handle the following digital video file types: WMV, MPEG, AVI, RAM, and QuickTime (MOV files).

Section 4.4.1.1: Displaying a video as a picture file

FrontPage lets you embed a video directly within your page. Inserting it is fast and easy. Place your cursor on the page and select Insert → Picture → Video. Once you browse and select the file, your video then appears on the page. You can also just drag a video file from the folder list onto the page.

If it seems almost too easy to be true, it may well be. The big drawback to using this method is that people who use Netscape Navigator won't see your video. When you use this shortcut method, FrontPage generates HTML that Navigator doesn't understand, so a broken picture icon will appear in place of your video. If that thought bothers you, then you probably want to display the video as a

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Though graphics are a part of your Web pages, FrontPage saves images as separate, individual files. Eventually—even if your site is small—you're going to have a whole lot of image files to contend with. You may need to use certain images on multiple pages or go back and edit a picture or two, so you'll want to find them easily and quickly.

Keep your picture management chores hassle-free by naming and organizing your image files intelligently. Give each file a name that's appropriate and describes the picture. Keep all your images in the same folder, called images. FrontPage even creates an images folder automatically when you create a new Web site. Put it to good use. If you have a lot of Flash or video files, gather them in a folder called media. You can manage this process as you go, saving image files in the correct folders as you insert them on pages.

When you've inserted a new image or video within a page and try to save the page, FrontPage displays the Save Embedded Files dialog box, illustrated in Figure 4-8. Since the graphic file hasn't yet been saved within the Web site, FrontPage needs to know where to put it.

Save your file by setting the following options:

Click Rename to give the file a name that you can easily identify later on.
Use Change Folder to browse to your site's images folder. Once you set this folder, it appears in the Folder column.
Click Picture File Type if you want to change the file type to another Webfriendly format.

Figure 4-8: Click any of the three buttons at the bottom of the Save Embedded Files dialog box to change the settings in the columns above.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Using an image as a hyperlink can create a nice effect on a Web page. Even better, FrontPage lets you turn one picture into a collection of hyperlinks.

By divvying your image into what are called hotspots (invisible hyperlink areas), you can make separate clickable regions that link to different locations. These can be square, round, or any shape you wish. A collection of hotspots on an image creates what's known as an image map.

This is a great tool for creating a single reference point that leads a viewer to further details on separate pages. For example, if you sell bicycle parts, you could place hotspots on a picture of a bike. Make the wheel a hotspot that leads to a page of wheel types for sale. If a visitor clicks on the pedals, your shop's selection of pedals displays. And so on. You may have seen this effect used on images like actual maps, as in Figure 4-9.

Figure 4-9: Hotspots can be any shape. The polygonal hotspot tool outlines irregular shapes, like California. The square hotspot tool traces square or rectangular shapes like Colorado.

To create an image map, using buttons on the Pictures toolbar, follow these steps:

Select the picture you want to use as an image map.
Select an image map tool.

Three buttons on the Pictures toolbar offer different shapes: rectangle, circle, and polygon. Click the button that's most appropriate for the shape of the hotspot you want to create.
Draw the hotspot.

Draw rectangle and circle spots with one stroke, by dragging diagonally through the area you want the shape to cover. Polygons require more steps. Click to create a corner, then click to create another corner, and another, until you click back on the first spot again to complete a closed shape. After you've drawn a shape, the hyperlink dialog box displays. If you don't like the placement of a hotspot, just click cancel and try again.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Sometimes you need to include a group of pictures on one page, but in trying to do this, you encounter some problems. Maybe the pictures are too big to fit on one page, or your page is taking ages to download.

FrontPage includes a handy feature for inserting pictures as thumbnails, which are just miniature versions of graphic files. This section shows you how to create thumbnails. For a similar effect, skip ahead to Section 4.7.2 to learn about FrontPage's Photo Gallery option, which helps you add some nifty formatting and commentary options to a collection of photos.

You can create a thumbnail out of any image file in your site. First, insert the fullsized picture on your Web page. Select it and choose Tools → Auto Thumbnail, or press Ctrl+T. You can also right-click and select Auto Thumbnail, or click the Auto Thumbnail button on the toolbar.

If you drag the picture onto the page with your right mouse button, a menu displays. Select Auto Thumbnail.

FrontPage converts the picture to a thumbnail. Thumbnails automatically link to their larger versions. During this process, FrontPage actually creates a new smaller image file, which the program prompts you to save next time you save the page.

FrontPage also adds a border to the thumbnail. If you want to get rid of it, right click the thumbnail and select Picture Properties. On the Appearance tab, change Border thickness to zero.

FrontPage automatically formats thumbnails to be the same size: 100 x 100 pixels. You can resize these pictures (Section 4.3.2.1) as you would any other. Chances are you'll want them to be consistent, so FrontPage lets you change the size for all thumbnails on a page with one setting. Select Tools → Page Options and click the Auto Thumbnail tab. Here, you can change size, set border width, and apply beveling. Unfortunately, these settings won't apply to any work you've already done. Only thumbnails created

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Some people put up a Web site simply to display the pictures of their last trip to the mountains or their party at the Tiki lounge. Often the task of formatting a page to display and write about these photos involves more work than most people are willing to invest.

FrontPage now offers a quick, automated solution. A photo gallery is page of pictures and text with a professional-looking layout that FrontPage creates for you. The gallery page features thumbnail photos, which your visitors can click to see the full-size image, and includes space for you to name and discuss each picture.

You can place a photo gallery within an existing page, or on its own page. Here's what you need to do:

Create a new gallery.

Table of Contents

Section 2.1.1.1: Spaces between paragraphs

Section 3.1.1.1: What's a URL?

Section 4.4.1.1: Displaying a video as a picture file