FrontPage 2003 Tutorial

This purpose of this tutorial is to show how FrontPage can be used as another tool to building WebPages and / or sites. This was prepared by Anthony Larrain for my Hci201 students at DePaul University. Some of the examples assume familiarity with HTML and CSS code.

Starting FrontPage

1. Click Start
2. Courseware Applications
3. Installed Apps for CTI
4. Select Front Page

When you first start FrontPage this is what you should see.

• The Major Sections are listed in red.
• The Document Window is where you will type your text.
• The Task pane is where you can select from pre defined templates.

Your First Front Page web page

• When you start FrontPage you are presented with a new blank page in the document window.
• Save this blank page as first.html
• Make sure Design is highlighted on the Page View Buttons. Look above at the screen shot of FrontPage.
• Start typing text into the upper left corner of the document window.
• The text will flow from left to right. When it reaches the right margin it will wrap automatically, continuing on the line below.
• To start a new paragraph, press Enter.
• To insert a line break, hold the Shift key down when you press enter. OR Select Insert -> Break -> Normal line break from the menu items.
• To view your document, select Preview, from the page view buttons.
• You should always check more complicated pages in Explorer and Netscape. Note: FrontPage provides a button on the standard tool bar to display in various browsers installed on your system.
• When in design mode you can select Split, from the page view buttons to see the HTML being created.

Note: for each exercise that follows create a new blank page:

To Create a Blank Page:

• Select blank page from the task pane.
• If the task pane is not present, select view from the menu bar --> task pane.
• If you previously created a blank page, "Blank page" should be the first choice on the task pane if not, on task pane click on "create a new page or site", click "blank page"
• When finished with task pane, close it.

Adding some headings and aligning text:

• Type the following into a blank document:  "This is a heading"
• Highlight the text with the mouse.

• On the menu bar select one of the h1 ... h6 from the drop down called normal.
• On the menu bar click one of the 4 alignment buttons.

• Remember you can do this in split mode.

Creating a HyperLink

1. Start with a new Blank Page
2. Type the following text into the blank page.

   To learn more about Jazz Guitar check out the Classic Jazz Guitar website
    

3. Highlight with the mouse the last two words "Classic Jazz Guitar"
4. Right click on the highlighted text.
5. Select HyperLink.

   

    

6. You should see Insert HyperLink Dialog box
7. Type the URL  http://www.classicjazzguitar.com into the address box at the bottom. (Note: you do not need the http: if the domain name begins with www, FrontPage will insert it for you.)

   
    

8. Before you hit okay, put in the tool tip. Press the screentip button in the upper right corner and enter the text indicated in the picture.

   
    

9. Press okay twice.
10. The text you selected should be underlined with a link.
11. Don't forget to check out the HTNL code.
12. To see the tool tip you have to be in Preview mode.

Adding Pictures

• Make sure the picture is in the same directory as your html file.
• From the menu bar  Insert -> Picture -> From File OR press the Insert Picture from file button on the standard toolbar

• Navigate to the directory where the picture is, then double click on the picture.
• Once the picture is in the Document Window you can perform various image editing routines on the image. Resize, Crop, Adjust Brightness and Contrast, Rotations etc ..
• You can also change the picture properties, adding an alt attribute
• Right Click on the image to see the available options.

Example

In this example we will import a picture, resize it, adjust brightness and contrast and add the alt attribute.

To keep things simple we will keep the HTML file and Image in the exact same directory. Remember for larger websites you should put images in a separate directory. Typically a subdirectory of your HTML file.

1. Create a new Blank Page.
2. Save the blank page as image1.html to your directory.
3. Download this image of the Biograph Theater  make sure you save it to the same directory as the html file.
4. Follow the steps above to import the picture into FrontPage. Before you import the picture give the page a heading. You should always give pages a heading. Something simple will work for this demonstration: "A Picture of the Biograph Theater".

   Resize the Image

   1. Left Click on the Image
   2. Move the mouse to the upper left corner
   3. Drag the mouse in the direction of SouthWest. You should see something like this:

      

      Note: Dragging NorthEast will enlarge the image. You can also adjust just the width and height. Moving along the diagonals will preserve the ratio between width and height.

   Saving the Image

   1. Right Click on the Image and select Resample. Resample appears any time you resize the image.
   2. Now you want to save the HTML file. Select File --> Save.
   3. Since you edited an image you should see the Save Embedded Files dialog box:

      
       

   4. Change the file name to biographcopy.jpg or whatever you like, it just needs to be different the original.
   5. Pess the ok button.
   6. Look at the HTML code and see will see that the image tag was changed to reflect this change.

   Adding the Alt attribute to the image tag.

   1. Right Click on the image --> Select Picture Properties.
   2. In Picture Properties --> Select the General tab.
   3. Check the Text box and type your text into the textfield. This is what you should see

      
       

   4. Check the HTML code and notice the alt attribute in the image tag.

   Other Image Editing Tasks

   Right click on the image and select Show Pictures Toolbar:

   

    

   You should see a toolbar similar to this.

   

   Hover the mouse over the object to learn what they can do. Play around a bit. Don't forget to save when finished.

Adding A Table

This example will take you through the steps in creating a table used to hold concert information for the House Of Tunes. In lab you will add some styles to the table. Here is a picture of the final result.

1. From the main Menu  ---> Table --> Insert ---> Table
2. This should bring up the table properties dialog box.
3. Edit the the size, layout and borders. Make sure your table properties dialog matches the dialog below. Properties to change are circled in red.

   

4. This should draw a table of 3 rows and 5 columns. The first row is for the table headings the second and third rows are for the data.
5. Next you want to change the properties for each column.
6. In the first cell , Right Click --> Cell Properties.
7. This should pop up the Cell Properties dialog Box. Modify the dialog box to match the one below. Properties to change are circled in red.

   

8. Next, change the Layout properties for the remaining cells on the first row. That is, the second cell of row 1, third cell of row 1 .. etc. The horizontal alignment and Vertical alignments will be left and top respectively. For the width of the columns:

   1. Column 2, 10%
   2. Column 3, 40%
   3. Column 4, 20%
   4. Column 5, 20%

9. Next, enter in the table headings and the data. See picture up above.