Getting Started

- Open Microsoft Front Page - You should see a screen that looks like this There are View bars on the left. The one main one we will focus on is the page view.

Main FrontPage Screen

Front Page Tool Bars

Creating folders

•  Right click in the area that shows your FOLDER list. A menu will pop up,
•  click on new folder and then name the folder whatever you wish.

You also see an Images FOLDER. This is where you should keep all the images you are using for this Front Page web.

Text Fonts and Colors Recommendation (Font type, size, color, decoration)

Font Style

Arial, Verdana, and Times New Roman are good choices for the web and are used extensively.

Examples of each: Arial Arial (size 10) font example Verdana

Font size

Don't go much smaller than size 8, or much larger than size 14. Most content should be size 10 or 12.

Font decoration

Do not underline words, unless they're a hyperlink. Use italics sparingly, it's difficult to read. Bold is typically used for headings.

Cautions

If you choose an oddball font and the PC used to view the page doesn't have that font, a "default" font will be used in its place, usually giving undesirable results.

Don't mix too many font types on a single web page - this is confusing to the eye.

Instead, use different sizes and/or decorations of the same font to set off headings and sections of content.

Editing Page Elements Spell Check

FrontPage automatically spell checks your document. A wavy red line underneath a word indicates that word is misspelled.

Check Spelling Icon

Method to correct errors:
Right-click on the misspelled word or click the icon pointed out above. A window pops up with a list of possible corrections.

Click on the word that has the correct spelling. OR
If the pop up window doesn't contain the word with the correct spelling, you will need to manually correct the misspelled word.

Create a Link

A link can be created to a web page within your site, a specific section within a web page, a web page at an external web site, a person's email address, and to another resource (such as a document, image, sound clip, video clip, etc.). A link that is created to a person's email address is discussed in a later section. Method to create a link to a web page within your site:

1.Select the text for which you want to create a link.
2.Select Insert/Hyperlink from the menu.
3.Click the Make a Hyperlink to a File on Your Computer button.
4.Click on the drop-down arrow next to the Look In box. Navigate to and select the proper drive and directory that contains the file.
5.Double-click on the file name that you wish to link. Web address goes here

Use Your Web Browser to Select a Page or File Button Link Button to make a Hyperlink to a File on YourComputer Method to create a link to a web page at an external site:

6.Select the text for which you want to create a link.
7.Select Insert/Hyperlink from the menu.
8.In the URL box, type the web address of the external site after the http:// and then press the OK button.

OR

Click the Use Your Web Browser to Select a Page or File button. This opens your default web browser. Using the browser, navigate to the web page that you want to link too. Return back to FrontPage. The web address for that page is automatically inserted into the URL box. Press the OK button. Refer to the diagram on the previous page for the location of the button.

Method to create a link to a resource (such as an image):

9.Select the text or resource for which you want to create a link.
10.Select Insert/Hyperlink from the menu.
11.Click the Make a Hyperlink to a File on Your Computer button.

Refer to the diagram on the earlier page for the location of the button.

12. Click on the drop-down arrow next to the Look In box. Navigate to and select the proper drive and directory that contains the resource.
13. Double-click on the file name that you wish to link. Method to create a link to a new web page:

14. Select the text for which you want to create a link.
15. Select Insert/Hyperlink from the menu.
16.Click the Create a Page and Link to the New Page button.

Refer to the diagram below for the location of the button.

17.At the New dialog box, click on the General tab and then click on the icon for Normal Page. Click the OK button.
18. Enter the information for this new web page and then save the file.
19. To return to the previous web page… Select Window from the menu and then click on the name of the previous page.

Create an Email Link

A link can be created for an email address. This allows a visitor to send email to the specified person.

Method:

20.Select the text for which you want to create an email link.
21.Select Insert/Hyperlink from the menu.
22.Click the Make a Hyperlink that Sends Email button.

Refer to the above diagram for the location of the button.

23. Type the complete email address for the person in the dialog box. Click the OK button. The URL box now contains the prefix, mailto:, immediately followed by the email address. Click the OK button.

Setting Page Color (Background)

The background color of a page may be changed.

Method:

24.Select File/Properties from the menu. (OR right click on the page, and select page properties)
25. Click the Background tab.
26. In the Colors section of the dialog box, click the drop-down arrow next to the Background box.
27. Click on one of the 16 basic color selections. Click the OK button.  

OR Click on More Colors. Click on one of the colors from the color chart.

Click the OK button.

Click the OK button again.

If you choose "default" as the background color for a web page in "Page Properties" in FrontPage, the background color will be white on a Windows platform and gray on a Macintosh. For this reason, always set your page background color to white to insure the page renders the same on both platforms.

Set Default Text Color

The default color of text on a web page may be changed.

Method:

28.Select File/Properties from the menu.
29.Click the Background tab.
30.In the Colors section of the dialog box, click the drop-down arrow next to the Text box. The dialog box looks the same as the one pictured above (for setting the page color).
31.Click on one of the 16 basic color selections. Click the OK button. OR Click on More Colors. Click on one of the colors from the color chart.

Click the OK button.

Click the OK button again.

Set Link Colors

The text color for a hyperlink, a visited hyperlink, and an active hyperlink may be changed.

Method:

32.Select File/Properties from the menu.
33.Click the Background tab.
34.To change the hyperlink color… In the Colors section of the dialog box, click the drop-down arrow next to the Hyperlink box. OR to change the visited hyperlink color… In the Colors section of the dialog box, click the drop-down arrow next to the Visited Hyperlink box. OR To change the active hyperlink color… In the Colors section of the dialog box, click the drop-down arrow next to the Active Hyperlink box.
35.Click on one of the 16 basic color selections. Click the OK button. OR Click on More Colors. Click on one of the colors from the color chart. Click the OK button. Click the OK button again.

Apply Bold and Italic to Text

Bold and italic formatting may be applied to text. (Avoid underlining text. It could be confused with a hyperlink.)

Method:

36.Select the text you want to make bold or italic.
37.Click the Bold or Italic button.

Change Font and Font Size for Selected Text

Text may be formatted with a different font and font size.

Method:

38.Select the text that you want to change the font or font size for.
39.Click the drop-down arrow next to the Font box and click on the desired font.
40.Click the drop-down arrow next to the Font Size box and click on the desired font size.

Change Text Color for Selected Text

The color of text may be changed.

Method:

41.Select the text that you want to change the text color for.
42.Click the drop-down arrow next to the Font Color button.
43.Click the desired color.

Change Paragraph Alignment

Right, left, and center justification may be applied to paragraphs.

Method:

44.Click in the paragraph that you wish to align.
45.Click the Left , Right , or Center button.  

Create Bulleted Paragraphs Paragraphs may be formatted with regular or numeric bullets.

Method:

46.Click in the paragraph (or select a group of paragraphs) that you wish to format with bullets.
47.Click either the Numbering or the Bullets button.

Bullets may also be removed from paragraphs.

Method:

48.Click in the paragraph (or select a group of paragraphs) that you wish to remove the bullets.
49. Click either the Numbering or the Bullets button (depending upon which one was used to format the paragraphs) to remove the bullets.

Recommendations: Graphics

JPEG's:

This file format is typically used for photos of living things that contain lots of shades of color. The format supports literally millions of color combinations. The pitfall of this file format is that the large file size makes the graphics download slower. For this reason, if you're going to use a jpeg format, keep the physical image dimensions small (like 2 x 3 inches).

GIF's:

This file format only supports 256 colors and is therefore, not good for photos of people or living things. GIF file sizes are small though and download fast! Therefore, when there are only a few simple (plain, common) colors in your image, use this format to decrease the overall download speed. Typical applications include: table and cell backgrounds, horizontal rules, text images, bullets, etc.

Image Editors:

Editors available to create and edit your images on campus include:

Microsoft Image Composer (included with FrontPage), Microsoft Photo Editor and Microsoft Paint (a bitmap paint program). Adobe Photoshop and Adobe Image Ready along with Macromedia's Fireworks are probably the best graphics editors on the market and are available in some departments.

Caution:

Some image editors (Adobe comes to mind) allow you to custom tailor the quality of the image, which increases/decreases the image file size. Choose the smallest quality setting possible (while not degrading your image) to minimize file size and download time.

Insert Images

Images may be inserted within a page or table. 50. Click in the paragraph or table cell where you want to insert the image.

51.Select Insert/Picture/Clip Art from the menu.
52.Click on the Pictures tab.
53.Click on the desired category of images.
54.To preview an image… Click on an image. From the pop-up menu, click the Preview Clip button. When done, click the Close button for the preview window.
55.To insert an image… Click on an image. From the pop-up menu, click on the Insert Clip button.

Other attributes may be set for the image.

To do so, right-click on the image and select Picture Properties from the short-cut menu. (The section for adding alternative text is found under the General tab. The section for changing the alignment, adding a border, or altering the spacing around an image is found under the Appearance tab.) Make the desired changes and click the OK button.

24 Method to insert images from another source:

56. Click in the paragraph or table cell where you want to insert the image.
57. Select Insert/Picture/From File from the menu.
58. Click on the drop-down arrow next to the Look In box. Navigate to and select the proper drive and directory that contains the image.
59. Double-click on the file name for the image you wish to insert.

To do so, right-click on the image and select Picture Properties from the short-cut menu. (The section for adding alternative text is found under the General tab. The section for changing the alignment, adding a border, or altering the spacing around an image is found under the Appearance tab.) Make the desired changes and click the OK button.

Insert Horizontal Rule

A line may be inserted within a web page.

Method:

60.Click where you want the line to appear.
61.Select Insert/Horizontal Line from the menu.

Other attributes may be set for the line width, height, color, etc.

To do so, right-click on the horizontal line and select Horizontal

Line Properties from the short-cut menu. Make the desired changes and click the OK button.

Creating Tables

Tables are often used to align information in rows and columns. Table cells can contain items such as text, images, forms, background images, nested tables, etc.

Generally, table dimensions should be specified in percentage.

Method:

62.Click in the paragraph where you want to insert a table.
63.Click the Insert Table button.

A table grid now appears immediately below this button.

64.Drag the mouse down and to the right to select the number of rows and columns you want for your table. Click the left mouse button to insert the table.
65.Enter the information into the desired cells.The Tab or Arrow keys may be used to move from one cell to another.
66.If desired, change the attributes of the table (i.e. alignment, height, width, cell padding, cell spacing, border size, border color (invisible), background color, or background image). To do so, right-click within the table and select Table Properties from the short-cut menu. Make the necessary changes and press the OK button. Cell padding refers to the margins within cells. Cell spacing refers to the space between cells. To remove the borders from a table, change the border size to zero.
67. If desired, change the attributes of the cells (i.e. alignment, border color, background color, background image, etc.). To do so, right-click within a cell (or a group of selected cells) and select Cell Properties from the short - cut menu. Make the necessary changes and press the OK button.

Horizontal and vertical alignments are used to posit ion the content within a cell. Right, left, center, and justify are options available for horizontal alignment. Top, middle, baseline, and bottom are options available for vertical alignment. Not all browsers support the baseline option for vertical alig nment. (This option aligns the content of the cell with the baseline of the first line of text within that cell. However, if the cell contains several lines of text and no images, then the baseline option is equivalent to the top option. If the cell contains text and images, then the baseline option is equivalent to the bottom option.)

View HTML Tags

HTML tags may be viewed in the Normal Editor View.

However, not all HTML tags are displayed. (Example: If you insert a horizontal line, you will see the line, but you will not see the <HR> tag.)

Method:

68.Click on the Normal page tab.
69.Select View/Reveal Tags from the menu.

To turn these tags off, select View/Reveal Tags from the menu.

Preview Web Page within FrontPage

An approximate rendering of the web page may be viewed in the Preview editor view. The web page may look slightly different when viewed in a browser.

Method:

70.Click on the Preview page tab. The web page cannot be edited within this view.
71.To return to the Normal Editor View, click on the Normal page tab.

Preview Web Page in Browser

A web page may be previewed in the default browser or a browser of your choice.

Method:

72.Click the Preview in Browser button.

This displays the page in the default browser. OR Select File/Preview in Browser from the menu. In the Browser section of the dialog box, double-click on the name of the browser you wish to use for the preview.

To return to FrontPage, click on the minimized FrontPage icon (in the status bar).

Extras

Putting Power Point on the web

1. Create your PowerPoint presentation as you normally would.
2. On the File menu, select Save As Web Page
3. In the Save In dialog box, Select your subweb
4. You will be prompted for your username and password
5 . Select the folder in your subweb that you want the presentation published to, creating a new one if necessary.
6. Click the Save button and PowerPoint will publish your presentation, creating a folder for the individual slides and a single file that will serve as the opening slide in your presentation.
7. Create a hyperlink on the appropriate page to link to the opening page of your presentation.

Close this window to go back