FrontPage 2003 Tutorial

Microsoft FrontPage 2003 is a web editing and web management program for computers running Windows operating systems. FrontPage is installed on all computers in the Lehman Computer Center (LCC), and in residential computer labs. Scanners and image editing software are also available in the Lehman Computer Center (LCC).

However, if you want to work on your personal computer or you are interested in trying out different programs, there are many alternatives to Microsoft FrontPage.

The following topics will be covered in this tutorial:

• Getting Started with Frontpage
• Importing Files into Your Web Site and Inserting Pictures
• Tables
• Creating Hyperlinks
• Bookmarks (also called Named Anchors in other Editors)

Getting Started

1. If this is the first time you are creating this web site, create a folder on your removable disk or other disk where you will save your web files. For this example, I have created a folder named "web site" on the hard drive of my computer. If you already have a web site, you can edit the files you currently have using FrontPage, you will still be able to edit the same files using other web editing programs if you wish. FrontPage also allows you to edit HTML -- click on the HTML tab at the bottom of your page window to switch to the HTML screen.
2. Open FrontPage 2003
3. When you first open the program it looks very similar to other Microsoft Office 2003 programs, in fact many of the commands in the tool and menu bars serve equivalent functions. By default, FrontPage will open in the new page window. However, since a web site is a collection of files which are usually related, we want to open a whole folder where we will save our new web files. We will use the folder that we created at the beginning of this session.
4. Choose File --> Open Site, browse to and select the folder that you just created, mine is called "web site".
5. The Add FrontPage Information window will open. This window displays a message that FrontPage needs to add information in order to manage your hyperlinks and other site content. Say yes to add this information to your folder.
6. The Web Site pane will open up showing your folder and within it two folders that have been created by FrontPage: "_private" and "images". Do not delete the "_private" file as it has contents that help manage your site. You can delete the "images" folder if you like, or use it to store images, that's up to you. If you want to you can create your own subfolders in your web site by choosing File --> New Folder or right-clicking in the Web Site pane and choosing New Folder.
7. Start creating your first web page by choosing View --> Page
8. A blank page opens with the name "new_page.html". Save this first page as "index.html", using the familiar File --> Save As command, "index.html" will be your home page, the page that opens first when someone visits your web site.
9. Notice that the bottom of your page has four buttons, these allow you to switch to and from several view of your page. Design allows you to edit your page in wysiwyg mode, Split allows you to view and edit both in wysiwyg and in HTML, Code allows you do view and edit only the HMTL code, and Preview shows you a preview in FrontPage of what the page would look like (you cannot edit in Preview mode). Remember that to really see what your site would look like online, you should use the command File --> Preview in Browser and choose a web browser (ex: Mozilla Firefox or Internet Explorer). FrontPage automatically detects the web browsers you have installed, it even allows you to preview your page at several screen resolutions.
10. The next thing to do after saving the "index.html" file is to set the page properties for this page by choosing File --> Properties or by right-clicking in your page and choosing Page Properties.
11. In the General tab, type a title for your web page in the Title Text box. This title will appear at the top of the browser window when your page is being viewed online. My title here is "Welcome to my web site". You can also type in a page description and keywords to help people find your page in an internet search. In this case, if someone uses "live jazz" or "cats" as their search keywords, the file "index.html") should be one of the pages that comes up in the search results. Of course, depending on a number of things -- like how many other people visit your site or link to it, it may not be at the very top of the list.
12. Click on the Formatting tab and select colors for your background, text and links. Do not leave the colors as "Automatic" because then they will default to whatever settings the person visiting your page has on her computer.
13. To use a picture for your background, you would need to import the picture into your web site first. Once you have imported the image file, click on the check box labeled "background picture" and browse to the image file you would like to use for your background. Keep in mind that the picture will tile (unless you specify otherwise using a special code in the HTML window), so it would be good to use either a picture that is large enough to fill up your browser window so that it tiles only once, or to use a subdued image that will not be too distracting if it tiles -- that is, of course, unless you intentionally want a busy effect. You may be better off using the image as a background in a table or a cell of a table. We will introduce tables later in this session.
14. After you have specified the above, close the Page Properties window by clicking on OK.
15. Next, let us set the font and font size for your page. You can change these for individual lines as you work too. Choose Format --> Font from the Menu Bar, this will open the Font window from which you can select a font as well as it's style and size. Click on Apply and then OK to close this window. You can get the Font Window by right-clicking in your page and choosing font.
16. After you have selected your font and chosen your page properties, you can start typing in the content of your web page. You can edit the html code as well if you like, clicking on the HTML tab switches you to the window in which you can edit your page-using HTML. You could also use the Split mode to edit both ways or to observe the code that FrontPage inserts as you type in the wysiwyg window.

Importing Files into Your Website and Inserting Pictures

1. To insert pictures into your web page, you first need to prepare the image files. For example, you can scan a photograph and then save it on a disk to be used in your web page.
2. To import a file, click on the Web Site tab at the top of window near the File tab (the file tab shows the filename, here it is "index.html") to go back to the Web Site pane.
3. If you would like to import the file into a folder, double-click on the folder that you want to import the file into. Since we want to import an image, double-click on the "images" folder (you are not obligated to keep your images in the this folder, although it will probably be easier to keep them all in one place).
4. Once you are in the folder into which you want to import your files, choose File --> Import. This will open up the Import window. Click on Add File (note that you can also import entire folders by clicking on Add Folder). The Add File to Import List window will open. Browse to the location where you saved your file, select it and click on Open. This brings you back to the Import window where you can just click OK.
5. The Import window will close to bring you back to the images folder. Now open the file that you want to add an image to. When you have opened the file, place your cursor where you would like your picture to go and choose Insert --> Picture--From File
6. This command opens the Picture window, which shows the folder containing your web pages. (In this case I named my folder "web site"). Browse to where you image file is. In this case our image file is in the "images" folder. When you have found to your image file, select it and click OK or double-click on it. Now the image you chose should be inserted where your cursor was when you opened the Picture window.

Tables

1. One of the ways to organize the content of your web page is by using tables. This allows you to position text and pictures strategically on your page. You can create a table by choosing Table --> Insert --> Table
2. This command opens the Insert Table window where you can choose the number of row and columns and other options such as border size, table width, etc. You can alter these properties even after you've created the table. Simply right-click on the table and choose Table Properties, this opens the table properties window again and you have the opportunity to choose a background color or background image for your table, change it's size or alter the table's borders.
3. Similarly, you can edit the properties of individual cells. Right-click inside the cell and choose Cell Properties.
4. The right-click menu is context-sensitive and it changes depending on the object or area where you click your mouse. Many of the items on this menu can be found from the menu bar. You may find it entertaining to discover where these items are on the menu bar.

Creating Hyperlinks

You can create links to other pages using text or pictures.

1. Select the object that you want to turn into a link and choose Insert--> Hyperlink. This opens up the Create Hyperlink window.
2. You can choose to link to a file within your web site by clicking on the file you wish to link to. The name of this file will appear in the Address text box. You can also link to a page outside your web site by typing its URL in the same textbox. Here I am linking jazz vocalist Maxine Sullivan's image to the web site whose address is http://www.swingmusic.net/Sullivan_Maxine.html
3. For the following exercise, create a second page and save it. Choose File --> New and then choose Blank Page in the panel on the right or use File --> Save-As to save your "index.html" file under another name. Copying your index page will save you time because you won't have to re-do the fonts and page properties for the new page. I have named my second page "jazz.html", and decided to delete the picture and table. I still have to change the title of this page in the Page Properties dialog box (File --> Properties), you can change the keywords and description as well.

Bookmarks (also called Named Anchors in other Editors)

You may want to link an object on your page to a particular point on another page within your web site. This can be useful if you have a particularly long page. Note that it is usually better to have more short pages, rather than one long page to prevent the ennui of scrolling up and down miles upon miles of web pages.

For example, I want to link the name Nina Simone on in my "index.html" page to her picture, which I had placed at the very bottom of the file named "jazz.html". First I will create a bookmark next to Nina Simone's picture in the file "jazz.html" and then go back to "index.html" and create a link on the words Nina Simone.

1. First open the target file, in this case "jazz.html". Scroll down to where the bookmark should appear, in this case next to Nina's Simone's picture. Click to place your cursor in position and then choose Insert-->Bookmark. The Bookmark window will open.
2. Choose a simple short name for your bookmark using all upper or lower-case letters. Click OK. Now go back to "index.html". Select the item you will link from, in this case it's the text "Nina Simone". Choose Insert --> Hyperlink. In the Create Hyperlink window, click on your target file, in this case "jazz.html".
3. Now click on Bookmark. This opens up a list of the bookmarks that are available on your target page, in this case there is just one, "ninaphoto".
4. Click OK and save your file.
5. Now when the viewer clicks on "Nina Simone", in the sentence "We simply adore Nina Simone" in the "index.html" file, the target file "jazz.html" will open up displaying the location of Nina Simone's picture.