To Documents

Last revised 1/4/05 at 4:30pm.

Getting Started With FrontPage

Definitions

• Directory  A file that contains information about other files including name, location, size, and date last modified.  Another name for a directory is a folder.  Here are some special symbols for directories in Windows and Unix:
  
  . means the current directory
  .. means the parent directory
  / means the root directory
  ~ means the home directory
  
   
• Extension  A dot and one or more letters added to the end of a file name to describe the purpose of the file.  For example, the extensions .htm or .html indicate that the file is meant to be displayed as an HTML file.
   
• File  A collection of data stored on a computer's disk drive.
   
• Folder  See Directory.
   
• IDE (Interactive Development Environment)  An interactive Windows environment for creating computer source code for a markup language like HTML or for writing source code for a programming language like Java or C++. FrontPage is an example of an IDE.
   
• HTML (Hypertext Markup Language)  A text markup language invented in 1989 by Tim Berners-Lee at CERN for displaying web pages.
   
• Hyperlink  Text or other items on a web page that load other web pages when clicked. The text in a hyperlink is often underlined.
   
• Site  See Website.
   
• Tool Tip  A functional description that appears when the mouse cursor hovers over an item on the FrontPage IDE or other application.
   
• URL (Universal Resource Locator)  The address of a website or other information to be located.  For example, the URL for the our HCI201 home page is http://www.depaul.edu/~sjost/hci201/homepage1.htm .
   
• Website (in the FrontPage sense)  A collection of related pages to be displayed on a website.  A FrontPage Web is different than an ordinary directory because it contains additional information to allow FrontPage to publish the site in certain cases.  We,in HCI201, cannot publish Websites directly with FrontPage because we are using a Unix server which does not have the software to interface with FrontPage.
   

Items on FrontPage IDE

You should be familiar with some of these items from other Microsoft products like MSWord.

• Title Bar  The blue bar at the top of the IDE that contains “Microsoft FrontPage” and the name the document being edited.  To move the IDE window, left click on the title bar and drag the window to a new location.
   
• Control Box  The icon in the extreme upper left of the IDE or the three squares in the extreme upper right of the IDE that allow the user to minimize, maximize, restore, or close the IDE window.
   
• Resizing Border  By dragging the border (excluding the title bar) of the IDE window, it can be resized.
   
• Main Menu  The Main Menu is used to perform common tasks in FrontPage.  Here are the Main Menu items:
  • File  Create, Open, Close, or Print files in the Web.
    
  • Edit  Cut, Copy, Paste, Find, Replace, Undo, Redo.
    
  • View  Show one of the views listed in View Options below, Views Bar, Reveal Tags, Toolbars, Refresh.
    
  • Insert  Break, Horizontal Line, Inline Frame, Date and Time, Symbol, Web Component, Picture Hyperlink, Comment.
    
  • Format  Font, Paragraph, Bullets and Numbering, Theme, Style (Cascading Style Sheet).
    
  • Tools  Spelling Check, Options, Page Options.
    
  • Table  Features for inserting and formatting tables.
    
  • Frames  Features for inserting and formatting frames.
    
  • Window  Display existing windows.
    
  • Help  Show help for FrontPage
     
• Standard Toolbar  The Standard Toolbar provides much of the same functionality of the Main Menu items with fewer mouse clicks.  Here are the Standard Toolbar items:  Create, Open, Save, Search, Publish Web, Toggle Pane, Print, Preview in Browser, Spelling, Cut, Copy, Paste, Format Painter, Undo, Redo, Web Component, Insert Table, Insert Picture From File, Drawing, Insert Hyperlink, Refresh, Stop, Show All (Paragraphs), Help.
   
• Formatting Toolbar  The Formatting Toolbar is used to modify the appearance of selected items on a page.  Here are the Formatting Toolbar items:  Style, Font, Font Size, Bold, Italic, Underlined, Align Left, Center, Align Right, Justify, Increase Font Size, Decrease Font Size, Numbering, Bullets, Decrease Indent, Increase Indent, Outside Borders, Highlight (Yellow), Font Color.
   
• Views  Provides various ways of viewing the files in a Web.  Here are the possible views:
  • Page  Allows editing of a web page.  See the various ways in which a file can be viewed in View Tabs below.
  • Folders  Displays the contents of a web organized into files and folders.
  • Reports  Generate reports about the web pages, such as missing files, broken links, and slow-loading files.
  • Navigation  Allows the design of the Web's structure including navigation and link bars.
  • Hyperlinks  Provides a graphical display of all the hyperlinks in the website and their connections between web pages.
  • Tasks  Allows the Web designer to specify tasks to be completed.
     
• View Tabs  Provides various ways of viewing a file:
  • Normal  Provides a WYSIWIG view of the file with the possibility of visible tags (Main Menu View and Reveal Tags) or visible paragraphs (Standard Toolbar Show All).
  • HTML  Shows the HTML source code in the file.
  • Split Shows both the WYSIWIG view and the actual code simultaneously.
  • Preview  Provides a WYSIWIG file of the file without the possibility of visible tags or paragraphs. The Preview is supposed to show how the web page will actually be displayed in the browser, but it is not perfect.
     
• Status Bar  Shows the estimated download time of the page at various connection speeds.  In HTML View, the current line and column are shown.
   

Creating a FrontPage Single Page Website

1. If you have not already done so, make this change in the MS File Explorer:
   Select Main Menu Tools >> Folder Options.  Select the View Tab and uncheck the box in front of “Hide extensions for known file types.”
    
2. If you have not already done so, use the MS File Explorer to create the folder c:\hci201-smith, where Smith is replaced by your last name.
    
3. Invoke FrontPage by selecting Start >> All Programs >> Microsoft Office >> Microsoft FrontPage 2003.
    
4. Close the default page named new_page_1.htm that automatically opens when FrontPage is invoked.
    
5. Select File >> New >> One Page Website. On the Website Templates dialog, make sure that the General Tab is selected and that the One Page Website icon is highlighted.
    
6. Browse for the location where you want to put your new website on My Computer. Do NOT enter the Site Name at the bottom of the New Web Site Location dialog.
    
7. Add the website name at the end of the location of the new website in the dropdown box after the label "Specify the location of the new Web site:" You should add the website name ex1smith at the end of C:\hci201-smith\
    
8. Change the name of the file index.htm to ex1.htm.

9. Double click on the file ex1.htm to open it. Enter the text of your web page using the WYSIWIG editor available in the Normal View.
    
10. Close the website when you are finished: File >> Close Site.
     

Opening an Existing Website

1. Select File >> Open Site. Browse for your website in the Open Site dialog. Highlight the site you want and click the Open button.
    

Adding a New Page to an Open Website

1. Make you have an open FrontPage Website.
    
2. Go to the Folders View.
    
3. Click on the leftmost icon in the Toolbar with tooltip "Create a new normal page." Alternatively, you can right click in the contents area (not on any existing file or folder) and select New >> Blank Page.
    
4. Change the name of the page from new_page_1.htm (or index.htm) to whatever you wish by selecting the Website Tab and clicking on the file name to select it and typing in the new name.
    
5. Double click on the name of a file to open the page.  This also changes you to the Page View.
    
6. Type in the contents of the new page.  You can also cut and paste content from an existing page or from a text file created with Notepad on a different computer. It is best not to cut and paste from MS Word because the resulting HTML code is more complex than necessary.
    
7. Save the page by selecting File >> Save or use the Save button in the toolbox.
    

Miscellaneous Notes

1. To add a heading, select one of Heading 1, Heading 2, ... , Heading 7 in the Style dropdown box.
    
2. Press Enter to start a new paragraph (blank line in between paragraphs).
    
3. Press Shift-Enter to enter a line break (no blank line after line break).