Introduction to Microsoft Front Page


More About FrontPage Opening FrontPage  Basic Features 

More About FrontPage

All Windows based programs operate under the same principles.  FrontPage is what is known as a Windows Application Program.  In other words, it is a program which allows the user (ie: YOU) to accomplish a given task.  Applications are designed for specific purposes... examples include wordprocessing (eg: wordpad, Word, WordPerfect, etc.); web-browsing (eg: Internet Explorer, Netscape, etc.); image creation/manipulation (IrfanView, Microsoft Image Composer, Paint, Corel PhotoPaint, etc.); etc.  FrontPage is an example of an HTML Editing Application Program -- it provides a user-friendly, interactive interface for the creation of HTML documents (webpages and websites).  What this means is that for web-design, it makes it unnecessary to know a lot about HTML (or anything about it for that matter).  The program supplies the user with everything s/he needs to accomplish with a few clicks of a mouse what could take dozens of lines of code to create. Additionally, it has the added bonus of being a Visual Interface.  That is, it allows the user to see what his/her document will actually look like during the development process.  With HTML, one has to write the code and then see if everything is where s/he wants it to be.  It ought to be noted however, that for experts in web-design HTML is quite simple -- they can see the results just by examining the code (kind of like NEO on The Matrix).  For everyone else... we need a visual display.  Not to mention the fact that a single spelling mistake can ruin a perfectly good block of code and take quite a bit of review time in terms of problem-analysis to solve.

BACK TO TOP


Opening FrontPage

First of all, you (or someone else) will have had to install the program.  It is available on the Microsoft Office Suite disk and individually.  The point is: if you don't install it, you can't use it.  As a Windows based application program, there are a number of ways to access it (depending on how often you wish to use it and how much you know).  First of all, just like all other applications, it can be found in the Program Files section of the C:\ drive (this is the default location during install... if you've specified that it be installed somewhere else, then you'll have to find it).  To locate it in this case, do one of the following: 

1.
  • Double-click on the MyComputer Icon on your desktop or right-click and choose "Open" or "Explore"
  • Double-click on the C:\ drive Icon (usually second from the left)
  • Double-click on the Program Files Icon
  • Double-click on the Microsoft FrontPage Icon
  • Keep double-clicking until you reach an Icon called Microsoft FrontPage and which looks similar to this:
2.
  • Right-click on the Start Button located in the bottom left hand corner of your screen.
  • Select "Explore" from the pop-up list
  • In the file menu which is displayed on the left, select the Program Files Icon from the menu under C:\, then select Microsoft Front Page from the menu on the right.  Continue as in option 1. 
3.
  • Left-Click on the Start button.
  • Hold your mouse over Program Files from the pop-up menu and choose the Microsoft FrontPage Icon from the list.
4. Create an Icon on the Desktop for FrontPage by following the steps in Option 1, 2, or 3 and then right-clicking the Microsoft FrontPage Icon and choosing the "Create Shortcut" option. Make sure you either send the shortcut to Desktop or drag it there by holding the left-button of the mouse down on the icon and moving it to the desktop before you let go.  OR  cut/copy the program and paste on the Desktop.  The icon will then be shown on the Desktop whenever you log-on to Windows:

BACK TO BACK TO TOP


 

Understanding the Basic Features of FrontPage

As stated above, all Windows based Application Programs operate in much the same way.  As such, many of the features of a given program are common to all.  Therefore, if you are in any way familiar with using programs such as Word or WordPerfect, you have probably seen much of the following.  Let's start with the basic components of the program interface (what you actually see when you look at FrontPage).  Here is a screen-shot from  FrontPage 2000 showing a new document followed by a breakdown of the major components:

The Title Bar The Menu Bar The Tool Bar The Formatting Bar
The Views Bar Normal Interface HTML Interface Preview Interface


1. The Title Bar

This is the bar at the top of the program interface for most Windows programs.  In this case, the title bar indicates that the program is Microsoft FrontPage and includes a picture of the FrontPage Icon (a familiar up-left arrow in a blue circle).  Additionally, the title bar also normally includes the Minimize button , the Maximize button , and the Close Program button.  The first two allow you to jump quickly from program to program while the third allows you to close it down and complete a session.  Always make sure you save your work before closing the program... normally it will prompt you to save before closing but I've experienced situations where the program has skipped this step.

Back to Basic Features Menu

BACK TO TOP


 

2.  The Menu Bar

This bar is featured directly under the title bar in a given program.  Whereas the headings or names of the menus in the menu bar are quite common, a quick perusal of each will quickly show you that this is not the case!  Each heading in the menu bar has a drop-down list which appears when the heading is clicked.  Again, this is a common feature.  Additionally, you will notice that in the heading: File, that the F is underlined whereas in the heading: View, the V is underlined.  This is indicates a shortcut for those of us who are keyboard friendly rather than mouse-happy... that is, you can access the same dropdown menu by holding the <Alt> key and pressing the underlined letter.  Hence <Alt> + "a" will yield the dropdown Table menu.  Likewise, the same principle applies for selecting items from within the dropdown menu.  Hitting Esc (Escape) on your keyboard will close the dropdown menus.  Note:  if a double chevron (ie down arrows) appear at the bottom of a dropdown menu, this indicates that only the most commonly used items have been shown. This common list is subject to change, depending on your use of the unseen items.  For your understanding of this matter, I have included two screenshots of each dropdown menu: a shot of the initial dropdown menu (first image in each section) and an expanded dropdown menu (second image in each section).  Additionally, some of the items have arrows pointing to the right... these have sub-menus from which you may choose from a number of options.  Here is a breakdown of the menus in the list by image.    Many of these items will be very familiar and/or self explanatory.  You will notice as well that some of the options in each menu have Icons or Pictures next to them... these indicate that this item is repeated in the Tool Bar.

THE FILE MENU

     

New – this choice will allow you to open a new “page or web” depending on your desire. There are other options but will not be dealing with them in this introduction..
Open and Close -- these allow you to open a new page or close the current page.  Be sure to save your work!
Open Web – this links the user directly to the “My Webs” section in “My Documents” located on the C:\ directory. We will discuss more on the concept of “webs” in another section.
Save – Allows the user to save the current document.
Save As... – Sometimes it is desirable or necessary to save the current document under a different name.
Save All – Saves all open pages automatically.
Search – Finds files and pages based on the criteria you set.

Import – allows you to copy files and folders directly into your website.
Preview in Browser – sometimes it is better to view your page in an internet browser program like Explorer or Netscape.
Page Setup – allows you to modify the design and layout of your page.
Print Preview – gives you a different perspective of your work (not often used in this program because the idea is not to print but to publish).
Print – self explanatory.
If you have configured your system to send email from outlook express, this will allow you to send your work as an email attachment.
Properties – allows you to view the properties of the current or selected page(s).

Recent Files – allows you to view the last few files that you have had open.
Recent Webs – has the same function as Recent Files, but with complete webs. This makes for quick referencing.
Exit – Quit the program. If you have not saved your current page or web, the program will prompt you to do so. If you choose “no,” then your information will be lost.

 

 

 

 

THE EDIT MENU

     

Undo – automatically reverses any blunders that you may have made (eg. You cut something out by accident and you want it to come back.
Redo – When you realize that you want something reversed back to the original change.
Cut – removes a selected item/text and places it on the clipboard.
Copy – copies a selected item/text without removing it and places it on the clipboard.
Paste – inserts an item from the clipboard into a selected area... you can paste cut and copied items/text.
Paste Special – sometimes the items selected, cut, or copied have a special format (eg. A table).
Delete – cuts a selection without placing it on the clipboard.
Select All – selects all items/text in an open document/page.

Find – allows you to search through a document/page for specified text or web.
Replace – searches for and replaces text or webs.
Check Out – makes a specified file unavailable for editing by anyone but you.
Check In – allows others to edit a previously checked out file.
Undo Check Out – simply does what it says.
Task – not normally used by average users.

 

THE VIEW MENU

   

Page – allows you to view the page you have selected to work on. It is the view you use when you create, edit, and publish.
Folders – shows how the content of a web is organized.
Reports – allows the viewing of various site reports or summaries.
Navigation – allows you to see the structure of your web in an organized chart/diagram.
Hyperlinks – allows you to view the status of hyperlinks in your web.
Tasks – allows you to view tasks that you have set for yourself using the edit menu... this is a way of helping you plan you web.
Views Bar – allows you to view or hide the displays bar on the left of your screen. This bar contains quick links to many of the options listed in this menu.
Folder List – allows you to view the complete contents of your web while still working on individual pages.

Navigation Pane – allows you to view the navigational structure of your web.
Reveal Tags – displays or hides html tags in the Normal tab view.
Toolbars – allows you to display or hide a variety of toolbars that are available for your use.
Refresh – a very useful tool... you will need to refresh your page/web constantly if you want to be sure that any changes you have made are going to be effective. Basically, this works the same as the refresh option in a web browser.

THE INSERT MENU

   

Break – inserts a page break at the selected insertion point. Many browsers will not display empty paragraphs (this tends to make a page look jumbled) but they will display breaks as blank spaces.
Horizontal Line – inserts a basic line that can be modified for use as a separator bar, a heading bar, etc.. 
Date and Time... – inserts the date and time according to the format you choose.
Symbol – a wide variety of symbols are available for your use. is just one example.
Comment – Sometimes an author or editor may want to make a comment on an item or selection of text. 
Navigation... – insert navigation points based on the structure of the website.
Component – inserts a component such as a scrolling marquee, a hover button, etc. This is a very useful tool.
Database – insert a new or previously composed database into your website.
Form – insert a form such as a text box or a depressible button, etc

Advanced - contains features such as ActiveX Controls, Java Applet controls, etc.   This is beyond the scope of our current discussion.
Picture – allows you to insert a picture from a file, clip art, or other location (eg. From the internet).
File... – allows you to insert a previously created file directly into your site.
Bookmark – a kind of link for internal navigation in a website. It creates a hyperlink between two points on the same page.
Hyperlink – similar to a bookmark but it links the selected text/item to another page either in your own web, an email address, or on the internet.

THE FORMAT MENU

    

Font – this item allows you to change the colour, size, appearance, etc. of the font you are using.
Paragraph – allows you to format an entire paragraph (spacing, placement, etc.)
Bullets and Numbering – allows you to set a bullet list/number list; allows you to change the style of bullet/numbering, etc.
Borders and Shading – formats the border/shading of tables and other selected items on a page, including the page itself.
Position –sets the wrap style and positioning of selected pictures and items.
Dynamic HTML Effects – allows you to insert java script at the click of a button which will cause the appearance of the text or item that you select, depending on the selection. More on this in later sessions.
Theme – Front Page has a number of themes that can be selected; these create a sense of unity and coherence in a web. More on themes in later sessions.

Style – creates or modifies the style for a page (the font, paragraph settings, etc.)
Style Sheet Links... – links the active page to a cascading style sheet.
Shared Borders... – sets shared borders for the current page or for the entire web. Shared borders are regions where you want your material to appear consistently.
Page Transition... – creates a special effect when a user enters or leaves a page (eg. Dissolve, Spiral, Box In, etc.)
Background – part of the Properties of your page. you can modify the background, font, hyperlink, colour or even insert an image. Note: Images appear tiled therefore some may not be suitable for web design due to contrast with other visuals and text.
Remove Formatting – a failsafe... at any time, you can remove the last change to the format. This has the same function as “undo”.
Properties – this controls how the font is presented on the page or entire site.

THE TOOLS MENU

    

Spelling... – this is the spell checker for Front Page. It is always a good idea to double check.
Thesaurus... – why use the same words over and over?
Recalculate Hyperlinks... – updates the display of the current web.
Macro – a macro is a user defined shortcut for performing commonly used actions. You can write short programs that make your work easier (<ctrl>+i = italics is a pre-installed macro).
Add-Ins... – registers, loads, and unloads add-ins that you have installed on your computer.
Customize... – Allows you to add and take options away from existing menus and toolbars.
Web Settings... – displays web settings for viewing and editing.
Options... – allows you to customize your internet loading options, such as whether to overwrite existing pages during upload, etc.
Page Options... – displays options for viewing and editing pages, including general options for creating thumbnail images, font settings, color coding for the HTML tab, and browser- compatibility settings.

THE TABLE MENU

   

Draw Table – allows you to use the mouse to create a table by dragging the image.
Insert – allows you to specify the dimensions and number of rows/columns before inserting the table.
Delete Cells – allows you to select and delete specific cells in a table.
Select – allows you to choose cells, rows, columns, or the entire table for modification.
Merge Cells – Joins two or more cells together to make one larger cell.
Split Cells... – breaks a cell into two cells.

Distribute Rows Evenly - spaces unevenly set row heights to average intervals.

Distribute Columns Evenly - sets all columns in a table to equal widths.

AutoFit -automatically sets the width of all columns to the exact dimensions of their contents.

Convert - gives the user the option to automatically convert text into tables or tables into text.  You can create tables to surround your text or take tables filled with text and remove the table borders leaving just the text.  

Properties - controls how the columns, rows, cells, text, borders, etc. are presented in a table.

 

THE FRAMES MENU

   

* Frames are used to present more than a single webpage at the same time.  They are often difficult to manage and have become rather passι.  I, however, still like them.  This introduction to basic web design does not go into the construction of frames pages in any great detail however, if you would like to see such a page in action, visit St. Joseph's main page!  Passι or not, it's still one of the best school sites in NL (even if I do have to say so myself).

Split Frame - splits a selected frame either vertically or horizontally.

Delete Frame - I won't insult your intelligence.

Open Page in New Window -- frames can be quite small and make the pages displayed within them quite difficult to work on... for this reason, this option allows you to open the same page in a new window for design/editing... changes will be made to both open versions of the page.

Save Page - saves a page in an individual frame rather than as part of a group.

Save Page As... - sometimes it is desirable to save a page under a different name... your reasons are your own. 

Frame Properties - allows you to manage how the frames are displayed on a given page.

THE WINDOW MENU

        

New Window -- opens a new, blank, page for you to work in.

This menu item, like all which bare its name, allows the user to shift from window to window (hence the name of the operating system: WINDOWS).  That is, you can have multiple pages open at the same time and work between them.  This function allows you to copy and paste items, images, hyperlinked words/images, etc. between open pages of the same offline web.  It can make your life easier but you should always make sure that your hyperlinks work before saving so that the internet is not trying to find files on your A:\ drive or something.

THE HELP MENU

   

Microsoft FrontPage Help -- an interactive interface which allows you to search for information about how to use the various components of FrontPage, ask questions to an annoying paper-clip lifeform, search through a contents, or look up information in an index.  Generally, this is the most direct and comprehensive way to solve virtually any problems you encounter and a great way to find out new things to try.

What's This? - this allows you to click on any icon in the menus or in the toolbar and get a brief explanation of its function.

Office on the Web - this links directly to Microsoft's Office Website

Detect and Repair... - automatically searches out, detects, and fixes any problems that may have occurred in your FrontPage document.  NOTE:  never depend entirely on these things... it's like using the "spill chick" to fix spelling mistakes!

About Microsoft FrontPage - this provides you with licensing information, technical support, network information, system information, copyright date and program version number, etc.

Back to Basic Features Menu

BACK TO TOP


The Tool Bar

This bar is located directly under the Menu Bar and essentially contains shortcuts (in the form of depressible buttons) to commonly used items in the various menus.  Each item is indicated by an Icon (pictorial image) which looks similar to what it represents.  The Tool Bar may be modified to fit the user's preferences... the one pictured above contains each available item.  These can be removed by clicking on the down-arrow at the extreme right of the bar and selecting "Add or Remove Buttons".  NOTE:  Some of the icons are initially presented without colour, like the "Publish Web" button... this means that until you do something (like highlight some text, for example) it is unavailable for use.  Here is an explanation of the buttons in the Tool Bar:

This is the New Page button.  Essentially, clicking this button opens a new page in the workspace window.  A down-arrow next to this button initiates a dropdown menu which offers further options of starting a new Web, a new Folder, or a new Task.

This is the Open button.  Like its counterpart in the File menu, it allows you to open an existing page and the down-arrow next to it allows you to open an existing web.

This is the Save button allows you to quickly save your current page.  Notice that this does not include a Save As... option.  Be careful -- always check to make sure you aren't going to overwrite something you don't want to lose!

This is the Publish Web button.  It allows you to publish the files in the current web when you are ready to present your web for public viewing, or when you want to update the files in your web. You can publish using HTTP (HyperText Transfer Protocol) if the the FrontPage Server Extensions are installed on the Web server to which you are publishing.  It also allows you to publish the current web using FTP (File Transfer Protocol) if the FrontPage extensions are not on your server.  NOTE:  generally, I find it best to upload my webs using a WSFTP Program.  More on this under the section for Publishing to the Internet.

  This is the Folder List button which allows you to open and close an explorer like view of all folders in a given web.

The Print button simply prints all text and images displayed in the normal view of your workspace window.

The Preview button allows the user to see what the page will look like when it is displayed in a web browser... the default setting is to preview in Internet Explorer.  NOTE:  In order to preview in a browser, you must have already saved all information in the page you wish to view.

This is the Spell Check button.  The name says it all... it will check the spelling of a word, in a paragraph, or in an entire page.  Be careful... sometimes words will appear to be spelled wrong, such as a person/place name, when it is actually correct.  Additionally, abbreviations and Canadian spelling (ie: colour) will show up as misspelled as well.  Use spell check as a resource, not as a rule!

  This is the Cut button.  It will appear greyed-out until you select some text or an image.  It literally cuts out what you have selected.  Don't worry... you can paste it back-in (as long as you don't cut something else first).  When an item is cut or copied, it is saved to the Clipboard... a place where Windows stores cut and copied images, text, etc. and keeps it for a period of time just in case you want it back again.

Similar to Cut, the Copy button saves material to the clipboard but it does so without actually removing the selected item first. 

Paste from Clipboard allows you to paste items you have cut from other places directly into your FrontPage document.

Format Painter allows you to copy the formatting of a selection directly to other text... basically it allows quick and easy reformatting of various items without going through all of the steps for each item.

The Undo button allows you to quickly undo a mistake (such as accidental cutting or formatting).

Redo is used when you accidentally undo something.  It's hard to make mistakes that last in FrontPage!

This is the Insert Component button.  It is used to insert features that go beyond the normal text you are used to using.  These features include items like , Scrolling Marquees , and a variety of other items that would require knowledge of code forms to accomplish.

The Insert Table button is an essential tool for all web design.  Basically, the most efficient way to format a webpage would be to use tables (hidden or otherwise).  This button allows you to insert a table with a specified number of rows and columns by highlighting empty blocks in a sample matrix.

Insert Picture from File allows you to quickly insert a picture from any location on your computer.  It ought to be noted however that your pictures ought to be all saved in the same parent directory folder as the webpage/site.

The Insert Hyperlink button allows you to convert normal text or pictures into links to another position on a page, on another page in your web, or to another file located somewhere on the internet.

The Refresh button allows you to re-load a page after you have made changes.  Some changes cannot be viewed until the page has been refreshed.

The Stop button is almost self-explanatory.  That is, it stops a current action.  However, it is important to note that it only applies to two kinds of actions: loading a page or following a hyperlink.  As such, it is most often greyed out as shown here.

The Show All displays all hidden page elements such as line breaks, unknown html tags, form markers (such as in a scrolling marquee or other java form) etc.  For most users, this button is irrelevant. 

Front Page Help -- self explanatory.  Click here if you can't figure out how to do something or have some questions that you need answered.  

Back to Basic Features Menu


 

The Formatting Bar / Font Bar

This bar is used to directly make specifications as to the layout of text and images on a page.  Primarily, the formatting bar is designed to manipulate text but many of its functions can govern the display of images or table-layout as well.  For this reason, the formatting bar is often referred to as the "font bar."  A quick look will explain why. Again, as with the Tool Bar all of these elements are merely shortcuts to their counterparts in the dropdown menus.  Here is a breakdown of the major elements of this bar:

The Style formatting option allows you to select from a list of font-styles.  This saves the time of inserting code... for example "Heading 1" (indicated in code by <h1>...</h1>) is the largest formatting for font display on a webpage.  

 

 

The Font formatting option allows you to choose from a large variety of fonts (these are installed by default with the FrontPage software and can be added to through downloads and font-package purchases).

 

 

The Font Size formatting option allows the user to choose from a variety of display sizes from a minimum of 8 to a maximum of 36.

 

 

  The Bold button allows you to bold any selected text, regardless of size, style, etc.

 

This button places any selected text in Itallics.

 

The Underline button underlines any selected text.

 

The Align Left button juxtaposes the selected text and/or images, etc. with the left margin of the page or to the left border of a table.  

 

The Align Center button centers all selected text and images on the page or in a table.

 

The Align Right button juxtaposes the selected text and/or images, etc. with the right margin of the page or to the right border of a table.

 

The Numbering button allows you to create a numbered list from scratch or convert existing text into a numbered list.

 

Bullets is a button which performs a function similar to Numbering, but instead of having progressive increments, shapes indicate each point in the list. 

 

The Decrease Indent button is useful for formatting previously created lists (butteted or numbered).  It moves an indented bullet back to become part of the frame list.  It is also used in place of undo when a mistake is made with the Increase Indent button! 

 

The Increase Indent is used to move the selected text further away from the margin or to create sub-lists within established lists.  These sub-lists are marked graphically by position and by an alternate bullet shape.

 

  Highlight Color allows you to create a coloured background behind any selected text to make it stand-out from the rest of a documentGenerally this item isn't used because it is a rather elementary and overt method of emphasis.

 

The Font Color allows you to change the colour of any selected text.  

 

The Add or Remove Buttons tool is selected by depressing the  down-arrow at the end of the formatting bar.  Here, I have shown the menu with all items selected.  If you didn't want to have the highlight color displayed (because you never use it) you could get it out of your way for good.

Back to Basic Features Menu


 

The Views Bar

The Views bar, shown by default at the left of the workspace in FrontPage, lets you switch quickly from one view of your web to another. You can hide the Views bar if you want more space to view pages in Page view, reports in Reports view, and so on.  To do this, you must open the dropdown menu from Views (ironically enough) and remove the check mark next to the Views Bar item in the list. If the Views Bar is not currently displayed in your copy of FrontPage, follow the same steps to make it visible.

Back to Basic Features Menu

BACK TO TOP


Normal Interface

In my description of the program, I noted that FrontPage allowed the user to compose web documents without having to worry about knowing HTML.  The Normal Mode, indicated by the Normal Tab  at the bottom of the composition window, is the main workspace of the average FrontPage user... it makes it possible to construct relatively complex documents without even having to look at a line of code -- this kind of format is known as WYSIWYG.  Basically, this is a pseudo-technical adjective used to describe any kind of formatting which allows the text and images to be printed (or displayed) exactly as it appears on the screen during construction.

Back to Basic Features Menu

BACK TO TOP


HTML Interface

While it is possible to construct web documents entirely in WYSIWYG fashion, I also hinted in my earlier discussions of FrontPage that it would not be invaluable to have some sort of HTML knowledge.  In other words, you don't need to know HTML but if you do, it could actually make certain things easier.  To facilitate those of you who already know some basic HTML, FrontPage also has an HTML Interface which can be accessed by clicking on the HTML Tab next to the normal tab at the bottom of the screen.  This interface allows the user to manipulate the FrontPage document from the inside-out, as it were, by altering, adding to, taking away, etc. parts of the code.  Additionally, java scripts, etc. can be inserted (with the right knowledge) into the document, allowing for endless possibilities in terms of what can be created and displayed.

NOTE:  For those of you who are unfamiliar with HTML, this interface provides an added benefit -- by starting with a blank page and inserting items in the normal interface and switching back and forth between it and the HTML interface, you can actually learn HTML!

Back to Basic Features Menu

BACK TO TOP


Preview Interface

The Preview Interface, accessed through the Preview Tab , allows sneak peeking at the finished result before a document is ready for upload.  Similar to a web browser, Preview allows the user to explore hyperlinks, see components like marquees in action, examine the effects of hover buttons, etc.   It should be noted however, that the layout may not be precisely as it will appear in a browser and that in order to preview certain items (eg. hover buttons) it is necessary to save all changes first.  

Back to Basic Features Menu

BACK TO TOP


Back to Contents