The Web Pirate

How to Start Using FrontPage Express Editor

By The Web Pirate, KC Crane

     If you can use Word or other text editors you can use FrontPage Express. They are all forms of text editors. Some of the important differences are the lack of Spell & Grammar Check in the FrontPage Express Editor. Another important thing to remember is that you can't copy and paste a document written in the other editors directly onto a FrontPage Express Editor page. The code they are written in will travel with them causing a problem in the code in the FrontPage Express Editor. To copy text from the other editors onto a FrontPage Express Editor page you must first paste it in to a plain text editor like Notepad first. Then copy it to paste into the FrontPage Express Editor page.

     Simple as that, most of the differences you as a new user will find are so minor you'll be designing pages in no time. The most important difference is the format the file is saved in when you are done and that is HTML the language that tells your computer how to display web pages.

     I suggest each time you make an addition to the page of any kind you look at what you have added by clicking view, html. This will open a new window that allows you to see the HTML code you have made. By comparing each step you will soon learn what each HTML code tag is used for and how it is wrote. I found this a great help in learning to write and edit HTML code.

When you 1st start:

     Remember before you start to place all the files such as backgrounds and any pictures you plan on using all in one file folder.

     Open FrontPage Express Editor. Save the file that it opens in the folder with the images. Save it by clicking on file, save as, as file, then browse to the same folder as the images and name it index.html and save it.

     This is all to make viewing it later easier. It causes the page to react just like it was online when viewing outside the FrontPage Express Editor.

Designing the page however you want:

Background & Colors:

     You can pick the background images or color by clicking on format then background. You can also pick the colors for the text, hyperlinks (link to other pages), visited hyperlinks (link to other pages already visited) and active hyperlinks (link to other pages between the time you click and it changes pages) while you are at it.

Positioning:

     If you want you can insert a table. This will divide the page into a grid of rows and columns that will make the positioning of images and text on the page easier. I usually set the table Width at 90% and Alignment at Center. This allows the page to self adjust to almost any size browser window. The only other things to effect browser/page size are the images other then background that you use. You'll see lines indicating the out line of each square/cell of the table. If you leave the Border Size set at 0 these lines will disappear when the page is viewed other then with an editor. You can also make them wider for some nice effects by choosing the color (border) or colors (light or dark border) for those borders.

Text:

     While you are setting the page up click on edit, select all then use the drop down windows to select the font style you want to use for you text. I suggest Times New Roman or Arial they are recognize by all computers so everyone will see the same thing you do. To make titles (Heading 1) or subtitles (Heading 2-6) or other text style changes highlight the text and use the drop down box to the left of the font type to select the style.
          Important things to remember about text formatting are:

• When ending a line of text and only wanting a single space. Go to insert then select break, then click on normal and OK.

• To change text style and start a new text style, you must use the enter key to start a new line (inserting a break will not allow the change of text style). The enter key is also used to start a new paragraph with a blank line between paragraphs.

• The tab key does not work as a space indentation to indicate the opening line of a new paragraph, and in FrontPage Express Editor just typing in spaces will not work either. All the type will be justified to the same point using the FrontPage Express Editor.

• You will also find horizontal line in the insert area this insert a line horizontally across the page wherever your cursor is on the page this lines size is adjustable by right clicking on it and selecting properties.

Images:

     When adding images to your page just click where you want it to appear on the page then click the little insert image button. Use browse to find the image you want then click open and OK to insert. After the image appears right click on the image select image properties and enter the description of the image in the line titled text. This is the little box of text that appears when you position your mouse over the image. When you check the image in view, html you'll notice that it automatically inserts the size of the image. This is something to remember for when you decide to try editing HTML code by hand if the size isn't right it will effect the appearance of the image and in the case of an animated gif the images will not display.

Saving:

     Save the file by clicking the save button, then close the FrontPage Express Editor. As you probably noticed any files added to the page have a file path. Since all the images came from the same folder the file path should be the same. The file path to an image as it appears on your computer isn't the same as the path to the image you will upload to your site. Therefore that path will not work online.
     Here is an example of an invalid file path:
               <img src="file:///C:/My%20Documents/Web%20Pirate/99butA.gif">
     In order for the page to work properly we need to fix the path by changing where the computer searches for it to:
               <img src="./99butA.gif">
     Note the dot in front of the slash. That is the old way. Here is the newest way:
               <img src="99butA.gif">
     As you see we deleted everything from the last slash forward. Both ways will work, but the last one is preferred. Both tell the computer that the file is in the same directory (folder) on the server as the index.html file is.
If you have several file names to be corrected. Open your Word/text editor program. Open Internet Explorer click on file, open, browse and open the file index.html. After the page is open right click on the page and select view source. A Notepad file will open this is the same HTML code you've been seeing every time you clicked on view and html. On the Notepad select all then click cut. Next paste it into the Word/text editor program. Highlight the section of path/code to be removed from are example that would be
               file:///C:/My%20Documents/Web%20Pirate/
     Copy that path/code, open your replace tool and paste that path/code in the find what line. Leave the replace line blank and click replace all. Close the replace tool, all the code should be the same and the would read as the example:
               <img src="99butA.gif">
     Again use the select all option, this time in your Word/text editor, cut this and paste it in the Notepad page. Close Notepad when the choice of save changes pops up select save. Close your Word/text editor. Click the refresh button on the Internet Explorer you should see no changes on the page, but if you right click and view source the corrections are there and you are ready to upload the files in the folder where index.html is stored to your site directory online.

     This is a basic idea of how to make the FrontPage Express Editor work to make properly designed web pages. There are other little things you can do to your page most of which is easy to learn by experimentation, reading the help file in FrontPage Express Editor and studying how to write HTML code from tutorials. Once you start learning you'll find it isn't that hard. If you see a page with a design you like view the source. See if you can figure out how to make it work. If you can't figure it out email the site owner and ask them if they don't know email me with the URL and I'll see if I know what they did. If I do I'll tell you where to learn how to do it yourself.