Lesson #1
Week 1 (Feb. 27- Mar 4) - FP-101 Introduction to Microsoft FrontPage 2000
 | Description of Lesson 1 |
Installing FrontPage 2000
Virus Protection
Start Microsoft FrontPage.
Create and edit Web pages.
Work with text and hyperlinks.Description of Lesson 2
Insert pictures and files.
Format lists.
Position objects.
Add a feedback form.
Design a photo gallery.
Create a Web site structure.
Save your work.
INSTALLING MICROSOFT FRONTPAGE 2000
Disable Virus Protection
---------------------------------------------------------
Some virus protection programs can interfere with the
Microsoft Office 2000 or Microsoft FrontPage 2000
stand-alone version Setup program. If you use a virus
protection program on your computer, please disable it
before running Setup. You can re-enable the virus
protection program after Setup is complete.
Note: If your virus-detection program starts
automatically when you start Windows, you may be able to
disable it by restarting Windows while holding down the
SHIFT key. For details consult your virus-detection
program's documentation.You can also go from START to SETTINGS select CONTROL PANEL
and ADD/REMOVE PROGRAMS.Click the INSTALL/UNINSTALL tab, find the name of your anti-virus protection program among the list of the installed programs on your computer, highlight it and press the ADD/REMOVE button and OK. Follow instructions
to uninstall. Just make sure you have your original anti-virus program so you can re-install it after you are finished installing FrontPage.
About FrontPage
The World Wide Web is a great way for people to communicate with each other. While you have conversations with other people over Internet e-mail and in Internet
newsgroups, you can also publish your own personal Web site, a collection of one or more pages on which you can share all sorts of information.
This tutorial will introduce you to Web page creation and Web site management, two aspects that will show you how easy and fun it is to build and maintain a Web site with Microsoft FrontPage 2000.
Starting FrontPage
If you haven't already installed FrontPage, you'll need to do so before you begin the tutorial.
To start Microsoft FrontPage
Start button
On the Windows taskbar, click the Start button, point to Programs, and then click Microsoft FrontPage. FrontPage opens and displays a blank page ready for editing.Now let us explain some of the control buttons on the Task bar.
If you are familiar with Microsoft Word you should be at home with most of the menus and buttons of the FrontPage. I will try to explain most of them, at least the most important to us in this lesson. El Scripto is a add on to FrontPage which I downloaded just to try it. Please ignore it for now. You don't have it on your computers.
In the second lesson, you'll continue working with the Daughters of Penelope Web you created by adding
navigation bars to its pages, applying and customizing a graphical theme, previewing and testing the Web site,
and then preparing the Web site for publication on the World Wide Web.
Before you publish a Web site, you'll want to make sure its pages and files are well organized, all of its hyperlinks are working, pages are free of spelling errors, and you have enough space available on the target Web server. FrontPage can help you complete these important tasks.Create and edit Web pages.
So now let's go to File and press NEW and select Page. A NEW window will appear and you select there a variety of formats for single pages. You can experiment with the various pages, but let us select for now a page which is suitable for Main page for our project.
Select "One-Column body with contents on right" and click on it. Press OK. Your new page will open ready to be modified to receive the information you want to enter in you page.
You will notice that the example text which is included in this page are Latin phrases. Also you will notice that the text area is surrounded by dotted lines. The dotted lines are indicating the presence of a Table which has been used to format the text.
The two blocks on the top row are reserved for the Header of our page. As a suggestion, you might want to insert a picture in each one of them, after you delete any Latin text and place a heading in the center block to tell what your web is all about.
If you prefer to use the whole area as your heading you can merge the three cells.
Go to the left side of the blocks and place your mouse pointer on the dotted line. The pointer will chance to a small black arrow. Press the Left mouse to highlight the three blocks within the dotted lines. Press the right mouse button and select Cells - Merge. All three cells will merge into one long header cell.
As a heading we can enter something like "My Web Page" which we have to design with another software. We can use the standard or fancy fonts, enlarged and in color, but that will not be attractive enough. Also if a person does not have the identical fonts in his system, the browser will replace your fonts with the default fonts. So, in order to make something which will be visible to all, and not depend on fonts, we have to create something which will be a graphics file in gif or jpg format.
At this point go into each of the fields formed by the table and highlight the fields which are filled by Latin characters. Press the delete button on your key-board to delete the text.
Go to FILE menu and save the new file. If this is a new folder we have just opened notice that the file will be named by FrontPage index.htm.
Go to FILE Menu and save the file you have just created. Notice down on the left side of your screen the window with the tree of files. Select the file you have just created clicking your right mouse button. Select Rename and write in the small window which will open the new name of the file. For instance name it index.html. This is important if you want that file to be the first file to load when you are opening your web in your directory. (index.htm will do the same).
Since you are at it, open a second file and name it second.html. Save it
Think about the header design and give me some ideas. I will choose the software we need to do the header and make recommendations. Also think about pictures you might want to include next to the header. Keep in mind that both cells or all three can be merged. We will discuss this in our next lesson. Now make sure you decide whatever you want to enter on your Main page. Drop me a line and ask me how to make a headers which will say...... your own artistic ideas.
On the left column of the page, below the header, we will enter the Navigation buttons. Through those buttons we will be able to navigate to other pages which we will create and we will want to link.
Now let us make a hover button. It is called hover button because when the mouse pointer goes over it will change color. First click your mouse pointer in the place you want to insert a hover button.
Go to INSERT of the main tool bar and select Component and then Hover Button. The Hover Button Properties box will open. Write whatever you want to appear on the button.
Depending on the size of the button adjust the size of the font you will use (I usually make a font 90 x 20 and I use a font size 10). Write what ever you want the button to say. Go to top of page, Main Page, next page, etc. Select the font color and press OK. Select the color of the font.
If you want the button to glow as the mouse passes over it, select glow the color you want to see glowing.
To make a button do what it says, you must Link it to a file. Let us say that you want to go to lesson1a page when the button is pressed.
Point the mouse on the button and press the Right mouse button. Go to browse of the Hover Button Properties and press browse. From the LIST OF FILES Select Lesson1a.html.(if it is not there type it in. When the file becomes available it will link to it.
Now let us see how the page we are working on with will appear on an actual browser. Remember that not all browsers will show the same result. Depending on their version, some of them will not be able to handle the latest version of HTML version or add-on, Javascrip, Activex, Forms etc.
From the File Menu select Preview with Browser. Make sure you select the 640 x 400 resolution. Being able to see your complete page within this resolution window will increase the probability that your page will be viewed in most sizes of screens.
You should be able to see the type of Browser you have installed in your computer (Internet Explorer or Netscape or whatever). If you have space in your computer it might be a good idea to add some of the older versions of the most popular browsers, like Netscape vr, 3.0 or MS Internet Explorer 4.0. Testing your work on older vr. browsers will assure that it will be able to be viewed by most people without distortion.
You might have noticed the dotted lines forming a rectangle box around your text, or the boxes of the header of your page.
This is shows that you are using a Table. Tables are used to format our text and allow us to create orderly arranged pages.
Place your mouse on the Left vertical dotted line. You will notice that the mouse pointer turns into a small black arrow. Click the right mouse button while the black arrow is visible. The whole Table will be highlighted.
Place the mouse cursor on the black part of the table and click the right mouse button. Select the Table Properties. Here you will be able to re-arrange the properties of your table, but more on that later on, at an other Lesson.
Now some pointers:
How to open an existing Web site
1.On the Windows taskbar, click the Start button, point to Programs, and then click Microsoft
FrontPage. Click on to Help and in the Answer Wizard window, type:
How do I open a Web site?
2.On the File menu, point to Recent Webs, and then click C:\My Documents\My Webs\MyWebSite to open your website, or whatever your file position is.
FrontPage opens the Web site. The application title bar now reads "Microsoft FrontPage -
C:\My Documents\My Webs\MyWebSite
Because you'll be working with the pages you've already created, you can close the blank page that opened by default in Page view.
3.On the File menu, click Close, or click the Close button in the upper right corner of the page (x).
FrontPage closes the current page. Page view is now blank, but your Web remains open.
While creating hyperlinks from pictures or from text in Lesson 1, you may have noticed that you don't have any
connections yet between the pages in your Web site. Even if someone surfed to your current home page, they
would have a way of getting to the other pages. In the next section, you'll learn how easy it is to make
navigation hyperlinks to other pages.
To create hyperlinks to other pages
1.On the toolbar, click the Folder List button to show the Folder List in Page view.
2.Double-click index.htm in the Folder List to open the home page in Page view.
You'll keep the Folder List visible while you create hyperlinks to the other pages in your Web
site.
3.When the home page is displayed in Page view, press CTRL+END to place the cursor at the
end of the home page.
4.Next, locate the page second.html in the Folder List.
The folders and files in the Folder List are shown in alphabetical order. The icon of each file gives
you a clue about what kind of file it is.
You will now drag and drop the second.html page onto the bottom of the home page. When you
do this, FrontPage will create a hyperlink to the second.html page on the home page.
5.Click and hold the mouse button on second.html in the Folder List, move the mouse pointer
on the line below the FrontPage button at the bottom of the home page, and then release the mouse
button.
FrontPage displays the shortcut mouse pointer while you drag the mouse to indicate that it will not
actually insert the second.html page, but will create a hyperlink pointing to it.
FrontPage inserts the page title of the second.html.file ("second.html") as the hyperlink text.
The blue underlined text shows the presence of the hyperlink.
6. On your keyboard, press the DOWN ARROW key to deselect the last hyperlink.
While you can manually create hyperlinks to the other pages in your Web site this way, doing so for all
pages in a Web site can become a time-consuming and tedious task, especially for larger Web sites.
Worse, if you decide to add or remove pages in the current Web site after creating hyperlinks, you'll have to manually add or remove the hyperlinks to them.
FrontPage has a better way to create, manage, and automatically update the navigation hyperlinks that connect
your pages together. Before you learn how to do this, let's get rid of the hyperlinks you just made.
To use the multiple Undo command
Undo button with arrow
1.On the toolbar, click the small arrow just to the right of the Undo button.
2.FrontPage displays the Undo history, which shows the last several actions you can reverse. The first of these actions
is selected by default. If you were to click it, then only that action would be reversed. You can also move the mouse
over other entries in this list to include them in the Undo command.
In the Answer Wizard, type:
How can I correct a mistake?
3.Since we want to get rid of all four hyperlinks you just dragged and dropped onto the home page, move the mouse down the list to select all four occurrences of Drop.
The status bar in the Undo history window should read Undo 4 Actions.
4.Click the mouse on the last occurrence of Drop in the list.
FrontPage reverses the last actions you took, and the hyperlinks you created are removed from the home page.
5.To save the current page, click Save on the File menu, or click the Save button on the toolbar.
Note: If you have questions about the FP - 101
course you may send an e-mail to
George N. Rigos at GRigos@Hec.Greece.Org
