You are on page 1of 6

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 background; check the these steps: Open each of the other pages, select format 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 Style Format Font and choose your color for the bullets, and then properties 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 Web Component, select Hit Counter and FINISH. The hit visitor number: Insert 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. hyperlink, in the address field put the URL http:\\www.google.com and then Insert 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:

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

Points Possible 15 5 5 5 10 5 5 5 5 5 5 5 5 5 5 5 5 100

Self

Teacher