How to create a webpage with Microsoft FrontPage Express

FrontPage Express is a what-you-see-is-what-you-get (WYSIWYG) editor.  You can type directly onto the page and FrontPage creates all the html code automatically, so there is no need to know how to write html code.   But if you would like to learn some basic html tags, take a look at this page.

 Click on links below for printer-friendly pages.

1. Creating a New Document: To begin creating a new document in FrontPage Express,  go to the Start Menu and select Programs/FrontPage/FrontPage Express.  FrontPage will automatically open up with a blank page to edit.
2. You can also click on the new black page icon on the tool bar to open a new blank page for editing.
3. Editing the Page You're Browsing:  You can edit a page that you are already browsing in Internet Explorer.  For example if you are browsing one of your lab web pages and you've realized you made a small spelling mistake, you can easily open the page, make the changes and save the file.  To do this, go to File | Edit Page with FrontPage from the main menu.   FrontPage opens an edit window containing the document you were viewing.
4. Editing an Existing File: Choose File | Open  in FrontPage.  A window will pop up asking you where the html file is that you want to edit.  Click Browse and navigate to the location of the file on your hard drive or on your UNIX account (u drive) and select it to begin editing.

Pop-up Menus 

Pop-up menus are a useful way to get to commonly used commands: to use them,  select an object (such as text or a link) and then right-click to display the pop-up menu. The commands that are available are completely dependent on what's selected when you right-click. For example, right-clicking while on a link provides you with commands to copy the link or modify its properties. If you right-click while on an image, you'll have quick access to commands to save the image under a new name or display its properties.

Drag and Drop

Several drag-and-drop operations are available while using FrontPage Express. You can:

• Drag a link from a browser window and drop it in an edit window. This is like inserting a link in the document you're editing.
• Drag an HTML file (or multiple files) from the Windows File Manager (Windows Explorer in the SPARS Lab) and drop it in an edit window to create a link to that file.
• Drag a link from a bookmark, mail, or news window and drop it in the edit window.
• Drag an image from a browser window and drop it in the edit window. This is the easiest way to add images to your Web pages.
• Drag an image file (.GIF or .JPG) from the desk and drop it in an edit window to insert the image in the current document.

Basic Text Editing

Editing text in FrontPage Express works the same as in most word-processing applications. These features are important since writing is what you'll spend most of your time doing when creating your Web pages.

Entering Text

As you move the cursor over the edit window, it appears as an I-beam. When you click the mouse, a small flashing vertical bar marks the insertion point where text typed is placed in the window. You can start typing right away.  FrontPage Express supports the special keyboard characters, such as the ampersand and percent sign. To insert symbols, such as the copyright symbol, select Insert - Symbol.  Note: Choose Edit - Undo to cancel the effects of the most recently performed command (not all actions can be undone). Choose Edit - Redo to perform the most recent action again.

Selecting Text

To select words or blocks of text in the Composer window.

• Double-click before a line to select a paragraph, and after a line, to select the last word or element in that line.
• Double-click on a word to select the word.
• Click before a line to select the entire line.

 Cut, Copy, and Paste

You can enter text into your document by pasting from almost any source. For example, you can select text on a page you are viewing in the browser window and copy it with the Edit - Copy command. You can then paste it into the page you are currently editing by choosing Edit - Paste.
Tip: In Windows, you can right-click your mouse on selected text to quickly cut, copy, or paste the text. You can also highlight the text and use Ctrl + c to copy the text and Ctrl + v to paste the text. 

 Finding Text

Search for text on a page.

1. Choose Edit - Find and Replace to display the Find dialog box.
2. Enter the characters you want to search for in the Find What text box (Find on Page on the Macintosh).
3. Specify a search option, Match Case (Case Sensitive on the Macintosh): Makes the match case-sensitive. The default ignores case

Formatting

Formatting your text and using color goes a long way to making your Web pages or presentations unique and interesting. Add images, horizontal lines, tables, and links and you start to understand why the Web has attracted so much attention. These elements are the stuff of the Web page.
There are two types of format styles available to you in FrontPage Express:

• Paragraph formats: includes heading levels and alignment options, and affects all paragraph in the selected block of text.
• Character formats: includes font types, styles, sizes, and colors

Paragraph Formats

Paragraph formatting affects all paragraphs in the selection, or the paragraph in which the insertion point is located.

• Select the text and then choose a paragraph style and/or alignment option from the Format Tools toolbar.
• Select the text and then choose an item from the Format menu (or in Windows, right-click the selected text and then choose Paragraph Properties from the pop-up menu).

Headings 1-6

Headings divide sections of text. HTML defines six heading levels, which is reflected in the six heading choices available from the Paragraph control on the Format Tools toolbar, or by choosing Paragraph from the Format menu.  The headings differ from regular text by their type size.

Examples of heading levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

 

Address

This format is used for a Web page "signature" that indicates who wrote the page and who to contact for more information, for example:

webmaster@geo.hunter.cuny.edu

You might want to also include the date, any copyright notices, and other applicable information. This format usually appears at the bottom of the Web page and is often preceded by a Horizontal Line.

  List Item

The List Item style formats text in a list with a special symbol or bullet at the beginning of each line. FrontPage Express provides support for the following types of lists:

Unnumbered: Preceded by a bullet or other symbol.
Numbered: Preceded by numbers or letters.

Specify the type of sequential indicator to use for Numbered lists, such as 1,2,3, or A,B,C. Bullet: specify the type of bullet to use (square, circle, or open square) for the Unnumbered list style . The Starting number is the number with which to begin a Numbered list, type a number in the box.

Character Formats

You can apply character styles to one or more characters, within a paragraph, or spanning parts of multiple paragraphs. From the font menu you can select the font, font style, size, color, and special effects for your text. The following character styles are currently supported in FrontPage Express and are available by selecting the Special Styles tab from Format - Font on the  menu:

Bold Italic Code Superscript Subscript Blink Underline

Page Properties Dialog Box

Displays information about the current document and lets you provide additional information helpful to web users searching for specific topics.  Click OK to make the specified changes and close the dialog box.

Inserting horizontal lines

To insert a horizontal line:

1. Click the spot in the edit window where you want the line to appear.
2. Choose Insert - Horizontal Line. Right-click on the line and choose Horizontal Line properties to specify alignment, width, height, and the color of the line.

   Horizontal Line Properties dialog box

   

Tip: Double-clicking non-text objects in your document lets you modify their properties.

Working with Tables

Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data. But you can also use tables whenever you want to have greater control over page layout than you normally would. For example, you could combine graphics in a table to create a resume or a newsletter. Or, you could create a table that encompasses an entire page, and then nest tables within the main table for even more layout control.
To insert a table:

1. Place the insertion point where you want the table to appear in your document.
2. Choose Table - Insert Table from the menu or click the Table button on the format toolbar.
3. In the New Table Properties dialog, set the properties you want.
4. Click OK to accept the settings and close the dialog box.

New Table Properties dialog
Lets you create a table and specify attributes such as number of rows and columns, border line width, cell spacing and padding, table width and height, color, and captioning. Click OK to make the specified changes and close the dialog box. 

• Number of rows - The number of rows in the table. Type a number in the box.
• Number of columns- The number of columns in the table. Type a number in the box.
• Border line width - The size (in pixels) of the border lines around cells. Type a number in the box. Type 0 to make the border invisible.
• Cell spacing - The space (in pixels) between cells in the selected table. Type a number in the box.
• Cell padding - The padding (in pixels) within each cell. This sets the top, bottom, right, and left margins of each cell in the selected table. Type a number in the box.
• Table width - The width of the selected table. You can specify table width as a percent of the window width or as a number of pixels. If you specify the width as a percent of the window, the table width changes whenever the window changes. Type a number in the box and select "pixels" or "% of window."
• Table alignment - Lets you select a left-justified, centered, or right-justified alignment for the table within the document.

Selecting and Deleting Tables

• To select a table: place the insertion point inside the table and then choose Table - Select - Table. Then you can cut or copy the table to paste somewhere else in your document.
• To delete a table: place the insertion point inside the table and then choose Table - Select - Table then Edit - Clear.

 Adding and Deleting Rows, Columns, and Cells

• To add a row, column, or cell: place the insertion point in the table where you want the addition to appear. Then choose Table - Insert Rows or Columns or Cell, etc.).  Then select the number of rows or columns you want, and finally choose weather you want it above or below your selection. 
• Deleting a row, column, or cell is done the same way deleting a table is: place the insertion point inside the row, column, or cell you want to delete. Then choose Table - Select Row (or Column or Cell or Table), then Edit - Clear.

Table Properties dialog box
Lets you specify attributes such as border line width, cell spacing and padding, width, color, and captioning for the selected table. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click OK to accept the changes and exit the dialog box.

 Setting Cell Properties

To set cell properties:

1. Place the insertion point in the cell you want to modify.
2. Choose Table - Cell Properties... . The Cell properties panel appears, allowing you to specify properties such as spanning additional rows and columns, horizontal and vertical text alignment, text style and wrapping, cell width and height, and cell color.
3. Set the properties you want.
4. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

Note: If you are modifying a table within a table (called a nested table), you can also set the minimum height and width of the cell in the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The height and width of the cell in the nested table changes whenever the parent cell's height and width changes.

Working with Images

There are two ways that images typically are presented. The most common way is as an inline image, where the picture appears as part of the Web page. The less common way is as a separate external link that you need to download apart from Web pages. Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

Most of the current Web browsers support either of two image formats; FrontPage Express supports both formats as well:

• GIF (CompuServe Graphics Interchange Format .GIF extension)
• JPEG (Joint Photographic Experts Group .JPG extension)

GIF files lack the higher quality of JPEG files but are usually faster because they're more compact and optimized for electronic downloading.

You can get images by drawing them yourself, scanning them, or buying them as part of a commercial clip art package. You can also find GIF images out on the Net in one of the many image archives available. If you intend to use images on your Web pages, it's wise to create your own, get permission from the owner of an image, or use royalty-free clip art so you don't infringe on a possible copyright.

FrontPage Express provides two alternatives to displaying images: alternate text and low-resolution images. Alternate text is displayed in place of images. You should specify alternate text for those readers who use text-only browsers.

Low resolution images are another alternate to normal image display. You simply specify a low-resolution image to display while the normal image is loading.

Inserting an Image
Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

To insert an image:

1. Place the insertion point where you want the image to appear in your document.
2. Choose Insert - Image or click the Image button on the  toolbar. The Image Properties dialog appears, type the name and path of the image file you want to insert in your document. If you're not sure of the file name or its location, click Browse to select an image file from the directory list. Important: If you move an image file from the specified location, it will no longer appear on your Web page.  Don't forget the image file, as well as all other files that you want on your website, must be in your public_html folder.

Now that the image has been inserted, right-click on the image to open the image properties dialog box. Under the "General" tab, you will see a section that says alternative representation.   You should insert a low-resolution image if your image is a large file and will take a long time to load.  Don't assume that everyone has a T1 connection! The low resolution image will appear while the original image is loading.

Type the text that you want to have appear in place of the specified image file. You should always specify alternative text for readers who use text-only Web browsers, such as Lynx, or who have graphics turned off. If you don't include this alternative, your readers might see placeholder images instead of informative text. 

Under the "Appearance" tab, you can change the size of the image, the alignment of the text with the image, and the horizontal and vertical space around the image.

 You can also insert a video in your webpage using this dialog box or by choosing Insert - Image from the menu.  The video file should be in AVI format, to insert the video, click browse and select it from your U drive.  You can select how many times you want it to loop, and weather or not it should play once the page is loaded.

Working with Hyperlinks

A hyperlink is an active part of a document. When you click a hyperlink, you can link to

• Parts of the same Web page.
• Files on your computer.
• Computers on the Internet.

Hypertext and hyperlink documents are commonplace in computing now. Consider the MS Windows, Macintosh, and OS/2 Help systems, for example. Help typically displays highlighted areas that you can click to access additional information. This other information might be contained elsewhere in the same file or in another help file on your computer. On the Web, hyperlinks access information on your own computer, and potentially on any accessible computer on the Internet. The information you access, stored in computer files, can produce words, sounds, pictures, or even action video on your own computer.

About URLs

Uniform Resource Locators or URLs are street addresses for bits of information on the Internet. Most of the time, you can avoid trying to figure out your own URLs by simply navigating to the information you want to point to with your browser, and then copying and pasting the long string of "stuff" into your link. But it's often useful to understand what a URL is all about, and why it has to be so long and complex. Also, when you begin publishing your own information on the Web, you'll want to know something about URLs so that you can tell people how to find your Web page.

Most URLs have four parts: the protocol, the host name, the directory, and the file name; for example:

http://mysystem.com/docs/index.html

• The protocol (http:) is how the document is accessed; that is, the type of protocol or program your browser will use to get the file. If the browser is using HTTP to get to the file, the protocol part is http. If the browser uses FTP, it's ftp.
• The host name (mysystem.com) is the system on the Internet where the information is stored, such as hunter.cuny.edu. You can have the same host name but have different URLs with different protocols, for example:

  http://mysystem.com

  ftp://mysystem.com

  gopher://mysystem.com

  This is the same machine, but with three different information servers. As long as all three are installed on that system and available, there's no problem having the same host name.

• The directory (/docs) is the location of the file or other form of information on the host. The directory might be the actual directory and file name, or it can be another indicator that the protocol uses to refer to the location of that information.
• The file name (index.html) is the .HTML file for the Web page.
• Your home page in the Geography Department will be http://www.geography.hunter.cuny.edu/~username/index.html  

Saving Your Files

Once you have completed the page that you are working on and you are satisfied with the appearance, you should save your file so that all can view it.  FrontPage Express will want to save the file by default on the local machine.  This is incorrect, you will need to save the file on your U drive in your public_html directory. To save your file, go to the File menu and select "Save As" and you will see this window.  Where it says Page Title, you can add a title to your page and it will appear on the title bar of the browser.  The page location will look something similar to what is shown in the image.  Do not click on "OK", click on "As File". 

You will then get the following window:   Navigate to your public_html directory in your U: drive by using the dropdown arrow where is says "Save in".  Give the file a name, and then click Save.  Make sure you have set the proper permissions for the page.  Click here for instructions on permissions.