FrontPage 101 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 101
Course Handbook Supplement
By Richard Rost
PO Box 1308, Amherst NY 14226 USA
First Printing 7/2/2004
Copyright 2004 by Amicron Computing
All Rights Reserved
Welcome to the 599CD Microsoft FrontPage 101 Handbook.
This handbook is designed to be a supplement to the full 599CD video course for FrontPage 101. 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. Introduction 3
Lesson 2. Definitions 4
Lesson 3. Planning Your Site 6
Lesson 4. Create Our First Web Site 7
Lesson 5. Formatting 14
Lesson 6. Saving Pages 23
Lesson 7. Hyperlinks 31
Lesson 8. Using Graphics 46
Lesson 9. Publishing to the Internet 62
Lesson 10. Design Considerations 68
Lesson 11. Review Topics 70
Lesson 1. Introduction
Welcome to Microsoft FrontPage 101, 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 2. Definitions
What is FrontPage? FrontPage is a Web Page Editor and Web Site Manager. FrontPage is like a “word processor” for web pages.
A network is a group of computers that can interact with each other. A local area network is a group of two or more computers connected in a single building. A wide area network is a connection of computers across a larger area, such as a city, college campus, country, or even the world. The purpose of a network is to share files, information, printers, and other resources between computers.
The Internet is a specific wide area network that connects computers all around the world. The Internet began as a military research project in the 1950s. The government needed a communications network that could survive a nuclear attack. If part of the network failed, the rest of it would take over to transfer information between the remaining sites. The Internet is decentralized. Then, the Internet expanded to colleges and universities for research, and finally became commercialized in the 1990s.
In the early years of the Internet, everything online was text-based. In the 1990s, the World Wide Web was born. The Web is a part of the Internet that allows you to create highly formatted pages that users can browse. These pages can be linked together for easy navigation. They can also contain graphics, sounds, movies, and much more.
A Web Page is a single document on the Web. Web pages are organized into Web Sites. The first page of a Web Site is called it’s Home Page. Web sites are stored on a Web Server which may be nothing more than a computer connected to the Internet that provides web pages when requested. Users (clients) navigate the web using a piece of software called a Web Browser, such as Microsoft’s Internet Explorer. FrontPage also uses the term “Web” to indicate a web site.
A person who develops or maintains a web site is known as a Webmaster. Web pages are written as simple text formatted to a standard known as HTML, or hypertext markup language. Hypertext includes tags that can do things such as change the format of the text.
Web pages sometimes contain Hyperlinks which users can click on to jump to other pages, or different locations in the same page.
Every web page has a specific location, or address, on the Web. This is known as it’s Uniform Resource Locator, or URL.
Part of the URL is the Domain Name of the web site, such as 599CD.com or Microsoft.com.
Lesson 3. Planning Your Site
Before you begin developing your site, sketch out your site on paper or a whiteboard. Determine the reason for your site, and have a goal.
· Step 1. Plan your entire site on paper.
· Step 2. Research and gather your own data including pictures and documents.
· Step 3. Research your competition and your suppliers. What are they doing online?
· Step 4. Construct your home page and other “top level” pages.
· Step 5. Add your hyperlinks to connect your pages together
· Step 6. Add graphics and polish your site design
· Step 7. Test your site thoroughly
NEW: Since developing this course, we’ve decided to add a very important 8th step:
· Step 8. Advertise your site
Many people have the “if you build it they will come” attitude to web sites, however you will not generate significant traffic to your site unless you advertise it – both online and offline. We’re not going to cover the details of web site advertising in today’s class, but we will discuss it in future lessons. For today, just keep this very important step in mind.
Lesson 4. Create Our First Web Site
Begin by opening FrontPage. You will see the standard FrontPage interface. You will see many of the same features as the other Microsoft Office applications, such as Microsoft Word and Excel.
Let’s turn off the Views Bar by clicking on View > Views Bar. We don’t need it right now, and it wastes a lot of space on the screen.
Click on the “Empty Web” link in the Task Pane.
If you’re using FrontPage 2000, you can click on File > New > Web. You’ll see a similar option appears for FrontPage XP as well.
Click on the Empty Web option (FrontPage 2000 users should select One-Page Web).
On the right side of the window, you will see some options. We need to specify a location for our new web. Type in “C:\PCResaleWebSite.” When finished, click OK.
Next you will see FrontPage create a blank web, and a window like this will appear:
If you do not see the Folder List on the left side, click on View > Folder List to open it.
Click on the “Create New Page” button that looks like a little white piece of paper.
A blank new page appears.
Begin by typing in our company name for the top of our home page.
Notice the spell-check-on-the-fly pops up and highlights that word with a red underline. This indicates a misspelling. Right-click on the word and select “Add to dictionary.”
Now, let’s create a links bar that will have hyperlinks to the different pages in our web. Just type in the page names now and we’ll create the hyperlinks in a later lesson.
Now, type in an introduction. Notice when you hit ENTER at the end of a line, you are actually moved down an extra line. This is a paragraph break. If you want to only move down one line, press SHIFT-ENTER for a line break.
Lesson 5. Formatting
Let’s change the font of our “PCResale.NET” heading to Arial. First, select the text by clicking and dragging over it with your mouse.
Now select Arial from the font drop-down menu.
Now let’s make the font larger. Notice from the font size drop-down menu that you don’t have all of the point sizes available that you do in Word. Here you’re limited to the font sizes shown. This is an HTML limitation.
Now, let’s Bold our text.
Notice on the toolbar there are the standard formatting buttons that you have in Microsoft Word. There are buttons to change your text alignment (left, center, right) as well as buttons to italicize and underline text. There are also two neat buttons that allow you to increase and decrease your font size incrementally.
You can change the color of your text by selecting the text and then picking a color from the Font Color palette.
You can select from one of the standard colors shown. If you click on the More Colors option at the bottom of the palette window, you will see the following color wheel.
When you de-select your “PCResale.NET” heading by clicking somewhere else on the page, you’ll see that the font color is now in blue.
There is also a highlighter pen that you can use to change the background color behind your text. Click on the highlighter pen for yellow, or click on the down-arrow next to it for more colors, then select your text to change the color.
Let’s add a horizontal line. Click to move your cursor just before the “W” in “Welcome” and then click on Insert > Horizontal Line from the menu bar.
You will see a horizontal line in your document.
To edit the properties of this horizontal line, double-click on it. There are a lot of properties for lines. We’ll talk about many of them in future lessons. For today, let’s just change the line color to dark blue.
Let’s take the list of products and services that we listed on the home page and change them into a bulleted list. Click right before the “C” in “custom-built” and press ENTER. Now, click on the “bullets” button on the toolbar.
Do the same thing before “used and factory…” and clean up any unneeded punctuation.
When you’re done, you should have a list like this:
Next, let’s change the font of our navigation links bar to Arial.
Let’s change the font of the “PCResale.NET” in our welcome statement using the Format Painter. Click on the PCResale.NET header that’s blue. Then, click on the Format Painter button.
Now, just select the PCResale.NET in the paragraph below, and notice the font changes. This is how the Format Painter works – it copies the format of text.
Lesson 6. Saving Pages
Let’s save our home page to our hard drive. Click on the Save button on the toolbar.
The Save As dialog box appears. Notice that we are inside of our PCResaleWebSite web.
The default filename that FrontPage assigns is index. Specifically, this is index.htm if you have Windows file extensions turned on. index is a special filename that indicates this is the first page of your web site – your “home” page. Click on Save.
Notice the name of the file in the title bar across the top of the window, and on the page tab.
Now we’re going to create a second page. With your index.htm page open, click on File > Save As.
Type in a filename of products. Click on Save. Notice the title bar and page tab now say products.htm. We’ve saved this as a new page. Our index.htm page is still fine and intact.
Change the header of the page to say “Products.” Change the body text of the page as well. You can leave the navigation links the same.
Now, close the page by clicking on the little gray “X” in the upper-right corner of the page. Answer “yes” when you’re asked if you want to save changes.
Let’s create one more page – a “contact us” page. Right-click on the index.htm page from the Folder List. Select Copy.
Now, right-click somewhere down in the empty white area below all of the files and folders, and select Paste.
This will paste in a copy of your index.htm file. It’s called index_copy(1).htm.
Right-click on this new file, and select Rename.
Type in “contact.htm” as a new filename for this page. Press ENTER when done.
Note: if you don’t type in the “.htm” on the end of a file while renaming it, or if you type in something different, you’ll get this warning message. Make sure you type in the proper “.htm” extension when renaming files.
Double-click on the contact.htm page to open it. Change the page header and body text as shown. Remember to use SHIFT-ENTER to insert line breaks between lines of text.
Lesson 7. Hyperlinks
In this lesson we’re going to learn how to create hyperlinks. Still in our contact.htm page, type in the following Email address line as shown:
Notice how FrontPage automatically created a hyperlink for us. The hyperlink is blue underlined text. If you hold your mouse over the link, notice the hyperlink destination in the status bar to the bottom left of the screen. This link will launch the user’s email program.
If for some reason you don’t want FrontPage to automatically create this hyperlink, just click on Undo as soon as you notice it.
Type in your web site address now. Notice that FrontPage will create a hyperlink for this as well.
Notice if you hold your mouse over this hyperlink, you’ll see a yellow tooltip that says “Use Ctrl+Click to follow a hyperlink.” This will let you follow hyperlinks while you’re working on them.
Now let’s create links of our own. Let’s link the word “Home” on our links bar back to our home page. First, select the word “Home.”
Now, click on the Insert Hyperlink button on the toolbar.
Notice the Insert Hyperlink menu appears. Click on the page you wish to link to – in this case index. Click OK.
Notice that “Home” is now a hyperlink.
Follow the same procedure with the Products & Services and Contact Us links. Select the text, click on the Insert Hyperlink button. Select the page, and click OK.
You can make a hyperlink to a page that doesn’t exist, like our Locations page. Select the word “Locations,” click on Create Hyperlink, and just type in “locations.htm” and click OK.
Now let’s create a link to a page outside of our web. Type in “PCResale.NET is owned by Amicron Computing,” and then select “Amicron Computing.” Click on the Insert Hyperlink button.
Now, in the address bar, type in the web site you wish to go to. Click OK. Note: if you have a version of FrontPage earlier than XP you will need to type in the http:// that precedes the web page address.
Notice your text is now a hyperlink.
Now let’s create a mail hyperlink. Type in “You can email the president by clicking here.” Select “clicking here” and click on the Insert Hyperlink button again.
Now, type in mailto:email@example.com and click OK.
This creates an email link.
You can optionally create a mail link by clicking on the “E-mail Address” button inside the Insert Hyperlink window.
This will give you a little window with some other options for formatting your email. This is optional, and you may feel free to use it if you wish. Personally, I find it easier just to type in the “mailto:” in front of my email address.
Notice the little asterisk next to the filename contact.htm* on the page tab. The asterisk indicates that this page needs to be saved – it has changes that were made since the last time you saved the file. Click on the save button now.
Notice the three buttons at the bottom of the page that are labeled Normal, HTML, and Preview.
You can click on Preview to show you a rough approximation of what the page will look like when viewed in a web browser, but I’ve found it doesn’t always show you the page exactly as it should. Instead, on your toolbar, there is a button called “Preview in Browser.” Click on this button now to load this page into your web browser.
Notice your web browser loads – mine is Microsoft Internet Explorer.
Now, let’s copy our hyperlinks bar from our Contact Us page into our other two pages. Open up your Contact Us page. Highlight the hyperlinks (navigation) bar. Right-click on it and select Copy.
Now, open up your index.htm page.
Now, highlight the navigation links on this page, and paste over it (right-click, paste). You may get an extra line after it – that’s OK, just hit backspace.
Now, notice I’ve copied all of my links over to this page. Do the same for your Products & Services page as well. Save your work.
TIP: There is also a File > Save All option which will save all open files that have changes. You may need to click on the chevron at the bottom of the File menu to see it.
Let’s make our Locations page. Here’s a trick for copying and pasting files using only your keyboard: Click on the index.htm page. Press CTRL-C on your keyboard to copy the file to your clipboard. Then, press CTRL-V on your keyboard to paste it. This will copy the file using only the keyboard. Rename this new page to locations.htm.
Now, open up this page. Edit the header, and put your content in it. Save your work.
Lesson 8. Using Graphics
Let’s insert clipart into our home page. Open your index.htm file. Click to move your cursor before the word “Welcome.” Now click on Insert > Picture > Clip Art.
FrontPage 2000 users will now see the “Clipart Gallery” which will show you clipart grouped in categories, and is real easy to figure out. FrontPage XP users will see the “Insert Clip Art” Task Pane.
Come down to the bottom of the pane and click on the “Clip Organizer” link.
You will now see the Microsoft Clip Organizer. Click on the little plus sign next to “Office Collections.”
Click on the “Technology” folder. You will see a few pieces of clipart in that folder.
Click on the plus next to Technology to open up it’s subfolders. Click on “Computing.”
Find the picture of the computer. Click on the down-arrow to the right of it. Click on Copy. This will copy the picture to your clipboard. Close the clip organizer. Answer “yes” to leave the clipart on your clipboard.
Now, click on Paste (either on the toolbar, or by selecting Edit > Paste) to insert that clipart into your web page.
Close the Insert Clipart Task Pane. Now, click on the clipart – just once. Notice when you do, you see a new toolbar appear. This is the Pictures toolbar. There are buttons on this toolbar specifically designed to work with pictures.
If for some reason you don’t see this toolbar, you can click on View > Toolbars > Picture.
On the Pictures toolbar, there is a button called “Position Absolutely.” This lets the picture float over the text without effecting the text. Click on this button.
You can now click and drag the picture wherever you want it on the page.
You can resize the picture by clicking and dragging on one of the boxes on the picture’s corners.
Save your work. You are prompted to now save your picture in your Web. The clipart piece must be copied to your Web folders. The first thing I want to do is rename the picture – because it’s current filename is just a bunch of letters and numbers. So, click on the filename and click on the Rename button.
Type in a meaningful name, like “computer.gif.” Make sure you keep the same file extension (the portion of the filename after the period).
Click on OK. Notice how computer.gif is now saved in your Web.
Now we’ll learn how to insert our own files – instead of just ones from Microsoft’s Clip Gallery. Now, I’m going to assume you have some images in your “My Documents” folder. I’ve opened up my “My Documents” folder and I have an image called new-computer.gif in mine. You can use whatever images you have on hand.
Open up your products.htm page. Click on the bottom of the page where you want your image to go. Click on Insert > Picture > From File.
Click on your “My Documents” folder.
Click on your image – in my case, my new-computer.gif image. Click on Insert.
Notice now my picture has been inserted into my page.
Optionally, there is an easier way to insert pictures into your web. Go ahead and delete this picture. Click on it and hit Delete on your keyboard. Open your “My Documents” folder up and have it side-by-side with your FrontPage web. Click and drag the picture from My Documents over to your web page. Presto!
Save your work. Once again you’re prompted to save this picture inside your web. Keep the existing filename and click OK.
Notice the new file in your web.
You can move graphics into your images folder by clicking and dragging them. This keeps your root (main) folder clean. Make sure you move things around from inside FrontPage – not Windows Explorer or My Computer.
Notice how these files are now inside the images folder. You can open it by clicking on the plus sign next to the folder name.
We can easily copy images from other web sites into our web pages. Open up any web site. I’ve opened up www.MYOLP.com in my web browser.
Find an image that you want to copy. Right-click on it and select Copy.
Now open up one of your web pages. I’ve opened up my contact.htm page. Paste the image in at the bottom.
When you save your work, you will again be asked to save this file. I’ll save it as woman-at-computer.jpg.
You can also change the folder that this image will be saved in right from here by clicking on the “Change Folder” button. Click on it now. Double-click on your images folder. Then, click OK.
You will now see that the folder the file will be saved in is properly marked as images. Click OK to save.
You can also capture images on your screen. You can hit the Print-Screen key (PrtSc) on your keyboard. That will take a snapshot of your entire screen and save it to your Windows Clipboard. You can then paste this image into your favorite graphics program (like Photoshop or even Microsoft Paint) and edit it. We’ll cover an example of how this works in a future class.
There is also a great utility for capturing images off the screen called Hypersnap. Go to www.amicron.com/hypersnap for details.
Lesson 9. Publishing to the Internet
So far, all of the web pages we’ve created have been stored locally on our C: drive in our computers. In this lesson we’re going to publish this information up to the World Wide Web. We will assume for the purposes of this lesson that you have Web space available from your Internet Provider.
NOTE: If you do not have Web space available, we have a listing of companies that provide Web hosting which can be found at: www.amicron.com / WebHosting.
If you have a business web site, you should also consider registering your own custom Domain Name. This is a name like “amicron.com” or “599CD.com” that identifies your site on the Web. You want to select a domain name that is short, and easy to remember.
When you purchase your web hosting service, make sure your service provider has FrontPage Server Extensions installed on your Web. This is important if you want to make sure that all of FrontPage’s features will work with your Web.
We have our demo domain set up as www.pcresale.net. Let’s open up our FrontPage web and click on File > Publish Web.
Type in the location of your web on the Internet. In our case this is “http://www.pcresale.net.” Click on OK.
Type in your username and password. These will have been provided by your Web hosting service. Optionally check on the “remember my password” box if you don’t want to have to be prompted for it in the future.
You will see a list of web pages from your web. Click on Publish to begin copying these files up to your web site. Ignore the “conflict” warning for index.htm. This is because we had a temporary “under construction” page up there previously.
FrontPage is asking us if we want to overwrite that duplicate index.htm page. We’ll say “Yes to All.”
You will see FrontPage copying your files up to the Internet.
When it’s all done you’ll see the following:
You can now click on the link to view your published web site or just open your web browser and type in the address of your site, like www.pcresale.net.
Notice that this is now a real web site on the Internet. Now, let’s make some changes. Open your locations.htm page and add a new location.
Save and close the page. Again, click on File > Publish Web. Notice this time there is only a check mark next to the locations.htm page. FrontPage knows that this is the only page that has changed and needs to be updated on the Internet.
Click on Publish to save your new page up to your Web site.
Lesson 10. Design Considerations
Your web site is a direct electronic representation of your firm. Keep it looking professional. It doesn’t need to be fancy, but it should look clean. Simple is OK, but it should be done tastefully.
What are your competitors doing? What’s working for them? What do you like/dislike about their site? What features did you like?
Gather email addresses from your visitors. Offer them a free gift of some kind for signing up for your mailing list. For now you can do this by just having them email you. In a future class we’ll teach you how to create a reply form, but for now an email link works fine.
Use clear and simple headings on the tops of your pages. Each page should have a heading like “Contact Us” or “Products & Services.” Keep your users’ attention spans by having clear bulleted topics where appropriate.
Make sure your contact information is readily accessible! If you don’t have it listed on every page at least have a link to a “Contact Us” page on every page in your web site. Make it easy for people to get in touch with you.
Make sure to include a link back to your home page from every other page on your site. Many times people will come in to your site from a search engine that doesn’t drop them on the home page.
Keep important information first – towards the top of the page. People hate scrolling down pages. Try to keep pages short. Use multiple pages if necessary.
Try to avoid “under construction” signs if possible. If you do, gather the user’s email address to notify them when the page is completed.
Be sure to include a copyright notice on your page. Something like “Copyright 2004 by Amicron Computing” is usually sufficient. You may also want to look into a Privacy Statement.
Make sure to include a warning message before any pages with adult or offensive material.
Update your site regularly. Avoid time-sensitive data if you’re not going to keep it up to date. If you don’t have time to update your site, that’s OK – just don’t put time-sensitive information up there. Nothing is worse than out-of-date information.
Keep graphics to a tasteful minimum. Unless you’re targeting high-speed users, don’t load your pages up with tons of graphics. Remember transfer speeds. FrontPage will estimate how long it will take each page to load. Look to the bottom-right corner of the screen for the estimate. You want your home page to load quickly.
Lesson 11. Review Topics
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