1. Microsoft FrontPage Monday January 28, 2002

2. The Basic FrontPage Setup

3. Setting Page Properties Right Click on the White space in the work area. Choose Page Properties.

4. Page Properties Change the Title

5. Highlighting Text

6. Changing Default Background/Font colors You can add a background picture/color Change the default font colors

7. Fonts You can change font color, size, shape or effect at any time.

8. Bold/Italics/Underline You can change Bold/Italics/Underline by highlighting the appropriate text and clicking the B, I or U buttons on the toolbar.

9. Inserting Pictures To insert a picture that you have saved do the following: Insert/Picture/From File

10. Inserting Pictures Browse for your picture file. Choose the file name and click OK

11. Resizing Images You can Resize your images or move them around the page.

12. Inserting Tables To insert a table do the following: Table menu/Insert/Table

13. Setting Number of tables columns and thickness of cells. Rows are those which run horizontally Columns are those which run vertically Cells are the rectangular shaped boxes inside the table. Cell Padding is the thickness of the lines around the cells To have an invisible table choose 0 for border and cell padding.

14. Inserting bullets Highlight the appropriate text Go to the FORMAT menu and choose Bullets and Numbering Choose the bullets you would like to use.

15. Inserting Hyperlinks Hyperlinks are used to link your website to another page or website address. If you have ever clicked on a picture or words and they have taken you to another page, that is a hyperlink.

16. Inserting Hyperlinks Highlight the text or picture you want to have linked to another page. Go to the Insert menu and choose Hyperlink.

17. Inserting Hyperlinks Type in the URL or web address and press ok. You should see that the words you highlighted are underlined. This means it is linked. Run your mouse cursor over the hyperlink and notice that the URL shows up at the bottom of the FrontPage window. Remember you can put a link to another web page you make. You simply need to know your folder name in the St.Edward web folder. For example: www.scs.sk.ca/edw/grade1/web3.htm

18. Inserting a link to an Email Address Very much like adding a hyperlink, highlight the appropriate text or image. Go to Insert/Hyperlink

19. Inserting a link to an Email Address Click on the ENVELOPE button and type in the appropriate email address. Press OK Now you will see that moving your mouse over that link will show the email address at the bottom of the FrontPage window.

20. HTML CODE You will need to check the HTML Code to make sure your images are showing the proper folder It looks somewhat scary but if you look closely it makes sense. All Code is surrounded by IF you see it means that bold text will begin there. If you see it means that bold text is ended. Image code beings with <img Be very careful with the Image code. Make sure it shows the right folder in front of the picture name.

21. HTML CODE

22. Saving your web page FILE/SAVE AS Hints: use all lowercase letters Do not put spaces in your title Make the title name as short as possible

23. What your diskette may look like. You should have a folder called images. Make sure to save ALL of your pictures into that folder. You will then know that your HTML code should read something like this: images/filename.jpg

24. What your folder may look like after you save your web page Notice that on your diskette you have htm files and a folder. Htm files are web page files

25. Things you may want to stay away from You many not want to use themes. It is sometimes difficult to manage the files. You may not want to make a frames page. Try one after you are comfortable with FrontPage.

26. Links For FrontPage tutorials go to: qarbon.com choose viewletlibrary and choose Web Design from the list. Choose FrontPage 2000 and from the list provided choose the tutorial you would like to follow.qarbon.com For animated Gif’s here are some good web sites: http://www.animfactory.com/ http://www.animfactory.com/ http://www.webdeveloper.com/animations/ http://www.animation-station.com/index.html http://hotwired.lycos.com/webmonkey/