[Comp Lab Start Page] [ Designing Your Website ] [ FrontPage Tips Level 1 ] [ Scanning ] [ Image Reducers ] [ Color in Websites ] [ Providing links to files instead of web pages ] [ Links ] [ Pop-ups etc ] [ Slide Show ]

Using FrontPage to Create & Edit Your Website

• Getting an existing page "up and ready" to edit

  • One way, some say the easiest way:

    • Browse to the existing page in Internet Explorer

    • Click File > Edit with Microsoft FrontPage

    • You may or may not need to enter username and password to complete the process--depends on whether you've already been granted access to the site.

  • Another way, one that gives a bit more control and a more complete sense of "where you are and what you're doing".

    • Launch FrontPage (unless it is already running).

    • Do File > Open Web (unless you are already in the web you want to edit).

    • Select the web from the "My Network Places" that appears.

      • If it's not there, add it by typing the entire URL of the web in the box at the bottom.

    • Do View > Folders and navigate to the page in your web that you want to edit

    • Double-click the file to open it for editing

  • If you are already in your web, editing several different files the last two steps above will get you to any new file you want to edit [see here for making new pages].

• Making changes to an existing page--

  • After you have made changes, you must save the page.

    • Use File > Save

    • or CTRL-S

    • or the Save icon on the toolbar

  • After making changes, I recommend checking the page in Internet Explorer

    • While the page is still open in FrontPage, switch to Internet Explorer and browse to the page. You should Refresh the page in Internet Explorer before you believe what you see.

    • If all is well and you are through making changes, you can close the page in FrontPage.

  • To change text etc. on an existing page, just type and delete etc. much as you would in a Word document.

  • More details are given below on how to do various editing operation.

• Creating a new page from a template page--

  • Working from a template page is a really good way to create new pages.

    • In this section, my term "template file" refers to a simple extra file stored alongside all your regular files in your regular folders on the web, which you can copy and then alter the copy. FrontPage also has a "template" capability that can be handy, but making sure to use it correctly is a bit trickier to learn, and the method described here works fine.

    • All pages made from a given template have the same layout and related properties. Any "canned" features are already there--this can range from table structure and dimensions through default font settings to built-in navigation bars, and so on.

    • Different template pages can be created for pages that should have a different structure and type of content.

    • If your web has several folders, it causes less confusion if you have a template file in the same folder where you want the new file created from it to reside. (It's not necessary, but it can help...)

  • To create a new page from a given template file--

    • In Folders view, click on the folder that contains the template file.

    • Right-Click the template file and select Copy.

    • Right-Click any blank area on the right and select Paste.

    • Locate the newly created file and Right-Click it and select Rename

    • Rename the file as desired, being sure to include the .htm extension.

• Creating a new page from scratch--either to save as a template or for a one-time-only design, or whatever.

  • Do File > New > Page or Web

  • Way over at the right, find and click "Blank Page". (Actually, here is where you could also choose other Page Templates (the "fancy" kind mentioned above), either supplied with FrontPage or previously saved by you using Save As > Save as type:" FrontPage Template File. But that's what we said we weren't doing this time around...)

  • Do whatever editing you want to do, and save the page with an appropriate filename.

    • If it is to serve as a template page, a good filename would be "template-normal.htm" if it's your normal page, or "template-level2.htm" for pages intended to occupy a second level in the website navigation, or whatever.

    • Starting all template files with "template" makes them display together in the Files view, and the rest of the filename helps distinguish the purpose.

    • If it is a one-of-a-kind page instead of a template page, obviously the filename is up to you. In the early design stage, you could make several different page designs and call them "experiment01.htm", experiment02.htm", etc. Then going through them in Internet Explorer you can compare them and make a judgment which one you want to finally use, then rename that one as a template, or whatever.

    • Regarding spaces in filenames:

      • You may want to use the underscore and the hyphen within filenames, instead of spaces. FrontPage doesn't care, and browsers don't care, but in the browser address line, a filename of
        "best page.htm" will display as "best%20page.htm". If you think humans may be disturbed to see it that way, you can name it "best_page.htm" and that's the way they will see it.

• Controlling structures and layout of web pages.

  • html -- hypertext markup language -- (the stuff of which web pages is made) was not designed to permit exact geometrical/physical layout of pages, the way Publisher is, for example, or even Word to a moderate extent. Over time, more and more features have been added to accommodate layout, but the extent to which they are recognized and obeyed can vary from one browser to another. The use of tables (properly recognized by virtually all common browsers) to divide a page into rectangular portions--together with the use of images (even an  "invisible" image used as a spacer) to enforce minimum column widths in tables, gives a lot of control while still producing pages that display about the same in most browsers.

  • Use of a transparent image as a spacer. It is convenient to use a tiny 5x5 pixel .gif image, made invisible by having all its pixels the same color and defining that color as "transparent". That image can be inserted "as is" to force a spacing of 5 pixels horizontally and vertically, or by altering its properties after inserting it, you can increase either the horizontal space it occupies or the vertical space, or both.

    The box below contains such an image. Right-click it and do "Save Picture As". I keep that image in the root of my web, so I can do "Insert > Picture > From File" and it's right there.

     

  • Vertical spacing of text

    • When you type the Enter key (aka carriage return), the "new paragraph" code it generates is rendered as a double space by most browsers.

    • When you type Shift-Enter, the "new line" code it generates is rendered as a single space by most browsers.

    • To force the beginning of a new line (as opposed to letting the text wrap by itself, which always gives single spacing) and get a vertical space greater than a single space but less than a double space, you can type two "new line" codes, and then on the resulting blank line between lines of text, insert the 5x5 invisible image.

      The end of this line is done with Shift-Enter so that this line follows with single spacing. The end of this line is done with Enter. This line and the line below are separated with two Shift-Enters, with the 5x5 image on the line between.

       

  • Many "properties" of a table, and of each cell within a table, can be set to control what happens within the table.

    • If you set the table property "Borders > Size" to zero, only dotted borders show in edit mode, and the borders are invisible in the browser

    • You can insert a table within a cell of any other table, nesting to various levels if you want to, to let the outermost table control the overall layout of the page and the inner tables control details within the rectangular spaces formed by the outermost table.

    • If you set the table property "Layout > Cell Padding" to zero (my suggestion for a master table to control the entire page layout), the contents will be allowed to touch the table border, but if you set the table property "Layout > Cell Padding" to 8 (my suggestion for a table-within-a-cell), the contents, e.g. text, will stay a readable distance away from the cell border--this looks much better if you have a different color background in the cell.

    • Using images and "width" properties to control table and cell dimensions:

      • Images "hold" space: a column in a table will never be narrower than the width to display an image anywhere in that column. So you can "prop" a column open to a desired minimum width by putting an image of that width somewhere in the column.

      • Text in a cell will never grow any wider than the "width" property of that cell, so you can restrict the width of text within the cell by setting the width property.

This Table and the ones within it are a demonstration of layout control. In most cases, the border widths would all be set to zero so that no lines show, but they have been left at "one" here so you can see the structure. The cell padding and cell spacing in the outermost table are zero. This text is all center aligned, which means "centered within the cell"

This text is left aligned, and touches the left cell border ("zero cell padding'). The lines here just continue to wrap around, like in Word.

This is within a one-celled table (blue border) inserted in the third row of the outside table. The table properties of the inner table include "cell padding" = 8, so the text is wrapping clear of the table border.

This table and the two below it with red borders have exactly the same table properties. This text is all just wrapping as it wants to. Each of the cells is 33 %.

In addition to this text, this cell contains an image at the top to keep it "propped" open to the width you see.   Text here is pushing the border between it and the right cell "off center". Typing text into the right cell also would make the division between them drift back toward the middle.

In addition to this text, this cell contains an image at the top to keep it "propped" open to the width you see. The difference between this one and the one above is that the CELL width of this one is set to 200 pixels, so the text wraps within that width even though the image in the column is keeping the total cell width much wider than 200.   Typing text into the right cell also would make the division between them drift back toward the middle. Here is the effect of simply typing more into this cell. The division between them balances according to the amount of text. Use of an image in each of these columns could stabilize their width, just as was done in the left column.

This table is identical to the one above, EXCEPT it has "cell padding" = 8. The padding is applied alongside the spacer image, just as it is to the text itself, so the cell is wider than in the table above. In addition to this text, this cell contains an image at the top to keep it "propped" open to the width you see. The difference between this one and the one above is that the CELL width of this one is set to 200 pixels, so the text wraps within that width even though the image in the column is keeping the total cell width much wider than 200.   Typing text into the right cell also would make the division between them drift back toward the middle. Here is the effect of simply typing more into this cell. The division between them balances according to the amount of text. Use of an image in each of these columns could stabilize their width, just as was done in the left column.