Beginning FrontPage 2003

1. Prerequisites
2. Objectives
3. Getting Setup For Class
4. FrontPage "Webs"
5. Opening FrontPage 2003 and Looking Around
6. Development Preferences
7. 3 Ways to Develop Web Pages
8. Creating a Home Page
   1. Creating a Second Level Page
   2. Linking Pages
   3. More Linking
9. Adding Footer Information
10. Insert Images
11. Resizing Images
12. Insert Interactive Buttons
13. Collapsible Bulleted Lists

Attachments:

1. Prerequisites

In order to fully participate in this workshop, you must be able to:

<back to top>

2. Workshop Objectives

At the end of this workshop, you will be able to:

1. Create/edit an HTML page using FP 2003
2. Apply basic web page formatting techniques and Web components
3. Make 5 kinds of links, insert/edit images, and add Interactive buttons
4. Understand the advanced capabilities of a FP Site.

<back to top>

3. Getting Setup - Exercise Resources

Click on each link below. When the item appears, execute the File/Save As process and save it to your computer in a folder with your name on it.

• Sample image
• GMU Logo
• Exercise Page

4 Website vs. FrontPage "Web" (or "Site")

Website can be described with the following:

• Series of web pages and images connected using HTML that reside in an
  arbitrary folder on your hard disk
• Placed on a web server using a tool like WS_FTP
• Maintained using a variety of HTML editors (Notepad, Dreamweaver etc.)

FrontPage "Sites" can be described with the following:

• "FrontPage-based webs...contain files that support FrontPage specific functionality...." which allows FrontPage to manage them more efficiently.
• "A FrontPage web consists of all the individual pages and folders that reside within a specially designated folder on your hard disk or Web server".  That is, the underlying file structure of the Website.
• Published to a web server using a built-in FrontPage publishing tool

FrontPage Web folder icon = little globe

<back to top>

5. The FrontPage 2003 Interface

When you open FrontPage, you will be in Page View.  Other views - the grayed-out options on the Views menu are only available when you are creating FrontPage "Sites" (these are discussed in more detail in the Intermediate FP workshop).

Opening a Page Options - there are several ways to open a web page:

1. Open - This opens a file from a location of your choice
2. Open Site - This option assumes the file you click on is part of a FrontPage "Site".
   If it is not, it will ask you if you want it to add the necessary data into your files
   in order to make a FrontPage "Site".
3. Import - Allows you take an existing web site an make a FrontPage web.
4. Recent Files - Opens files recently used.
5. Recent Sites - Opens FrontPage "Sites" recently used.

   Note: You can turn your existing web site into a FrontPage "Site" by using either "Open Site" and clicking "yes" or "import."

<back to top>

6. Development Preferences

Set development level preferences. This is located under Tools> Page Options> Authoring tab

FrontPage and SharePoint technologies

Every website must be hosted on a server (a computer that "serves" the files to you when you are browsing). GMU's MS Windows Server has the two technologies above but SharePoint is not activated.

Extensions - Extensions are files that need to be on your server to allow certain FrontPage components to work. If you are not going to be using a server with FrontPage extensions, select None from the Drop-down list.

Browsers - choose the browser and version(Netscape, Internet Explorer, etc.) environment that meets your needs.

The version number tell you how recent the software is that you are designing for. It is recommended that, in order to be accessible to as many users as possible, you use 4.X or greater.

Technologies - Will be checked and unchecked as selections are made with the options above.

Note: You need to choose both a browser and version. If you just choose version without choosing a browser, it won't check and uncheck the right technologies.

<back to top>

6.1  Smart Menu

To turn off MS Smart menus:

1. Go to Tools> Customize> Options
2. Select "Always show full menus"

7.  3 Ways to Develop Web Pages

1. Create pages one-at-a-time
2. Create a template page with table for layout, or use one of
   the Mason templates, then copy/save as
3. Use FP Dynamic Web Template function -- taught in the Interm. FP workshop

8. Make Your Homepage

Step 1 - Create a Page

1. Go to File> New
2. Opens the Task Pane - Choose Blank page
3. Type your name on the page
4. Insert a horizontal line
5. Type the following:  Home | Page 2 | Syllabus
6. Type your school location information
7. Right-click over the blank area of the page
   and select Page Properties
8. Give your page a title
9. Save the file as index.html

Step 2 - Preview the Page

1. Quick preview - click on the Preview tab OR
2. Browser preview - File> Preview in Browser ...

Step 3 - View the Code

1. Click on the Code tab

<back to top>

8.1 Second Level Page

Step 1 - Create a Second Level Page

1. Click File> New> to create a new page OR click on the new page Icon
2. Right-click over the blank area of the page and select page properties
3. Give your page a title
4. Save the file as page2.htm

Step 2 - Create a table for layout purposes

1. Click Table> Insert> Table
2. Select 2 rows, 2 columns, 0 for borders, 750 pixels
3. Click OK
4. Save your changes

Step 3 - Fill the table and adjust properties

1. Type "Page 2" in the top cell on the left
2. Type "Home" in the top cell on the right
   
3. Connect the two columns in the second row by first highlighting the two rows and then select Table>Merge Cells
   
4. Insert a horizontal rule into the single row
5. Set the background color of this row by right-clicking in the row and selecting Cell properties. Then choose a background color.
   
   
6. Place cursor into the last row and hit the tab key to create a new row
7. Remove the color of this row by right-clicking on the row and selecting Cell properties. Then choose a background color> Automatic
8. Type the following in the row: "Page 2 | Syllabus"
   
9. Insert two more rows using the tab key
10. In the last row type: "Put your mouse over the image"

11. Adjust cell properties:

    1. right-click in row 1, column 2; select Cell Properties

    2. In Cell Properties dialog box, make the Horizontal alignment = Center and Vertical alignment = Top

    3. Select Specify Width box and enter 100 pixels

12. Save your changes

Step 4 - Preview the Page

<back to top>

8.2. Link Pages

Step 1 - Make a Link to another page in your site

1. Return to index.html
2. Highlight "Page 2" in the menu area
3. Click on Insert> Hyperlink
4. Locate the page2.htm file and double click on it (click the icon with a folder and magnifying glass to see the files for linking) (You could also type the file name in address text box)

   1. Screen tips

   2. Open in new window

5. Repeat this process to link the sample syllabus
6. Save your changes

Step 2 - Make a Link to another page in your site

1. Return to page2.htm
2. Double click on the word "Home" in the menu area
3. Click on Insert> Hyperlink
4. Locate the index.html file and double click on it
5. Repeat this process to link the sample syllabus
6. Save the file as page2.htm

<back to top>

8.3 More Linking

Step 1 - Links within a Page

1. Open samplesyllabus.htm
2. To set the bookmark (this is called a "named anchor" in HTML):
   1. Put your cursor before the bold text headers on the page
   2. Click on Insert> Bookmark
   3. Give it a simple one-word name you can remember
3. Highlight the word in the menu that will receive the link
4. Use Insert> Hyperlink and select the bookmark by clicking on the bookmark menu
5. Repeat this process for a few more of the links
6. Save the samplesyllabus.htm file

Step 2 - Make an email link

While in samplesyllabus.htm
1. Scroll to the bottom and highlight the email address
2. Using Insert> Hyperlink and select the envelope icon
3. Enter the email address (e.g., jdoe@gmu.edu)
4. Save the samplesyllabus.htm file

Step 3 - Make web link

While in samplesyllabus.htm
1. Highlight "George Mason University"
2. Using Insert> Hyperlink, go to Address field and type: http://www.gmu.edu
3. Save the samplesyllabus.htm file

Step 4 - Make another menu link

While in samplesyllabus.htm
1. Highlight "Return to Homepage"
2. Click on Insert> Hyperlink
3. Locate the index.html file and double click on it
4. Save the samplesyllabus.htm file

<back to top>

9. Adding Footer Information

Step 1 - Copy Text-based Navigation Bar

1. Click an area just below the webpage table and copy/paste the nav bar

2. Center the nav bar, then Select the nav bar and apply a font style and/or color

Step 2 - Insert Date, Contact Information, Copyright

1. Insert menu> Date and Time, then choose display options and formatting

2. Insert contact info including e-mail address

3. Link email address:  highlight e-mail address, then click the Hyperlink icon

4. From the left side "Link To:" pane, select the Email address button

5. Fill in the textboxes: (subject is optional)

10. Insert Images

Step 1 - Insert an Image

1. If necessary, reopen page2.htm
2. Place the curser at the end of the Home link
3. Hit Shift-Enter to insert a line break
4. Click Insert > Picture > From File ...
5. Double click the gmulogo
6. Save the page2.htm file

Step 2 - Make the image a link

1. While still in page2.htm
2. Right click once on the GMU logo
3. Select Picture Properties
4. In the location box, enter http://www.gmu.edu
5. In the text box, enter "GMU Homepage" in the Alt space
6. Save the page2.htm file

Step 3 - Align the content in the cell

1. While still in page2.htm
2. Right click once in the cell with the GMU logo and click on Cell Properties
3. Select Center for the Horizontal alignment
4. Select Top for the Vertical alignment
5. Save the page2.htm file

Step 4 - Preview the Page

<back to top>

11. Resize Images

Step 1 - Insert an Image 

1. From the Window menu, open index.html
2. Place your cursor in the middle of the page and click Insert > Picture > From File ...
3. Select the brown.jpg file and hit OK
4. Save the page

1. Click once on the image to select it (black handles appear)
2. Click the black handle on the right bottom corner of the image and drag left and up diagonally to make the image smaller
3. In the Pictures toolbar located at the bottom of the work area, click on the Resample button (this changes the file size of the picture to match the current display for faster downloading)
4. Save the file -- the Save Embedded Files dialog box appears -- check the following:
   1. Make sure the Folder path is correct
   2. Set the Action: you can choose to overwrite the original file, which is what reduces the file size, or just have the new image reference the original file when it is displayed, which will not improve download performance.
   3. For this exercise, change the file name to brown2.jpg and hit OK
5. Preview your page

Step 3 - Auto Thumbnail

1. Click the Normal tab to return to work on index.html
2. Set your cursor a few spaces below the image and click Insert > Picture > From File ...
3. Click once on the brown.jpg file to select it
4. This time click the Auto Thumbnail button in the Pictures toolbar and observe the change
5. Save the file -- the Save Embedded Files dialog box appears -- observe that a new file name has been automatically created
6. Click OK to save the new image file and the index.html file

NOTE: this will create a new smaller file in addition to the original file. You must upload both files. Download speed will be improved because the first file that is downloaded on opening is the smaller thumbnail picture. The larger picture can be viewed by clicking on the thumbnail picture.

Step 4 - Preview the Page

<back to top>

12. Insert an interactive button

Step 1 - Insert Interactive Button

1. Position your pointer where you want the button. On the Insert menu, click Interactive Button.

Step 2 - Configure button properties

1. On the Button tab, look through the list of button styles, and choose a style that you like. In the Text box, type some text that you want to appear inside the button. In the Link box, type a URL to a page or site.

2. On the Font tab, choose a font, font style, and font size that you like. You can also change the text color at this time.

3. On the Image tab, change the width and height, if necessary.

4. To create smooth looking images, keep the Make the button a JPEG image... option selected. To create images that have a transparent background, click Make the button a GIF image.... Click OK.

Step 3 - Save button graphics /embedded files

1. File menu, click Save. The Save Embedded Files dialog box appears, telling you that there are three files that the page needs in order for the button to work. Rename each file to a name that makes sense to you.

2. Now test the button. File> Preview in Browser

Notes   

• If you delete an interactive button, the associated images are not automatically deleted from your Web site. To quickly find images that were left behind, you can use the Unlinked Files report (available when clicking the View menu, Reports submenu, Site Summary command). In the Unlinked Files report, delete any images that have a 0 in the Links to column.

• To make your own custom interactive effects, use the Behaviors task pane (Format menu, Behaviors command.)

<back to top>

13. Collapsible Bulleted Lists

Step 1 - Insert a bulleted list

1. Select 
2. Place the cursor on the page where you want to start your bulleted list, then click the 
3. Type the first item in your list, then hit Enter
4. Type 3 more items and press Enter after each item
5. To stop inserting bullets, press Enter twice
6. Save your changes

Step 2 - Indent items in a bulleted list and make them collapsible

1. Place the cursor at the end of the second bulleted item
2. Click the Increase Indent button located in the toolbar twice, then press Enter
3. Type some text and click the Increase Indent button twice again
4. Highlight the item you first indented and click the Decrease Indent button twice to return it to the same level as the major bullets -- observe the result

Step 3 - Modifying list properties

1. To stop inserting list items, press Enter twice
2. Highlight items #2 and #3, then click the Increase Indent button twice
3. Right-click on the selected items and choose List Properties
4. Make sure the Numbers tab is showing and select the lower case alpha symbols and click OK

<back to top>

A1. Insert Tools menu and other Features Matrix

<back to top>

A2. Web Component Matrix

A3. Picture Toolbar

• All options work for basic web page as well as FrontPage sites

A4. Drawing Toolbar

• All options work for basic web page as well as FrontPage sites

<back to top>