Microsoft Front Page

1

MICROSOFT FRONT PAGE

The Microsoft Front Page gives us the possibility to create our own Web pages and publish them on Internet. To start the program we select:

Start ⇒Programs ⇒Ms Office ⇒Front Page.

FrontPage window

Front Page window has a lot of functions existing also in other programs of Windows, such as many Word tools for creating texts. These are considered already known, thus we will concentrate on its other features. To the left of the workspace the Views bar is shown. We can choose from here to view Pages, Folders, Reports, Navigation or in other words the structure of the web page, Hyperlinks and Tasks existing in this particular Web page.

At the bottom left-hand corner of the Front Page window we can choose between Normal, HTML and Preview. When creating our Web page we are in the NormalView. Our selections and changes are automatically registered as orders that can be seen when clicking on HTML, that is the program automatically translates our activities into orders. When finishing our page we can see how it will look on Internet by clicking Preview.

At the bottom right-hand corner of the Front Page window there is the indication 0seconds over 28.8. This indication changes as we add elements in our page and shows us the time needed for our visitor, who has a 28.8 kbps modem, to view our page completely. It would be preferable to keep the figure at less than 30 seconds otherwise waiting will be tiring.

Creating a web page

From the File menu we select New ⇒Web. We are presented with a dialogue box offering different types of web pages. We usually select One Page Web, then click on OK and a folder is created into My Documents bearing the name “Web 1” (if you have previously created another web page then it will bear the name Web 2, 3 etc.).Of course, we can give whatever name we wish and save it in another folder.

Then the first page of our Web page is created.

[Note: a Web page is usually constituted by more Pages]. Our first page bears the name Index. At the same time we are presented with a Folderlist containing two folders, named “private” and “images”, that are included in our Web pages. In this area we store the images and information that will be included in our Web page. By double-clicking on index page the cursor appears in the new workspace area and we can type a text. To save the changes made on index page we click on the button with the floppy (Save button) or we choose:

File⇒Save.

Insert a new page

To add a new page we select File⇒New⇒Page. A window with different types of pages opens we usually select NormalPage and then click on OK.

To store this page we just follow the known procedure: File⇒Saveas. (Warning: we must not leave spaces when we give a name to the pages of Front Page. Instead of a space we can use the underscore symbol eg. “page_2.htm”).

Page properties

With a right click on an empty section of the page a pop-up menu appears, where we can select PageProperties. In the Title box we can type a title for our page. From this window when clicking on Background we can change the background colour.

We can use one of the colours given next to the box saying Background or select MoreColours. Thus, the colour palette appears. Besides, we can use a photo as a background for our page. We select Backgroundpicture, click on Browse, in order to precise which file will be used as background, and then click OK.

Insert an image

From Insert menu we choose Picture, and then either Clip Art or FromFile. After selecting the image we want, we click OK. When saving a page a dialogue box appears asking us whether we want to save the files that we have inserted eg. the images.

We click OK and thus a copy of the image is stored in the file that our Web page and its composing pages are stored.

[Note: The images used in our Web page should be saved in JPEG or GIF form. The files that have a JPEG or GIF extension are compressed file formats, so they need less space in the hard disk and less time to be completely downloaded and displayed on screen].

Image properties

By right clicking on an image that we have inserted a menu is presented; there we can select some image properties. A box appears containing information. We click on Alternativerepresentation and at the Text box wetype a title relative to our image. Thus, when a visitor to our page waits for the image to download, he sees the title and knows already what will appear where the image is positioned.

At the same box by clicking on Appearance we can regulate the image’s way of appearance, eg. from Alignment drop-down arrow we can set the alignment. We can also set the width and height of the image, as well as the space between it and the text (Horizontal – Vertical spacing). Thus, it is created an “invisible” space around the image, so as not to have the text to close to the image.

To confirm the results of all settings of the image chosen, we select Preview and check it out.

Creating hyperlinks

We type a text, for example: “Click here to go to the next page”. We highlight the phrase “Click here”. From the Insert menu we select Hyperlink. A dialogue box opens on screen, we select the page we want to go and we click on OK.

To test the function of the newly created hyperlink we select Preview and by clicking on the phrase “Click here” the second page must automatically appear. Apart from the phrase we can highlight an image and convert it to a hyperlink.

[Note:We must first create and store the page to which the hyperlink will refer].

We can create hyperlinks to go to other Web pages, following the same procedure (highlight our text and select Insert⇒Hyperlink). Yet, this time we move to the URL box, we type “ then the e-address of the website to which we want to go, eg. and finally we click on OK. When moving to Preview we click on the phrase saying for instance “University of Aegean” and automatically the University’s website opens.

A third type of hyperlink is the one that allows us to send E-mail. We type eg. “Send us an E-mail”. We highlight the text, select Insert⇒Hyperlink and on the box appearing we click the button with the yellow envelope.

A new box appears where we can type our E-mail address. For instance we type and we click on OK. At the URL box there will be written “mailto: ”. We click again on OK. Thus, when our visitor clicks on the “Send us an e-mail” hyperlink, the program of sending an E-mail, for instance Microsoft Outlook, will automatically open and on the receiver’s box there will be our own e-address.

[Note: The words and phrases that are hyperlinks appear underlined and have a different colour from the rest of the text].

Inserting a table

We usually insert tables on the Front Page so as to lay out our information in a style that is easy to read and understand.

From the Table menu bar we select Insert⇒Table. Then a dialogue box appears, where we select the Columns and Rows necessary for our table. From this box we can also choose the Alignment of the table (if we wish our table to be aligned on the left, right or centre of the page).

On Border Size we determine the size of the table’s border. If we want we can choose 0, so as for the table not to be seen on Preview, but only on Normal.

Thus, we will be able to align our text and images without any effect on the presentation of our page. On Specify width we can specify in advance the width of our table. On Cell padding and Cell spacing we specify the distance between the cells.

We can colour our cells in order to put an emphasis on certain things or to produce an effect. We select a cell, row or column, we right-click on it and in the pop-up menu that appears we select Cell Properties. On the Background color we choose the color we want for our cell’s background. To insert a new row in our table we highlight an already existing row and we right-click. From the pop-up menu presented we select Insert Row. Thus, a new row, at the top of the one already highlighted, is inserted.

The same way (by highlighting the entire row and right-clicking on it we can Merge Cells, Split Cells or Delete a Row. In a similar way we can insert or delete a column.

Front Page Components

1. Hit Counter

There is a selection of “pre-built” forms and functions that Front Page provides. The two most popular components are the “hit counter” (a form that records the number of times that a page has been requested by people) and the “search form”.

In order to record the number of the Web page’s visitors we should follow the following procedure: we type for example “This Web page has been visited by…” followed by a space. From the Insert menu we select Component⇒Hitcounter. A new dialogue box appears, where we select the counter style we prefer. We can also insert the number of digits we want. We select fixednumber of digits and type 4, 5, 6 etc. in view of the number we want to insert.

When clicking on Normal, there will appear a [hit counter] placeholder. This operation will be activated when the page will be published on Internet. Next to the placeholder we leave a space and then type “visitors” to complete our sentence. Thus, the first visitor for instance of our Web page will read: ”This Web page has been visited by 00001 visitors”.

1. Search Form

To insert a search form we type a text, for example “Type in here a key-word to search” and we select Insert⇒Component⇒Search form. Then a Search Form Properties dialogue box opens.

In this box we can customize the appearance of the search form, for example in the Width in characters box we can set the number of characters that the search form will contain.

We may also select what will be written on the form buttons. For example we can choose for the buttons to write “Search” and “Cancel” in English or Greek. In this same form we can click on Search Results and select the mode that Front Page will display the results of the search. In order to help the visitors of the Web page, we tick the three check boxes under Display Options. Thus, the visitor can see the file name, the file size and the file creation date. The visitor can also see a score. The higher this score is, the closer is the match. After completing our selections, we click OK.

The search form works only when our Web page is published on Internet (to a Web Server). The visitor can type in a key word and click on search button. Then, a table is presented with the relevant results and the visitor can select the one that interests him and see it by clicking on it.

Checking hyperlinks

The most important action before publishing a Web page is checking the hyperlinks. On the left side of the Front Page window we select Reports. Then a table appears containing some information. We can have the same results when clicking on View⇒Reports⇒SiteSummary.

This table contains important information for our Web page, but what is more important for us is checking hyperlinks. Next to the Broken hyperlinks cell there is a number indicating whether there are “broken” links. We double click on it and an Edit Hyperlink dialogue box appears. We replace there the already existing link with the right one (replace hyperlink with).

If for example we have typed “page2” instead of “page_2” our link will appear on the broken links list. We double click on it and we type the correct name of the page. Then we select change in all pages and we click on Replace, so as to correct this link in all pages. If we return to Site Summary we can see that the “broken” link does not exist any more. If the “broken” links are more than one, we repeat the abovementioned procedure.

Bookmark

We can create Hyperlinks that can lead us to a specific point of the same page (we could call these internal links).

We use Bookmarks when our pages are very extended with a wide variety of subjects. Thus, we make it easy for our visitor to get to what really interests him without having to read the whole page. So, we can type all subjects included in our page and by selecting Bookmarks we move to the paragraph we want.

We select the point of the page on which we want to move and highlight the first word or phrase.

On Insert menu we select Bookmark. We name the box that appears as we wish. Then we click on OK. In this box all the Bookmarks of the same page appear. In case we want to delete a Bookmark, we highlight it and click on Clear.

After creating a Bookmark, the word or phrase selected earlier is underlined with a dotted line. We return at the top of the page, find the title, mark it and select Insert⇒Hyperlink. Yet, instead of choosing another page or Web page, we choose from Bookmark the relative created Bookmark and then we click on OK. When selecting Preview, we click on Hyperlink and our page moves automatically. On the top of it we see the text that corresponds to the title (the Bookmark).

Frames

On File menu we select New⇒Page, and then on the box appearing we select FramesPages. The pages that contain Frames are basically divided in 2 or more sections. By clicking on each one of them we can preview the organization of our page. When we decide what we like we click on OK.

The main function of Frames is to help us organize in a better way the material included in our Web page. Thus, we make it easy for our visitor to have for example the contents of our page at his disposal, while reading each page.

The inserted Frame is practically the “frame” upon which our composing pages will be set. We can insert on Frame either a New Page or a Set initial Page. If we click on Set initial Page, a new dialogue box will appear. Using this, we can select one of our already existing pages, which will appear on the specific part of the Frame. It is very important to save each one of these pages separately, as well as together with Frame, otherwise some of our data will be lost. If we select Save as we will see that at first the pages are saved along with Frame and then the Save form appears again so as to save the pages separately.

Useful Info

Always save a page as soon as you create it as well as each time you make any kind of change, because you can create “broken” links or lose data.

Don’t forget to select Preview often. When clicking on Preview, you can check the appearance of the Web page on Internet and locate errors mostly on Hyperlinks.

You can use one of the already existing Backgrounds of Front Page. Right-click and select Theme. A window with different Backgrounds appears. Select one of these to preview and when you choose your favourite, click on OK.

In order to insert sound to your Web page click and select Page Properties. On Background sound⇒Location click Browse in order to set the sound file you want to be reproduced when your Web page opens. On Loop you can set the duration of the sound or set the sound for as long as the page is open (forever).

Do not leave space when you name pages of the Front Page. Instead of space, we can use the underscore symbol, e.g. “page_2.htm”.

The pictures used in our Web page should be saved in JPEG or GIF format. The JPEG or GIF files are compressed file formats, thus they need less space in the hard disk and less time to be downloaded and displayed on screen.