IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

FrontPage 2003 Basics

Table of Contents

Overview

FrontPage is a graphical HTML editor. HTML—HyperText Markup Language—is the "language" that creates Web pages. Rather than requiring you to learn HTML with all its <TITLE>, <FONT COLOR="#FFFFFF">, and <TD ALIGN="center" WIDTH="50%"> types of tags, FrontPage allows you to work in a WYSI–A–WYG (What You See Is – Almost – What You Get) environment that feels a great deal like the Microsoft word processing application, Word.

This tutorial guides you through creating a simple Web page using most of the basic tools including tables, background color, images, text formatting, and hyperlinks. It does not cover the more advanced features available in FrontPage 2003 such as page layout and layers.

Back to Top

About Web Servers

Your Web page must be housed on a Web server—not simply a server that provides access to shared resources such as WordPerfect Office®, Word®, or Excel®. Your school or department may maintain a Web server and provide space on it for you, or you may choose to contract with a local Internet Service Provider (ISP) to provide you with Web hosting services.

It is difficult to provide you with specifics about how you will interact with the server in order to place and maintain your Web pages, since different servers and organizations have different services and utilities in place. You should contact your technical support staff and ask for specific instructions on how to interact with your Web server.

Back to Top

Using HTML

If you are a "do-it-yourselfer" and wish to create your Web pages "from scratch" then you'll need to learn HTML (HyperText Markup Language). For information and instructions about HTML, consult one of the many resources available on the Web, including the tutorials HTML Basics or Beyond HTML Basics. You can find additional Web resources on Web by Design. Even when you create Web pages using an HTML editor, you will most likely find it necessary to "tweak" the HTML tags to "clean up" areas where the editor became "confused." Therefore, I would encourage you to develop at least rudimentary HTML skills.

FrontPage 2003 assists in this knowledge-building by showing you the tags as you are working (see example below). The example below indicates that I was working within the body of the document (<body>), in a paragraph (<P>), and in a bolded section (<B>).

Screen image: HTML tag indicators

HTML Tag Indicators

In addition, FrontPage shows you a tab indicating each HTML document you currently have open and denotes an unsaved file with an asterisk following the file name.

Back to Top

Getting Started

FrontPage, in its simplest form, is an HTML editor. That is the functionality upon which we'll focus in this tutorial. What we won't try to cover here is how to use FrontPage to manage Web sites. The reason that I point this out is that when you open a page that already exists, make sure that you choose from the menu FILE : Open, NOT Open Site.

As with any computer application, remember to:

SAVE YOUR WORK OFTEN
Remember: a slight (even a very slight) disruption of power will cause the loss of any work that you have done that has not yet been saved, so
SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE

Start a new FrontPage document, by clicking the FrontPage icon,Screen image: FrontPage 2003 icon, or by choosing FrontPage from Start : Programs (see example below).

Screen image: starting FrontPage 2003 from the Start button

Starting Front Page via Start : Programs

You will see a new white page on which to begin creating your masterpiece! If you've already started a page, from the menu, choose FILE : Open and browse for the file that you want to work on.

Back to Top

Testing the Web Page

FrontPage Preview

As you are developing your Web page, you should periodically test it to make sure that it looks like you intend it to—remember, the graphical HTML editors only show you an approximation of what your page will look like once you display it on the Web. FrontPage provides an easy way to do a preliminary test of your page.

At the lower left corner of the FrontPage screen, find the four tabs (see example below) indicating the various views of your document. To switch between views, click the tab that you want to change to.

Screen image: views toolbar

FrontPage View Toolbar

HINT: a common error is to switch to Preview mode to look at your page, then attempt to type on or to edit your document. You MUST be in Design view in order to edit your document.

Local Web Browser File

The second way to test a Web page is to view it in the Web browser:

  1. Start your default web browser—Internet Explorer, Firefox, Netscape Navigator/Communicator—(if it is not already open).

  2. After the browser is started, from the menu, choose FILE : Open. Browser versions vary, so it may say Open Page or Open File.

  3. Look for the Web page you want to test. Again, browsers differ. You may see an Open File dialog box, or you may need to click Choose File or Browse in order to go to the place where you stored your file. (It may be on a Floppy A drive, on your Desktop, or in some folder—only you know!)

  4. After you locate your file, select and open it. You may need to click OK or Open depending upon the dialog boxes you have and your computer system and browser. Just use your common sense—you'll do fine.

  5. When the file opens in the browser window, you can look through it to see that everything looks as you want it to.

If you have already viewed the file in the Web browser then made any changes to the file in FrontPage, you must re-save the file in FrontPage. After saving the file, go to the browser and click the reload/refresh button to retrieve and view the updated page.

Browser Versions and Screen Resolution

A new feature available in FrontPage 2003 is to preview your Web page in various browsers at different screen resolutions. You should make sure that you have no browsers running, then from the menu, choose FILE : Preview in Browser (see example below). FrontPage will start each browser that you have installed and show you the Web page in the resolution that you specify.

Screen image: accessibility checker

Preview Web Page in Various Browsers and at Various Resolutions

Accessibility

Another way to test is to check the accessibility of the page, including whether or not images are "tagged" so that those with vision difficulties can read a textual description of the image. Compliant Web pages are easier for those with disabilities to access and use.

To access the Accessibility Checker, from the menu, choose TOOLS : Accessibility. You can specify which pages you want checked. FrontPage will return a report showing where problems are (see example below).

Screen image: report from Accessibility Checker

Back to Top

Creating a Web Page Title

Within the HTML code of each Web page there exists a <TITLE> tag (not to be confused with whatever title or heading is placed on the page itself for everyone to read). The information contained within the <TITLE> tag appears at the top of the browser window in the colored strip. Many of the search engines still use the information supplied within this tag as the basis for conducting searches on the Web. Therefore, it is very important that you give the Web page a good title.

The information placed in the <TITLE> tag should be a concise definition of your page. For example, you should not title your page "My Home Page" or "Steve's Systems Page." Rather, a descriptive title might be "IUPUI Introduction to Systems Analysis"—this title identifies the location (IUPUI), the type of course (introduction), and content of the course (systems analysis). If you do not insert information in the <TITLE> tag of the page, FrontPage will simply pick up the top line of the document's content and use that instead, or will leave it titled "new_page1" (which, you'll have to admit isn't very descriptive).

To insert the <TITLE> tag information,

  1. Choose from the menu, FILE : Properties.

  2. In the Page Properties dialog box (see example below), complete the Title information, then click OK.

Screen image: page properties dialog box

Dialog Box for Setting Page Title

NOTE: The information you supply for the <TITLE> tag does not have to be identical to whatever title or heading you place in the document itself.

Back to Top

Identify your Web Page to Search Engines and Browsers

In addition to using the <TITLE> tag, search engines and other browsers also identify your page(s) by meta information. Meta information is "information about information." The three primary pieces of information are the description, keywords, and author.

When you visit a search engine such as Yahoo or Google and type a word or phrase to be searched for, the text that you type is a keyword. Web authors should develop a comprehensive list of keywords that they believe a potential visitor to their site might use. The keywords should include the obvious descriptive words or phrases as well as abbreviations and common mis-spellings. If your audience is likely to speak a different language, you may also want to include comparable terms in the other language.

After you have searched for a keyword and the search engine returns a list of potential sites for you to visit, the short descriptive phrase that accompanies each site is the description that the author of that site included. The key to writing a good description is to remember that the amount of the phrase that displays in the list of Web sites is short, so you need to be concise, accurate, and inviting.

Including the author in the meta information is a way for others to contact you. Since this information is not visible except through the HTML code, it doesn't tend to attract the casual visitors to your page, but rather others skilled (or interested) in HTML who know to look for that information. I have found that other Web experts use this contact information to ask questions about certain design techniques or to report problems.

To include meta information in your Web page,

  1. Choose from the menu, FILE : Page Properties.

  2. Make sure that the General tab is selected (see example below).

Screen image: page properties dialog box

Page Properties Dialog Box

  1. To add the Author information, click the Custom tab in the Page Properties dialog box (see example below):

Screen image: page properties tabs

Page Properties Tabs

To the right of the "User variables" section (the lower white box, not the top "Systems variables"), click the Add button. In the Meta Information dialog box (see example below), in the Name field, type "Author." In the Value field, type your name and E-mail address, then click OK.

Screen image: author meta information dialog box

Author Meta Information Dialog Box

Back to Top

Setting the Appearance of the Page

To set the overall appearance of your Web page, you can choose colors for background, text, hyperlinks, visited links, and active links. You can also choose to add a "wallpaper" or a FrontPage theme. You can not, however, set colors or choose a wallpaper AND add a theme (and although it will allow you to choose both a background color and a wallpaper, the color will be hidden behind the wallpaper and will not display).

Adding a Theme

A theme is like your personal Web interior designer. By choosing a theme, your Web page has complimentary colors and designs applied to it. The image below shows samples of a plain page and the same page with different themes applied:

Screen image: example of plain Web page and the same page with themes applied

From Microsoft FrontPage 2000 Help

While the advantage of using a theme is that design decisions are made for you, there are also a couple of disadvantages to using them:

To add a theme,

  1. From the menu, choose FORMAT : Theme

  2. The Theme task pane will open on the right side of your design window allowing you to select a theme from the list of choices. NOTE: If you have not previously used themes with FrontPage 2003, you may see a message (see example below) alerting you that you need to activate a feature.

screen image: Alert regarding author-time components

Alert Regarding Author-time Components

  1. Components" option as shown in the example below. Then click OK.

Screen image: Author-time Web Components selection

Dialog Box for Selecting Author-time Component Option

REMEMBER: Each time you try a theme and save your Web page, the associated graphics are saved along with your Web page. You will need to remember which graphics are needed with your chosen theme in order to upload them to the Web server.

Setting Page Colors

You can specify the colors of the following elements:

To set the colors for any of the above-identified components,

  1. From the menu, choose FORMAT : Background.

  2. In the Page Properties dialog box, make sure the Formatting tab is selected. In the center of the dialog box, find the colors section (see example below). Each color has the automatic (or default) color displayed in a drop-down box to the right of the option. To choose a color, click the drop-down box to the right of the option you want to change.

Screen image: format background colors dialog box

Colors Section of Page Properties Dialog Box

  1. In the pop-up box, you can either select one of the basic Web colors or click More Colors to see a complete color palette (see example below).

Screen image: color palette

Color Palette

To choose a color from the color palette, click the desired color, then click OK.

Although it may be tempting to choose bright colors, keep in mind that backgrounds generally should be pale (no more than 1-2 "layers" from the center of the color palette), and the text, hyperlinks, and visited links should be different from one another, yet complimentary. For more information on using color, see Creating Effective Visual Aids/Using Color Effectively (NOTE: this is in PowerPoint format).

Once you have selected non-default colors to use in your Web page, they display in the color box so that they're easy for you to select again for other things (see example below).

Screen image: document colors dialog box

Document Colors Dialog Box

Adding Wallpaper

Wallpaper is a graphic that provides your page with a pattern or texture behind the text. There are some wallpaper graphics in Microsoft's Clip Art Gallery, you can find wallpapers on the Internet, or you can create them yourself. Keep in mind, that even though many, many files indicate that they are wallpaper files, most are too colorful or busy to enhance, rather than detract from, your page's content. Your content is the most important, and any color or image choices you make should not detract from that.

If you find a wallpaper file on the Internet that you want to use, point to the image and right-click. From the pop-up menu, choose Save Image As. Make sure that you save the file in the same location (folder/directory/disk) as your other Web files. It will retain its name and the file extension (either .jpg or .gif). While you may choose to rename the file, make sure you leave the extension as it is.

To add a wallpaper image to your page, from the menu,

  1. Choose FORMAT : Background.

  2. In the Formatting section of the Format Background dialog box (see example below), click to place a checkmark in the Background picture option.

Screen image: wallpaper selection dialog box

Format Background (Wallpaper) Picture Dialog Box

  1. Click Browse, then go to the location where you saved your wallpaper file. After you have selected the file, click OK.

Back to Top

Adding and Formatting Text

Typing text in FrontPage is exactly the same as typing in a word processor. However, formatting text requires a different toolset—but one, nonetheless easy to learn! Please reference the font toolbar (see example below) as you read through the next few sections of the tutorial.

TIP: when working in an HTML document, if you press the <Enter> key, you will get a blank line. Often you want a single-spaced appearance instead (e.g., an address block). Rather than pressing <Enter>, press and hold the <Shift> key while pressing <Enter>.

NOTE: There are a limited number of "spots" for toolbar icons, therefore, only the ones you have used most frequently may be visible. Notice the More Buttons icon, Screen image: more buttons icon from toolbar, shown in the example below (look to the far right). If you don't see an icon on your toolbar, look for the More Buttons icon (there may be two; one toward the center, the other on the far right, of the toolbar). When you click the More Buttons icon, it drops open an additional toolbar where you can click the icon you want to use. This causes that icon to display on your toolbar and another one that you haven't used in a while to "hide."

Screen image: font toolbar

Font Formatting Toolbar

Style

Generally, you'll want to keep the Style option as Normal. Other Style choices include headings, definition lists, and any specifically defined styles. Heading styles correspond to the HTML <H1> through <H6> tags. Headings are always bold and always have a space both above and below them to separate the heading from the remainder of the text. Heading One correlates to approximately 14-point size, while Heading Six correlates to approximately 8-point size.

Font Face

Font Face defines the style of letters. All of the fonts currently installed on your computer will display in the Font Face drop-down box. Some computer systems show you the font face name in the style that it will cause the letters to display.

Font faces can only be displayed on computers on which that specific font is installed. This means that if you use a special font and I am viewing your page, but don't have that same font installed on my computer, then my computer will convert that font to whatever it thinks might be close to what you wanted. Therefore, even though the stylistic fonts may be pretty, unless you are very sure of your audience and know what computers they may be using to view your Web page, you should stick with the standards.

So what are the standards, you may be asking! Font faces come in two types: serif and sans serif. A serif font face has the "little feet" (the serifs) at the bottoms of most letters; sans serif don't. Online text is generally easier to read if it is in a sans serif font face.

Notice the size of the letters in the text of the four preceding bullet points. Even though all four are written in a normal font size (approximately 12 point), they appear very different—particularly the sans serif vs. the serif font faces.

Font Size

For the most part, you should leave the text size as Normal. Even when you apply a heading style, the font size remains normal...because it is the normal size for that specific style. Be particularly careful of using small font sizes (10 point is normally the smallest size you should use for regular body text), because they can appear too small to be easily read on some monitor resolution settings.

Font Attributes

Attributes are formatting that you can choose to apply to text. The ones displayed by default are bold, italics, and underline. You should use the underline attribute only after careful consideration and for a particular, specific purpose only. Remember that Web browsers show hyperlinks with underlines (unless the user has chosen to turn off the underline or the page was created in such a way to force the hyperlink underlining to not display). I have seen people attempt to click an underlined word, thinking it was a hyperlink that would take them to another location, then become frustrated when they thought the hyperlink wasn't functioning.

To select additional attributes, from the menu, choose FORMAT : Font. Additional attributes include super- and subscript, and a lot of others that you probably wouldn't normally use in a Web page.

Alignment

By default, each element on a Web page is aligned on the left (meaning that the left margin is straight). You can also choose to center or right align elements.

HINT: To center a table on a Web page, click anywhere in the table, then right-click and choose Table Properties. Choose from the Layout Alignment drop-down menu, Center.

Numbers & Bullets

Using the number or the bullet tool to create a numbered or bulleted list causes the text to align correctly under the text rather than wrapping to the left margin under the number or bullet. For more information, see the Using Bulleted & Numbered Lists section of this tutorial.

More Indent/Less Indent

The indent tools allow you to increase or decrease the indent of a block of text. The indent moves both margins, not just the left margin. For the paragraph below, I used the indent tool, twice:

"Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal."

Font Color

When you choose a font color as described in the section on Setting the Appearance of a Page, you are selecting a new default color—the color that will automatically be applied to all text that you type in that particular page. However, you can also selectively apply color to text by highlighting the text, then choosing a color from the Font Color tool. The currently selected color is denoted by the band beneath the "A." You can either choose one of the standard Web colors shown (see example below), or click More Colors and choose a color from the Color Palette.

Screen image: font colors

Font Colors Dialog Box

NOTE: when you manually apply a color to text using the font color tool, that choice overrides any choices you may have made in the FORMAT : Background menu. While this allows you to selectively change the color of the text, you should always remember that if you "color" a hyperlink then it will no longer appear to the reader as a link, nor will it change to a visited link color. This causes the reader to lose a valuable navigation aid.

Back to Top

Using Hyperlinks

Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location.

Inserting a Hyperlink

  1. Type the text that you want your reader to see.

  2. Highlight the text.

  3. Click the Insert Hyperlink tool,Screen image: FrontPage 2003 hyperlink tool icon.

In the "Create Hyperlink" dialog box (see example below):

screen image: Insert Hyperlink dialog box

Insert Hyperlink Dialog Box

screen image: Insert E-mail Hyperlink dialog box

Insert E-mail Hyperlink Dialog Box

NOTE: some public or lab computers may be set up to not allow E-mail to be sent from Web pages, so you may not be able to test this part of your Web page if you are not using your own computer.

Removing a Hyperlink

  1. Click anywhere within the word or phrase containing the hyperlink.

  2. Click the Insert Hyperlink tool,Screen image: FrontPage 2003 hyperlink tool icon.

  3. The dialog box will change to now include a Remove Hyperlink button (see example below). Click Remove Link.

Screen image: remove hyperlink icon

Remove Hyperlink Dialog Box

Editing a Hyperlink

  1. Click anywhere within the word or phrase containing the hyperlink.

  2. Click the Insert Hyperlink tool,Screen image: FrontPage 2003 hyperlink tool icon.

  3. Edit the text in the URL box by highlighting the text and pressing the <Delete> key on your keyboard. Retype the information, then press OK.

Using Bookmarks

A hyperlink allows your reader to jump to a specific location within a Web file. The destination of this type of link is, in HTML "language," a named anchor. FrontPage calls them, bookmarks.

These types of links have two components: the link and the destination. You should create the bookmark before you create the hyperlink.

Creating a Bookmark

  1. Insert your cursor at the point in the document where you want the reader to be taken when the hyperlink is clicked. You may want to consider adding the bookmark at the end of the line above where you want the destination to be in order to provide a bit of a margin above the line where you want the reader to begin reading.

  2. From the menu, choose INSERT : Bookmark.

  3. In the text box, type the name of the Bookmark. Name the bookmark something descriptive, but simple (see example below).

screen image: Bookmark dialog box

Bookmark Dialog Box

Inserting a Hyperlink to a Bookmarked Destination

To insert a hyperlink to a named destination,

  1. At the point in the document where you want the hyperlink, type the text that you want your reader to see.

  2. Highlight the text.

  3. Click the Insert Hyperlink tool,Screen image: hyperlink tool icon.

  4. In the "Create Hyperlink" dialog box, to link to a specific spot in the same file, click Place in This Document, and select the name of the bookmark, then click OK.

Screen image: insert hyperlink to a bookmark dialog box

Insert Hyperlink to Bookmarked Location Dialog Box

To link to a specific spot in a different file, first select the file as instructed above. Then click the Bookmark button (see sample above) and select the bookmark from the list.

Back to Top

Using Images

There are many sources for images to use in your Web pages. You may purchase stock images, scan diagrams and photographs, find images on the Web, or create your own with a graphics application. When using stock images or locating images on the Web, it is important that you are certain you have permission to use them on your Web site. For purchased stock images, you'll need to read the license agreement to know under what circumstances you can use the images, whether you have permission to modify the images, and the type of credits, if any, you must provide. Most sites on the Internet also have a "terms of use" statement somewhere on the site. When in doubt, don't use. There are too many sources for images for you to use something without permission and infringe upon the rights of the copyright holder.

To save an image you find on the Web (assuming that you clearly have permission from the creator to use it and are not infringing on the copyright), point to the image and right-click (Windows users) or hold the mouse button down (Macintosh users), then choose Save Image As.

Image Types

Images that are viewable on the Web must be in one of three formats: gif, jpg, or png (This tutorial will focus on gif and jpb). Both gif and jpg are image file compression utilities—they decrease the size of the file so that it loads more efficiently when viewed on the Web.

Jpg (Joint Photographic Experts Group) files are used with photographic quality images. The files are compressed by removing a few of the millions of colors present in the image that our eyes can't see anyway. Gif (Graphics Interchange Format) are used with images with solid blocks of color such as clip art, balls, bullets, cubes, and bars. The compression occurs by recording a marker for each unique color in the image, rather than retaining every single color.

AOL has a proprietary image format—art—that you may encounter if you use AOL as your Internet Service Provider. The image reader used with the AOL Web browser is the only graphics application that understands the art format, so if you are browsing the Web using the AOL default Web browser and save images, only your AOL system will recognize the images. You can always use AOL as your Internet Service Provider, but then use a stand-alone version of Internet Explorer, Netscape Navigator, or Firefox to do your Web browsing in order to avoid this problem.

Clip art files are generally in one of two formats: wmf or bmp. Both file types are Windows' file formats, so FrontPage can read both. It also has the capability of converting either file type to a Web-readable format, which is important because unless your readers happen to have that particular clip art image installed on their computers, they will be unable to view the image unless it is converted.

Inserting Clip Art

To insert a clip art image into your Web page,

  1. From the menu, choose INSERT : Picture : Clip Art.

  2. In the Insert Clip Art dialog box (which will display to the right of Web page you are creating/editing, see example below), type a search term, make any desired selections from the Other Search Options, then click the Search button.

Screen image: Insert Clip Art dialog box

Insert Clip Art Dialog Box

  1. Click on the image you want to select and it will be inserted in your Web page. To close the Insert Clip Art dialog box, click the X in the upper right corner of the dialog box window.

Converting Clip Art

Remember that clip art images are in Windows file formats rather than gif or jpg, so it is necessary for you to convert them to a Web-readable format. To convert a clip art image,

  1. Click once on the image so that it has handles (see example below)

Screen image: example of selected image (with handles)

Example of "Handles" Denoting Image Selection

  1. Right-click and from the pop-up menu, choose Picture Properties.

  2. In the Picture Properties, click the Picture Files Type (see example below) button.

Screen image: picture properties dialog box

Picture Properties Dialog Box, Picture File Type

  1. FrontPage recognizes that most times you will be converting a clipart image to gif and has preselected that option for you (see example below). If that is accurate, click OK to accept the option.

Screen image: picture file type dialog box

Picture File Type Dialog Box

Inserting Other Images

To insert non-clip art images into your Web page, from the menu, choose INSERT : Picture : From File. Locate and select the file, then click OK. You can also click the Insert Picture icon,Screen image: insert picture icon, to insert an image.

Sizing and Placing Images

Although it is possible to re-size an image after it is inserted into the Web document by dragging the handles, you shouldn't do that unless it is a relatively small adjustment. While altering the image in this way makes the image display smaller or larger on the screen, it doesn't physically alter the file size. Increasing the image display size in this manner may cause the image to pixelate—to look grainy or "spotty." Decreasing the image display size by dragging the handles causes it to display smaller on the screen, but since the file size itself was not altered, it still takes as long for the reader to download as it would have you had kept it its original size. For anything other than a small adjustment, it is always better to open the image in a graphics application and physically resize it.

To move the image to another location in your page, click once on the image so that it has handles. Then, press and drag the image to a new location on the page (although you may find it easier to simply delete (or cut) the image and place (or paste) it into the new location. Be careful not to accidentally re-size the image by pressing and dragging on a handle. Dragging a two-headed arrow resizes an image; dragging a four-headed arrow moves the image.

Aligning an image can often be a bit frustrating. You can seldom place an image just where you want it, unless it's left-aligned, centered, or right-aligned, and only then by using the alignment tool, not be pressing and dragging to a new location. By default, images are left-aligned, as are all elements on a Web page. To center an image, click on the image so that it has handles, then click the center alignment tool (or for more precise control, insert the image into a single cell, single row table and align that).

When adding a line of text beside an image, notice that a long line of text wraps beneath the image, rather than flowing so that there are multiple lines to the side of an image (see example below).

Sample of image with default text wrapping below the photoThis is a picture of a church in the Alps. Notice that excessively long lines of text wrap beneath the picture.
Normal

To cause the text to flow beside the image (see examples below), point to the image on your page and right-click. From the pop-up menu, choose Picture Properties.

Sample right-aligned imageThis is a picture of a church in the Alps. Sample left-aligned imageThis is a picture of a church in the Alps.
Right-aligned (the image is on the right) Left-aligned (the image is on the left)

In the Picture Properties dialog box (see example below), click the Appearance tab and from the drop-down Alignment box, choose either Left or Right aligned. To create a buffer/margin around the image choose Horizontal/Vertical spacing (numbers are in pixels)—just play with the numbers until you get the spacing you like. NOTE: horizontal spacing puts equal amounts of buffer space to the left and to the right of the image; vertical spacing puts equal amounts of buffer space both above and below the image.

Screen image: picture properties alignment

Picture Properties

Back to Top

Using Bulleted and Numbered Lists

Bulleted and numbered lists are an effective way to organize your material for optimal reader "scan-ability."

To insert bullets or numbers as you type:

  1. Place the cursor in the paragraph in which you want the list to start (it doesn't have to be at the beginning of the sentence; simply in the paragraph).

  2. Click the Number or Bullet tool, screen image: Bullet and Number tool icons, and type the text, then press the <ENTER> key on your keyboard.

  3. When you press ENTER to begin the next paragraph, the next bullet or number automatically appears.

When you begin the first paragraph that you don't want to have a bullet or number, click the tool to turn off the feature, or press the <ENTER> key on your keyboard to revert to normal formatting.

You can affect indentation of lists by clicking the Decrease Indent tool or Increase Indent tool, Screen image: Indent tool icon, respectively.

To use graphical bullets or to change the number style (i.e., Roman numerals, upper case alphabetic, lower case alphabetic, etc.), choose from the menu, FORMAT : Bullets and Numbering.

Screen image: picture bullets dialog box

Graphical Bullets Dialog Box

Screen image: bullets dialog box

Plain Bullets Dialog Box

Screen image: numbering dialog box

Numbers Dialog Box

NOTE: Although it is possible to create nested lists, e.g., outlines, the HTML editor may "get confused," making it difficult to get the formatting, numbering, and indentation you desire. Until you feel comfortable working directly with HTML tags, you may want to avoid nested lists.

Back to Top

Using Tables

Tables are useful to organize information. They are especially beneficial in creating the appearance of multi-columned text. There is no way to "tab" in HTML and you should avoid using the Space Bar to control spacing since that will result in a Web page that looks good to your reader only if he/she has the same computer settings as you do. The alternative is to create a borderless table. Simple tables are easy to create; however, it has been my experience that creating or editing a complex table may require direct HTML tag manipulation.

Creating a Table

To insert a table:

  1. Click the Insert Table tool, screen image: Insert table icon.

  2. Press and drag the Table Size pop-up box (see example below) to select the number of rows and columns you want in your table. When you release the mouse button, a table of the proportions selected will display in your document.

screen image: table size dialog box

Table Size Dialog Box

NOTE: It is best if you can decide ahead of time the number of columns—it will save you a step during development.

The table will show on the Web page during development with dotted lines (see example below) so that you can more easily work with the table. The dotted lines indicate that the lines will NOT display on the Web.

screen image: sample table grid

Sample Working Table Grid

Working with Tables

NOTE: Any time you wish to work with a table, you must click within the table to place the cursor inside the table. Otherwise, you will find that the Table menu options are "grayed out" and unavailable to you.

To adjust the column widths and row heights, point your mouse at the border you wish to adjust. Move the mouse very slowly until you see the cursor change to a double headed arrow (it's quite sensitive; move it slowly), then press and drag to the new dimensions.

To enter data into the table, click your mouse cursor in a cell and begin typing.

To move from cell to cell, press the <TAB> key on your keyboard or click the mouse cursor in the cell to which you want to move.

To add an additional table row at the end of the table, position your cursor in the lower, right corner cell and press the <TAB> key on your keyboard.

To select a table/column/row/cell, click in the row or column that you wish to select, then from the menu choose TABLE : Select : Table/Column/Row/Cell (whichever one you wish to select).

To insert a row or column, click in the row or column beside which you wish to make an insertion. From the menu, choose TABLE : Insert : Rows or Column. From the dialog box, select either row or column. The example below has Columns selected; therefore, the Location indicates a Left of selection or a Right of selection insertion option. If Rows had been selected, the Location would have adjusted to show Above or Below options.

Screen image: insert rows or columns dialog box

Insert Rows or Columns Dialog Box

To delete individual cells, complete rows or complete columns, position your cursor in the appropriate location (in the cell, in the row, or in the column), then select the element (as previously described) that you want to delete. After the element is selected, from the menu, choose TABLE : Delete Cells.

To merge cells, select the cells as previously described, then from the menu, choose TABLE : Merge Cells.

To split cells, place the cursor in the cell you wish to split. Then from the menu, choose TABLE : Split Cells. In the dialog box (see example below), choose to split the cell into columns or into rows, and specify the number of columns or rows you wish.

Screen image: split cells dialog box

Split Cells Dialog Box

Table Toolbar

Screen image: table toolbar

Table Toolbar

The Table Toolbar gives you easy access to many of the same functions that you can perform through the Table menu. Depending upon how the FrontPage options are set on your computer, the Table Toolbar may display anytime you are working with tables. If it doesn't and you want it to, from the menu choose VIEW : Toolbars : Tables.

In addition to the table functions that you can access through the menu, you can:

To "turn off" either the pencil or the eraser tool, press the <ESC> key on your keyboard.

Table & Cell Properties

You can set table properties such as background and border colors, spacing, and text alignment in the Table Properties. Make sure that your cursor is within the table. From the menu, choose TABLE : Table Properties (see example below).

Screen image: table properties dialog box

Table Properties Dialog Box

In the Table Properties dialog box, you can make many choices about the table, but there are only a few that you will normally need to do anything with:

This table has cellpadding of 15 pixels
and cellspacing of 0 pixels. Notice how far the words are from the edge of the cell.

 

This table has cellpadding of 0 pixels
and cellspacing of 15 pixels. Notice the width of the cell walls and how close to the cell walls the text is.

To control cell properties such as text alignment within the cell and cell background color, make sure the cursor is within the cell whose options you want to set. Then from the menu, choose TABLE : Cell Properties.

One of the more important options in the Cell Properties is the cell vertical alignment. Notice in the example below how much easier it is to read the contents of the second row (that is top aligned) than to read the first row that has the default, middle alignment:

This cell has very little information. This cell has multiple lines of information. Notice how the cell on the left is centered, vertically, making the table contents somewhat difficult to read.
   
This cell has very little information. This cell has multiple lines of information. Notice how the cell on the left is aligned at the top, making the table contents easier to read.

Back to Top

Using FrontPage with Existing Documents

If you have an existing document, created in a word processing application, you can use it with FrontPage to create a Web document easily without re-typing the text. To convert the document from a word processing document to an HTML document, you must use the INSERT menu, rather than simply opening the file. (If you choose FILE : Open, the creating application will start and load the document, rather than opening it in FrontPage.)

To insert a pre-existing document, from the menu, choose INSERT : File. Browse for your file, then select and open it. Once it appears in the FrontPage window, it will have been converted to an HTML document for you. You will likely need to make some formatting repairs, particularly if the formatting is complex. However, it may prevent you having to re-type the entire thing.

If FrontPage appears to have difficulty opening your document, open it in its creating application, and re-save it as RTF (Rich Text Format) format rather than the regular WordPerfect, Word, or Works file format. You can find RTF in the Save As option under the drop-down "File Format" option. Rich text is a "generic" file format that is readable by almost any application.

Back to Top

Advanced and Special Features

In addition to being an HTML editor, FrontPage is a powerful Web management tool. In the File menu, you will see the Open/Close Weboptions. These options allow you to create a Web and manage it activities.

In the View menu, are other options that work hand-in-hand with the Web management. Viewing reports, folders, hyperlinks, etc. are extremely useful utilities when you are managing an entire Web with multiple files and directories.

In the Insert menu are options for Component, Form, and Advanced. Many of these options are somewhat misleading in that they make it appear that you can create forms and add counters to your Web page. This is true—only if your Web server supports these features and allows (or provides) you with the scripting to make these features functional.

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS