FrontPage 2000: Creating a Web Site

Before You Begin
FrontPage "Webs"
Creating a FrontPage Web
Views Toolbar
Menus in FrontPage 2000
Automatic Good Looks: FrontPage Themes
Overview of the Page
Adding Text to Your Page
Formatting Your Page
Images
Making Links
Signing and Dating Your Work
Previewing Your Page with Different Browsers
What Do You Call Home? Your Home Page's File Name
Publish Your Page on the (World Wide) Web Server
Check your Web Pages with a Browser
Publishing After the First Time
Don't Try This at Home . . .
Getting Help with FrontPage

Before You Begin

In this handout and the accompanying class, you'll learn how to create a Web site using FrontPage 2000. Before you begin "authoring" Web pages, you should be familiar with Internet terms, have an email account, and know how to browse the World Wide Web using Netscape Navigator or Microsoft Internet Explorer. You should be comfortable using Windows and have word-processing experience. 

FrontPage "Webs"

A FrontPage "web" is a web page and its associated files, such as pictures and perhaps additional pages. A web also includes folders and files that FrontPage uses to provide various options. You design, build, and edit the web on your local computer before publishing it to the World Wide Web, where other people can then see it.

While it is possible to create a single page in the program without creating an entire web, webs are recommended in FrontPage for the following reasons:

To make your life with FrontPage easier, create your pages within a web, as explained next.

Creating a FrontPage Web

Find FrontPage in the Programs folder of the Start menu, either in its own folder, or in the Microsoft Office folder. The FrontPage window appears, with a new, blank Web page open on the right side.
Note to former FrontPage 98 users: FrontPage 2000 combines the Editor and Explorer windows into one window. You edit pages and manage files and folders in the same window. For more information, select Microsoft FrontPage Help from the Help menu, and on the Contents tab, select What's New

Creating and Saving a FrontPage "Web"

Rather than working on the blank page that you see when FrontPage starts, create a FrontPage web. To create the web, select the File menu, then New, and finally Web. The Web Sites window appears. Here you can select the type of Web you want to create. To learn the program, select the Personal Web.

In the right side of the window you can specify where the web is saved, either by typing the folder location and web name or by selecting it from the drop-down list. Be sure to put your web in a folder, rather than at the "root;" for example, you might save it in C:\My Documents\My Web , rather than simply in C:\. Also note that if the folder you specify does not exist, FrontPage creates it for you, but it will not create more than one folder.
Tip: If you know the name of the folder on a World Wide Web server where you will publish your pages, use this folder name for your web name. For example, if your web will eventually be stored on www.umbc.edu/courses/engl024/, name your web "engl024." 

When you OK the creation of your new web, FrontPage gets it started with different files and folders, perhaps guiding you with a wizard. If you chose Personal Web, the blank web page now has a background color and new font style. Messages appear on it, telling you how to add a page banner and hyperlinks. Do not delete these messages, but for now, simply ignore them.

A folder list appears in the "windowpane" to the left of the page, showing the pages and important folders FrontPage created in your new web. Notice that the name of the page you started with does not show in the list, because it has not yet been saved to your web. You can save it now by choosing Save from the File menu.

As you may know from working with Windows Explorer, you can click on the plus or minus sign next to a folder to expand or collapse it, revealing any other folders and files inside it. To look at one of the pages listed, double-click on it.
Tip: You can turn the folder list on and off by selecting Folder List from the View menu. 

Views Toolbar

On the left side of the FrontPage Explorer window is the Views toolbar. The current view is probably the Page view. This is the view you use to work on individual pages in the web. Some of the other views are discussed next.

Folders View

Click the second button in the Views toolbar to see the Folders view. Now, rather than a page in the right windowpane, you see the contents of the folder selected in the folder list. Working in this view is just like working in Windows Explorer or the My Computer window, except that here you can see only files and folders in your web. You might use the Folders view to rename, copy, move or delete files. To learn more about working with files and folders, see Windows 95/98: File Management.

Navigation View

Click the Navigation button to see your web pages displayed in a hierarchical fashion, like an organizational chart. If you created a Personal Web, your web has a home page and three other pages under it. You can change the way pages under the home page are related to each other by dragging them to different levels; when you re-arrange your pages, FrontPage automatically fixes the links it creates between pages. You can also change your page titles from this view. Right-click the title shown in the box, select Rename, and type a new name.

The page you started with is not part of the web hierarchy yet. Link it to other pages in your web by dragging it from the folder list into the Navigation area, on the same level as the other three pages under the home page.

Menus in FrontPage 2000

As you work with pages in FrontPage 2000, you may have trouble finding particular menu commands. Microsoft has chosen to hide different menu items in this and other Office 2000 programs. To see the full list of menu commands, click the double-headed arrow at the bottom of any menu . You can also pause after opening the menu, peer at it for several confused seconds, and eventually the menu grudgingly shows all its commands.

Once you know the secrets of the new menu system, you may be happy to keep it. Given that you are learning to use a new program and menus can help you learn it, however, you may want to turn off this "feature." Select Tools, then Customize, and then the Options tab. Remove the check in the box next to Menus show recently used commands first.

Automatic Good Looks: FrontPage Themes

If you created a Personal Web, you probably notice that all your pages have a consistent look, compliments of FrontPage themes. Themes include fonts, colors, and a background. To apply a theme, select the Format menu, and then Themes. Select a theme from the list, and check out the preview of it in the window. You have additional options to choose from as well: Select a theme you like and select your options. You can apply the theme either to your entire web or to an individual page. Check the Page view to see how the theme looks on your different pages.
Tip: The document FrontPage 2000: Fine Tuning  discusses how to make changes to themes as well as how to format pages without a theme or install additional themes. 

Overview of the Page

To work on a particular page, you can switch to Page view and double-click a page in the folder list, or double-click on a page in Navigation, Folder, or Hyperlinks view. You can type, cut, copy, move, and format text on your page, just as you do in a word-processor. In fact, the Editor "standard" toolbar probably looks somewhat familiar to you if you have used Microsoft Word. You can use the toolbar to add a new page to your web, open, save or print a page, create links and add images.

Seeing Your Page Differently

At the lower left corner of the page are three tabs:  Notice that you cannot make any changes to the page in Preview, so be sure you are using Normal or HTML view when you want to edit.

Navigation Bars and Shared Borders: A Brief Introduction

If you created a Personal Web, take a look at the home page and then one of the other pages FrontPage created for you automatically. Notice that the program inserts a "navigation bar" in a border area shared by all the pages in your web. The navigation bars--links or buttons--normally appear on the left and top of the web pages. In the shared border area of some pages, however, no buttons or text links appear. Instead, a message explains that you can modify the navigation bar. This message is also an indication that other pages have working buttons or text links in these positions, but the buttons or text links do not actually appear on the current page. Do not delete the messages about the Navigation bar unless you also want to lose your shared border. The messages do not show up on your pages when you publish them; they just remind you not to put any text or graphics in their position. You can learn more about navigation bars in the document FrontPage 2000: Shared Borders, Tables & Frames .

Adding Text to Your Page

You can type text in the Page view (on the Normal tab) just as you do in a word-processor. You can also easily add documents created in a word-processor to your web page, as described next.

Copying and Pasting

Open a file in your word-processor, and copy the material you want to put on the web page. Switch to FrontPage, and then choose Paste from the Edit menu. The material is inserted in your page.

Inserting Documents

To insert an existing document or other file into your page, first, make sure you are working in Page view on the Normal tab. Select the Insert menu in FrontPage, and then select File. Change the Files of Type to show the correct file type (such as Word). Find the file using the Look in list at the top of the window; select it, and then press OK. The entire file is inserted in your page.

Formatting Your Page

Formatting should make it easy for your readers to pinpoint the information they need. Subject headings, lists, and highlighting call attention to particular sections of your page. As with a word processor, you can select text and apply formatting, or choose formatting options and then type. You'll find that most of the formatting options in FrontPage work just like most basic formatting options in a word processor.

To change character or paragraph formatting, select a block of text, and then select either an option from the Format menu or a button on the formatting toolbar.

Formatting Characters

The theme you select determines the default font of your web pages; you can change the font on individual pages by selecting from the font list on the formatting toolbar. Keep in mind that a browser can override your choice of font. If a computer does not have the font you specify, it substitutes one. If you absolutely must have a particular font, insert a graphic instead of formatting text on the page.

You can use other buttons to change text formatting, such as increasing or decreasing text size or making text bold, italic, or underline. (Be aware, however, that underlined text is not recommended on a web page, since many browsers are set to underline links.) If you're not completely happy with the text colors assigned by your theme, you can select a different text color by clicking on the arrow next to the font color button .

For more character formatting options, select Font from the Format menu. You can make changes using the window's two tabs, Font and Character Spacing .

Removing Formatting

To remove all character formatting from a selected block of text, select Remove Formatting from the Format menu.

Formatting Paragraphs

Select paragraph formatting options on the formatting toolbar to create bulleted or numbered lists, change indentation, align paragraphs to the left, center or right, indent text from the page margin, or apply styles that combine several options at once. The drop down style list on the far left of the formatting toolbar includes the following options: To double-space paragraphs or choose other spacing options, select Paragraph from the Format menu.

Bulleted and Numbered Lists

A numbered list indicates a sequence or order; a bulleted list indicates a collection of items or topics that are not in a particular order. To create a bulleted or numbered list, select the list items and then select the Bullets or Numbers button from the formatting toolbar. To change the style of bullets or numbers or to change the starting number, choose the Format menu, and then Bullets and Numbering.

To create multi-level bullets or numbers, type one bulleted item, press Enter, and then press the Increase Indent button twice before typing the next bullet. Change your mind? Put your cursor in the indented line and press the Decrease Indent button twice.

If you have a multi-level list, you can choose Enable Collapsible Outlines from one of the tabs in the Bullets and Numbering window. With a collapsible outline, an Internet Explorer user can click on a bullet at one level to hide or display bullets at the next level. Lists do not appear as collapsible outlines in Netscape Navigator.

Adding a Horizontal Line

A horizontal line helps set off sections of your page. To add a line, select Insert and then Horizontal Line. To make adjustments to a line, right-click on it and select Horizontal Line Properties. If you've selected a theme for your Web, elements like horizontal lines and bullets coordinate with that theme.

Images

A web page and an image (graphic) you put on it are actually two separate files. The HTML code simply points to the image file. This means you can reuse a single file on several different pages or several times on one page. The majority of Web browsing programs read two types of graphics files: gif or jpeg.

You can create images, use clip art, or copy images from the Web. This document discusses using clip art and copying images from the Web.
Please note: Documentation is available on Image Composer, which you can use to create or edit your own images. Image Composer is included with FrontPage 98 and the stand-alone version of FrontPage 2000, but not with Office 2000 Premium. To begin learning about the program, see FrontPage 98: Intro to Image Composer . There is also  documentation about a powerful graphics program, Photoshop. See Photoshop 5: Introduction

Using Clip Art

To insert clip art on your page, select Insert, then Picture,and then Clip Art . Select a category from the list, and then find a clip you like. If you rest the pointer arrow on a clip without selecting it, a message shows the file size and the three character file extension, which indicates the file type. The clip listed is probably not a gif or jpeg, but do not worry; if you are working in a FrontPage web, FrontPage will convert it to a gif. To insert a clip, click it and then click the Insert clip button.

To move back and forth between categories you have seen previously, use the back and forward buttons at the top of the window. If you get lost and want to return to the opening window, click the  show all categories button. To look for a particular image, click in the area at the top of the window marked Search for clips,and type a search term. You can also select the Sound or Motion Clips tab to insert multimedia files.

Is it Legal to Use Microsoft's Clip Art? What About Copyright?
Microsoft grants FrontPage users permission to use its clip art files on the Web, with certain restrictions; for example, you do not have their permission to sell their clip art to other people. Full details of the user's agreement for clip art are available at the Microsoft clip art web site, which you can access by connecting to the Internet and clicking the Clips Online button.

Copying Images from Other Web Pages

You can copy or download images from other pages on the Web. Before you "borrow" a graphic from the Web to put on your own page, be sure it is not copyright protected. (For more information about copyright, see the Center for Information Technology's guide at http://www.unc.edu/cit/guides/irg-04.html). To copy an image from the Web, right-click on it in the browser window, and then select the option to save it.

Inserting Image Files

To add an image file (other than clip art), select the Insert menu, then Picture, and then From File. Once you select the file, click OK, and the image is added to your page.

Making Your Page More Accessible: Alternate Text

Not everyone who visits your page will be able to see your graphics. To make your page more accessible, provide "alternate text," which displays in browsers that do not display graphics; these tags can also be read by software that converts text to audio for visually impaired visitors to your page.

To add alternate text, right-click on an image, and then select Picture Properties. Find the Alternative Representations section of the window, and type a label or explanation for the graphic in the Text box. Click OK.

Copying, Moving, or Deleting an Image

FrontPage treats images like characters, so you can copy, cut, and paste them. Click on the image, and then select the appropriate toolbar button or select a command from the Edit menu. You can also move an image by simply clicking and dragging it. To delete a graphic, click on it and then press the Delete key on your keyboard.

Changing an Image's Size or Alignment

Click on an image, and square resizing "handles" display at its edges. Point at a handle, and a double-headed resizing arrow appears; click and drag to resize the image. To maintain the relative size of the image, drag a corner handle.

To align the image to the center, left, or right of the page, select it and then select one of the alignment buttons on the formatting toolbar.

For more control over the position and size of the image, right-click on it and select Picture Properties. Switch to the Appearance tab, where you can adjust the alignment of the image relative to text, its horizontal or vertical spacing from text or other graphics, add a rectangular border around it, or change its size in pixels.

Saving Images with Your Web Files

If you insert an image or multimedia file, FrontPage prompts you to save the "embedded file" when you save your web page. Saving the file adds it to your web so that it is uploaded to the WWW server with the rest of your files. When you save the file, you can click Change to change the folder location. You may want to put all your graphics in the Images folder FrontPage automatically provides, but this is purely a matter of organizational taste and not a requirement.

Keeping an Eye on Browser Download Time

As you probably know from browsing, the size and number of graphics, animations, and other multi-media files can slow the download rate, so use these with thought and care. To help you keep tabs, check the FrontPage status bar at the bottom of the window, where a message displays the approximate download time for browsers connected to the Internet at the connection speed shown. This time estimate changes as you add images and text to your web page. To see the download time estimate for different connection speeds, click on the message and select an option from the menu that appears.

Making Links

You can easily provide text or image links to other pages in your site or around the world. Visitors to your page will quickly scan it to find the links they want, so give your text links meaningful names and use graphics that give some indication of where the link is headed.

Links to Other Web Pages

On your page, select the text block or image you want to be the link, and then click the Hyperlink button on the standard toolbar. In the URL box, type the Web address to which the link refers. Better yet, get the URL by visiting the page on the Web; that way, you know the URL is free of typing errors. In the Create Hyperlinkwindow, click the Use your Web browser to select a page or file button.

If your Web browser is not running, it starts; if it is already running, its button on the taskbar flashes, inviting you to click on it and bring the browser window forward. Visit the page to which you're linking, and then click on the FrontPage button in the taskbar to return to FrontPage. Notice that the URL for the page you visited is now in the URL box. Click OK to complete the link.
Tip: To make sure you get the correct URL, be sure you have only one browser window open. If you have more than one browser running, the URL may come from any one of the open browser windows.

Testing Links

Your links will look good on the Normal view of FrontPage, but they won't work. Preview the page to test your links. Remember, you must be connected to the Internet to follow a link to a World Wide Web page, but you can test links to local pages without an Internet connection.

Removing or Modifying Links

To edit a link, select it, select the Hyperlink button, and make changes to the URL. To remove a link completely, select the link text or graphic. Then select the Hyperlink button, and delete absolutely everything from the URL box, including http://.

Signing and Dating Your Work

Providing a Link to Send Email

You can put your email address on your page so that visitors can easily contact you with questions or comments. Simply type an email address on your page, and FrontPage turns it into an email link. If visitors to your page have their browsers configured to send mail, they will be able to send you a message by clicking on this link. This link works with most browsers, including Internet Explorer, Netscape and Lynx. If you would like to make other text or a graphic into an email link, select the text or graphic and then select the Hyperlink button. Click the Make a hyperlink that sends email button, and type the email address in the window that appears. OK your change. 

Putting a Date on the Page

At the bottom of your page, it is also good form to put the date it was last updated. Since this is the World Wide Web, the recommended format is Day-Month Year, as in 31-December 1999. FrontPage can automate this process, updating the page automatically every time you edit your page. Go to Insert, Time Stamp, and select your preferred date format from the drop-down list.

Previewing Your Page with Different Browsers

The Preview window in FrontPage editor uses an older version of Internet Explorer, so it's a good idea to preview your pages in other browsers as well. To see your page with your "default" or preferred browser, click the Preview in Browser button on the Editor toolbar. If you have more than one browser, select Preview in Browser from the File menu instead. You can then select your alternate browser from the list. You can also select a different Window Size to get an idea of how the page will look on monitors with different screen resolution from yours.

What Do You Call Home? Your Home Page's File Name

On the campus Web server, it is ideal to call your home page index.html. Notice that the characters in the name are all lowercase, and it ends with "html" not "htm". If a page is named index.html browsers can get to your site using the simple address format http://research.umbc.edu/~username/ , substituting your actual username for the word "username."

To change the name of your home page, right-click on the home page file in the folder list, and select Rename. Replace the current name with index.html. You might also want to change the names of other pages so that their "extension"--the last characters of the file name--is .html, which is more commonly used on the web than .htm. This name change may help cut down on errors when people try to get to your pages, although either extension works.

Publish Your Page on the (World Wide) Web Server

To make your page available to the world, you must put it on a World Wide Web server. If you have an account on the campus email server (research.umbc.edu), you also have space on the Web server (www.umbc.edu). If you don't plan to get an account on the campus server, you still have other options and sources of help:

Overview of the Procedure

  1. Assuming you have an account on the campus email server (research.umbc.edu), claim your Web space.
  2. Publish your files to the Web server using FrontPage.
  3. Check your page with a browser. If your files are on the campus Web server, your web page address is www.research.umbc.edu/~username/ Replace the word "username" with your actual user ID.

***1. Claim Your Web Space (One Time Only)

Before transferring your files, you need to claim your Web space. To do this, go to the UMBC home page at http://help.unc.edu/ and select the link to Create an Onyen. Next, if you have an Onyen, click the button to Subscribe to Services. The page guides you through creating your Web space, which takes approximately 45 minutes to take effect. If you do not yet have an Onyen, click on the button to create one, and allow 24 hours for it to take effect. Then follow the link to subscribe to services. You are given 5 megabytes of file space on the Web server.

2. Publish Your Files to the Web Server

When you publish your web to your personal space on the campus WWW server, you are actually putting it in a folder there called public_html. Once your web is in this folder, browsers all over the world can visit it. If you want to have more than one web, you can also choose to organize them in subfolders of public_html.

To publish your files with FrontPage, connect to the Internet. Select the File menu in FrontPage and then select Publish Web . . . In the Publish Web window, complete the box labeled Specify the location to publish your web to as follows:

Click Publish.

To connect to the server, type your Onyen in the Name box, and complete the Password box. If you are ready to publish your files, click OK. Your files are transferred to the public_html folder and are now accessible on the WWW.

Once the files are all published, FrontPage asks if you want to view your published web site. This option simply does not work with the campus server. Resist the temptation, and instead click Done. Checking your pages with a browser is discussed below.

Check your Web Pages with a Browser

If you've named your home page "index.html," your web site begins at http://www.unc.edu/~onyen/. The address of other files in your public_html folder is http://www.unc.edu/~onyen/filename.html. If you publish a page called index.html to a sub-folder of public_html, its address is http;//www.unc.edu/~onyen/sub-folder/. Remember in each case that instead of the word "onyen," you need to substitute your own Onyen (userID), and,as appropriate an actual file or folder name.

If possible, check your page on several different monitors with several different browsers, including Lynx. Lynx is a text-only browser on isis.unc.edu. Use a telnet program to connect to isis.unc.edu, and then start Lynx from the Isis menu by choosing World Wide Web . Go to your page by typing G, and when prompted, type your URL. Type Q to quit Lynx. For more information, refer to the document Using Lynx at UNC-CH (iib03).

Publishing After the First Time

If you make changes to your web and want to publish it again, look at the options you have available in the Publish window first. Select Publish Web from the File menu, and click the Options button. You can reduce the time it takes to publish by selecting the option to Publish changed pages only; on the other hand, you can update files already on the campus server by selecting Publish all files, overwriting any already on the destination. If you have created a web inside your original web folder, you can publish the original web and the "sub-web" by selecting Include subwebs; otherwise, leave that box unchecked.

If you click the Publish Web button on the toolbar, FrontPage publishes your web using the settings it used when you last published. Remember, if you need to change those settings or to publish to a different folder on the campus WWW server, be sure to select Publish Web from the File menu rather than using the toolbar button.

Don't Try This at Home . . .

As you experiment with FrontPage, you may be tempted to add features that do not work when you upload the pages to the campus server or that work only in Internet Explorer. These components are listed below.

Components That Do Not Work on the Campus Server

For security reasons, the campus Web server does not have FrontPage server extensions; therefore, the following FrontPage components do not work on the campus server: If you want to use any of these options, you need to find an alternative site for your web. For more information, refer to Microsoft's list of what it calls "web presence providers" at http://www.microsoftwpp.com/wppsearch/You may also want to read the Microsoft article "FrontPage Features that Require the FrontPage Server Extensions" at http://officeupdate.microsoft.com/2000/articles/FPSEreqs.htm
Forms Alternatives
As an alternative to using FrontPage forms, you might choose to create your own. If you are a professor or teaching assistant, you might create a page using the forms or quiz builder offered by ATN's Center for Instructional Technology at http://www.unc.edu/cit/services/. Save the form or quiz to your computer, and then open it in FrontPage by choosing Open from the File menu. Be sure to save the page to your web, to provide links to it from other pages, and, finally, to publish it with your web.

If you're not afraid of writing some HTML code, you might also try building a "G-form" yourself in FrontPage's HTML view. For details about working with HTML to create G-forms, refer to the ATN document Web Authoring: Forms and Counters (iid08).

Formatting Options That Do Not Work in Netscape

The following FrontPage formatting options work in Internet Explorer but not in Netscape:

Setting Compatibility Options: A Dilemma

In FrontPage you can change settings to make your web compatible with particular browsers and servers. The intent is to keep you out of trouble by eliminating various options that work in one browser and not another. To take a look at the compatibility settings, select the Tools menu, then Page options . On the Page Options window, select the Compatibility tab. You can make one change without hesitation: if you are using the campus server, set the Server to Apache and do not check the box next to "Enabled with FrontPage Server Extensions."

Choosing browser compatibility options presents more of a dilemma. If you set the compatibility options so that your web is compatible with both Internet Explorer and Netscape, then you will be unable to choose any option that does not work perfectly in both browsers, such as collapsible outlines. You will have to decide whether to put these restrictions on yourself, or whether you would rather be free to experiment.

Getting Help with FrontPage

ATN does not support FrontPage, so the IT Response Center will not be able to answer your questions about it. You can get help with FrontPage through the usual online Help, which includes a glossary of terms. To access the glossary, search for the term "glossary" in the Help window. You may also find answers on Microsoft's Web pages. If you are connected to the Internet, select Help and then Office on the Web. This links to the Microsoft Office Update page. From this page select the Office Update Support option to see more sources of help, including troubleshooting guides, lists of Frequently Asked Questions (FAQ), and newsgroups that discuss FrontPage. Perhaps not surprisingly, Microsoft recommends that you use its Internet Explorer browser when you visit its support site.

This document is a publication of Academic Technology and Networks at The University of North Carolina. It may be copied for individual or non-profit use. Please send comments about this publication to CB# 3450, 402 Hanes Hall, Chapel Hill, NC, 27599-3450 or to atndocs@unc.edu. Authors: Anne Carter and Lorena Russell. Editor: Jennifer Haytock. Revision date: July 31, 2000. ATN Document iid20