FrontPage 2000: Borders, Tables, & Frames

Borders, Tables, & Frames--Oh My!
Shared Borders
Tables
Frames
Hover Buttons: Links with Attitude

Borders, Tables, & Frames--Oh My!

This document continues the discussion of FrontPage 2000 begun in the document FrontPage 2000: Creating a Web Site . Here you'll learn about using shared borders, tables, and frames. In addition, you'll learn about hover buttons, a navigation option you might like to incorporate on your pages.

Shared Borders

"Shared borders" are special areas along the edges of each of your web pages. If you want an element to appear in the border of every page, add it to the shared border on any one page. Normally, FrontPage automatically sets up borders on the left and top of your web pages.

FrontPage may also automatically insert navigation bars in the shared borders on your pages. Navigation bars are FrontPage "components" providing text or button links to other pages in your web.

Button, Button, Who's Got the Button?

One point made in the first FrontPage 2000 document is worth repeating here. A shared border may have text or button links. In some shared borders, however, no buttons 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 that the buttons or text links do not actually appear on the current page. Do not delete this message, or you will also delete the shared border.

Changing the Location of Shared Borders and Turning Off Shared Borders

To add or change shared borders, select Shared Borders from the Format menu. Select either the option to make the changes to All pages or just the Current page. Click on one of the border options (left or right, top or bottom) to turn it off or on. Limit yourself to just one or two shared borders to keep from confusing visitors to your web. If the All pages option is selected, you can also choose to insert navigation buttons in the left and top borders. If you would like a navigation bar in the right or bottom shared border, you can insert one later by selecting Navigation Bar from the Insert menu.

Widening a Shared Border

The width of a shared border on the side of your page is determined by the widest element in it. One way to widen a shared border is to use the Tab key. Open a page with a navigation bar on the side. Click on the navigation bar, and then press the right-arrow key on your keyboard. The blinking cursor should appear to the right of the navigation bar. Press the Tab key until the shared border is the width you want.

Another way to increase the width of a navigation bar is to insert a table, as discussed later.

Modifying Navigation Bars

Two factors determine how a navigation bar looks: the structure of the web as shown in Navigation view, and the options selected in the Navigation Bar Properties window.

Try getting a sense of your web structure in Navigation view. What pages are under your home page? Do they all appear at the same level?

Now try modifying a navigation bar. You can modify what links appear on the bar by right-clicking on it and selecting Navigation Bar Properties from the menu. You can choose between having buttons or text links on a navigation bar, and also choose to show links to the following pages in your web:

Keep in mind that the changes you make here affect all pages in your web that have this shared border. If you are unsure how these changes might affect navigation in your web, take another look at your web structure in Navigation view to get a better sense of how things are put together.

What determines whether a page appears first or last in a navigation bar? Pages farther left in Navigation view appear before others at the same level on a navigation bar. To see how this works, take a look at a navigation bar on a page; then, in Navigation view, switch the order of two of its pages left to right, keeping the pages at the same level in the hierarchy. Take a look at the navigation bar again and notice the new position of the links to pages you moved.

Adding Navigation Bar Links to Pages Outside Your Web

FrontPage 98 users had to settle for navigation bars that included only links to pages inside their webs. All this has changed in FrontPage 2000. To add an external link to your navigation bar, switch to Navigation view. The floating Navigation toolbar appears. To add the page a level below the home page, click on the home page and then click the external link button. The Select Hyperlink window appears. Complete the URL field just as you do normally for any link in FrontPage and click OK. A picture of the page now appears in Navigation view. You have not added the page to your web, just a link in the navigation bars. You can move the page to a different level in the hierarchy if you prefer.

As it stands, the title of the new link is its URL, so the URL appears in any navigation bars that include it. You can change the title in Navigation view. Simply right-click on the new linked page, and select Rename. Type the new name for the link and press Enter. This new title now appears in navigation bars.

Take a look at the navigation bars on the pages in your web. Does the link appear in the correct navigation bars? If not, you may need to put it in a different position in Navigation view or change the navigation bar settings for your web (see "Modifying Navigation Bars").

Removing Pages from Navigation Bars

If you want to remove a page from the navigation bars without deleting it from your web, switch to Navigation view, select the page, and then select the Included in navigation bars button from the floating Navigation toolbar to turn it off.

Tables

You can use tables to present complex information in a way that makes it easier for people to understand. Tables are especially helpful for comparing similar information about different items, such as product features and prices or even just names and email addresses. Tables are also quite useful for positioning text and graphics on a page.

To insert a table on a page, choose the Table menu, Insert, and then Table. The Insert Table window appears. Use this window to specify the number of rows and columns in your table and to align it on the page. You can also specify whether the table has a border, and how wide that border should be in pixels (see "About Pixels," below). The Cell Padding is the extra area within each table cell that doesn't get used (pads the cell), and the Cell Spacing is the area between cells. Finally, you can specify the Width of the table either in pixels or as a percentage of the page. OK your choices, and the table is inserted.

Table grid lines display in the Normal window, but the lines display in the preview or browser window only if you specified a border size greater than 0. Use borders if you think you need to help your readers distinguish between different items in the table. A borderless table is a great way to align graphics or graphics and text with no one being the wiser that you're using a table.

About Pixels

Monitor resolution is measured in pixels, which are basically dots. Some screens display 640 by 480 pixels, while others have a higher resolution, such as 1024 by 768 or 1600 by 1200. Generally, web authors try to design pages for the lower resolution screens, but this is a subject of ample debate.

Editing the Table

Add text and graphics to table cells just as you do on other areas of your page. To move from cell to cell, press the Tab key on your keyboard; to start a new paragraph in a cell, press the Enter key. When you want to put your cursor below and outside the table, click below it or press the right-arrow key on your keyboard.

You may need to make changes to columns, rows, or the entire table. To select a column, put the pointer arrow at the top of the column; when the arrow turns black, click to select the column. Use the same technique for rows. To select the entire table, select the Table menu and then Select Table . You can then use formatting commands that apply to your selection or cut, copy, or delete the selection as you normally would with text or graphics.

Changing the Look of the Table

Click on the table, and select Table Properties from the Table menu, and then Table. The Table Properties window includes the options in the Insert Table window, plus some extras. You can specify a background image or color. If you are not using a theme, you can also specify the border color for the table; otherwise, FrontPage forces you to use its border color scheme.

If the table does not take up 100% of the browser window, you may want to indicate the float-- that is, whether the table appears to the left or right of text that is outside it. With the Default option, text appears above or below the table.

You can also add to your table. To insert rows or columns in a table, click in a cell, select Table, Insert, and then Rows or Columns. Be sure to specify whether you want to insert rows or columns, and then specify the number to insert. You can also specify where the column or row is inserted relative to the current cell. Using a similar method, you can even insert another table inside the current table: Simply select Insert again from the Table menu, and then Table. To insert a cell, select Table, Insert, and then Cell. To insert a text caption that labels the table, select Insert, Table, Caption. Type the caption and select its position.

To delete a cell, row, or column, select it and select Delete Cells from the Table menu. To delete only the contents of the cells, make your selection, and then press the Delete key on your keyboard.

Changing the Look of a Cell
Click on an individual cell and select Cell Properties from the Table menu. The Cell Properties window provides a number of options. You can use the Cell Span section of the window, for example, to specify that a single cell spans several columns or rows. You can use the layout options to specify the alignment of cell contents. You can also specify cell border or background color, height, and width.

Table Tags: We've Come a Long Way, Baby--Really!

It can be quite an education to look at the HTML view in Editor before and after you add a table to your page. Depending on how elaborate your table is, the number of HTML tags has likely mushroomed. Table tags are fairly elaborate, and Web authors used to have to type them all (or use creative copying and pasting). The sheer tedium of adding table tags probably discouraged many authors from using tables but may have also spurred the development of authoring programs such as FrontPage and Netscape Composer, which make tables easy to add to a Web page.

Using a Table to Widen Left or Right Shared Borders

One way to widen a shared border is to insert a table in it and adjust its size in pixels. Open a page. Click to the right of the last link or button in the navigation bar. Press the right-arrow key on your keyboard. The blinking cursor should appear below the navigation bar.

Select the Table menu, and then Insert Table. Set the rows and columns to 1 and the border size, cell padding, and cell spacing to 0. In the Width box, select in Pixels, and a size in pixels.

Creating a Page That is a Specific Size

Do you need to create a page that is a specific size in pixels? Create a blank page, add a table that is the width you need, and put your page together inside the table.

Frames

Just as an artist might take a painting and put a frame around it, you can take web pages and display them in a frame page. Web frames display more than one page at a time. You've probably seen frames pages before, but you can see an extremely nice example at http://sites.unc.edu/. The page window is divided and visitors navigate to different pages by clicking on navigation buttons or links in one frame, bringing up different pages in another frame. With frames, the navigation method stays constant while the content changes.

FrontPage makes it very easy to create a web site that uses frames. When you build framed pages, you bring together multiple pages onto one page, which is sometimes called the layout page. Some pages contain content, another page (perhaps more than one) provide links that bring up those content pages. In a simple frames page, the page with links is in one frame, and the content page is in another frame.

Frames versus Shared Borders

Frames and shared borders have similar benefits--both provide a unified look and a consistent location for links to your pages, making it easy for visitors to move through them. Why use frames instead of shared borders? To some extent, the question comes down to a matter of style--which look do you prefer? Frames can have scroll bars, whereas this is not an option for shared borders. The way pages display in the two page types varies as well. Selecting a link in a shared border replaces the entire page in the browser window. In a frames page, however, selecting a link usually brings up a new page in only one frame, while the rest of the page stays the same. (Note that you can set up a frame so that a new browser window opens when a link is selected.)

One deciding factor in your decision may be how much work you are willing to put into your pages. Frames are fairly easy to create, but shared borders are even easier since they're created automatically. With frames, you also need to create your own links using text or graphics because Microsoft advises that you do not use navigation bars in frames. Generally, if you want to use a navigation bar, it's a good idea to use shared borders rather than frames.

Planning Your Framed Web

At a minimum, your framed web likely has the following pages: You can create the contents and main pages before or at the same time you create the frames page.

Navigation for Frames

If you're using frames, do not use navigation bars. Instead, create your own links to pages. In Navigation view, your pages do not need to be linked at all, since you won't be using navigation bars. If you decide to use page banners, however, you can later drag carefully selected pages into position, as discussed below in "Using Page Banners with Frames."

Creating a Web with Frames

Open a web or create a new empty one. Apply a theme if you are so inclined. Turn off all shared borders by selecting Shared Borders from the Format menu; make sure the All pages option is selected and that no other options are turned on. Instead of shared borders, you will create your own set of links.

Now you can create the frame page. Choose File, New, and then Page. In the New window, select the Frames Pages tab. Click on the different frame templates listed in the left portion of the window. A description and graphic provides information about how the selected template works.

The examples in this document use the Contents template (see picture below). With the Contents template, visitors can click on a list of contents in the left frame to display pages in the right frame. Choose the frame set that best suits your web and click OK.

The frames page appears with buttons in each frame. Select one of two buttons to specify the page that displays in the frame:

Consider the Contents template, in which you set up a contents list in the left-hand frame that links to "main" pages in the right-hand frame. What should appear in the right-hand frame, the main page? The initial page here displays when someone loads the frames page before any links are selected. The initial page might have a general welcome to your web and instruct visitors to select from the options on the left. It should not repeat the links found in the contents frame. Go ahead and create a new page for both frames, one that will have links and one that will serve as the welcome page.
Tip: Your initial page can be one of FrontPage's page templates, such as the Frequently Asked Questions or bibliography template. In your new frames page, select the Set Initial Page button. When the Select File window opens, click Cancel. In the Create Hyperlink window, select the Create a New Page button. The New window opens, and lists templates. The open in current frame option is selected; this option is available in FrontPage 2000 only when you are setting the initial page for a frame, not for any other pages you may want to add later. Select a template from the list in the General tab, but if you are using the campus Web server, do not select any templates that involve forms, which do not work on the server. 



Saving the Frames Page

Select the save button  on your frames page. You may be prompted to save several different pages, including the frames page and any new pages you created as you built the frames page. The Save window displays an image that indicates which page you're saving. If the wide blue border surrounds the entire frame, you're saving the frames page; if it surrounds one of the individual frames instead, then you're saving the initial page that displays in that frame.

You'll have a chance to give these pages names and titles. If you are uploading the frames page to the campus server, you can make the frames page your home page by naming it index.html. Some web authors, however, prefer to have a home page that provides links to the frames page and to an alternative, frameless set of pages. The choice is up to you.

Adjusting, Deleting or Adding a Frame

To change the size of a frame, you can simply point at the line that divides one frame from another, and when you see the double-headed pointer arrow, click and drag to resize. You can also change the size and other properties by clicking on the frame and then choosing Frame Properties from the Frame menu. In this window, you can specify size by pixels, percentage of the window, or relative to other frames.

Using relative frame sizes calls upon your knowledge of fractions. The frames in columns (vertical frames) or rows (horizontal frames) are sized relative to the total space available for all columns or rows on the page. For example, let's say you have two columnar frames. You specify that one frame has a relative value of 3 and the other has a relative value of 2. Think of the window, then, as divided into 5 parts, the first frame taking up 3/5 of the window, and the other frame taking up 2/5.

In the Frame Properties window you can also specify whether the frame uses scroll bars. A frame can have a scroll bar all the time, none of the time, or only when necessary, based on the size of the browser window. To change settings that affect all frames on the page (for example, the border around the frames), select Frames Page from the Frame Properties window.

You can also adjust the number of frames on your page. To delete a frame, click on it, and select Delete Frame from the Frame menu. To add another frame, select a frame and then select Split Frame from the Frame menu.

Adding Pages to Your Framed Web

To add a new page to your framed web, first, create and save a page. To make sure the page looks right in the frame, it is a good idea to open it in the frame. To do this, open the frames page and select the frame in which you want the new page to appear. Then select Open from the file menu. Select the page, and click OK to open. The page opens in the frame you selected, and you can now edit it. In the frame that contains your links, be sure to create a link to this page. Save the frame, and preview it to see how it works.

Using Page Banners with Frames

Page banners display a page's title and may be simply text or a graphic determined by your web's theme. Banners are automatically added to webs that use shared borders, but if you want to use them in frames pages, you have to add them yourself.

Keep in mind that it would be a mistake to put page banners on every page of a web that uses frames. Imagine the confusion and mess of having a different banner in every frame! Plan to have only one banner displayed on any frames page. In the Contents template, for example, you might put banners on the main pages but not in the list of contents.

To add page banners, do the following:

  1. Create the pages you want to use in your framed web.
  2. In Navigation view, drag only the pages that will use banners into position in the web hierarchy. This makes banners possible. (Don't worry if your home page is already in the hierarchy--it probably won't get a banner, but it doesn't hurt anything to have it in the hierarchy.)
Next, add the banners to each of the selected pages by taking the following steps:
  1. Position the cursor where you want the banner to appear. Select the Insert menu, and then Page Banner.
  2. In the Page Banner Properties window, select either Image or Text and click OK.
The banner appears on your page.
Deleting a Banner
If you need to delete a banner, simply click on it and press the Delete key on your keyboard.
Renaming a Banner
To change the name that appears on the banner, switch to Navigation view. Right-click on the page title, select Rename and then type the new name.

Making Your Page Accessible to Browsers That Do Not Display Frames

Not all browsers support frames and not everyone wants to see a page with frames. In addition, frames are not accessible to people who use screen readers, which read text aloud and are often used to browse the Web by people with visual impairments. What will browsers display if they don't display frames? FrontPage provides a message that frameless browsers see. You can see this message in the No Frames view of the Editor window. If you like, you can edit or replace the text that FrontPage provide. You might want to provide the same links here that you provide on your navigation page.

Escaping from Frames

With frames, visitors to your page can get stuck in your web, seeing the contents of other people's pages in your framed environment. This causes at least two problems: So how can you avoid these problems? Set up any links to pages outside your web so that the new page either replaces your page in the browser window or opens in a new window altogether. Here's how:
  1. In the Editor window, right-click on the link.
  2. Select Hyperlink Properties from the menu that appears.
  3. In the Edit Hyperlink window, find the box labeled Target Frame. Click the Change Target Frame button next to this box.
  4. Select one of the following options to specify where the new page appears when the link is selected:
  5. OK your way back to the normal editing window. Preview the page to test the link and the target.

Save Those Changes!

Before previewing your web in a browser or publishing it, be sure to save any changes you made to your frames pages. Just click on the Save button in the standard toolbar, or choose Save from the File menu.

Hover Buttons: Links with Attitude

If you want an alternative to navigation bars or even to simple text links, you might try Hover Buttons. When the mouse pointer "hovers" over one of these buttons, the button changes slightly, depending on the effect chosen.

To add a hover button, click on the page where you want it to appear, select the Insert menu, Components, and then Hover Buttons. The Hover Button window appears. Complete this window to specify such settings as the text that appears on the button, the page the button links to, the effect that occurs when a pointer arrow hovers over the button, and the button color. When completing the Link To field, be sure to include http:// in the URL if the page is outside your web. If you are using a hover button in a frame, be sure to complete the step described next.

Hover Buttons and Frames: Setting the Target

Hover buttons automatically bring up the page they link to in a full window, so if you are using a hover button in a frame, you may want to change the target frame. Use the Hover Button window to specify the target frame. (If you have already closed the Hover Button window, right-click on the hover button and select Hover Button Properties . The Hover Button window appears.)

In the Hover Button window, select Browse. The Select Hover Button Hyperlink window appears. The target frame is listed at the bottom of the window. To change it, select the Change Target Frame button. A preview of the current frames page displays in the Target Frame window. Set the button's target area by clicking on a frame; if you are using the Contents template, for example, click the right-hand frame.

Using Images as Hover Buttons

You have the option of using an image as your hover button rather than the rectangular button FrontPage automatically provides. Insert a hover button, and in the Hover Button window, select Custom.... The Custom window appears. In the Custom Image section of the window, click in the Button box. To specify an image, click Browse. The Select Image window appears. Select an image from your web, or click a button to select an image on the web, on your local computer, or in your clip art collection.

You also have a choice of what happens when a pointer arrow hovers over your new button. To use another image, click in the On Hover box in the Custom window, and then click the Browse button to specify an image. To use an effect rather than an image, do not fill in the On Hover box at all. Instead, click OK, and in the Hover Button window, select an effect from the drop down list.

The last thing you need to do is to adjust the width and height of the button to match the image size. Make these adjustments in the Hover Button Properties window. If you are not sure of the image's dimensions, one way you can find out what they are is to insert the image on your page. Right-click on the image and select Picture Properties. Finally, switch to the Appearance tab, which lists the image's width and height. With the information you have gathered, return to the Hover Button Properties window and complete the width and height boxes for your custom hover button.

Previewing Customized Hover Buttons
If your web is saved to a disk, your customized hover button may not work properly locally. To see it, upload the page to the campus server, and then look at the page with a browser.