1- Start FrontPage:

Start Æ All programs Æ Microsoft FrontPage

2- Create a new Web Site:

File Æ New Æ Page or Web Æ Empty Web
When the dialog box pops up, choose one page web and click on Browse. In the Look
in list, choose the X drive. You will need to create a new folder called Class in your
X: drive. After creating the folder, select it and click Open. Check the name of the
folder and its location in Options and then click OK.

3- Add new pages, open, edit, save web page, save web site, close web page, close
web site and open web site:
From the views bar, click on navigation view, right click the INDEX.htm page and
choose New Æ Page. Right click this new page and rename it as in the example
below. Repeat these actions to create a structure similar to the sample for your own
web site. Then right click on the blank area of the screen and select apply changes.

index.htm

aboutus.htm sitesforstudents.htm hobbies.htm

ourschool.htm ourclass.htm classphotos.htm sports.htm music.htm

Editing the navigation view:

- To delete a web page, right click the page and choose delete; in the pop-up screen,
select delete this page from the web and OK.
- To open and edit a page, double click on it.
- File Æ save, will save the current opened web page.
- File Æ save all, will save the web site.
- File Æ close, will close the current opened web page.
- File Æ close web, will close the web site.
- File Æ exit will close FrontPage.
- To open the web site, open FrontPage, File Æ open web, select your web site folder
called “Class” and click open.

4- Setting a background:
Open the index.htm page, select format Æ background and choose light yellow as
your background color.
Create the same background for all the other pages of your web site by following
these steps: Open each of the other pages, select format Æ background; check the
option get background information from another page, click on Browse and choose
index.htm to set all other pages with a background the same as the first page (if the
background of the first page changes, the background of all other pages will
automatically change).
Save your Web Site: Click File Æ Save all.

5- Working with tables to design the web pages layout:

Open the index.htm page.
- Click Table Æ insert Æ table, to create a table and choose the number of rows and
columns; set the table properties to 7 rows, 1 column and then select OK.
The table properties should be set to: 0 (no border), 5 (space between border and text),
0 (space between two columns).
Editing the table:
- Table Æ Insert Æ Rows or columns.
- Table Æ Delete cells.
- Split and Merge cells to accommodate pictures and texts that you will be placing on
the webpage.

6- Page Banner:
To create a page banner, click in the first row of the table.
-Select Insert Æ Page Banner as text and/or image and center it. Decide upon the title
for each page of your website.
- Type the desired text, select it and change the font of your banner with Format Æ
Font.
- If you are inserting an image into your banner, select Insert Æ Picture Æ from file.
Choose your picture and click OK. To resize the picture, double click the picture and
choose Size. Adjust the picture to the desired size and click OK
- To set a border for the Banner cell in your table, select it and click Format Æ
Borders and Shading. Establish appropriate borders and shading for the cell.
- Select the entire table (with page banner) and copy and paste it to each page in your
web to set a page banner for every web page. Change the text and/or picture in the
banner on each page to indicate the content of each page.
Save your Web Site: File Æ Save all.

7- Import text from other files:

Click in the sixth row, Table Æ split cell Æ OK, resize the columns, click on the
border between the two cells and drag it to the left.
Open z:\documents for a class web site\Announcements.doc for example, select and
copy all text and paste it in the right column of the sixth row of the index.htm web
page.
Center align the title, and justify the text.

8- Adding bulleted and numbered list:

Select the text and Format Æ Bullets and numbering, select your bullets and click
OK.
To recolor the text, Select all text bulleted and choose your color from the standard
bar.
To recolor the bullets, Select all text bulleted, right click the selection, select list
properties Æ Style Æ Format Æ Font and choose your color for the bullets, and then
OK and OK.
To add spaces between paragraphs: Select all text bulleted, right click the selection,
select paragraph and put 5 for spacing before and after the paragraph and then OK.
9- Inserting a picture:
Click in the left cell of the sixth row, Insert Æ picture, select z:\documents for a class
web site\BigNews.gif and insert.
Right click the picture and select picture properties to change the default settings of
this picture.
We can add a hyperlink on this picture, the same way as text. Save all pages.
In the save embedded files pop up window, choose change folder, double click the
images folder and then OK and OK.
(In this way, we can put all pictures inserted in this web site in the images folder of
the web site)

10- Adding Top and Bottom Global Navigation bars:

Navigation bars are used to help the user get around your website easily. Top and
bottom navigation bars are the same and every page should include links for all of
your child pages.
To create a navigation bar, open the index.htm page. Click in the second row of the
table. Choose Insert Æ web component Æ link bars Æ bar with custom links Æ next
Æ next Æ finish, After, Name this navigation bar child for index and choose add link
to add all the child pages to this navigation bar, click modify link to change the text to
display in the link bar and then click OK.
Copy and paste this navigation bar into the last row of your table.
Repeat these steps to make global navigation bars in every page that has child pages.

11- Adding Breadcrumb Trail Navigation bar:

Breadcrumb trail navigation, also called the path, is a navigation bar that displays the
page names from the home page to the current page based on the navigation structure
(include links for all parent pages).
Open the aboutus.htm page. Click in the third row of the table and type:
Home > About us
Create a hyperlink for the word Home to the index.htm page.
To set hyperlinks to other pages: select the text, Click Insert Æ Hyperlink or click on
from the standard toolbar, or right click the text and choose hyperlink. A pop up
window is opened:

• In the Link to: box, select Existing File or Web Page

• Click a page to make it the target of the hyperlink, The URL is displayed in
the Address: box.
• Click OK

Repeat these steps to all pages that have parent pages.

12- Adding shared borders:

Open the index.htm page.
Format Æ Shared Borders, a pop up window is opened, select all pages and bottom,
click Border properties, set the background color and then OK.

13- Adding a hyperlink to an e-mail address:

Click in the shared border and type for more information contact the webmaster
To set a hyperlink to an e-mail address: select the text webmaster, insert hyperlink or
click on from the standard toolbar or right click the text and choose
hyperlink.

A pop up window is opened:

• In the Link to: box, select E-mail Address

• In the E-mail address: box, type your email address
• Optionally, in the Subject: box, you can type in the subject heading that you
want to be displayed in the Subject box of the actual email message
• Click OK

14- Insert Date and Time:

In the shared border, type Last update:
Insert Æ Date and Time, Choose style of date and time to insert and the click OK.

15- Insert Horizontal Line:

Click in the shared border just before for more information,
Insert Æ Horizontal Line, and then select it and right click, choose line properties to
change its height, color and alignment.
All features done in the shared borders should appear in all other pages automatically.

16- Adding a Marquee:

Open the index.htm page. Click in the fourth row of the table.
Insert Æ Web Component, choose marquee and FINISH. The marquee properties
window is opened. Type Welcome to our web site, select your preferences (behavior –
alternate, continuously, background color) and click OK.

17- Adding a Hit Counter:

Open the index.htm page. Click in the fifth row of the table and type you are the
visitor number: Insert Æ Web Component, select Hit Counter and FINISH. The hit
counter properties window is opened. Select your preferences and click OK.
Split the sixth row in 2 columns.

18- Inserting Bookmarks:

Go to the page aboutus.htm, click in the fourth row and type:
ƒ About our school.
ƒ About our class.
Open z:\documents for a class web site\aboutus.doc, select and copy all text and paste
it in the fifth row of the table.
Click before about our school paragraph and Insert Æ Bookmark, put the name
aboutourschool and click OK
Insert 2 others bookmarks aboutourclass and top respectively before the paragraph
About our class and before the page banner.
Choose the text about our school in the third row and make a hyperlink to the
aboutourschool bookmark, insert Æ hyperlink Æ bookmark, click aboutourschool,
OK and OK.
Choose the text about our Class in the third row and make a hyperlink to the
aboutourclass bookmark, insert Æ hyperlink Æ bookmark, click aboutourclass, OK
and OK.
Type the text return to top after the paragraphs about our school and about our Class
and right align it, make a hyperlink to the top bookmark, insert Æ hyperlink Æ
bookmark, click top, OK and OK.
Save the aboutus.htm page.

19- Adding hyperlink with bookmark:

Go to the page lessonplans.htm, click in the third row and type:
Open z:\documents for a class web site\lessonplans.doc, select and copy all text and
paste it in the fourth row of the table.
Select the word Pre-School, insert Æ hyperlink, select the aboutus.htm page and click
bookmarks, select aboutourschool and click OK and OK. Save the lessonplans.htm
page.

20- Inserting hyperlinks to other pages on the web:

Go to the sitesforstudents.htm page.
Insert Æ hyperlink, in the address field put the URL http:\\www.yahoo.com and then
click OK.
Insert Æ hyperlink, in the address field put the URL http:\\www.google.com and then
click OK.
Save the sitesforstudents.htm page.

21- Formatting a page transition:

Go to the page aboutus.htm, Format Æ Page Transition, select page enter for the
event field, choose your transition effect and set duration field 2 seconds, and then
click OK.

22- View the web site in a browser:

Go to the page aboutus.htm.
File Æ preview in a browser Æ Preview.
Assessment:

Points
Element Possible
Self Teacher
1. I have designed a new Web Site with a navigation
structure consisting of at least five pages well related 15
to the subject of my web site.
2. The background on each page is attractive and
5
complements the content.
3. Tables have been used to organize the format of each
5
web page on the web site.
4. Page Banner 5
5. Adding Top and Bottom Global Navigation bars 10
6. Adding hyperlink to other pages on the same web site 5
7. Adding Breadcrumb Trail Navigation bar 5
8. Adding shared borders 5
9. Adding hyperlink to an e-mail address 5
10. Insert Date and Time, Horizontal Line 5
11. Adding a Marquee, a Hit Counter 5
12. Import text from other files 5
13. Adding bulleted and numbered list 5
14. Inserting a picture 5
15. Inserting Bookmarks, adding hyperlink with bookmark 5
16. Inserting hyperlinks to other pages on the web 5
17. Formatting a page transition 5
TOTAL 100