MS- Frontpage 2000 Tutorial

Getting Started

front page tutorial online

These words are used often in these tutorials, so learn them now!

• Hyperlink - Text or graphic hotspots that load other web pages when clicked on.
• Pixel - The unit of measurement on the web. One pixel is approximately the size of a period (.) in 12-point Arial font.
• Shortcut menu - As with all PC programs, access popup shortcut menus by right-clicking on objects with the mouse.
• URL (Universal Resource Locator) - The address of a web site. This what is after the "http://" on the location bar on your browser.
• Web - In FrontPage, your web site is referred to as a web.

FrontPage Screen Layout

Below is a diagram of the default page layout in FrontPage. You can change the view by selecting a different View Option.

Views

• Page view gives you a WYSIWYG editing environment for creating and editing web pages.
• Folders view lists all of the files and folders in your web for easy management.
• Reports view identifies problems with pages and links in the web including slow-loading pages, broken links, and other errors.
• Navigation view lists the navigation order of the site and allows you to change the order that a user would view the pages.
• Hyperlinks view allows you to organize the links in the web pages.
• Tasks view provides a grid for inputting tasks you need to complete in your web.

Creating a Web Using the Web Wizard

1. Open FrontPage and select File → New → Web... from the menu bar or click the small down arrow next to the New button on the standard toolbar and select Web...
2. Select the type of web you want to create. It is usually best to create a simple One Page Web which you can add additional blank pages to as you need them. Enter a location for the web in the box provided beginning with "http://".
3. Click OK and wait for FrontPage to finish creating the web.
4. Now, explore your web. Click Folders view to see the initial page (default.htm) and the folders.
5. Click on Reports view to see a list of reports for the site.
6. View the navigation layout of the web by clicking Navigation view.
7. Hyperlinks view allows you to manage the links on your pages.
8. Optional - in Tasks view, list the tasks that need to be accomplished to create the web.
9. Make pages and save them, marking them as completed in the task view.
10. Click Folders view to open the next page to work on.
11. When you are ready to publish your web on the FGCU server, copy the folder to the server.

Creating a Web Page from a Template

FrontPage provides many individual page templates that can be added to any web. Follow these steps to add a template to a web page.

1. Select File → New → Page... and choose a template.
2. Select a template and click OK.
3. Replace the place-holding body text with your own text and photos.

Report View

When your web is completed, click Reports view to verify that links are correct and use the Reporting toolbar to switch between reports.

Open A Web

To open a web you have already created, select File → Open Web... from the menu bar. Select the web folder from the list and click Open.

Saving A Web

Save all the pages within the web created by FrontPage. These pages, however, are not visible to anyone on the Internet. You must copy the entire web folder to a network drive.

Page Properties

Change various page properties by selecting File → Properties from the menu bar.

• General – Change the Title which appears in the browser. Avoid background sounds and unnecessary scripting options.
• Background – Use Browse to add a repeating image. Enable rollover effects using CSS (not supported in older browsers).
• Set background and text colors appropriately. Use default hyperlink colors (blue/unvisited, purple/visited) to avoid confusion.
• Margins – Adjust top and left margin widths by pixels if necessary. Other tabs usually don’t need changes.

Themes

Themes can quickly add color, graphics, and a common layout to your web pages.

• Open a web page and select Format → Theme from the menu bar or right-click on the page and select Theme...
• Under Apply Theme to, select All pages or Selected page(s)
• Scroll and preview themes in the Sample of Theme window.
• Vivid Colors enhances the theme’s colors.
• Active Graphics adds Java applet effects to navigation buttons.
• Background picture adds a repeating background image.
• Apply Using CSS implements the theme through stylesheets.
• Click OK when the theme is chosen.

Removing a Theme

To remove a theme, go to Format → Theme and select (no theme) from the list. Click OK.

Hyperlinks

Creating Links

Hyperlinks are text or graphics that connect to other web files or pages. Here’s how to create one:

1. Highlight the text or graphic and choose Insert → Hyperlink or press CTRL+K.
2. For internal links, select the page from the list. For external links, enter the full URL starting with http://.

E-mail Links

To create an e-mail link:

• Highlight the e-mail address text and press CTRL+K.
• Click the envelope icon and enter the address in the box provided. Confirm by clicking OK.

Bookmarks

Bookmarks (called “anchors” in other platforms) allow internal page navigation. Useful for long pages like course syllabi.

To create a bookmark:

Highlight the text or graphic and go to Insert → Bookmark.... Name the bookmark and click OK.

To link to a bookmark:

• Highlight the link text and press CTRL+K.
• Select the file and choose the bookmark from the drop-down menu.

Tables

Table Uses

• Page layout
• Display tabular information
• Style blocks of text with color and borders

Creating a Table

Use the toolbar’s table button to insert a table. Drag to select rows and columns, then click to place it.

A 2×2 table will appear on the page.

Table Properties

Modify properties using Table → Properties → Table.

• Alignment: Position of the table (left, right, center, justify)
• Cell padding: Space between text and cell walls
• Cell spacing: Space between table cells
• Specify width: Set width in pixels or %
• Specify height: Optional – adjusts with row content

Border Options

Below are effects based on border settings:

• Border size: A border set to 0 is invisible on live pages.
• Border color: May appear differently in browsers (MSIE vs Netscape).

Microsoft Internet Explorer 5.0 renders solid color borders, while Netscape Navigator 4.7 keeps a 3D effect and changes only the outer border.

Additional Table Styling

• Light border and dark border change highlight/shadow colors. Not supported in Netscape.
  Example: Red and green borders are visible in MSIE but appear blue in Netscape.

Microsoft Internet Explorer 5.0     Netscape Navigator 4.7

• Background color adds color to cell backgrounds and spaces between cells in MSIE. Netscape adds color to cells only.

Microsoft Internet Explorer 5.0     Netscape Navigator 4.7

• Use background picture adds a repeating image. MSIE repeats across the whole table; Netscape repeats in each cell.

Microsoft Internet Explorer 5.0     Netscape Navigator 4.7

Cell Properties

Go to Tables → Properties → Cell or use the right-click shortcut menu. Highlight the desired cells before editing.

• Horizontal alignment: Default is left. Can be changed to center or right.
• Vertical alignment: Default is middle. Change to top or bottom as needed.
• Row/column span: Recommended method is detailed below.
• Specify width/height: Defines cell size. Percentages are relative to the table, not the page.
• Header cell: Automatically bolds and centers cell content.
• Border color: Visible in MSIE only. Netscape does not support it.
  Note the red cell borders in MSIE's top row.
• Light/dark borders: Effective only in MSIE.
• Background color: Works like table background color in Netscape (applies only to cells).
• Background image: Repeats in each cell in Netscape; entire table in MSIE.

Microsoft Internet Explorer 5.0     Netscape Navigator 4.7

Inserting Rows and Columns

To insert new rows or columns:

1. Place the cursor in a nearby cell.
2. Use right-click → Insert Row/Column or go to Table → Insert → Rows or Columns.
3. Choose Rows, specify the number, and choose Above or Below current row.
4. To insert a column, select Columns, specify the number, and select Left or Right of the current column.
5. Click OK to insert.

Spanning Cells

Use cell spanning to merge multiple cells into one — useful for titles or headers across columns.

1. Insert a new row at the top of the table.
2. Enter the desired title text in the first cell, then highlight the row’s cells.
3. Select Table → Merge Cells or right-click and choose Merge Cells.
4. Center the text from the Cell Properties window, then deselect the cell.
5. To undo, use Table → Split Cell from the menu bar.

Graphics and Pictures

Image Types

Web browsers recognize two basic image formats: GIF and JPEG.

• JPEG (Joint Photographic Experts Group): Ideal for photographs; supports over 16 million colors.
• GIF (Graphics Interchange Format): Best for non-photographic images like logos; supports up to 256 colors.

Inserting a Graphic

To insert a picture:

Go to: Insert → Picture → From File. Choose your file and click OK.

Picture Properties

To modify image settings, select the picture and go to Format → Properties.

• Alternative text: Add a description in the Text box. This appears if the image doesn't load.
• Alignment: Align the image to the left, right, or center relative to the surrounding text.
• Border thickness: Sets the thickness of the image border in pixels (use "0" for no border).
• Horizontal & vertical spacing: Adds white space around the image in pixels.
• Specify size: Check this to manually adjust width and height. Tip: It's better to resize in Photoshop or another editor to reduce file size and preserve quality.

Navigation Bars

Navigation bars allow quick linking between pages in your site and are auto-generated in FrontPage.

How to Create a Navigation Bar

1. Open your site in Navigation View. A single "parent" page appears in the blue panel.
2. Add new pages by dragging file names from the Folder List into the navigation window. Relation lines (parent-child links) are created automatically.
3. Adjust page positions by dragging them to new spots in the hierarchy.
4. To link to an external site or email:
   • Select the page the link starts from.
   • Click the external hyperlink icon in the Navigation toolbar.
   • Type the full URL beginning with http://.
   • For email links, click the envelope icon and enter the address in the Create E-mail Hyperlink box. Click OK.

Deleting Pages from the Navigation Tree

To remove a page from the navigation tree in FrontPage:

• Right-click on the page icon and choose Delete.
• To keep the page in the tree but exclude it from appearing in navigation bars, uncheck Included in Navigation Bars. The page icon will turn gray.
• Alternatively, go to Edit → Delete from the menu bar and choose one of the available options.

Navigation Tree View Tips:

• Use Collapse/Expand Subtree buttons (+ / -) to view specific portions of the navigation structure.
• Select a page and click Subtree Only on the toolbar to isolate its branch.
• Toggle between portrait and landscape views using the orientation button.

Navigation Bar Properties

1. Open the desired page in Page View.
2. Right-click the navigation bar area, or go to Insert → Navigation Bar if it's not yet added.
3. Choose which pages to show using the Hyperlinks to add to page option.
4. Check Home page and Parent page boxes if needed.
5. Select the orientation (horizontal/vertical) and whether to use buttons or text links.
6. Click OK to apply your changes.

Cascading Style Sheets (CSS)

CSS allows consistent formatting of text, paragraphs, and layout across your web pages. Styles can be applied in three main ways:

• Embedded Style Sheet: Added in the <head> section of a specific page.
• Inline Styles: Applied directly to individual HTML elements.
• External Style Sheet: A .css file linked to multiple pages for centralized styling.

Create an Embedded Style

1. Go to Format → Style and click New.
2. Name your style (e.g., .redText) — no spaces allowed.
3. Click Format → Font and set font, size, and color (e.g., Arial, 10pt, Red).
4. Adjust additional attributes as needed, then click OK.
5. Apply the style from the formatting toolbar by highlighting your content and selecting the style name.

Using Inline Styles

To apply styles directly to elements like tables or forms:

1. Highlight the element and select Format → Properties.
2. Click Style... in the properties window.
3. Choose an existing class from the Class drop-down or modify with Format.
4. Click OK to apply the changes.

Using Preset External Style Sheets

1. Select File → New → Pages and open the Style Sheets tab.
2. Preview available styles and click OK.
3. Save the style sheet with the .css extension.

Create an External Style Sheet from Scratch

1. Go to File → New → Pages and select Normal Style Sheet.
2. Click the Style... button on the Style toolbar.
3. Select an element (e.g., body) and click Modify.
4. Choose Format → Font, then select a font (Arial), size (10pt), etc.

TIP: Always specify multiple fonts for better compatibility. For example:
font-family: Arial, Verdana, Geneva, sans-serif;

Link to an External Style Sheet

Once you've created an external CSS file, link it to your web pages to apply styles:

1. Open the desired page and go to Format → Style Sheet Links.
2. Click Add... in the dialog box.
3. Select the .css file and click OK.

To remove an external style sheet, highlight it in the list and click Remove.

Edit an External Style Sheet

1. Open the .css file in FrontPage.
2. Go to Format → Style.
3. Select the style from the list and click Modify.
4. Update formatting as needed using the Format menu.
5. Click OK and save the file.

Modifying Themes in FrontPage

You can personalize FrontPage themes to match your design needs.

To begin:

• Go to Format → Themes and click Modify.

🎨 Colors

• Color Schemes Tab: Preview and apply preset schemes.
• Color Wheel Tab: Use the wheel and brightness slider for custom adjustments.
• Custom Tab: Set individual colors for headers, links, etc.

🖼️ Graphics

Change theme bullets, banners, and background:

• Choose images from the Picture tab and modify fonts from the Font tab.
• Select between Normal (static) or Active (Java rollover) graphics.

📝 Text

• Select a text element and update its font via the Text button.
• Use More Text Styles... for detailed customizations.

Saving a Custom Theme:
Click Save As in the Themes window and enter a name for your theme to reuse it later.

Using Frames in FrontPage

📂 What Are Frames?

Frames split a web page into multiple scrollable sections, each loading a different HTML file. They're useful for static menus or layouts but may affect load time, linking, and printing compatibility.

🛠️ Create a Frames Page

1. Go to File → New → Page and click the Frames Pages tab.
2. Preview the layout icons and select one. Click OK.
3. In Page View, click New Page to create content or Set Initial Page to link existing files.
4. Save using File → Save As. You'll be prompted to save the main frame page and its components.

🧾 Frame Properties

• Name: Useful for linking between frames.
• Initial Page: Assign a default source page for each frame.
• Frame Size: Use absolute (pixels) or relative (%) values.
• Options: Enable resizing and scrollbars as needed.

🔗 Linking Inside Frames

To link content within frames:

• Click the pencil icon next to Target Frame in the hyperlink dialog.
• Page Default: Uses the frame’s assigned target.
• Same Frame: Opens the link in the same section.
• New Window: Opens a separate browser window.
• Parent Window: Replaces the full page with the link.

📄 No Frames Page

Older browsers don't support frames. Provide a No Frames fallback page via the tab at the bottom of the screen. You can link to your main content or provide upgrade suggestions.

🧩 Components in FrontPage

Access the Components menu by selecting Insert → Component from the menu bar. You must save the page before using all the listed components. To make it a floating toolbar, click and drag the top blue bar.

📄 Includes

Use Includes to display the content of one page within another—perfect for common content like copyright notices or menus.

1. Place the cursor where the include content should appear.
2. Select Insert → Component → Include Page.
3. Click Browse, choose the file, and click OK.

Note: The content is not editable from the main page; edit the include file directly.

🗓️ Scheduled Picture

Add timed visual content like holiday graphics:

• Go to Insert → Component → Scheduled Picture.
• Choose images and set start/end dates.
• Click OK.

🗂️ Scheduled Include Page

Insert a page only during specific time frames using:

Insert → Component → Scheduled Include Page

📅 Date and Time Stamp

Show a page's last updated date:

• Place your cursor where the date should appear.
• Select Insert → Date and Time.
• Check "Date this page was last automatically updated" and select a format.

🔍 Search Form

Automatically insert a search box via Insert → Component → Search Form.

Customize:

• Label for Input: Text shown before search box
• Width: Number of characters wide
• Button Labels: "Start Search" / "Clear"

Results Formatting:

• Date and time format
• Display score (relevance)
• Show file date and size

📝 Forms in FrontPage

Form Page Wizard

To create a form quickly, use the wizard:

1. Go to File → New → Page and run the wizard.
2. Click Next and begin adding questions with input types.
3. Reorder or edit items as needed.
4. Choose layout options, then how to store form results (text or web page).
5. Click Finish to insert the form into your page.

🧰 Forms Toolbar

Use Insert → Form to access the toolbar. Click the Form button to begin, and customize using:

• Form Properties: Set storage method, email options, and confirmation page.

🔡 Text Box

• Name: Unique identifier (no spaces)
• Initial Value: Default content
• Width: Number of characters
• Tab Order: Numeric order of focus
• Password Field: Use asterisks for input
• Validate: Set required format, length, etc.

📋 Text Area

Allows multi-line input. Properties are similar to Text Box. Resize by dragging corners.

☑️ Check Box

• Name: Same for group (e.g., "colleges")
• Value: Unique for each item (e.g., "COB")
• Initial State: Pre-check if likely needed

🔘 Radio Button

Allow one selection only. Use similar setup to checkboxes. Name group and provide unique values.

⬇️ Drop-Down Menu

• Choice: Visible text in dropdown
• Specify Value: Optional internal value
• Initial State: Set default selected item
• Height: Number of visible items (e.g., 1 or 3)
• Multiple Selection: Enable CTRL+Click for multi-choice

📥 PDF Tutorial & Online Test

PDF Tutorial of FrontPage

Check FrontPage Knowledge Online

MS-FrontPage 2000 Tutorial – Learn FrontPage Online Free by ABCSA