MS FrontPage XP Tutorial Manual - St. Francis Xavier ...



Microsoft FrontPage XP Tutorial

Table of Contents

About MS FrontPage XP 3

How to start 4

The interface of MS FrontPage XP 6

Views Bar: 7

Page Pane: 7

Before you start creating your website 8

Text, Pictures, Tables ,Backgrounds and Themes 11

Insert text 11

Insert a Clip art and a picture 11

Insert a Theme and apply your own background 12

Insert a table 13

Hyperlinks and bookmark 14

Link to an external site in the Internet 14

Link to another page in your website 15

Add and remove a Bookmark 16

Link to your email 18

Link a picture to another page in your website 19

Link one picture to many pages and site (Hot Spot) 20

Animations and Effects 21

Hover Buttons and Marquees 21

DHTML Effects 23

About MS FrontPage XP

In MS FrontPage XP, you can quickly and easily create your own webpage which includes a photo gallery to display personal or business photos or images. You can add images to the photo gallery and select from different layouts and existed themes to be applied on your website.

This manual is created to ease you into FrontPage XP and help you get up to speed on its new features. This manual will also help you learn its main contains that show you how to format text, backgrounds, add hyperlinks, graphics, and other interesting features on your web pages.

How to start:

Before you start MS FrontPage XP, you need to create a new folder to save all of your pages and images in. This folder will be converted to a web folder when you will use MS FrontPage XP.

• Go to Windows explorer and create a folder in your W Drive.

• Name it My Website

• Close Windows Explorer

Now we are going to start with MS FrontPage XP:

• Go to Start, All Programs, Microsoft Office, MS FrontPage XP

|[pic] |

• You will get a blank page.

• On the menu bar, click File, Open Web, and click the folder that you’ve created before you start, which is My Website in D drive. Click Open

|[pic] |

• You will get this message, which tells you that FrontPage is going to convert the folder that you have create to a web folder and help you do all of your links. Click Yes

|[pic] |

• You will realize that there are some folders that have been created automatically to help you save your work in.

|[pic] |

• Now close the program and open it again and follow the same steps. File, Open Web, choose the folder that you created, and click OK.

The interface of MS FrontPage XP

MS FrontPage XP should have a similar interface to the one that you see below:

| |

View Bar:

• The Page View: allows you to add content to your WebPages. You can edit or modify your page contents in this view.

• In the Folder View, you can see all your web folders and files that are related to your website.

• The Reports View is useful for keeping track of developments on your website.

• The Navigation View: it displays the navigation structure of your website, where you can see all the pages that are linked together.

• The Hyperlinks View shows all the hyperlinks on your web site.

• The Tasks Views allows you to create and manage tasks that are needed to be performed to completer your website.

Page Pane:

• Normal View: where you can add your text, pictures and do all the changes you want in order to see it in the preview

• HTML View: it allows you to see the HTML codes for each text or picture. It allows you also to modify then and add any changes you want

• Preview: it allows you to see your website before publishing it to all the links and effects if they are working. In order to preview your web page in the browser, you must first save the page

Before you start creating your website

You need to design or structure your website and plan on how you want it to look like with all the linked pages. See the example below:

[pic]

After planning the website, let’s start:

• Click Navigation View

• You will get this page. it says, to create a Home page click New Page from the toolbar or you can Right Click the page, New, Top Page.

You will get your Home page, which all of your pages will be linked to this page.

Right click the page to rename your homepage. Name it Welcome Page. This page is called a Parent Page

Then, to create the other pages linked to the homepage, you need to right click the Home Page, New, and Page. These pages are called The Children Pages

To create these pages, right click on the Welcome Page and create 3 pages and name them:

29 About Myself

30 About my friends

31 About my Family

Right click the “About my family” page and create another page underneath and name it “My Favorite links”

Note: To create more pages, repeat the same steps

Now you have to create these 6 pages including the Home Page to be ready to include the information that you are going to put in.

Now type the following in the next page, in each page in FrontPage. To do that double click the page you created in the navigation view, you will get the required page. You need to save your work for each page. Insert the following:

About Myself Page:

About myself

My Name is Nahla. I am a student. I am in year 2 studying Business Information Technology. It is expected to graduate next year after finishing the work placement, where I would like to work in a dynamic organization in the IT Department, to learn about the work environments and apply what I have learnt in the college.

In future, I would like to continue my education and apply for the IT bachelor in the college.

About my family page:

About my family

In this page I will describe every member in my family. I live with my parents Mohammed and Salwa and I have 3 brothers and 1 sister.

About my parents

About my brothers

About my sister

About my parents: My father is an IT manager in NS.

About my brothers: Jassim is the eldest, he is 24.

About my sister: Najla is 18 years old. She will graduate from high school this year and will join the college after that.

About my friends page

You will do this page later.

Texts, Clips and Pictures, Tables and Backgrounds and Themes

• Go to the Navigation View and double click in the Welcome Page to be able to add the text you want.

• Make sure that you are in the Normal page view

• Write at the top and center of the page this sentence Welcome to My Home Page.

• Press Enter several time and type ENTER.

To change the text formatting:

• Highlight the text.

• Go to the Formatting Toolbar.

• Select the Font Size icon, 24 pt.

• Select the Georgia font

• You can change the font color as well.

To insert a clip or a picture

• Click on the place that you want to place the clip in and go to Insert, Picture and Clip Art to insert a clip and click From File to insert a picture

• Save your work

Using a Theme

There are lots of ready and existing backgrounds to be used for the website which are called Themes or Templates. You can use this template and apply it to your pages.

• Go to Format, Theme

• You will get this box, which allows you to see different Themes and how to use its properties. Choose your Theme and click OK

• Save your work

Apply your own Background

• You can apply your own background to your pages by choosing Background from the Format menu

Insert a Table

• Go to ‘About my friends’ page and insert a table in the middle of the page

• Add a title which is About my friends

• Go to Table, Insert

• Specify the number of rows and column that you want to create the following table

• In the picture columns insert any picture and adjust the pictures to fit the cells. Save your work

|Name |Age |Hobbies |Picture |

|Huda |19 |Reading | |

|Shamma |18 |Watching TV | |

|Fatma |18 |Drawing | |

|Hamda |17 |Listen to Music | |

|Khulood |17 |Reading | |

|Alia |14 |Swimming | |

Note: you can move between the pages and add the changes that you want by clicking on these pages

Hyperlinks and bookmark

There are many kinds of links that you can do to move from one page to another or within the same page.

Link to an external site in the Internet

1. Go to My favorite links page and type the following:

I have many favorite sites and I like and I always recommend to people and friends, which are:

• Search Engines

o Yahoo

o All the web

o Google

o Mamma

2. Select or highlight the word “Yahoo”

3. Go to Insert, Hyperlink

4. You will notice that Yahoo will be underlined and in blue

5. Do the same steps for all the links, the URL for these links are:

1.

2.

3.

6. After you finish, go to the Preview Page and check if all the links are working Save your work

Link to another page in your website

1. You need to have links to the Home page, the previous page and the Next Page

2. At the top of each page, type - Back – Home – Next – (you don’t need to apply this to the Welcome Page)

3. Go to My Family Page and Select the word Back

4. Go to Insert, Hyperlink

5. When you click ok go to the Preview Page and check the link

6. Do the same steps for Home and Next

7. Save your work

Add a Bookmark (Link to another place within the same page)

The bookmark allows you to identify a location in your page and refer back to it using a link.

1. In “About my family”

2. Position the insertion point where you want to create a bookmark, or select the text to which you want to assign the bookmark. Select About my parents

3. On the Insert menu, click Bookmark.

4. In the Bookmark name box, type the name of the bookmark (About my parents). Then click OK

Note: If a location (rather than text) is bookmarked, the bookmark is indicated by a blue flag. If text is bookmarked, the text is displayed with a dashed underline.

Apply the same steps to the other paragraphs, about my brothers and my sister.

Then, you need to link the headings to the bookmarks that you have created. So when you will click on About my parents, it will take you directly to About my parents paragraph.

5. Select the first heading

6. Go to Insert, Hyperlink

7. Click Bookmark

10. Repeat the same steps for the rest of the headings (About my brothers and about my sister)

11. Now you have all of your headings underlined which means that they are linked to another place.

12. Save your work. Click on the Preview Page. Click on any link and it will take to you the related paragraph.

Remove a bookmark

1. In Page view, on the Insert menu, click Bookmark.

2. In the Other bookmarks on this page box, click the bookmark you want to delete.

3. Click Goto.

4. Click Clear.

Link to your email

1. Go to My favorite page

2. Type the following (Email me if you have any comments about my website).

3. Select email me and go to Insert, Hyperlink, Email Address

4. write your email address as following:

5. Save your work

6. Go to the Preview Page, and check if the link is working.

Link a picture to another page in your website

1. Go to the Welcome page

2. Click the inserted picture

3. Go to Insert, Hyperlink, and link it to the second page which is About Myself Page.

4. Save your work and go to the preview page, click on the image, you will see that it will take you to the second page.

Link one picture to many pages and site (Hot Spot)

1. About myself page.

2. select the image by clicking on it

7. Save your work, and go to the Preview and check the link.

8. To delete a hot spot, right click the link and choose hyperlink, and Remove link. Click ok.

Animations and Effects

Hover Buttons

First you have to have a shared border between all the pages so you apply the hover buttons once and it will be applied on the rest to the pages.

• Go to format, shared borders and choose all pages and Top

• Then, position your cursor at the place that you want to put the hover buttons.

• Go to Insert, Web Components, And Dynamic Effects.

• Choose an effect which is Hover Button.

• Then you will get the Hover Button properties box.

• After you apply the following, save your work and repeat the same steps for all the pages and put them in one page.

• Check in all the pages and you will see the same buttons are applied to them.

Marquees

1. In Normal page view, click where you want to create the marquee, or select the text that you want to display in the marquee.

2. On the Insert menu, click Web Component.

3. In the left pane, click Dynamic Effects.

4. In the right pane, double-click Marquee.

5. In the Text box, type the line of text you want the marquee to display. If you selected text on the page in step 1, the Text box contains the selected text.

DHTML Effects

Where you can add effects to your text

1. In the Normal pane, select the element you want to apply the effects to.

2. On the Format menu, click Dynamic HTML Effects.

3. On the DHTML Effects toolbar, choose to modify or remove the animation:

Modify the Animation

1. In the On box, click the down arrow, and then select the event that will trigger the animation.

o Events

▪ Click: Starts the animation when a site visitor points to the page element and clicks the left mouse button once.

▪ Double click: Starts the animation when a site visitor points to the page element and double-clicks the left mouse button.

▪ Mouse over: Starts the animation when a site visitor points to.

▪ Page load: Starts the animation when the page is loaded on the visitor’s Internet browser.

2. In the Apply box, click the down arrow, and then select the type of animation effect you want to occur.

The effects listed in the Apply box depend on the type of page element you selected and on the type of event you selected.

o Effects

▪ Fly out, Fly in, Drop in by word, Elastic, Hop, Spiral, Wave, Wipe, and Zoom: Applies an animation that moves a page element.

o Formatting: Applies an animation that changes the appearance of the page element, such as changing a font color or applying a border effect.

o Swap picture: Applies an animation that swaps one picture with another one.

o In the Choose Settings box, click the down arrow, and then choose the settings for the effect:

o Settings

▪ Choose Settings: The settings listed depend on the type of page element you selected and the type of effect you selected in the Apply box. For example, if you applied Fly out, select the direction or type of movement (such as To left or To bottom-left).

▪ Choose Font: If you applied Formatting animation to your text, select this to change the font style, size, color, effects, or character spacing.

▪ Choose border: If you applied Formatting animation, select this to change the border or shading.

▪ Choose picture: If you selected a picture and a Swap picture effect, select this and then select the picture to swap when the event you selected in step 2 occurs.

-----------------------

View Bar

Page Pane

Normal page where you will insert your text in

Folder List

Welcome Page

About myself

About my family

About my friends

My Favorite links

You can apply the theme to the selected page and to All pages

You can choose any Theme and review it by clicking once on it

You can change the colors and the font

You can choose if you want to apply the changes on the background or not.

You can apply a color to your background

You can apply a picture to your background

The text that you have selected

Type the URL address. Note: don’t forget to put http://

The selected text

See which page is the previous page

Select the page which is the same as the previous page

3. Select any of the shapes that you have in the hotspot

4. Draw a shape by the mouse around the place that you want to link

5. The hyperlink box will appear, type the link you want. E.g.

6. Click on OK

4. Choose the effect you want

2. Click on Browse to choose the page that you want to link which is Index (your home page)

3. Choose the color of your button

Type the text that you want to appear on the button

5. Select the color of the effect. Click ok

-----------------------

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download