ms frontpage xp tutorial manual -...

Microsoft FrontPage XP Tutorial

MS- FrontPage XP Tutorial

Table of Contents

About MS FrontPage XP 3How to start 4The interface of MS FrontPage XP 6 Views Bar: 7 Page Pane: 7Before you start creating your website 8Text, 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 13Hyperlinks 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) 20Animations and Effects 21 Hover Buttons and Marquees 21 DHTML Effects 23

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023


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

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

- of 26-- 9/10/2023


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

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

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.

- of 26-- 9/10/2023


The interface of MS FrontPage XP

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

- of 26-- 9/10/2023

Normal page where you will insert your text in

View Bar

Page Pane

Folder List


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

- of 26-- 9/10/2023


Before you start creating your websiteYou 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:

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.

- of 26-- 9/10/2023

Welcome Page

About myself About my family About my friends

My Favorite links


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:

o About Myself

o About my friends

o 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:

- of 26-- 9/10/2023


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 parentsAbout my brothersAbout my sisterAbout 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 pageYou will do this page later.

- of 26-- 9/10/2023


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

- of 26-- 9/10/2023


Using a ThemeThere 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

- of 26-- 9/10/2023

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.


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 workName Age Hobbies PictureHuda 19 ReadingShamma 18 Watching TVFatma 18 DrawingHamda 17 Listen to MusicKhulood 17 ReadingAlia 14 Swimming

- of 26-- 9/10/2023

You can apply a color to your background

You can apply a picture to your background


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

Hyperlinks and bookmarkThere 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 Internet1. 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 Engineso Yahooo All the webo Googleo Mamma

2. Select or highlight the word “Yahoo”3. Go to Insert, Hyperlink

- of 26-- 9/10/2023

The text that you have selected

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


4. You will notice that Yahoo will be underlined and in blue5. Do the same steps for all the links, the URL for these links are:

1. http://www.alltheweb.com 2. http://www.google.com 3. http://www.mamma.com

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 website1. You need to have links to the Home page, the previous page

and the Next Page2. 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 link6. Do the same steps for Home and Next7. Save your work

- of 26-- 9/10/2023

The selected text

See which page is the previous page

Select the page which is the same as the previous page

http://www.mamma.com/

http://www.google.com/

http://www.alltheweb.com/


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.

- of 26-- 9/10/2023


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

6. 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.

7. Select the first heading8. Go to Insert, Hyperlink9. Click Bookmark

- of 26-- 9/10/2023


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 bookmark1. 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 email1. Go to My favorite page2. 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:

- of 26-- 9/10/2023


5. Save your work6. Go to the Preview Page, and check if the link is working.

Link a picture to another page in your website1. Go to the Welcome page2. 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.

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023

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. http://www.dwc.hct.ac.ae/

6. Click on OK


Animations and EffectsHover ButtonsFirst 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.

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023

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


Marquees1. 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 EffectsWhere 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:

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023


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.

- of 26-- 9/10/2023

ms frontpage xp tutorial manual -...

Documents