Microsoft FrontPage XP Tutorial

MS- FrontPage XP Tutorial

Table of Contents

About MS FrontPage XP How to start The interface of MS FrontPage XP Views Bar: Page Pane: Before you start creating your website Text, Pictures, Tables ,Backgrounds and Themes Insert text Insert a Clip art and a picture Insert a Theme and apply your own background Insert a table Hyperlinks and bookmark Link to an external site in the Internet Link to another page in your website Add and remove a Bookmark Link to your email Link a picture to another page in your website

3 4 6 7 7 8 11 11 11 12 13 14 14 15 16 18 19

- Page 2 of 26--

3/10/2012

MS- FrontPage XP Tutorial

Link one picture to many pages and site (Hot Spot) Animations and Effects Hover Buttons and Marquees DHTML Effects

20 21 21 23

- Page 3 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 4 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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 youve created before you start, which is My Website in D drive. Click Open

- Page 5 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 6 of 26--

3/10/2012

MS- FrontPage XP Tutorial

View Bar

Normal page where The interface of MS FrontPage XP Folder List you will insert your text MS FrontPage XP should have a similar interface to the one that you see in below:

Page Pane

- Page 7 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

- Page 8 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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:

Welcome Page

About myself

About my family

About my friends

My Favorite links

After planning the website, lets 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.

- Page 9 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

will

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: About Myself About my friends 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:

- Page 10 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 11 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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,

- Page 12 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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 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 choose if you want to apply the changes on the background or not.

You can change the colors and the font - Page 13 of 26-3/10/2012

MS- FrontPage XP Tutorial

Apply your own Background

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

You can apply a picture to your background

You can apply a color to your background

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 Huda Shamma Fatma Hamda Khulood Alia Age 19 18 18 17 17 14 Hobbies Reading Watching TV Drawing Listen to Music Reading Swimming Picture

- Page 14 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

The text that you have selected

Type the URL address. Note: dont forget to put http://

- Page 15 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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. 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 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 dont need to apply this to the Welcome Page) 3. Go to My Family Page and Select the word Back 4. Go to Insert, Hyperlink

The selected text

See which page is the previous page

Select the page which is the same as the previous page

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

- Page 16 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 17 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

- Page 18 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

- Page 19 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 20 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

1. About myself page. 2. select the image by clicking on it

5. The hyperlink box will appear, type the link you want. E.g. http://www.dwc.h ct.ac.ae/

6. Click on OK

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

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.

- Page 21 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 22 of 26--

3/10/2012

MS- FrontPage XP Tutorial

box.

Then you will get the Hover Button properties 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.

Type the text that you want to appear on the button

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

4. Choose the effect you want

5. Select the color of the effect. Click ok

- Page 23 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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:

- Page 24 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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

- Page 25 of 26--

3/10/2012

MS- FrontPage XP Tutorial

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.

- Page 26 of 26--

3/10/2012