Information For

E-mail this page to a friendE-mail this page

Toolbars and Basics

FrontPage provides an interface for creating and editing documents that, in its basic operations, is not that different from the familiar interface provided by Microsoft Word. This document addresses the unique processes involved in editing web pages, and contains sections on
Web page design basics
Creating a new page
Setting a page title
Setting the background color
Toolbar Overview

Web page design basics

A few points set off a good web page from a bad one: a good web page will have a title, will be carefully laid out, will be accessible to all web browsers, will be stylistically consistent, and will contain a clear identification of the author and the date of the most recent revision. The identification of author and revision date are mandated on campus web pages: web sites on which pages do not have these identifying marks will not be listed on the index of faculty pages, and the sites themselves may be unceremoniously removed from the web server.

Fortunately, FrontPage's web page editor makes it relatively easy to include all required and desirable page elements. Details appear below.

Creating a new web page

In FrontPage, select the Page view.

A new blank web page will be created for you--if it isn't, you can click on File|New|Page , and you'll see a new page appear in FrontPage's editing window.

Setting a page title

One of your first tasks upon creating a new page should be giving that web page a title.

The title of a page should not be confused with the name of the page. The name is the only the filename, identifying the file to the browser and the web server. The title, on the other hand, is what will appear in the blue titlebar of the browser when the page is viewed. This page, for instance, has a name of "default.asp", but a title of "Plattsburgh State University: Instructional Technology." To set the title of a web page that is open in FrontPage's Page view, click on the File|Properties menu item to introduce the following dialog:

Illustration of the Page Properties dialog

In the field marked Title, you can type a title for your web page. The title can contain spaces and should indicate what the document is about.

Once you've changed the title for the page, you can click on the Background tab at the top of the menu and set the background color for the page.

Setting the background color

Ideally, you'll be using a style sheet to set the background color for your web page(s), but in the event that you want to set the color manually, you would do so by selecting the second tab on the page properties dialog (File|Properties ). By default, the web page will have a white background and black text, and you needn't worry about making any settings in the background dialog unless you 1) are not using a stylesheet, and 2) you don't like the default. Clicking the Background tab in the Page Properties dialog produces the following options:
Illustration of the Background options in Page Properties
To set an image as the page background, put a checkmark in the Background Picture field, and then click on the Browse... button to select the image file you'd like to use.

To set the colors for background and text, you need only select the colors you'd like from the dropdown lists in the "Colors" section of the dialog. The same is true for changing the colors of hyperlinks.

The final option on the page is perhaps the most useful: if you are not using a spreadsheet and feel inclined to set your colors manually, the final option in the dialog (Get background information from another page ) lets you ensure a degree of consistency among your pages by allowing you to refer to another page for format details. This mechanism is not as elegant as a stylesheet, but its heart is in the right place.

You're better off, in almost all circumstances, though, in using a style sheet to define your colors. See the section of this website devoted to Cascading Style Sheets.

Toolbar Overview

Once you've set your page properties, you'll be ready to begin work on the page. You'll notice fairly quickly that FrontPage's editing functions are very much like those in Microsoft Word . The most commonly used toolbars (Standard and Format) should be visible on your screen by default, but in the event that they aren't, you can enable them by clicking on the View menu and selecting them (View|Toolbars... ).

The standard toolbar allows you the option of creating new pages, opening and saving files, printing, etc. The formatting toolbar allows you the options of setting style, font, font size, font weight, font color, alignment, and bullets. The various FrontPage toolbars are broken down in detail below. If you're comfortable with the basic formatting and layout options, you can skip the tables and head right into the section on creating hyperlinks.

Itemized, the toolbar functions are as follows:

Standard Toolbar

Illustration of standard toolbar

New File Button New File - Creates a new web page. By default, the first page in a folder will be named default.html or index.html --other pages will have a default name of newpage.htm .
Illustration of the Open File button Open File - Opens a file.
Illustration of the Save File Button Save File - Saves a file.
Illustration of the Folder View button Folder View - Shows the list of folders in the website. This can be toggled on and off to give you more editing room as you work on a web-page.
Illustration of the Print File button Print File - Prints the active page.
Illustration of the Preview in Browser button Preview in Browser - Loads the web page being edited into the default web browser on the system.
Illustration of the Check Spelling button Check Spelling - Checks the spelling on a web page.
Illustration of the Cut Selection button Cut Selection - Cuts a selection.
Illustration of the Copy Selection button Copy Selection - Copies a selection.
Illustration of the Paste from Clipboard button Paste from Clipboard - Pastes the clipboard contents into the web page being edited. The material being pasted is automatically converted into HTML format.
Illustration of the Format Painter button Format Painter - Used to copy the formatting of one selection to another portion of text.
Illustration of the Undo button Undo - Undoes the last change(s).
Illustration of the Redo button Redo - Redoes what has been undone.
Illustration of the Insert Component button Insert Component - Allows a selection of FrontPage components to insert into the active page: most useful options here are the Include Page and the Hit Counter options.
Illustration of the Insert Table button Insert Table - Reveals a grid for creating table dimensions, and then draws the table onto the page.
Illustration of the Insert Image button Insert Image - Inserts an image onto the web page being edited.
Illustration of the Create or Edit Hyperlink button Create (or Edit) Hyperlink - adds a link to another document.
Illustration of the Refresh Page button Refresh Page - Provides a fresh view of the page being edited.
Illustration of the Stop Button Stop - Used to interrupt the loading/saving of a file.
Illustration of the Show Paragraph Marks button Show Paragraph Marks - Shows otherwise invisible page formatting marks.
Illustration of the FrontPage Help button FrontPage Help - Loads FrontPage's online documentation.

Format Toolbar

Illustration of the Format Toolbar

Illustration of the Style dropdown list Style - Allows the selection styles. The default styles will take their formatting definitions from a linked cascading style sheet, if one is used. For more on Cascading Style Sheets, please click here .
Illustration of the Font dropdown list Font - Allows the selection of a specific font or typeface. Keep in mind that decorative fonts will not invariably be available on other systems. Ideally, you'll set your font definitions (including their size and color) in a Cascading Style Sheet .
Illustration of the Font Size dropdown list Font Size - Allows the setting of a font size. Again, it is best to avoid this option and rely on linked style sheets to set font sizes.

Illustration of the Strong (Bold) button Bold - <strong> or the less standard <b>
Illustration of the Emphasis (Bold) button Italics - <em> or the less standard <i>
Illustration of the Underlining button Underlining - <ul>
Illustration of the Align Left button Align Left
Illustration of the Align Center button Align Center
Illustration of the Align Right button Align Right
Illustration of the Numbered List button Numbered (ordered) List <ol>
Illustration of the Bulleted List button Bulleted List <ul>
Illustration of the Decrease Indent button Decrease Indent
Illustration of the Increase Indent button Increase Indent
Illustration of the Highlight button Highlight - sets a background color for selected text. Not highly recommended, since it won't work with older versions of Netscape.
Illustration of Text Color button Font Color - sets the font color for selected text. Not highly recommended, since color settings created this way cannot easily be changed if you choose to revise the look of your website--you'd have to change each color setting on each page... Use a style sheet whenever possible.

Image Toolbar

Illustration of the Image Toolbar

Illustration of the Insert Picture button Inert Picture from File - This allows you to specify the picture you'd like to insert into your web page.
Illustration of the Add Text button Text - Allows the addition of text directly to an image. JPG images will be converted to GIF images in the process.
Illustration of the AutoThumbnail button AutoThumbnail - generates a thumbnail image and links the original file.
Illustration of the Position Picture Absolutely button Position Absolutely - positions an image absolutely on the page: absolutely positioned images require version 4.0 or better of Netscape or Internet Explorer
Illustration of the Bring Forward button Bring Forward - brings an image to the top of other page elements: requires version 4.0 or better of Netscape or Internet Explorer
Illustration of the Send Back button Send Backward - causes an image to display beneath other page elements: requires version 4.0 or better of Netscape or Internet Explorer
Illustration of the Rotate Left button Rotate left - Rotates an image to the left.
Illustration of the Rotate Right button Rotate right - Rotates an image to the right.
Illustration of the Reverse button Reverse - Reverses an image on the vertical axis.
Illustration of the Flip button Flip - Flips an image on the horizontal axis.
Illustration of the More Contrast button More contrast - Increases the contrast in an image.
Illustration of the Less Contrast button Less contrast - Decreases the contrast in an image.
Illustration of the More Brightness button More brightness - Increases the brightness in an image.
Illustration of the Less Brightness button Less brightness - Decreases the brightness in an image.
Illustration of the Crop Image button Crop image - Crops an image.
Illustration of the Make Transparent button Make transparent - Sets a color in an image to be the transparent color. This works only with GIF images; if applied to JPG images, the images will be converted to GIFs.
Illustration of the Black and White button Black and white - Converts an image to a monochromatic black/white image.
Illustration of the Wash Out Image button Wash out image - Washes out (or fades) an image.
Illustration of the Bevel Border button Bevel border - Adds a bevelled border to an image.
Illustration of the Resample button Resample Image - Resamples (resizes) an image file where an image has been resized on screen. (If you don't resample the image, the image's file size will be larger than it needs to be.)
Illustration of the Select Hotspot button Select hotspot - Used for selecting a hotspot on a graphic image (image map).
Illustration of the Rectangle Hotspot button Rectangle hotspot - Creates a rectangular hotspot on an image.
Illustration of the Circle Hotspot button Circle hotspot - Creates a circular hotspot on an image.
Illustration of the Polygon Hotspot button Polygon hotspot - Creates a polygonal hotspot on an image.
Illustration of the Hilight Hotspots button Hilight hotspots - Makes the hotspots on an image visible.
Illustration of the Restore Image button Restore image - Returns the image to the state it was last saved in.

Forms Toolbar

Illustration of the Forms toolbar

(The forms toolbar can be created by dragging at the top of the menu list that appears when Insert|Form is selected.)

Illustration of the Form button Form - Creates an empty form
Illustration of the One-Line Textbox button One-Line Text Box - Inserts a one-line text box: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Scrolling Textbox button Scrolling Text Box - Inserts a scrolling text box: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Checkbox button Check Box - Inserts a check-box: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Radio Button Radio Button - Inserts a radio button: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Dropdown Menu button Drop-Down Menu - Inserts a dropdown menu: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Pushbutton button Push Button - Inserts a push-button: if no form exists, a basic form will be created when the form-field is created.
Illustration of the Picture button Picture - Inserts a picture.
Illustration of the Label button Label - Adds a label to a selected form field.
Illustration of the Form Properties button Form Properties - Brings up the Form Properties dialog.

Tabs at bottom of FrontPage's Page View

Illustration of the FrontPage Page View Tabs
Normal View - this is the editor's WYSIWYG (What You See Is What You Get) mode. You see none of the HTML code that underlies the web page. You'll probably do most of your page editing in the normal view.
HTML View - the HTML view shows the HTML code for the web page and allows you to edit (or write) it directly.
Preview - the Preview tab reveals the page as it might look in a web browser. You're usually better off selecting File|Preview in Browser or clicking on the Preview in Browser button (Illustration of the Preview in Browser button ).
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.
Was this page helpful?

This is an official publication of Plattsburgh State

Copyright © 1996-2007 Plattsburgh State 101 Broad Street, Plattsburgh, NY 12901 Phone: (518) 564-2000