How to Create Web Pages with a Graphic Border on the Left-hand Side

Creating Web Pages
Containing a Graphic Border on the Left-hand Side of the Page

About this Guide

The following is a step-by-step guide to creating Web pages that contain a continuous graphic image running down the left-hand side of the page. The result will be a page similar to the one you are viewing.

To view this page as it was intended, please maximize your Web browser window so that it covers the entire screen. To maximize the window, locate these three buttons in the upper right-hand corner of the Web browser. Click on the middle button (you may have to click on it a second time to restore it to maximum size if the window seems to shrink.)

You should use the Composer editor contained in Netscape's Communicator package to follow these steps. If Netscape's Communicator is not installed on your machine, you can obtain download the software from www.netscape.com.

While most of the steps are related to Netscape navigator and the Composer editor, a few steps specifically relate to saving files. If you are not using Windows95 or NT for your computer's operating system, you will need to determine the appropriate action to take.

Most actions will require the use of the mouse. Unless indicated, always use the left mouse button. It is very important, however, to use the right mouse button when indicated.

It is also recommended that you be familiar with the basic features of Composer. For an overview, please refer to the document entitled How to Create Web Pages Using Netscape Composer found at the following URL:

http://www.easternct.edu/depts/dc/docs/composer/index.html

Index

This guide outlines seven basic steps required for creating a document (using Composer) that contains a bordered background. The following links jump to each part within this document.

Find a Bordered Background Graphic

Save the Graphic to the A: Drive

Start Composer with a Blank Page

Insert a Table on the Blank Page

Change the Width of the Left Column

Add the Border Graphic Image

Add Title & Text in Right-hand Table Column

Step #1: Find a Bordered Background Graphic

A bordered background is an image that is either a left side border or a top border. The one that is used in the document you are currently viewing is a left side bordered background graphic. It extends from the top of the document down to the bottom (regardless of how long the document becomes).

In preparation of creating the Web document, you should select a bordered background image to include in your page. The bordered background image used in the document you are viewing was obtained from the Pam Bytes site which offers a variety of free graphic backgrounds. The bordered backgrounds at that site are at URL: http://www.tgn.net/~pambytes/borders.html.

Other sites are also offer free bordered backgrounds... just connect to one of the search engines and do a search on "bordered backgrounds". Altavista turned up 36 references at last count. (Always read the associated Web page(s) to determine whether they are free and if the author requires that credit be given on your Web page.

When you are searching the Web and find a bordered background image that you want to use, you should save it to your local disk drive. In this exercise, we will save the new Web page that we create (and all of the associated images) to the A: drive (... but if you are using your own personal computer, you might prefer to save it to the hard drive).

Step #2: Save the Graphic to the A: Drive

To save the image to your floppy diskette (A: drive), first insure that the bordered image is displayed on your screen (i.e.., the border is running down the left-hand side of the page). Click with the right mouse button on the image. A pop-up menu will then appear... select the Save Background As... option (using the normal, left mouse button). This will cause the "Save As..." window to appear.

Notice that at the top of the Save As... window there is a button (the Save As... window is depicted below for reference). This button moves your current working directory up the directory structure one level at a time. Click this button repeatedly until you see the "3 1/2 Floppy (A:)" as shown below. (If you click once too many times, the Look In field at the top of the window will indicate Desktop... in which case you can double click on My Computer to go back down one level in the directory structure.)

Notice the current name of the image (paper1 near the bottom of the illustration above). If you desire to rename it, you can do so at this time. The type is GIF (although it may also be JPG).

Before selecting the A: drive, check to make certain that there is a formatted 3 and 1/2" diskette inserted in the A: drive. Then, using the left mouse button, double click on the to open the A: drive. Now, save the image to your floppy diskette by pressing the Save button located at the lower right-hand side of the window.

Now that you know how to save an image to your diskette, you might be interested in that other button, the , in the Save As... window (see the pictorial representation shown above). This button is used to create a new directory and can be quite useful. For example, you could create a new directory, call it images and save all of your graphic images in the directory.

Step #3: Start Composer with a Blank Page

Composer, the HTML editor that comes bundled with Netscape's Communicator, can be started in one of several ways. To begin editing a blank page, run the Navigator (the Web browser) and locate the

bar in the lower, right-hand corner of the Netscape Navigator window. Click on the

icon. This brings up a blank page in the editor.

Another way to start the Composer is to use the pull-down menu located at the top, left-hand corner of the Netscape Navigator window. Click on the File pull-down menu, select New and then choose Blank Page. Using the pull-down menu to obtain a blank page in Composer is illustrated below:

Step #4: Insert a Table on the Blank Page

We are going to insert a table that splits the page into two vertical areas. for simplicity, it might be useful to think of the left hand column as containing the bordered background graphic while the right hand column contains the body of the text for our document.

In actuality, however, the left-hand column will be empty. Underlying it will be the the graphic that is on the page itself. So, if less width is assigned to the left-hand column, the text in the right-hand column will appear to get closer to the the underlying graphic. Using this technique of a table with two columns allows us to constrain the text so that it remains on the right-hand side of the graphic simply by specifying the width of the left-hand column (unless the person viewing the Web page shrinks the size of the Web browser sufficiently).

At this point, a blank page is on the screen in Composer. The cursor should be blinking in the upper left-hand corner. To insert a talbe, click on the Insert pull-down menu (located on the menu running along the top of the screen) and select the Table option. Another pop-up menu will appear... select Table again. This selection process is depicted in the illustration below.

The New Table Properties window will appear. At the top, the Number of rows should be "1" and the Number of columns should "2". Leave these settings unchanged... our Web page will essentially become one table that runs the entire length and width of the page (no matter how long it eventually becomes) splitting it into two parts (a left hand side and a right hand side).

Leave all of the settings in the New Table Properties window unchanged... except for one. Change the Border line width setting from 1 to 0 pixels. This will force the table borders not to be displayed. Thus, the table becomes "invisible" when viewed by the Web browser. After making the change, click the OK button.

Step #5: Change the Width of the Left Column

At this point, the table outline is displayed on the blank Composer page. Although the table is not very long (only one line long at the moment), it will automatically increase in length when text is added to the right hand column. Also, notice that the columns are equal length. If we do not adjust the width of the left column, the graphic on the left side will be separated from the text on the right side with a large amount of white-space. (Observe the graphic on the left hand side of the page you are currently viewing--notice that it only requires about 20% of the page width--leaving the other 80% for the body of the text.)

To adjust the left column of the table, right click anywhere within the left hand column of the table. Select the Table Properties option from the pop-up menu that subsequently appears. This will cause the Table Properties window to appear. Along the top of the window are three tabs (illustrated below). The tab entitled Cell should be selected by default. (If the Cell tab is not selected, click on it.)

Near the middle of the Table Properties window is a setting for the Cell width. Change this setting from 100 to 19 (as illustrated below). This specifies that the left-hand column (or cell) is to consume only 19% of the total table width (the other column will automatically adjust to take up the remainder of the width, i.e., 81%--which will be for our text).

Note that there is an option further down the Table Properties window for specifying a background image for the cell. While in some cases this might be preferable, it restricts the image length to the length of the table (but the page can be longer). Thus, if the table does not take up the entire length of the screen, the border will only extend down the page part way. For now, we will opt to take a different approach (described in the next step).

Save the changes by clicking the OK button in the lower, left-hand corner of the Table Properties window.

Step #6: Add the Border Graphic Image

The graphic border is now ready to be added to the page. Right click anywhere on the page but not in the table. Select Page Properties from the pop-up menu that appears . This displays the Page Properties window and the Colors and Background tab (near the top) should already be selected by default. Near the bottom of the window is the Background Image area which contains options for specifying a background image for the page. This area is illustrated below.

Click the Choose File button to display the Choose Image File window. This window functions the same as the "Save As..." window described earlier in this document under Step #1).

Click on the in the Choose Image File window repeatedly until you see the "3 1/2 Floppy (A:)" displayed. (If you click once too many times, the Look In field at the top of the window will indicate Desktop... in which case you can double click on My Computer to go back down the directory structure one level.) Then, double click on the "3 1/2 Floppy (A:)" icon. Locate the paper1 icon and double click on it (to choose paper1 as your default background image).

The Page Properties window will reappear containing the path to the paper1 image as illustrated below.

Click OK to accept this image as the background. At this point, the background image should be displayed in the composer window!

Step #7: Add Title & Text in Right-hand Table Column

Complete your page by adding a title and text to the right-hand column. Click anywhere in the right-hand side and begin typing text (or pasting text). Apply tags and heading rulers as desired. For more information regarding how to add text, please refer to the document entitled How to Create Web Pages Using Netscape Composer found at the following URL:

http://www.easternct.edu/depts/dc/docs/composer/index.html

Normally, only the text (not HTML text that includes the HTML tags) should be copied from an existing document into the Composer editor. For example, you can display the original Web page in the Navigator (or run your word processor and display a document), drag across the text you want to copy and do a Ctrl-C (or click on the Edit pull-down window and select Copy). Then move over to the Composer window and do a paste (Ctrl-V). This copies just the text... not the HTML code into the Composer window. It does not copy over the bold, underline, font size and other attributes. You will have to add those by highlighting the text and applying the changes as described elsewhere above.

For those who are familiar with HTML code

If you are familiar with HTML code and want to copy the actual code itself, you will need to use a text editor. First, hightlight and copy the desired HTML code in the original file. Then, in the Composer window, click on the Edit pull-down window and select HTML Source (or simply use a text editor to edit it). Look for the section of code near the top that looks similar to this:

</HEAD>

<TR>

<TD>
paste your HTML code below this <TD> tag!!!

As illustrated above, locate the <TD> tag illustrated above and paste the HTML code into the file. Then save it. When you move back to your Composer window, Composer should recognize that the file has been changed and ask if you want to reload it. Click on the Yes button.

Corrections should be sent to the attention of Steve Frazier at FRAZIERS@ECSU.CTSTATEU.EDU

Please let us know if you discover problems with this documentation!

Creating Web Pages Containing a Graphic Border on the Left-hand Side of the Page