Yesterday, maybe you thought that FrontPage 2000 had to do with news about the new millennium. But today, you know that it's the hottest, most popular software tool for creating and maintaining Web sites. And while your mother certainly didn't raise any fools (except your brothers), maybe you're a little antsy about pasting yourself on the World Wide Web. Saddle up, Buck, because this book will launch you and your Web site into the 21st Century. The Complete Idiot's Guide to Microsoft FrontPage 2000 will have you spinning your Web site like a pro. With a focus on doing things the easy way, this book guides you through Web lingo, shows you how to publish your site, and gives you advanced techniques you'll need to work wonders on the Web.
About the Author
Elisabeth Parker is a professional Web developer and author. She is a long-time FrontPage user and has used FrontPage to develop many client Web sites. She has written several Web-publishing-related books for Peachpit, IDG, and Ventana, and she is known for her direct, easy-to-understand writing style.
[Figures are not included in this sample chapter]
The Complete Idiot's Guide to Microsoft® FrontPage® 2000
- 3 -
Fooling Around with Web Pages
In This Chapter
- Taking a look at Web page ingredients and HTML source code
- Creating new Web pages
- Opening, creating, saving, printing, and closing Web pages
- Giving your Web page a title
- Jazzing up Web pages with color schemes, images, and watermarks
- Five cool color schemes you can try
So what are you waiting for? Take FrontPage for a spin. This chapter tells youa bit about Web pages, what they're made of, and how they work. You can then cutto the chase and learn about how to work with Web documents and create basic Webpages. If you know how to use a word processing program, like Microsoft Word, you'llget the hang of things pretty quickly.
What Web Pages Are Made Of
Frogs and snails and puppy dog tails... whoops, wrong book. Web pages are madeof text, links, pictures, and just about everything else. FrontPage also makes iteasy for you to add multimedia (Chapter 17, "Strut Your Stuff: Sound, Video,and More"), animation (Chapter 20, " ;Gee-Whiz Pages with Animated SpecialEffects"), hit counters (Chapter 19, "A Grab Bag of Helpful Doodads: FrontPageComponents"), and other cool stuff to your Web pages. But let's stick to thebasics for now.
A Web page almost always contains the following elements:
- Title When you view a Web page in a browser, the page title appears on the Web browser's title bar. The "What's in a Name? Changing Your Page Title" section of this chapter explains how this works.
- A Color Scheme You can display a patterned background on your page (like the left side of the page shown in the following figure) or a solid-colored background, and you can choose text and link colors, as explained in the "Color My Web Page: Changing Background, Text, and Link Colors" section of this chapter.
- Pictures FrontPage makes it easy to add pictures to your Web pages. It even converts your existing images to the .GIF and .JPEG formats used on the Web, and comes with a clip art collection. For more about pictures, read Chapters 8, "The Picture-Perfect Web Page: Placing and Tweaking Images," and 9, "Spiffing Up Pictures."
- Navigation bar Navigation bars should appear consistently on pages throughout a Web site so that visitors can find their way around. After all, you wouldn't want to leave them stranded, would you? A navigation bar can consist of a row of graphical buttons (like the ones shown in the following figure), an image map, or text, with links to othe r pages on the Web site. Navigation bars are explained further in Chapter 7, "Think Links: Adding Links to Your Pages."
- Text In spite of all the hype about graphics and multimedia, most Web pages contain at least a few lines of text. As you'll learn in Chapter 5, "Entering Text and Fiddling with Fonts," entering text on a Web page works pretty much the same way as with your other applications.
- Links Think links! Links are what makes the Web cool and different from everything else. Just click a word or picture that looks like it's meant to be clicked on. Your browser displays another page, launches a multimedia file, runs a program, or starts downloading a file. Chapter 7 tells you how to link your words and graphics.
You don't need a fancy Web page with lots of bells and whistles to attract visitorsand get your message across (although FrontPage has everything you need to add allthe frills you want). But you do need well-organized information that visitors canread without squinting, links and navigation bars, and a picture or two to liventhings up.
- A basic Web page displayed in Internet Explorer.
Starting a New Web Page
And now, the part you've been waiting for: starting a new Web page from scratch.FrontPage even comes with some cool prefab templates with popular types of page layoutsthat you can use to get started. The pages come with dummy text and sampleimages, which you can replace. If you want to create a blank, unformatted page, selectthe Normal template. The New dialog box also helps you c reate Web sites with framesand style sheets. These topics are covered in Chapters 11, "Get Framed! Buildinga Web Site with Frames," and 15, "Now You're Stylin'! Using Style Sheets."
To create a new Web page:
- 1. Select New from the File menu and then select Page from the cascading list; the New dialog box, displaying the page templates, appears. (You can use the Ctrl+N key combination, but that just opens a new blank page.)
2. With the General tab selected, select a template option. A preview of the template's layout appears in the Preview box, as shown in the following figure.
3. Click the OK button.
When your new Web page is displayed, you can add your own text and images andformat them however you want.
- The New dialog box with a template selected and a preview displayed.
Try the New Toolbar ButtonIf you wind up using themes on your Web site, as discussed in Chapter 4, "Poof! You're a Designer with FrontPage Web Themes," you can create a new Web page by clicking the New toolbar button. FrontPage automatically applies the theme. If your Web site doesn't have a theme, clicking the New toolbar button creates a blank, unformatted Web page, what is referred to as a Normal Page in the New dialog box.
Saving a New Web Page
"Save your work," computer teachers always say. And this goes for Webpages too. Creating and saving a new Web page works a little differently than creatingand saving a plain old file. In addition t o naming your document, you can also giveyour page a title. If you don't want to bother with that now, you can go backand change your page's title at any time, as explained in the "What's in a Name?Changing Your Page Title" section later in this chapter.
To save a new Web page:
- 1. Click the Save button on the standard toolbar, or use the Ctrl+S key combination, to display the Save As dialog box. This dialog box only appears when you're saving a new Web page or when you select Save As from the File menu.
2. Enter a filename in the File Name box and select Web Pages from the Save as type pull-down list. You don't need to enter a filename extension (like .htm or .html) because FrontPage does it for you.
Play the Name Game!
- 3. To create a title for your Web page, click the Change button to display the Set Page Title dialog box.
4. Enter a title for your page in the Page Title box and click the OK button to return to the Save As dialog box. (If you aren't sure what you want to name your page, you can skip steps 3 and 4 and create a page title later.)
5. Click the Save button.
Web folders and document names should never have any spaces in them, but you can use dashes (-) or underscores (_) instead, as in About-Us.htm. Also, if you decide not to use a Web wizard, remember that you absolutely must name your main page index.htm, index.html, default.htm, or default.html. Those document names designate a document as the main page (only one page should have a main page name). It's also better to keep your file and folder names short so you can see your documents more easily on the Folder list.
Saving an Existing Web Page
Saving existing Web pages is a lot easier because all you have to do is selectSave from the File menu, Ctrl+S, or click the Save button on the standard toolbar.You can also save an existing Web page with a different filename by selecting SaveAs from the File menu and following steps 2-5 in the preceding numbered list.
Why Does FrontPage Open a New Application Window When I Save My File?Because you saved your file to a different folder on your computer or network instead of the current folder. Chapter 2, "Instant Web-Site-O-Matic: Spinning FrontPage Webs," tells you how to work with FrontPage Webs.
Printing Out a Page
Printing a Web page? Whatever happened to the "paperless office"? Well,sometimes it's nice to see your work on paper. You can print files in FrontPage thesame way you print files in most Windows applications. Click the Print button onthe Standard toolbar or select Print from the File menu. When the Print dialog boxappears, choose your options and click OK. FrontPage even adjusts the printer settingsso your layout fits on the printed page.
Previewing a Web Page Printout
Don't like taking chances? Feel free to preview your Web page before printingit out by selecting Print Preview from the File menu. The Print Preview window enablesyou to move from page to page (if your Web document ta kes more than one page to printcompletely) by clicking the Next Page and Previous page buttons, and you can printthe file by clicking the Print button. You can also look at two pages at a time byclicking the Two Page button, take a closer look by clicking the Zoom In button,and zoom out again by clicking the Zoom Out button. To exit the Print Preview windowand return to your Web page, press the Esc key or click on the Close button.
Closing a Web Page
Web pages are fun, but everyone has to close their documents sometime. To closea Web page, select Close from the File menu or click the document's Close box forthe Web page window frame. You can also use the Ctrl+F4 key combination to closea Web page.
Opening a File in FrontPage
FrontPage wouldn't be very useful if it didn't let you open files, would it? Inaddition to Web pages, FrontPage lets you open and work with Microsoft Office filestoo. Chapter 18, "A Match Made in Redmond: FrontPage and Microsoft Office 2000,"tells you more about FrontPage and Word documents, Excel tables and charts, PowerPointpresentations, and Access databases.
When closing a file, don't click the X to the right of the application title bar or you'll exit FrontPage by mistake.
To open a file:
- 1. Click the Open button on the Standard toolbar, select Open from the File menu, or use the Ctrl+O key combination to display the Open File dialog box.
2. Select the type of file you want to open (such as Web pages) from the Files of Type list at the bottom of the Open File dialog box.
3. Browse for the folder your file is located in from the Look in box.
4. Select the file from the list and click the Open button.
If you aren't familiar with the file types listed on the Files of Type list, don'tworry for now. You'll learn more about them throughout the book, especially in Chapter18, which talks about Microsoft Office files.
A Peek Under the Hood: Viewing HTML Source Code
Psst! Wanna see some source code? Take a peek by opening a Web page in FrontPageand clicking the HTML tab. The following figure shows the source code behind thepage shown in the previous figure. Seen enough? Click the Normal tab to return tothe graphical page view. HTML source code consists of the text and markuptags that make up a Web. Because FrontPage generates all of the source code for you,you never have to look at a single HTML tag if you don't want to.
- A Web page shown in FrontPage's HTML source code view.
Unmasked! Revealing Your HTML Tags
If you still want to read HTML but the HTML source code view looks like completegobbledygook to you, try displaying HTML tag markers in the Normal page view so youcan see them in context. To display HTML tags for your page elements, select RevealTags from the View menu. Although the tag markers (shown in the following figure)don't tell you everything you need to know about HTML, they can help you get thebasic idea. To get rid of the HTML tag markers, go back to the View menu and selectReveal Tags again to remove the check mark next to it.
- Web page with HTML tags r evealed.
If you know HTML and want to work directly with your source code, FrontPage canstill help you work faster. You can format text and insert images and tables quicklyby using the toolbar buttons, even when you're in the HTML page view. (If you don'tknow HTML but would like to learn, pick up The Complete Idiot's Guide to HTML4.0 by Paul McFedries.)
What's in a Name? Changing Your Page Title
If you didn't title your page when you saved it, as described in the "Savinga New Web Page" section earlier in this chapter, you can do it now. After all,when people visit your pages, you probably want the browser title bar to displaysomething more descriptive than New_Page_1. FrontPage also uses titles to generatelabels for navigation bars, as you'll see in Chapter 7.
You can change the titles for your pages anytime you want. To change a page title,select Properties from the File menu to display the Page Properties dialog box. Youcan then enter a new page title in the Title box and click OK to return to your Webpage. Find out how to edit page titles without opening the actual page from the Foldersview, as explained in Chapter 24, "You and Your Web Files."
Color My Web Page: Changing Background, Text, and Link Colors
Too old for coloring books? Color your Web page instead. All Web pages containcolor schemes that determine the colors for the background, text, and hyperlinks.You'll want to create your own color schemes for your pages or FrontPage will applythe default color scheme for you. It's more fun to be creative, isn't it? Createyour color schemes with style sheets, as explained in Chapter 15.
FrontPage gives you lots of options for creating color schemes, so let's takethings one at a time. First we'll run through the basic steps of setting the colorscheme for your Web page. The following sections cover details like how to pick colorsand create custom colors, add a patterned background, display a watermark, and copya color scheme from another Web page.
To change the color scheme for a Web page:
- 1. Select Background from the Format menu to display the Page Properties dialog box with the Background tab selected, as shown in the following figure.
- The Page Properties dialog box with the Background tab selected.
- 2. To pick a solid background color for your Web page, click the Background box to display the pull-down color menu and select a color. This option determines your page's background color.
3. To choose a text color on your page, click the Text box to display the pull-down color menu and select a color. This option determines the color of all of the headings, paragraphs, and other unlinked text on your page. Chapter 5 tells you more about working with text.
4. To choose a color for your hyperlinks, click the Hyperlink box to display the pull-down color menu and select a color. This option determines the color of your page's linked text and the borders around linked graphics (if you choose to display borders, as explained in Chapter 8).
5. To choose a color for your visited hyperlinks, click the Visited Hyperlink box to display the pull-down c olor menu and select a color. This determines the color that links change to when visitors have already followed them. For more about creating links, see Chapter 7.
6. To choose a color for your active hyperlinks, click the Active Hyperlink box to display the pull-down color menu and select a color. This determines the color that links change to while you click on them.
7. When you finish selecting options, click the OK button to apply your color scheme and return to the Web page.When you finish selecting options, click the OK button to apply your color scheme and return to the Web page.
You can also use the Page Properties dialog box options to apply hyperlinkrollover effects, which change the color and font for your text links when you passyour mouse pointer over them, as discussed in Chapter 7.
Picking Colors: Web-Safe Colors and Custom Colors
When you choose colors for your Web page, the pull-down color menus mentionedin the previous section can seem a little confusing at first. What the heck areall these things, and where can you get more colors? Not to worry--you'llget the hang of it after you try a few.
Select the following options to apply colors to your page:
- Automatic Leave this option selected if you want to keep FrontPage's default color setting.
- Standard Colors The pull-down color menu provides a convenient little palette of the most popular background, text, and link colors. To select one of these colors, click one of th e squares.
- Document's Colors Displays currently selected text and link colors, in case you want to use one of the colors for a different element.
- More Colors Click this option to display the Colors dialog box, which contains the complete palette of 216 browser-safe colors. To select a color and return to the Page Properties dialog box, click on a color and then click the OK button.
- Custom Colors To pick a custom color, click the Custom button to display the Color dialog box, select a color from the Basic Colors palette, and click OK to return to the Colors dialog box. You can also create custom colors by clicking a color on the color swatch, adjusting the brightness with the slider, clicking the Add to Custom Colors button, and clicking the OK button.When you finish selecting options, click the OK button to apply your color scheme and return to the Web page.
Keep It Safe: Choose the Right ColorsDifferent computer systems (such as Windows 3.x, Windows 95 or 98, Macintosh, and UNIX) don't display all colors the same way. This means that your beautiful colors might look funny--or downright awful--on someone else's computer. You can avoid this problem by sticking with browser-safe colors.
Copying a Color Scheme from Another Web Page
Once you come up with a color scheme you like, you can apply it to other Web pagesquickly and easily. To copy a color scheme to the current page, display the PageProperties dialog box with the Background tab selected, sel ect the Get Backgroundand Colors from Page radio button, click the Browse button to display the CurrentWeb dialog box, select a Web page, click OK to return to the Page Properties dialogbox, and then click the OK button to apply the color scheme and return to your Webpage. You can only select files from the current Web, as explained in Chapter 2.
Adding a Background Image
Background images make it easy for even non-designers to add a dash of pizzazzto a Web page. If you've ever wallpapered a room or tiled a floor, you already havesome idea of how background patterns work. When you add a background image, the Webbrowser repeats the image across your page to form a pattern. You can add your ownimages as backgrounds by importing them into your FrontPage Web. Find out more inChapter 2.
Microsoft FrontPage also comes with a clip art gallery with background imagesyou can use. The FrontPage clip art gallery comes with all kinds of artwork you canuse, as explained in Chapter 8.
To select a background image from the FrontPage clip art gallery:
- 1. Select Background from the Format menu to display the Page Properties dialog box with the Background tab selected.
2. Click the Background Image checkbox to select it, and then click the Browse button to display the Select Background Image dialog box.
3. Click the Clip Art button to display the Clip Art Gallery dialog box.
4. Scroll down through the Category list and select Web Backgrounds.
5. Click on a pattern, and then select Insert Clip (the first option) from the pop- up menu to choose a pattern and return to the Page Properties dialog box.
6. Click the OK button to apply the background and return to your Web page.When you finish selecting options, click the OK button to apply your color scheme and return to the Web page.
To add your own background image:
- 1. Select Background from the Format menu to display the Page Properties dialog box with the Background tab selected.
2. Click the Background Image checkbox to select it, and then click the Browse button to display the Select Background Image dialog box.
3. Browse for a image in your Images directory, select the image, and click the OK button to return to the Page Properties dialog box.
4. Click the OK button to apply the background and return to your Web page.When you finish selecting options, click the OK button to apply your color scheme and return to the Web page.
Displaying a Watermark
Have you ever written letters on fancy paper with an image or embossed stamp inthe middle of the page? These are called watermarks, and they're not justfor paper any more! As with background images, watermarks are displayed in the background.But instead of repeating as a pattern, they appear as a single image in the middleof the Web page.
To add a watermark to your Web page, display the Page Properties dialog box withthe Background tab selected, click the Watermark checkbox to select it, click theBrowse button, and proceed as if you were inserting a background image.
Try the Shortcut Menu!When you want to change your page title or colors, click anywhere on the page with your right mouse button and select Page Properties from the shortcut menu. Isn't that easier than selecting Properties from the File menu?
Five Cool Color Schemes You Can Try
Sure, you want your Web pages to look attractive and professional, but they shouldalso reflect your personality or your organization's image. FrontPage comes withready-to-use page designs called themes, as covered in Chapter 4.
If you'd rather try your hand at designing your own color scheme, try the followingideas:
- Cutting Edge Black background, white text, aqua links, fuchsia followed links, and yellow active links.
- Earth Tones Tan background, brown text, navy blue links, olive followed links, black active links.
- Slick and Professional White background, black text, red links, gray followed links, blue active links.
- Tons O' Fun Pale yellow background, black text, red links, blue followed links, fuchsia active links.
- By the Sea Navy blue background, lime links, aqua followed links, purple active links.
When you select colors from the Colors dialog box, the name of the colorname appears in the Name box so you can make sure you've picked the right color.For more Web design tips, see Chapter 10, "Elements of Style: Web Design Basics."
The Least You Need to Know
- S tarting a new Web page: Starting a new Web page: To start a new Web page from a template (FrontPage comes with many), click New from the File menu. To start a blank new Web page, select the Normal Page template or use the Ctrl+N key combination.
- Opening, saving, and closing Web pages: To open a Web page, click the Open button or use the Ctrl+O key combination. To save a Web page, click the Save button or use the Ctrl+S key combination. To close a Web page, select Close from the File menu, Ctrl+F4, or click the Close box.
- Changing Web page titles: The title for your Web page appears on the browser's title bar when people view your page online. To change a Web page's title, display the Page Properties dialog box, click the General tab, and type your text in the Title box.
- Creating and applying Web page color schemes: Color schemes determine the colors for the text, links, and background of a Web page. To create a color scheme for a Web page, display the Page Properties dialog box, click the Background tab, and choose your colors.
- Adding backgrounds and watermarks to Web pages: A Web page background is a single image that tiles across a Web page to form a pattern. A watermark is a single picture that appears in the background of a Web page. You can add a backgroud or watermark to a Web page from the Page Properties dialog box with the Background tab selected.
Table of Contents
I. ON YOUR MARK, GET SET, GO!
2. Instant Web-Site-O-Matic: Spinning FrontPage Webs.
3. Fooling Around with Web Pages.
II. DIVE IN! THE WATER'S FINE!
5. Entering Text and Fiddling with Fonts.
6. Making a List, Checking It Twice.
7. Think Links: Adding Links to Your Pages.
8. The Picture-Perfect Web Page: Placing and Tweaking Images.
9. Spiffing Up Pictures.
III. YOU'VE GOT THE LOOK: DESIGNING PAGES LIKE THE PROS.
11. Get Framed! Building a Web Site with Frames.
12. Table It! Arranging Text and Images with Tables.
13. Form and Function: Building Online Forms.
14. Don't Like What You See? Designing Your Own Page Template.
15. Now You're Stylin'! Using Style Sheets.
IV. WOW! AMAZE YOUR FRIENDS WITH WEB PAGE WIZARDRY.
17. Strut Your Stuff: Sound, Video, and More.
18. A Match Made in Redmond: FrontPage and Microsoft Office 2000.
19. A Grab Bag of Helpful Doodads: FrontPage Components.
20. Gee-Whiz Pages with Animated Special Effects.
21. Rev Up Your Web Site with Programs and Scripts.
22. If You've Got It, Flaunt It: Putting Your Access Databases on the Web.
23. Switchboard Central: Setting Up a Discussion Web.
V. IN THE DRIVER'S SEAT: MANAGING YOUR WEB SITE.
25. Testing, Testing, One, Two, Three: Checking Your Web Site.
26. Don't Just Let It Sit There! Publishing Your Web Site.
27. You're the Boss! Becoming a Web Site Administrator.
28. Keeping Track of It All with the Task List.
29. It Doesn't Take a Village to Build an Intranet: Publishing, Sharing, and Updating Files.
30. Building a Web Site That Fits Your Ego.
Speak Like a Geek.