FrontPage is a "word processing" program for creating web pages. It is referred to as a WYSIWYG [pronounced "wisi-wig"] editor. WYSIWYG means "What You See Is What You Get"; pages look similar in the editor to how they will look in a browser. Because FrontPage is a "word processing" type of program, it has features with which you are already familiar. However there are additional features in FrontPage that help you create web pages. Links to FrontPage Features
Getting Started
When you create a web site using an editor that isn't FrontPage, you ftp or publish your files to your web server, and your site is online. With FrontPage, however, it is slightly different. In addition to the folders and files you create for your pages, FrontPage creates several folders and many files that are part of your site. These files and folders are known as a "FrontPage Web". The folders and pages you create are added to the FrontPage Web. The first time you publish your pages, you must publish the whole FrontPage Web. FrontPage has a Publish Web icon that will do this publishing for you. If, for some reason, you do your own publishing through ftp, you must ftp all of the files and folders that are in the FrontPage Web.. The easiest way to do this is to ftp your whole project folder to the web server.
The first step in creating a new web site via FrontPage is to have FrontPage create the FrontPage Web. You do this as follows (these instructions are for FrontPage 2002. They may be slightly different for later versions).
Use Windows Explorer or My Computer to create a project folder on your hard drive. The name of this folder is optional as long as it does not contain spaces. Also, it is suggested that you use all lower-case letters and numbers to be compatible with older servers.
Create the FrontPage Web by clicking on File and then on New Page or Web. You well get a new window that contains options. Click on the New from template
Web Site Templates... link. You will get a new window that contains icons for several templates. To the right of the icons is a text box labeled Specify the location of the new web. Browse to find your project folder and double click on the folder to cause the name of the folder to be entered into the text box. Then click on one of the templates. If you don't want to use any of the templates, click on the One Page Web icon to create the FrontPage Web. The FrontPage Web will contain one page, your home page. Right click on the file, as shown in the Folder List, and rename the file to index.html (using a 4-letter extension is for compatibility with older Unix servers).
To the left of your screen, you should see a Views pane with several icons in a vertical bar. In the middle of the pane is a Navigation icon. Click on that icon to see the beginning of a hierarchical diagram of your web site. Click on the Page icon to return to the page mode. If you don't see the Views pane, click View and then Views Bar.
To add pages to your site, click on the Create a new normal page icon. This icon is the leftmost icon in the tool bar and looks like a blank page with the top right corner folded down. Click File and then Save As... to save the page in your FP Web. The name of the page is your choice as long as it contains no spaces. The extension can be .html or .htm
Click on the Navigation icon to go to the hierarchical chart. Drag your new page to the chart and place it in your desired position in the diagram. For example, the first page you create (after the home page) would be positioned below the home page as a child. The second page could be positioned to the left or right of that child, to be another child, or it could be positioned below the child to be a grandchild of the home page. The order in which you place the pages will be the order the pages appear in navigational bars that FrontPage can create for you.
Right-click on the text that is in each block in the hierarchical chart to change the wording. The wording existing in the blocks is used in the navigational bars created by FrontPage.
Use FrontPage to add content to your pages. The remainder of this page outlines some of the features of FrontPage.
Publishing to the Server
After you've created web pages, you must place the page on the web server hosting your site. The act of moving your pages to the server is known as publishing. FrontPage makes publishing easy, and by default it only publishes pages that have changed. If you want to publish all of the pages, click Tools, then Options, then the Publish tab, and finally All pages, followed by OK.
To publish your pages, click the Publish Web icon in the tool bar (near the left of the bar), or click File and then select Publish Web...
Before you can publish, you must tell FrontPage were your pages should go when they are moved. This involves (a) giving the domain of the web server, and (b) the path on the server to your pages. To do this, click File and select Publish Web... At the top of the Publish Web window, you will see a Publish from: statement with the path to your project folder. Under that is a to: text box, and you must use that text box to give the domain name of the server and path information to your pages. Do the following to enter that information.
 | If the server uses special cgi software known as FrontPage Extensions, enter the URL (http) address of your site into the text box and click OK. Then click the Publish button. | ||||
| If the server does not use FrontPage Extensions, you must specify a ftp address to the server and your files. Click the Change... button and enter the ftp address. The webmaster of the server can tell you what the ftp address should be. Here are examples of ftp addresses that I've used (my server doesn't use FP Extensions).
|
Use of Enter
When entering text, you should normally let the words automatically wrap to the next line. However, at times you may want to force a break to the next line, e.g. starting a new paragraph. There are two ways to force a break. | Press Enter. Pressing the Enter key will cause a blank line to be inserted into the page, and the keyboard cursor will be positioned at the beginning of the line following the blank line. That is, a XHTML <p> element is inserted into the page. |
| Hold Down Shift and Press Enter. Holding down the Shift key and pressing Enter will cause the keyboard cursor to be positioned at the beginning of the next line. There will be no blank line inserted into the page. That is, a XHTML <br> element is inserted into the page. |
Caution: Use of Shift - Enter
People often create groups of phrases, such as the following:Phrase 1In order to keep the phrases close together, they end each one with a shift - Enter (<br> or line-break tag).
Phrase 2
Phrase 3
Phrase 4
This use of shift - Enter may cause problems. Consider the following scenario. After creating the group of phrases, you decide to make the phrases bullets. You click on the first phrase and then on the Bullets icon. To your surprise, the group of phrases is considered one "unit", and all of the phrases share the same bullet. Similar results would be obtained if you tried to make one phrase a "Heading" rather than "Normal" text. All of the phrases would become the "Heading".Solution: Separate the phrases by an Enter (<p> or paragraph tag). This isolates the phrases such that each one is a unique "unit".Phrase 1Phrase 2Phrase 3Phrase 4
The disadvantage of this solution is that the phrases are separated by blank lines. The blank lines can be removed if you make each a phrase a "bullet". Bullets end with an Enter, thus isolating the phrases from each other, but they are not separated by blank lines. If the phrases shown above are made bullets, they would look like this: | Phrase 1 |
| Phrase 2 |
| Phrase 3 |
| Phrase 4 |
Sometimes, when you have groups of links separated by shift - Enter, FrontPage considers subsets of the links as one "unit" and assigns them the same link-value. FrontPage, however, is not consistent when dealing with groups of links.Background Color
To set the background of a page to either a solid color or to a graphic image, right-click on the page background (in an area that is not part of a table). Click on Page Properties. Click on the Background tab. To set a solid color for the background, click on the colors at the bottom of the window. To set a graphic image as the background, click on the Background Picture check-box and enter the name of the graphic file. If the file is in a different folder than that of your home page, click on the Browse button and then manipulate the folders to locate the file; double click on the file.Graphic Images
To insert icons and other graphic images into your page, position the keyboard cursor where you want the image inserted. Click on the Insert Image icon in the Tool Bar (a yellow square). Enter a file name in the From File field. File names can not contain spaces. It is strongly recommended that in the beginning, you put all your graphic files in the same folder as your home page (index.html) file. By doing this, you will have to enter only the file names of the graphic files in the From File field. Otherwise, you will have to enter the names of the appropriate folders to establish a path between the graphics file and the folder containing the home page. If necessary, use the Browse button to work through the Windows folders to locate your file. After the graphics file is inserted into your page, right-click on it to get an Image Properties window that will let you manipulate properties, such as size, of the graphics image. Every graphic should have a text description (alternate text) attached to the graphic. While in the image properties, enter the brief description into the Text field (in the General tab). The description will load faster than the graphic, and people can read the description while they are waiting for the graphic to load. Also, blind people will be able to hear the description via their text-to-speech converters. When a web page is being viewed, this text description pops up when the mouse curser is placed on the graphic.To use an icon as a link, enter into the Default Hyperlink Location field the name or path to the name of the file or the http:// address that is the destination of the link.To temporally change the display-size of the graphic, click on the Appearance tab and then on the Specify Size check box. Enter the new size in pixels into the Width and Height fields. Be sure the Keep Aspect Ratio box is checked. This is a temporary change, because all you have done is change the size of the display on your monitor screen; the size of the graphics file has not been changed. To permanently change the size of the file, click once on the picture to select it. A new tool bar will appear that is called the Pictures Tool Bar. this tool bar has a resample icon that you can use to resample the graphic at its new size. When you save the page, you will also save the graphic in its new size. If the Picture Tool Bar doesn't appear, click on View, then on Tool Bars, and then on Pictures.To delete a graphic image from your page, click on it to select it and press the Delete key. Horizontal Lines
To draw horizontal lines across your page (useful to separate things, but don't over do it), click on the Insert entry in the Menu bar and then on Horizontal Line icon in the Tool bar. Links
To use existing text as a link, highlight the text and click the Insert Hyperlink icon in the Tool bar. If the link is to another web site, enter the web address (URL) in the Address field. If the link is to a file in your Project folder, put just the name of the file in the Address field. Do not include hard drives on your system as part of the file names! If your link is to a file on your hard drive that is not in your Project folder, you will have to include the relative path from your Project folder to the file; if you use Windows Explorer or My Computer to paste the path into your link, change the back-slashes to forward-slashes. Names of files and folders can not contain spaces.Creating New Windows
If you put in your web pages links to other sites, it would be nice if you could display the other web sites in different windows, allowing your window to remain visible in the browser. Visitors could thus visit the other sites without leaving your site. You can! By including a special parameter in your links, new windows will be opened. Here is how you do it.- Highlight the word or phrase that will become the link.
- Click the Insert Hyperlink icon.
- Click the Target Frame button and select New Window.
Links to the Same Page
Sometimes you will have a long page that is divided into sections. Instead of having to scroll down the page, your visitors can link to the sections. You create the links (a) by inserting "bookmarks" next to the headings, and (b) by linking to the bookmarks instead of linking to file names or URLs. Create the links to bookmarks as follows: To insert a bookmark:- Click next to the heading to place the keyboard curser at that point.
- Click on the Insert menu and then on Bookmark.
- Type the name of the bookmark in the Bookmark Name field. The name can be any unique word of your choice.
- Click OK to insert the bookmark.
- Highlight the word or phrase that will be the link.
- Click on the Insert Hyperlink icon.
- Click on the Bookmark button.
- Select the name of the bookmark for the link and click OK.
Browser Title
To give your page a title that will appear in the browser Title bar, right-click on the page background (in an area that is not part of a Table). If it isn't already selected, click on the General. Enter a title that describes your page into the Title field. Include two or three important keywords in the title, and you will get higher rankings from search services.Tables
Tables consist of columns and rows, and the intersections are called cells. They are very useful in aligning icons with text, and icons with icons. For example, a table consisting of one row of two cells could be used to align an icon in the left cell with text in the right cell. Position the keyboard cursor at the point where you want the table inserted and click on the Insert Table icon in the Tool bar. Drag to select the number of rows and columns you want.After the table is inserted, right-click on the table and click on Table Properties. If you want border lines to show in your table, set the Borders Size to a positive, non-zero number; the larger the number, the wider the border. Enter a 0 to remove the borders. In addition, the Cell Spacing parameter can be used to vary the width of the border. The Cell Padding parameter controls the amount of space between adjacent cells. Set these parameters appropriately. If you want the table to be as wide as the page window, set the Specify Width field at 100%. If you want the table to be a particular width, enter that width in either pixels or a % of the window. If you want the table width to automatically adjust itself to just fit the text or icons that are in the table, de-select the Specify Width parameter.Notice that you can change the background color of tables and cells.To delete a cell, row, column, or the entire table, click on one cell in the area (e.g. a row) that you want to delete. Click on the Table entry in the Menu bar and then click on the Select entry that describes the area you want to delete. Click the Table entry again and select Delete Cells.WebBot Components
FrontPage allows you to insert "Web Components" which are special functions. One web component that is very useful is the Include function. If you have information that appears in several places, you can place the information in its own page and then include it in the pages that need it. You only have one copy of the information even though it may appear several times. This site, for example, uses this include feature for the contact and copyright information at the bottom of each page. This is a cool feature!Experiment with the other Web Components to see if they would be useful to you.
Following Links To Other Pages
To open a page that is linked from the page that is currently open, press the <Ctrl> key and click on the link. You can also use the Open icon in the tool bar. Indenting Text, Graphics, Tables, etc.
If you want to indent text, graphics, or tables to cause them to stand out from the rest of the text, you can use the two Indent icons (one to increase indentation and one to decrease indentation). This paragraph has been indented once. The next paragraph has been indented twice.The Indent icons are at the end of the Format tool bar, just after the bullet icon. The indentation occurs at both the left and right edges of the page. Another use of the Indent icons is to remove unwanted bullets. Click on the bulleted item and click as many times as necessary to remove the indentation. The text remains but is no longer bulleted.
Symbols
You can insert special symbols, such as a copyright symbol, mathematical symbols, or special language symbols by clicking on Insert and then on Symbol.More Than One Space
A few years ago, web pages could only have one space between words. If you entered several spaces, the browsers only displayed one of them. Then, the XHTML was changed to allow multiple spaces, and the newer browsers were modified to display all of them. This scheme works because the spaces are actually special XHTML characters known as "non breaking spaces". The XHTML code for them is (the first character is the "ampersand" or shift-7). When you press the space bar, a non-breaking space is inserted into your page; you can, thus, press the space bar multiple times and get multiple non-breaking spaces.Show/Hide¶
Keep the Show/Hide ¶ feature turned on so you will get dotted lines around tables and so you will see the line breaks caused by doing shift-Enter. The dotted lines won't be seen when you view your page with a browser. The Show/Hide icon has this character on it: ¶.Forms
Forms are commonly used on pages that provide interactions with the visitors. Forms provide check boxes, radio buttons, text boxes, scroll text boxes, and drop-down menus. FrontPage can create forms, but the forms can't be used unless the web server has special cgi support called "FrontPage Extensions". If you know XHTML, you can use FrontPage to create forms, and then you can modify the XHTML to be compatible with the cgi provided by your web server.Marquee
FrontPage can insert scrolling text, called Marquee, into your web pages. However, Netscape/Mozilla does not recognize Marquee. To obtain scrolling text that is compatible with both Internet Explorer and Netscape/Mozilla, use a java applet.
© Copyright 1998, 2011 Allen Leigh