|
|
|
|
|
|
|
 |
 |
 |
 |
 |
|
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.
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.
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, 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 Web.
As with any computer application, remember to:
SAVE YOUR WORK OFTEN
|
| Remember a power surge or 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, 
,
or by choosing FrontPage from Start : Programs (see example below).
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.
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 three tabs (see example below) indicating the various views of your document. To switch between views, click the tab that you want to change to.
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 Normal view in order to edit your document.
The second way to test a Web page is to view it in the Web browser:
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.
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 Intro 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.
To insert the <TITLE> tag information,
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.
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,
Page Properties Dialog Box
Author Meta Information Dialog Box
Keywords Meta Information Dialog Box
Description Meta Information Dialog Box
Page Properties Dialog Box with Meta Information
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).
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:
From Microsoft FrontPage Help
While the advantage of using a theme is that design decisions are made for you, there are also some disadvantages to using them:
You can specify the colors of the following elements:
To set the colors for any of the above-identified areas,
Colors Section of Format Background Dialog Box
Color Palette
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).
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,
Format Background (Wallpaper) Picture Dialog Box
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, 
, 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 are usually 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."
Generally, you'll want to keep the Style option as Normal. Other Style choices are the heading 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 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.
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.
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.
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 from the menu, choose TABLE : Table Properties. Choose from the Alignment drop-down menu, center.
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.
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."
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.
Font Colors Dialog Box
NOTE: if you manually apply a color to text using the font color tool, that choice will override any choice you may have made in the FORMAT : Background menu. While this allows you to selectively change the color of the text, you should be aware 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; thereby causing the reader to lose a valuable navigation aid.
Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location.
.In the "Create Hyperlink" dialog box (see example below):
Insert 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.
.
.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.
To insert a hyperlink to a named destination,
.
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.
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 (Mac users), then choose Save Image As.
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 jpg). 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. 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 or Netscape Navigator 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.
To insert a clip art image into your Web page,
Insert Clip Art Dialog Box
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,
Example of "Handles" Denoting Image Selection
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, 
, to insert an image.
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. 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).
 This is a picture of a church in the Alps. |
| 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.
|
This is a picture of a church in the Alps. |
This
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.
Picture Properties
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:
,
and type the text, then press the <ENTER> key on your
keyboard.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, 
, 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.
Graphical Bullets Dialog Box
Plain Bullets 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.
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.
To insert a table:
.
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.
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.
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.
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:
. Press and
drag your cursor (which will look like a pencil) vertically or horizontally
to draw a new cell within your table. If you drag your cursor diagonally,
you will create a new table, either separately, or within an existing
table, depending upon the location of the cursor when you start
dragging.
. Press and
drag your cursor (which will look like an eraser) over the cell border (you
will see the lines that will be deleted as red) you want to delete; when you
release the mouse, the borders will be deleted.To "turn off" either the pencil or the eraser tool, press the <ESC> key on your keyboard.
.
.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).
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 |
| and cellspacing of 0 pixels.... | Notice how far the words are from the edge of the cell. |
| This table has... | and cellpadding of 0 pixels |
| 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. |
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.
In addition to being an HTML editor, FrontPage is a powerful Web management tool. In the File menu, you will see the Open/Close Web options. 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.
Return Home