• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 4. Elements of Page Design > Using Images in Tables

Using Images in Tables

You can also use Standard View to create tables containing images. Tables are often used to construct the layout of a page with multiple images or to reassemble an image that has been sliced. An image may be sliced into several smaller images in order for it to be optimized for the Web (the process of optimizing includes decreasing the file size of the image while maintaining the highest possible image quality). The resulting pieces need to be aligned with each other by using a table.

In this exercise, you will create a table that will be used on pages throughout the “Lights of the Coast” project site.

1.
Create a new HTML page, save it as lighthouse.html and title it Lights of the Coast.

This page will contain a number of tables.

2.
Create a new table with the following settings: 5 rows, 3 columns, 617 pixels wide, 0 Cell Padding, 0 Cell Spacing, and 0 Border.

The table you create should look like this example.

3.
Select all five cells in the first column and merge them. In the second row, select and merge the two cells in the second and third columns. In the fourth row, select and merge the two cells in the second and third columns. In the fifth row, select and merge the two cells in the second and third columns.

Your table should now look like this.

4.
Place the insertion point in the first column and use the Vert drop-down menu on the Property inspector to change the vertical setting of the cell to “Top.” Insert into the cell the nav_lighthouse.jpg from the Lesson_04_Tables/Images folder.

The image of the lighthouse you just inserted will now stay at the top of this column, regardless of how tall the table eventually becomes.

5.
Place the insertion point in the second column of the first row. Insert nav_titlebar.gif from the Images folder.

When you insert images into cells in Dreamweaver, the empty cells have a tendency to collapse, and look as if they are no longer there. They are actually still there, but they have just been squished together. In these cases, you may need to use the arrow keys to navigate through your tables, as you will do in the following step.

6.
Select the title bar image “Lights of the Coast” and press the right arrow key once to move off the image.

The insertion point is now in the cell that contains the nav_titlebar.gif image and it is directly to the right of the image.

7.
Press the right arrow key once more to move to the next column.

The insertion point is now in the third column of the first row. If the columns have collapsed completely, it may be difficult to see the blinking pointer between the dotted lines indicating the boundaries of the cells.

TIP

Once the pointer is in the correct cell, typing a small amount of text will cause the cell to expand. This may help you to see the columns more clearly. If you use this method, it is very important to be sure that you delete the text, or replace it with the appropriate text or image(s). Extra characters can cause problems in some tables, particularly if you've calculated the table size solely for specific images.

Refrain from dragging the borders of the table and resizing it in order to see columns that have collapsed. Resizing your table will change its dimensions by adding height tags and width tags. The dimensions defined by those tags could create problems, such as causing the images to not line up flush with each other. If height or width tags are created, you can select the table and click the clear row heights and clear column widths buttons on the Property inspector. You may need to redefine the width of the table after clearing column widths.

8.
Press the down arrow key once to move the insertion point into the third row. With the insertion point in this location, click the image icon on the Insert bar and choose nav_rightspace.gif from the Images folder to insert the image into the cell.

You only needed to use the down arrow key once to get to the third row because you are in the second column; the second row doesn't have a second column since the two cells in that row were merged.

The nav_rightspace.gif image will appear in the cell and cause the columns of the table to reappear.

9.
Place the insertion point in the second row. Insert into the cell the nav_topline.gif from the Images folder. Place the insertion point in the fourth row. Insert into the cell the nav_botline2.gif from the Images folder. Click outside of the table.

When you click outside the table, Dreamweaver causes the table to refresh, and the cell containing the nav_botline2.gif image now fits exactly around the edges of the image. This image and the nav_rightspace.gif image you inserted in the previous step are holding the spaces necessary to create the final look of this page. Tables often need images to force them to hold the dimensions you want. Without an image to hold that space, your columns may shift around as they did when you created the lighthouse lodging information table.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint