FrontPage 102 Handbook
By Richard Rost
This is the full text listing of one of our handbooks. There is a lot more to this handbook. The full-color screen shots have been removed for this page. This text is simply provided so that the search engines will index the course contents. This is so any customer searching for a topic can find what class it's covered in. If you are interested in more about information about our courses, click here for our complete course listing. For details on how to purchase a handbook, visit our handbooks page.
Microsoft FrontPage 102
Course Handbook Supplement
By Richard Rost
PO Box 1308, Amherst NY 14226 USA
First Printing 7/10/2004
Copyright 2004 by Amicron Computing
All Rights Reserved
Welcome to the 599CD Microsoft FrontPage 102 Handbook. This course follows FrontPage 101.
This handbook is designed to be a supplement to the full 599CD video course for FrontPage 102. We recommend you use this handbook to follow along with the class videos. This handbook is not meant as a stand-alone study guide.
We do recommend that you watch the course videos one time through, paying attention to the lessons covered. Follow a/long with the course videos using this guide. Take notes on the pages where needed. Then, watch the videos a second time, practicing the examples yourself on your computer.
Table of Contents
Table of Contents 2
Lesson 1. Working Online 4
Lesson 2. Hit Counter & Hover Button 9
Lesson 3. Marquee & Include Page Component 20
Lesson 4. Map to Store & Bookmarks 29
Lesson 5. Review 45
Welcome to Microsoft FrontPage 102, brought to you by MyOnlineLearningPartner.com and 599CD.com. I am your instructor, Richard Rost.
Objectives for today’s class:
In this class we will be using Microsoft FrontPage XP and Windows XP, however this course is valid for any version of Windows, you should have no problems following this course if you are using FrontPage 2000 or 2003. FrontPage 98 users should upgrade to at least XP.
Lesson 1. Working Online
In FrontPage 101 we worked almost exclusively with a disk-based web. All of our pages were developed on our local C: drive. Many advanced components, including hit counters, do not work on a disk-based web. You must have your web on a real Web site (on the Internet).
Your ISP (Internet Service Provider) can usually provide you with Web hosting. You may also contact a WPP (Web Presence Provider) that only provides hosting. A list of Web hosting providers is available on our web site at www.Amicron.com/WebHosting.
Make sure your web hosting provider has FrontPage Server Extensions available. These are extra programs and files that have to be loaded on your server for the FrontPage components (like hit counters) to work.
Why work directly online? This is mostly a matter of personal preference. For novices, we recommend you work on your disk-based web, publishing up to the Web as needed. You may find it’s easier to work directly on your web online. If you have a dialup connection, you may want to work on your disk-based web. High-speed users can work directly online. If your web site is still under construction, and doesn’t have a lot of traffic, you can work directly online without problems. Working online lets you see your changes – especially with Web components – immediately, without having to publish.
In FrontPage 101 we worked with a Web on our C: drive. At the end of FP101 we published it up to our site on the Internet.
In today’s class, we’re going to work with that copy online. So, load up your Web site on the Internet. If you don’t have a web site on the Internet, you will need to continue to work with your disk-based web copy, but keep in mind many of the components we’re going to see today won’t work properly.
After entering in my username and password, my web opens.
You can make minor changes to your pages without problems. However, if you’re making major revisions to a page, you might want to work on a copy of the page. We learned how to copy pages in FP101, but as a review, click on a page, like your index.htm page, and copy it. You can either right-click on it and select copy, use the Edit menu, or hit CTRL-C on your keyboard. Now use CTRL-V to paste it.
Now, rename the page by clicking once on it, and typing in a new name. Once this is done, you can now make your changes to the page without worrying about anyone seeing your changes until you’re done.
When you’re done making your changes, simply delete the original file. Click on index.htm and hit delete on your keyboard. You will be asked if you’re sure you wish to delete it. Say “yes.”
Now, rename your new page to index.htm and everything should work correctly.
Here’s an interesting feature of FrontPage to note. If I were to rename one of the pages, like the products.htm page to something like products3.htm…
We’re notified that there are other pages that have links to this page. Do you want to update these other pages so that the links aren’t broken. Say “yes.”
Notice how FrontPage has now gone through all of the other pages in your Web and has pointed all of the links that were going to products.htm to the new products3.htm page. You can see this, for example, on your contacts.htm page.
Now, rename products3.htm back to products.htm.
Lesson 2. Hit Counter & Hover Button
Begin this lesson by opening your home page index.htm. Let’s put a hit counter on the bottom of our home page. Note that hit counters show the number of page loads – not unique visitors. Go to the bottom of your page and move the cursor where you want the hit counter to be. Click on Insert > Web Component (or just Component if you’re using FrontPage 2000).
The Insert Web Component box opens. Click on Hit Counter on the left. Then, click on the style of hit counter you want on the right. Click Finish.
The properties window for your hit counter appears. Again, you can select the counter style. Check on the box that says “reset counter to.” Type in a number in the box, like 2000, if you want to start the counter off at a certain value. You can also set the fixed number of digits to determine how many digits appear in your counter. Click OK.
You will now see the hit counter icon displayed on your web page.
If you click on the Preview button at the bottom of the window, you’ll see the preview version of your page.
Notice the Preview says “This page contains elements that may need to be saved or published to preview correctly.” This is because you need to view the page online on your Web in order for the hit counter to work correctly – it needs the Web page and the FrontPage Server Extensions.
In order for this hit counter to work, however, you must view the page in your browser. Save your changes, and click on the Preview in Browser button.
Now your page will load in your web browser, and you will see the hit counter at the bottom.
Note if you click on your Refresh button continuously, the hit counter will increment each time.
You can treat the hit counter icon like any normal character. You can highlight it and click on the Align Center button, for example, to move it to the middle of the line.
I like to put hit counters on the bottom of each page to see which pages in my web are getting the most traffic.
Let’s make a page to show our weekly or monthly specials. Copy and paste one of your other pages (like products.htm) and rename it to specials.htm.
Change the heading and text of the page as shown. Save your work and close your page.
Open up your home page, index.htm. Let’s insert a Hover Button under our bulleted list that gets the user’s attention. Click on Insert > Web Component. Then, under the Dynamic Effects category, click on Hover Button. Click Finish.
You will now see the Hover Button Properties window. Type in what you want to see on the button in the Button Text box. I’ll type in “July Specials.”
You can change the font, font size, and color by clicking on the Font button.
The Link To box is where you want the button to link to when the user clicks on it. Click on the Browse button to browse to the page you want.
A file browser window appears. Select specials.htm as your destination page. Click OK.
The other properties, such as the button color, effect color, and so on are easier to select once you’ve played with them. Let’s go with the default settings we’re given, and see what we’ve got. Click OK.
Save your work and preview it in your browser. Move your mouse over the button, and you’ll see what it looks like. Notice the blue Glow effect when you move your mouse over it.
When you click on the button, it will load up the Specials page. You can get to the button’s properties by double-clicking on it in design view (Normal mode). You can change the button’s color by clicking on the drop-down box next to Button Color.
You can select from any of the standard colors shown, or click on More Colors for additional options. Now, you can select from any of the colors on the color wheel shown. If you want even more options, click on the Custom button.
Now, you’re not limited to just the colors on the color wheel. You can click to select where in the full spectrum of color you want to be – let’s say purple…
Then you can control the brightness by clicking in the sidebar (or dragging the little black pointer arrow).
You can click Add to Custom Colors to add this color to your palette for the future. When you’re done, click OK. Click OK again.
You can do the same thing for the Fill Effect. Here’s another neat trick. Let’s say you want to use the exact blue from the shading behind the computer monitor graphic on the page. Click on the Select button with the little eyedropper on it.
Move the eyedropper over the color you want to “pick up” on the page and click. Notice your active color is now that exact blue.
Now, hit OK twice. Save your page, and preview it in the browser. Note that you need to click on the Refresh button in your browser for it to load the current version of the page up. Notice the button colors have changed.
You will need to experiment with the other Effects to find ones you enjoy. Take a moment to experiment with them now.
If you click on the Custom button there are some advanced features, such as playing a sound when the button is clicked on, or hovered over. We’ll talk more about these in a future class.
You can also resize the hover button like any graphic image, by clicking on it and then dragging the corners or edges.
Note: hover buttons install two files (fphover.class and fphoverx.class) into your web. Don’t delete them.
Lesson 3. Marquee & Include Page Component
Open your home page, and insert a blank line before “Welcome.”
Click on Insert > Web Component and click on Marquee. Click on Finish.
Type in the text for your marquee.
Direction determines which direction the text moves. Speed determines how fast the text moves. You can also change the behavior of the text (whether it scrolls, slides, or alternates). These are features you need to experiment with on your own to set to your liking. Let’s set the background color to light blue. Click OK.
Now you’ll see your marquee inserted in the page.
To change the font properties for the text in the marquee, select it and use the formatting toolbar. I’ll set mine to Arial, 10pt, bold.
Save your work, and preview in your browser, and you’ll see the text come marching in from right to left.
Now that we have a Specials page, we need to add it to our navigation links bar. Come out to the end of the links, and type in “Specials.”
Highlight “Specials.” (keyboard trick: if you’re at the end of the line, hit CTRL-SHIFT-LeftArrow to select the last word). Make it a hyperlink to the Specials page.
Now you have to go ahead and do that to all of your other pages: contacts, locations, index, and so on. You can highlight the entire line…
Copy it to your clipboard (CTRL-C). Open another page. Delete the current links bar. Paste (CTRL-V) in the new one.
OK. Now do that to each of the other pages in your Web. And… you have to do this every time you make a change! If you’ve got 30 pages in your web, you can see how this is going to become a lot of work. Wouldn’t it be nice if there was some way you could make this links bar a file on it’s own that you could just “include” into the other pages? That’s where the Include Page Component comes in. Start out by selecting and copying your entire links bar again (CTRL-C).
Now, close whatever page is open. Create a brand new blank page.
Now, paste in your links bar. That’s all we’re going to have on this page. Now save your work.
Let’s call this page links.htm. Click Save.
Close the page. Now we want to stick that links page inside of the other pages. Open up contact.htm.
Delete the links that appear inside of the contacts.htm page. These are still the old links.
Now, click on Insert > Web Component. Click on Included Content and then Page. Click Finish.
Browse to or type in the page you want to include. In this case, enter links.htm.
Notice the links page is now included inside of your contact.htm page. That’s what the Include Page Component does. It puts one page inside of another and is perfect for this task. Note you may have an extra blank line to delete. That’s fine.
Notice if you click on the links bar, it is treated as one character – that’s because it’s a single component. You can’t edit it from here – you have to open up the links.htm page to edit it. You can double-click on it to open it’s properties.
Save your work. Open the locations.htm page and do the same thing. Delete the existing links and insert your links page into here.
Note that once you’ve inserted the component into a page, you can copy and paste it into the rest of your pages. Select the included component itself, hit copy (CTRL-C). Open the next page, and then paste (CTRL-V) it in. Yes, you have to go through and do this once with each page in your Web, but once it’s done you won’t have to edit each and every page whenever you make a change to your links. Finish editing the rest of your pages.
Here’s the benefit: let’s make a change to our links.htm page. Open it up and change the font size of our link text. Save your changes.
Now, notice the change appears in all of our other pages. (Note you’ll need to hit refresh in your browser to see the changes).
Lesson 4. Map to Store & Bookmarks
In this lesson we’re going to show you how to make a real basic map to our office (store) using Microsoft Paint. This is a basic graphics editor that comes with Windows and it’s real easy to use. If you want to learn more about Microsoft Paint, take our Windows 121 course. Begin by opening up Paint. Click on Start > All Programs > Accessories > Paint.
Microsoft Paint will load. You begin with the pencil tool. You can click and drag to draw freehand.
Undo that squiggle (Edit > Undo).
We’re going to make a real simple map to our store. Begin by selecting the Line tool.
Then, click on the fatter lines below to make your line a little thicker.
Then, click and drag on the “drawing canvas” to create a line.
Click on the “A” text tool.
Now, click and drag to draw a box on your canvas where you want your text to go.
Type in your text. Notice the Fonts toolbar appears. You can change the attributes of your text here. If you don’t see this toolbar, click on View > Text Toolbar. Type in “Main St.”
You can click on the border of the font box and drag it to move the text.
You can click on the transparency button to make your font’s background transparent (so it doesn’t wipe out the line when moved over it).
Add more lines and additional text for another road.
You can use the Rectangle tool to draw a box for our store location.
You can use the Fill With Color tool (looks like a paint can) to fill that box in.
Click on the color you’d like from the color palette at the bottom of the window. I’ll pick light blue.
Now, click inside your box. It’s filled in with the blue.
Add text as shown. Note you can also change the color of the text using the palette while the text is still highlighted.
If you want to move stuff around once it’s already part of the background, you can use the select tool.
I then used the line tool to create a little arrow. Save your image using whatever filename you wish. I called mine “map to pcresale” and saved it in my My Pictures folder.
Now, use the Select tool and highlight as much of the picture as you want to appear on your web. Hit CTRL-C to copy it to your clipboard.
Switch back over to your Web. Open your Locations page. After “Buffalo NY” type in “click for map.”
Scroll down to the bottom of this page. Insert another horizontal line (Insert > Horizontal Line). Paste in the map you copied a minute ago (CTRL-V).
Notice when I click on the picture, the Pictures Toolbar appears.
For now, let’s click on the Pictures toolbar (on the border at the top) and drag it down to dock it at the bottom of our screen.
Notice how it’s now docked nicely at the bottom – instead of floating over everything. See the video for a better illustration of how this works. Note: if you’re not seeing the Pictures toolbar, you may need to manually turn it on. Click on View > Toolbars > Pictures.
Now, click right out in front of the map to move your cursor there.
Type in the name, address, and phone number of this office. Remember, you can use SHIFT-ENTER for line breaks.
We can now set up a Bookmark to jump from the list of offices above down to this location. Click right before the word “Buffalo” and click on Insert > Bookmark.
For the Bookmark name, type in “Buffalo” and click OK.
Notice the “flag” icon before “Buffalo.” That indicates a Bookmark.
Now, scroll up and highlight the “click for map.”
Click on the Insert Hyperlink button.
This time instead of selecting a page, click on the Bookmark button.
A list of all of your bookmarks will appear. Select Buffalo and click OK.
Notice the bookmark #Buffalo is in the hyperlink address bar. Click OK.
Your hyperlink is now set.
Save your work. You’ll notice the Save Embedded Files image to save your map picture. Give it a good filename, and click Save. Note that I don’t like using spaces in filenames in our Web. Why? I’ll explain in more detail in a future class – but spaces tend to make manual hyperlinks messy.
Now, preview your Locations page in your browser. Note that when you click on the link, you’re jumped right down to the map bookmark. You’re on the same page, but at a different spot. Notice the bookmark notation on the end of the hyperlink.
To demonstrate how this is useful, set up another office location at the bottom of this page – let’s say for our Portland office.
Insert a bookmark before “Portland.” Name it Portland.
Let’s make the hyperlink now. I’m going to remove the “click for map” link and just make “Buffalo NY” itself a link to the Buffalo bookmark. Do the same thing for Portland.
Save your work and preview it in your browser.
Lesson 5. Review
Review of topics covered in today’s class.
Tell us what you think. Log on to www.599cd.com/Survey and take a short survey about this course.
Take your skills check quiz at www.599cd.com/Test. If you pass, you can print out a Certificate of Completion.
What’s next? Visit www.599cd.com/FrontPage for our complete list of Microsoft FrontPage courses.
Need Help? Visit www.599cd.com/TechHelp for Microsoft FrontPage assistance.
Make sure you’re on our Mailing List. Go to www.599cd.com/MailingList for details.
Contact Us. If you have any questions, go to www.599cd.com/Contact for information on how you can contact us by phone, email, or live online chat.
This course, handbook, videos, and other materials are copyright 2002, 2003, 2004 by Amicron Computing. All rights reserved. No portion of this course, handbook, videos, or other course materials may be reproduced, copied, edited, or otherwise distributed without the express written permission of Amicron Computing. Amicron Computing shall not be held liable for any errors or omissions in this document.
This document may not be used as part of a training course without express, written permission from Amicron Computing and the purchase of an Instructional License. For details, contact:
PO Box 1308
Amherst NY 14226 USA
Keywords: frontpage handbook