Placing Images on the Page

The divider on the sample page is an image file. You may use another divider if you wish.

To place an image on the page, first position the cursor on the line where you wish the image to appear. We will insert the first divider bar under the heading so place the cursor on the third header line ("Please contact us ."). Clicking Insert from the main menu, and then clicking Image opens the Select Image Source dialog box, as shown in Figure 5. Select the desired image. Note that the image should be placed in the same folder as the Web Site that you are creating.

The divider image is named bar.gif and should have been copied to the dreamweaver directory, as discussed previously in this document.

1. On the menu bar, click Insert, and then click Image. In the Select Image Source dialog, locate and select the image named bar.gif.
2. Click OK to close the dialog box. The image is inserted into the document.

Figure 5: Select Image Source dialog

Notice that the image is enclosed in a rectangle. This means that it is the current object and its properties are displayed in the Property Inspector.

The Width (W) and Height (H) of the image (in pixels) is displayed in the upper-left part of the Property Inspector box. We want the bar to stretch across the entire page regardless of the screen characteristics of any specific computer. You may experiment with the height setting but leave it in pixels. Simply highlight the entry in the height box (H) and replace it with any number of pixels to set the height of the bar. You may go back and change the properties of any image by clicking on the image and then adjusting its properties in the Property Inspector box.

1. Position the cursor on the Width attribute (W), highlight the entry and type in 100%. This means that the image will be displayed with a width of 100% of the browser window regardless of the actual image size.
2. Press Enter a couple of times to insert some space below the separator bar image and repeat the steps above to enter the second separator bar.

Inserting a Table into the Web Page

Tables are frequently used in Web pages for a variety of reasons. Of course, data that needs to be displayed in rows and columns should be placed in a table. Tables are also used to place text next to images, display text in columns, or to insert information that is separated by blanks but is displayed on the same line. Typically, the size of tables is automatically adjusted to fit the size of the browser window.

We will use a table to hold the links to each of the location headings in the page. These links will be placed between the separator bars.

1. Position the cursor above the separator bar (image) that you just created.
2. Click the Insert menu item, and then click Table. This will cause the Insert Table dialog box to open. You must define how many rows and columns you want to appear in the table. In our case, we want one row and four columns (one for North Coast, Coconut Coast, etc.). Note that it is possible to change the number of rows and columns in a table after creating it.
3. Position the cursor and highlight the entry in the Rows box and type in 1.
4. Type a 4 into the Columns box.
5. To make the table to spread across the entire width of the screen, enter 100% into the Width box and select Percent from the drop down box, immediately to its right. Alternatively, you can set the width of a table with an absolute number of pixels.
6. Set the border width to 0 so that the border will not appear.
7. Click OK to create the table.

The "Border" entry defines thickness of the border that separates each table element. A setting of "0" causes no border to appear. A setting of about "2" is normal if you want the border to be displayed. The "Cell Padding" entry defines the amount of space between the border for each table element and whatever information you type into that element. "Cell Spacing" defines the amount of space between table elements.

The table is surrounded by a thick line, which indicates that it is the current object selected on the page. Its properties are displayed in the Property Inspector . Notice you can change the border, cell padding, and cell spacing for a table using the Property Inspector.

1. Move the cursor to the first element in the table and then click the left mouse button. Notice the table border is now shown as dotted lines. This is because we selected a border width of 0. If you selected any positive number, the table border will show as a solid line. We are now ready to enter information into the table.
2. Type North Coast into the first entry and press the Tab key on your keyboard. This puts the typed information into the first table element and moves the cursor to the next one. Do not hit the Enter key on the keyboard unless you wish to enter more text into a specific table element. Pressing the Enter key will cause the selected cell to display its data on multiple lines.
3. Now type Coconut Coast into the second element. After you have finished, position the cursor in the third element of the table and left-click the mouse.
4. You may position the cursor in a table by either clicking on the desired element or using the Tab key on the keyboard. Now enter Lihue Area and Piopu/Kapili Beaches into the third and fourth elements of the table, respectively.

You may modify or delete a table by positioning the cursor on the upper left corner until the four-way arrow symbol appears and then double-clicking the left mouse button. The table is surrounded by a dark solid line. This indicates that the table is selected as the current object on the page. At this point, you may delete the table by pressing the "Delete" key on the keyboard, or modify its properties in the Property Inspector box. You may also adjust the width of the specific columns or the height of specific rows. Select the table by double-clicking on the upper left corner and slowly moving the cursor to the border between the first and second table element. When the opposite-facing arrows appear, hold down the left mouse button and drag the border either right or left. When you release the mouse button, the border has been moved to the new position.

next: Inserting Links

Previous / Home