Intro to FrontPage 2003...

 

System Requirements for FrontPage 2003

 

Computer Speed:  Personal computer with an Intel Pentium 233-megahertz (MHz) or higher processor, Pentium III recommended

 

Memory:  128 megabytes (MB) of RAM or greater recommended

 

Hard Disk:180 MB of available hard-disk space (Hard disk usage will vary depending on configuration; custom installation choices may require more or less hard-disk space.) Optional installation files cache (recommended) requires an additional 200 MB of available hard disk space.

 

Drive: CD-ROM Drive

 

Display:  Super VGA (800 × 600) or a higher-resolution monitor

 

Operating System: Microsoft Windows® 2000 with Service Pack 3 (SP3) or later, or Windows XP or later.

The FrontPage Work Space...

When you are working in FrontPage, this the main workspace (FP2003). Most of your editing will take place here. Below the image is an explanation of each area.


Full FrontPage 2003 Workspace with Folder List View

When you first open FrontPage, you will see an interface that looks similar to the one above. Here you will see a series of different panels and toolbars. Below is a brief discussion of each one. As we move through the lessons, we will go into more depth of some of the more useful features.

Menu Bar

The FrontPage menu bar is pretty much the same as in other Windows programs. File, Edit, View, etc. begin on the left side with Help being last on the bar. Each menu bar item has choices which can be accessed by clicking on the word. A drop down list will then appear with several available options.

(Note: You can also access these items using keyboard shortcuts. For example File has an underscore under the letter F, so you can access the menu by Alt + F. Menu items can be accessed by Shift + "letter". Submenu items can be accessed by Control + "letter".)

Standard Toolbar

The most common FrontPage commands are on this toolbar - New, Open, Save, etc. Like many other Windows applications, there are "dockable" toolbars. This means you can rearrange toolbars, lengthen them, shorten them, dock them at any side of the window, or let them float. To display or hide a particular toolbar, go to View > Toolbars and select or deselect the appropriate toolbar. You can also customize your toolbars by adding or removing items. I personally customize my toolbars so that the items I use most frequently are on the left side.

Formatting Toolbar

This toolbar contains buttons for the most often used formatting commands such as Style, Font, Font Size, Bold, Bullets, Numbering, Indent, etc. This toolbar can also be customized.

Ask A Question Box

This is a handy although often overlooked feature. You can type in a plain English question into the box and FrontPage will try to answer it. You can also type in keywords and get a list of Help Articles related to those keywords. As a quick test, type in "customize toolbars" (without the quotes) in the question box. Typically, the Help items at the top of the list are considered more relevant than those near the bottom.

Getting Started Task Pane

This item provides several options:

If you do not want the Getting Started task pane to appear each time you start up FrontPage, go to Tools > Options. In the Options dialog box, select the General tab. Clear the Startup Task Pane check box. If at some point, you wish to view the task pane, choose Task Pane from the View menu or press Control + F1 (the F1 function key).

Editing Window

This is where the work of actually creating web pages occurs. Each page you open will be shown as a tab (see document tabs in the image above). To edit an open page, just click on the tab. We will discuss the Editing Window in much more detail as we begin building our web site throughout these lessons.

Editing Window Options

You have several options on how you view the Editing Window:

Note: In previous versions of FrontPage, the Preview display was often inaccurate. In FrontPage 2003 it is much improved, but still not entirely accurate. Throughout our lessons we will be checking our pages by going to File > Preview in Browser.

Quick Tag Selector Bar

This bar displays an icon for each tag that surrounds the current selection in the editing window. For a new, blank page, it displays only one icon <body>. If the current selection were text inside a table cell, however, the Quick Tag Selector bar would display <body>, <table>, <tr>, and <td> icons. Clicking these icons would select the entire web page, the current table, the current row, or the current cell, respectively. Drop-down arrows on each icon present further options.

Note: If the Quick Tag Selector bar does not appear when a web page is open in Design View, choose Quick Tag Selector from the View menu.

Q: I have the View Bar showing on my workspace but I don't see it in your images. Where has it gone?

A: I prefer to keep my workspaces as open as possible, so I don't have the View Bar active when I am working. I have instead added a custom toolbar to the top of my page. I have more information on views and custom toolbars on the next page. To deactivate the View Bar click View and uncheck View Bar.

FP2003 File Locations:

Many of today's newer templates do not have to be installed into the FrontPage program. You instead receive a zipped file which contains all of your web files, images, etc. It's quick, fast, and very easy.

Instructions for moving Template and Theme files after FrontPage 2003 install:

Note: You may need to modify these instructions, if you have installed FrontPage on a different drive.

1) Find the FP2002 (earlier) Template and Theme files in your file structure. Look for the folders in the following locations:

FrontPage Theme folder - (typically contains three or four files with .inf and .elm files inside):

C:\Program Files\Common Files\Microsoft Shared\Themes\<folder_name>

FrontPage Page Template folder - (.tem extension or _t extension, contains only one .htm file and possibly several .gif or .jpg files):

C:\Program Files\Microsoft Office \Templates \1033 \Pages \<folder_name.tem>

FrontPage Web Template folder - (.tem extension, contains .inf and .map file along with several .htm files and other files):

C:\Program Files\Microsoft Office\Templates\1033\Webs\<folder_name.tem>

2) Copy the folders from the locations above to the corresponding FP2003 folders. This will make the files available in FP2003, FP2002, and earlier. There are two location options in FP2003. You can either copy the folders to your profile location or to the general FrontPage location. See both options below:

General FrontPage 2003 Template and Theme Location: Using this option will put Template files under the 'General' tab when selecting the template in FrontPage 2003, 2002, and earlier.

FrontPage Theme folder:

C:\Program Files\Common Files\Microsoft Shared\Themes11\<folder_name>

FrontPage Page Template folder:

C:\Program Files\Microsoft Office\Templates\1033\Pages11\<folder_name.tem>

FrontPage Web Template folder:

C:\Program Files\Microsoft Office\Templates\1033\Webs11\<folder_name.tem>

Profile Location - FrontPage 2003 Template and Theme: Using this option will put Template files under the 'My Templates' tab when selecting the template in FrontPage 2003 and the 'General' tab when selecting the template in FrontPage 2002 and earlier.

FrontPage Theme folder:

C:\Documents and Settings\<username>\Application Data\Microsoft\Themes\ <folder_name>

FrontPage Page Template folder:

C:\Documents and Settings\<username>\Application Data\Microsoft\FrontPage\ Pages\<folder_name.tem>

FrontPage Web Template folder:

C:\Documents and Settings\<username>\Application Data\Microsoft\FrontPage\ Webs\<folder_name.tem>

Create a new web

A web is a collection of web pages, images, documents, and other files and folders that make up a Web site. 

  1.  

  

FrontPage 2000: Go to File > New Web.

 

FrontPage 2002: Go to File > Web Page or Web.  Click the "Web site templates" in the right column.

 

FrontPage 2003: Go to File > New.  Click "More web site templates" in the right column.

2.       In the Web Sites list, select the template or wizard you want to use to create the new web.  

3.    In the Specify the location of the new web box, type or select a name for the new web. If you want to save the web site on your desktop, go to the desktop and create a new folder.  Open the new folder and copy the full path address in the Address box and paste it in the "Specify the location of new web" box in FrontPage. (If you don't see the full path address in the Address box, go to Tools - Folder Options.  This will bring up a Folder Options dialog box for the new folder.  Select View tab.  Check "Display the full path in the address bar")

 Add a new page

FrontPage includes many simple preset templates you can use right away.

You can use Save As or Page Template to add new pages 

Using Save As

Open any existing page and go to File > Save As

Using Page Template

1)

  

FrontPage 2000: Switch to the Page view. (View > Page).  Go to File > New > Page.

 

FrontPage 2002: Go to File > New > Page or Web.  Click "Page Templates" in the right column.

 

FrontPage 2003: Go to File > New.  Click "More page templates" in the right column.

 2)  In the page template list, select the web template you just installed. (FrontPage 2003: This may also be in your "My Templates" folder.)

* Navigation bars(link bars) and banner will not show up until you have saved the page and dragged it into the navigation structure.

View entire website files and folders

All of your saved web pages are listed in the Folder List view.  

1.    On the Menu bar, select View | Folder List.  

2.    Double click any web page in the Folder List.  This will take you to the Page view for that web page. 

3.    To hide the Folder List view, select View | Folder List.

  Delete a web page or a website

1.    To delete a web page, right click the web page you want to remove in the Folder List view and select Delete.

2.    To delete an entire website, right click the website at the top of the Folder List and select Delete.

 

Preview a page in a web browser

1.    Click any web page in the Folder List.

2.    Click the Preview button on the Toolbar or select File | Preview in browser on the Menu bar.  Click here for the latest Internet Explore and Netscape web browser.

To get the most out of FrontPage, installing Microsoft Internet Explorer is recommended. If you already have another type of Web browser installed on your computer, you can still safely install Microsoft Internet Explorer. When designing Web pages, you will find it is actually very beneficial to test your work in more than one type of Web browser before you publish your Web site.

Intro to FrontPage 2003...

If you are upgrading from 2000 or 2002, some tools and icons have changed or moved.

Location of Templates: When you create a new web using an installed template, the dialog box has changed slightly. You will see a "General" tab which contains the standard templates that came with your program. You will also see a "My Templates" tab which will contain your collection of templates you have installed from 3rd party developers (like us!).

Template designers are hard at work repackaging their items so that they will install properly into all versions of FrontPage. It's a very large task. Template packages you have purchased in the past need to be moved to new folders. See our instructions for moving your older templates into the new directory locations. More>>>

Folder View, Navigation View and More: One of the first things you may notice in 2003 is that the icons for folder view, navigation, reports, etc. are no longer on the left side of your page. These handy features have been moved to an easy-to-access location.

Web Site: In this top bar, you will find tabs for all of the pages you have opened. At the far left, you will also see a tab called "Web Site". Clicking on the web site tab will allow you easy access to the different views.

Switching Views: Once you have clicked on the Web Site tab, you will see the different views at the bottom of your screen. The current view selected will be surrounded by a bounding box. Just click on a different view to access it. Very easy.

Link Bars and Page Banners

Before adding a link bar or page banner, you will see this message:

 

 

A Page Banner is a quick way to add titles to your pages. A navigation bar is a set of hyperlinks used for navigating a Web site. 

 

         

 

Before you create your Page Banner and Navigation Bars, you need to set up a Navigation Structure of your web first. 

 

Part I :  Navigation Structure

 

The following example shows a navigation structure of a web. 

 

 

1.  On the View menu, select Navigation.  You will see a navigation view.  You may have nothing in it yet.

2.  On the toolbar, click Folder List button  .  Now you have Folder List on the left hand side and Navigation Structure on the right hand side. See the following picture

 

 

3.  Now drag a file in the Folder List to the position in the Navigation Structure where you want it.  If you don't have any file in the Folder List, just create some new pages and save them.

 

4.  Your final Navigation Structure should look like the following.  To change the title of a page, right click the page and select Rename.  To delete a page, right click the page and select Delete.

 

 

5.  Double click any page in the Navigation Structure.  This will take you to the Page view. 

 

Part II : Insert a Page Banner

 

1.  Position the mouse pointer on the top of the page.  On the Insert menu, select Page Banner.  That's it!  If you want to change the title of the banner, double click the banner and change the title.

 

Part III:  Insert a Navigation Bar

 

1.  Position the insertion point where you want to place the navigation bar.  On the Insert menu, select Navigation Bar.  The Navigation Bar Properties dialog is displayed.

 

(For FrontPage 2002&2003 users: On the Insert menu, click Navigation.   Select Bar based on navigation structure or other options. Click Next .  When finished,  the Navigation Bar Properties dialog is displayed. )

 

 

2.  In order to understand the Navigation Bar Properties, we need to take a look at the Navigation Structure picture again. 

 

 

Home Page:  This page is the first page added to a navigation structure, typically named index.htm, and is indicated by .

 

Top-Level Pages: "FAQ" and "Contact Us" are the top-level pages (Not including "Home")

 

Child-Level Pages:  "Company Info", "Products", and "Support" are the child-level pages of "Home". "Products" also has two child-level pages.  "Contact Us" has one.

 

Parent-Level Pages: Include the parent page of another page, plus pages that are directly connected to the parent page on the same level.  For example, the parent-level pages for "Company Info" are "Home" (parent page), "FAQ", and "Contact Us".  The parent-level pages for "Music CD" are "Company Info", "Products" (parent page), and "Support".  However, "Job" is not included because it is not connected to "Products". 

 

Same-Level Pages:  Include pages that are on the same level and have the same parent page. For example, "Company", "Products", and "Support" are same level, but "Job" is not because it has a different parent page.

 

Back and Next: This is for browsing a sequence of same level pages.  For example, the next page of "Company Info" is "Products".  The previous page of "Contact Us" is "FAQ". This feature is pretty useless in my opinion. 

 

The rest of features in the Navigation Bar Properties are pretty self-explanatory.  Practice for a while before building your website.


Helpful Shortcut Keys:

Intro to FrontPage 2003...

Some items have changed in how you can view your pages. Here's a brief overview.

 

There are a lot of new features when it comes to working on your web pages. Our screenshot shows an example of a dynamic web template.

In the bottom-right corner of your screen are four small boxes:

Where did my table cell go? In previous versions of FrontPage, you could see at a glance where tables and cells were located by looking at the tiny dotted lines surrounding an area. In FrontPage 2003, many of these areas will not be visible. Instead, at the top of the page under the page tabs, you will see groups of HTML tag boxes. When you mouse-over one of the tags, the area to which that applies is highlighted on the page by a solid border. This improved versions allows you to easily see and locate positioned items like IDs and Divisions. Spanned areas can also be quickly seen.

Quick Fine Tuning: When you mouse-over the HTML tag areas at the top of your screen, some of them will have a small arrow. Clicking on the arrow brings up a menu where you can edit the tags quickly and easily. If a tag cannot be edited, the option will be grayed out.

Various Page Views: In 2003, the "Normal" tab has been replaced with the "Design" tab. You can also access the Split View (shown in the area below), the Code View, and a much improved Preview screen.

Note: The preview screen uses your default browser settings. It is still a good idea to go to File > Preview in Browser and test your pages in all browsers you have on your computer as well as in different screen resolutions.

Split Code View: For those of you who enjoy seeing what goes on behind the screens, you are going to love this new feature. When you highlight an area on the bottom of the screen, you see the same area highlighted in the code view at the top.

 

Hyperlinks

A hyperlink is a connection from one page to another destination such as a web page in the World Wide Web or a file in the local computer.  

 

  1. Type the text you want to use as a hyperlink and then click and drag the mouse over the words you just typed to highlight them.
  2. On the Menu bar, select Insert | Hyperlink. FrontPage displays the Create Hyperlink dialog box.
  3. In the URL or Address box, type a web address such as www.yahoo.com immediately after the http:// prefix.  If you want to link to a local file in your computer, click the file button or Look in box.

 

E-Mails

 

FrontPage 2000 Users:

1.  Select either text or a picture

2.  Click Insert Hyperlink .

3.  Click the E-Mail button

4.  Type the email address to which you want the message sent.

 

FrontPage 2002 and 2003 Users:

1.  Select either text or a picture.

2.  Click Insert Hyperlink or

3.  On the left side, under Link to, click E-mail Address.

4.  Either type the e-mail address you want in the E-mail address box, or select an e-mail address in the Recently used e-mail addresses box.

5.  In the Subject box, type the subject of the e-mail message.

Note   Some Web browsers and e-mail programs may not recognize the subject line.

 

Insert a Table

A table is made up of rows and columns of cells in which you can insert text and graphics.

You can use a table to present information in a grid-like format, such as timetables, product information, rates, and so on.

Insert a table

1.    On the Menu bar, select Table | Insert | Table 

2.    You can set the layout of a table by changing the following properties:

    • Rows - the number of rows you want.
    • Columns - the number of columns you want.
    • Alignment - alignment of the table relative to the page
    • Border size - thickness of the table's outer border
    • Cell padding - the space between text and cell borders
    • Cell spacing - the distance between cells in a table

Table / Cell background

You can choose background color or background pictures for the entire table or for individual cells.

1.    Move the insertion point inside the cell or table for which you want to set the background.

2.    Right-click, and then click Cell Properties or Table Properties, depending on whether you want to set the background for a cell or table.

3.    Do one of the following:

  • Color background - under Background, in the Color list, select a color for the table background.
  • Picture background - under Background, select the Use background picture check box, and then click Browse.

Table / Cell border color

You can set the border color for the entire table or for individual cells.  The border size must be greater than zero; otherwise, the border color will not be displayed.  If your web page uses theme, you can't set border color for a table.  

1.    Move the insertion point inside the cell or table for which you want to set the border color.

2.    Right-click, and then click Cell Properties or Table Properties, depending on whether you want to set a border color for a cell or table.

3.    Do one of the following:

o                                To set one color for the border, under Borders, select a color from the Color list.

o                                To set a two-color border, under Borders, select colors from the Light border and Dark border lists.  The color from the Color list will not be used. However, if you select only a Light border or a Dark border, the color selected from the Color list will be used as the second color.

Text alignment in a cell

1.    Right-click the cell and select Cell Properties.

    • Horizontal alignment - horizontal alignment of the cell's content relative to the cell
    • Vertical alignment - vertical alignment of the cell's content relative to the cell


Publishing Web Pages

  

The process of publishing your finished pages is also much improved with a new look and feel.

 

Publishing your web now gives you a dialog screen with a lot more information. You now see a split screen. On the left are the files on your computer. On the right are the files on your remote host (the folks who host your web site.)

You can now publish local to remote, remove to local (from your web site back to your computer), and you can also synchronize files between two sites.

Going to File > Publish Web will now bring up the Remote Web screen.

It's a Feature, not a Bug! You can get to the Remote Web Site screen by going to View > Remote Web Site. If you have published your site to a remote host, the options you used last will be shown. You will need to reset options if you wish to publish your web site to a different location.

More Publishing Options through the Remote Web Site Properties dialog box:

You can access publishing to a server with FrontPage extensions (or Share Point) or you can opt to FTP your files if your host does not support the FP Server Extensions.

Under the Optimize HTML tab, you can elect to remove comments, extra white space, and much more. You can find details on these items in the FrontPage help files under Publishing.

Under the Publishing tab, you can choose to publish changed pages only, to publish all pages, or whether or not to publish any subwebs.

At the bottom right of the screen you can select the direction of your publishing. You can choose to publish from your computer to your host (local to remote), from your web site back to your computer (remote to local) or whether to synchronize files between the two.

The FrontPage Help Files have detailed information on synchronizing files.

To Add Your Site to a Search Engine like Google, go to http://www.google.com/addurl.html

Apply a Theme

 

FrontPage includes many preset themes that you can use right away.  A theme contains  background picture, page banner, bullets, navigation buttons, horizontal lines, etc. You can use standard or active graphics for the navigation buttons. The active graphic set uses animated elements, such as hover buttons instead of plain buttons on link bars.

1.    Open an existing page or create a new page to which you want to apply a theme

2.    On the Format menu, select Theme.

3.    For FrontPage 2000& 2002: In the theme list, pick a theme you want to apply.  Under Apply Theme To, you can choose to apply a theme to All Pages or Selected Page(s).  Choose Selected Page(s) for now.  Click OK to apply the theme to your page.

For FrontPage 2003: in the Theme task pane, point to the thumbnail for the theme you want to apply, and then click the arrow.  Click Apply as default theme to apply a theme to all pages or click Apply to selected page(s)

Theme options: 

* Vivid Colors: If you want to use a bright color scheme, select the Vivid Colors. 

* Active Graphics: To use a lively set of banners, buttons, bullets, and other graphical elements, select the Active graphics check box.  See the following example.  Move your mouse over the buttons. The button on the left hand is an active graphic.  The button on the right hand side is not.  You can see the difference as long as your browser supports active graphics.  (Get the latest IE or Netscape browser here)

      

* Background Image: To use a plain background, unselect the Background Image.

* Apply Using CSS(FP2000&2002): Every theme comes with a CSS (Cascading Style Sheet.)  Click Modify button at the bottom of the Theme dialog and then click Text.  The Modify Theme dialog is displayed.  Click More Text Style.  Here is the style sheet.  You can modify the text style, border style...etc if you want to. Note. When using this option, FrontPage may create empty lines inside the <head> tags in HTML view.

 

Image Map

Add a Hotspot /Text to a Graphic - Image Map

Image Map is a graphic with one or more hyperlink regions (hotspots).  See the demo below

This is "one" graphic with different hyperlinks.

 

Add a Hotspot to a Graphic

1.  Download the graphic above. (Right click the image and select "Save Picture As".  Save it on your desktop)

2.  Open your FrontPage and insert the image to a new page.

3.  Click on the image.  The Picture Toolbar is displayed at the bottom of the page.  If the Picture Toolbar is not shown, go to View | Toolbars | Pictures on the menu bar.

Picture Toolbar

4.  On the Picture Toolbar, click the Rectangular Hotspot button 

5.  Now go back to the image and draw a rectangle around "Microsoft". 

6.  Specify the hyperlink (http://www.microsoft.com) for the "Microsoft" spot

7.  Repeat Step 3 - 7 for other spots.

 

Add a Text hotspot to a Graphic

1.  On the Picture Toolbar, click the Text Button

2.  A text box is now displayed on the graphic.  Write "NBC" inside the text box.

3.  To set a hyperlink for "NBC", double-click an edge of the text box and write http://www.nbc.com

4.  To move the text around, click button on the Picture Toolbar. Click on the text box and drag it to the position where you want it.

Toolbar - Shortcut Buttons

 

Toolbar

 

Add Additional Shortcut Buttons

 

  1. On the menu bar, select View | Toolbars | Customize.  This will bring up a Customize dialog box.
  2. In the Categories list, select a category.  In the Commands list, select the command that you want to put on the toolbar, and then drag the command onto the toolbar.

 

Delete Shortcut Buttons

 

While the Customize dialog box is still open, right-click the shortcut button on the toolbar and select Delete

 

Move Shortcut Buttons

 

To move a toolbar button, hold down ALT and then drag the button to its new location

 

Create a CSS File

 

With CSS(Cascading Style Sheets), you can define the styles/html elements of a page or multiple pages all at once.  You can set a CSS file in one location and apply the CSS to as many web pages as you need.  You can also apply multiple CSS files to a web page.

 

Create a CSS File in FrontPage

  1.  
  1. Click Style Sheets tab and then select Normal Style Sheet.  This will open a blank CSS page.
  2. Type your styles.  If you are not familiar with CSS syntax, select Format - Style on the menu bar, and then select a style you want to modify.

For a complete CSS syntax and browser compatibility, please visit http://www.w3schools.com/css/default.asp or check your CSS book.

 

Apply a CSS File to your web pages

 

Open your web page.  On the menu bar, select Format - Style Sheet Links.  This will bring up a dialog box.  Click Add button and browse to your CSS file and then click OK.(To apply the CSS to all of the pages in your web site, click All Pages)

Feedback Form Template

 

Create a feedback form page where users can submit comments about your website.

 

Note. FrontPage Feedback Form requires your web server to run the FrontPage Server Extensions.

 

To quickly create a form that collects data:

 

This template creates a generic feedback form that you can modify to fit your needs.

 

To modify the form:

1.    Right-click the form and select Form Properties. 

2.    Select the Send To option, then specify the file or e-mail address to which to send the form results.  To configure the form handler, click Options button.

3.    To apply the Feedback Form to your existing web page, copy the HTML codes into your web page. 

 

Feedback Form Template

Create a feedback form page where users can submit comments about your website.

Note. FrontPage Feedback Form requires your web server to run the FrontPage Server Extensions.

To quickly create a form that collects data: 

This template creates a generic feedback form that you can modify to fit your needs.

 To modify the form:

1.    Right-click the form and select Form Properties. 

2.    Select the Send To option, then specify the file or e-mail address to which to send the form results.  To configure the form handler, click Options button.

3.    To apply the Feedback Form to your existing web page, copy the HTML codes into your web page. 

 

<form action="--WEBBOT-SELF--"method="POST"> ........</form>