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

Lesson 4. Elements of Page Design > Modifying Table Layout

Modifying Table Layout

As you design your pages in layout view, you will want to move, resize, or add new cells to add content. A layout cell cannot overlap other cells and cannot be moved outside the layout table.

1.
In the foghorns.html document, select the cell by moving the pointer over the border and clicking as it turns red

The cell border turns blue and handles appear, which you can drag to resize the cell.

TIP

You can also Command-click (Macintosh) or Ctrl-click (Windows) within a cell to display the resize handles.

2.
Drag the cell border to resize the cell, fitting it closely around the graphic. The cell should be the same size as the graphic.

In the table tab, the size listed in the parentheses replaces the old size display. If the cell you initially created was smaller than the size of the graphic, then the cell will have enlarged automatically to fit around the image exactly and you will not need to resize it. If the cell you created was larger than the graphic, then you must resize the cell to make sure that the borders of the layout cell line up flush with the edges of the image.

3.
Drag the top border of the cell to move the cell to the top and center of the page.

If you moved the cell to the right or left to center it, notice that the column numbers in the surrounding layout table change to display the new size.

NOTE

Sometimes the old and new column numbers remain onscreen, showing conflicting widths for the same column. If this happens, you need to choose Make Cell Widths Consistent from the column-header menu. The column-header menu is a drop-down menu that you can access from the arrow next to the number displaying the width of the column. If only one number is displayed, this option is grayed out.

4.
Use the arrow keys to move the cell to the left.

The arrow keys move the cell one pixel at a time. Hold down the Shift key to move the cell 10 pixels at a time. Leave some space in the column between this cell and the side of the table. The column to the left of the cell containing the image should be 40 pixels wide.

5.
Below the top cell, draw three more cells in a single column down the middle of the page, with a little space between them.

Your page should look similar to the example shown here. Don't be concerned about the sizes of the columns listed at the top of the page; they will vary according to the exact placement of your layout cells. You will adjust their positions later in this lesson.

When you draw a cell on the page, white guides appear to help you place other cells that you want to align with the first cell. Use the horizontal guides to align the tops of the cells.

TIP

To draw multiple cells without clicking Draw Layout Cell more than once, hold down Command (Macintosh) or Ctrl (Windows) as you draw the first cell. You can continue to draw new cells until you release the modifier key.

6.
Of the three cells you just created, expand the topmost cell so it's as wide as the cell that contains the foghorn_title.gif graphic. Open foghorn.txt from the Lesson_04_Tables/Text folder. Copy the first paragraph and paste it into the first cell below the foghorn_title.gif graphic.

The cell will expand if necessary to fit the content.

7.
Move both of the remaining cells to the far left, aligned with the left edges of the cells above. Draw one more cell to the right of those two cells. Copy the remaining text from the foghorn.txt file and paste it into the new column.

You will adjust the size of this cell later in this lesson. Your page should look similar to the example shown here. Remember that the exact sizes of the columns are not important at this point. The bottom left cell may expand downward when you insert the text into the new column. If that happens, just select the empty cell and use the handle on the bottom of the cell to change the size of the cell approximately back to what it was.

8.
Create a third cell below the two cells at the left. Insert fogsignal.jpg into the topmost of the three cells and insert foghorn.jpg into the bottom cell. Create a fourth cell below the cell containing the foghorn.jpg image.

If the graphics are too large, the cell sizes will enlarge horizontally or vertically as necessary to fit the graphics. If the graphics are too small, you should resize the cells to fit closely around the graphics, as you did with the foghorn_title.gif image.

9.
In the empty cell between the two foghorn images you inserted in the previous step, type the following caption: Image above: Fog signal converted to diaphone at Point Montara, CA. Photograph post-1912, courtesy of Point Montara Light. Format the text as Verdana, –1. Adjust the size of the middle cell so it is the same width as the cells containing the two foghorn images.

You will adjust the formatting of this cell in the following exercise.

10.
In the empty cell below the foghorn.jpg image type the following caption: Image above: Compressor foghorns at Point Montara, CA. Photograph 1970, courtesy of Point Montara Light. Format the text as Verdana, –1. Adjust the size of the bottom cell so it is the same width as the cells containing the two foghorn images.

Providing captions helps viewers understand the significance of each image.

11.
Click the border of the cell to the right of the foghorn images that contains the two paragraphs of text to select it. Use one of the selection handles on the blue border to drag the left side of the cell to the left, toward the foghorn images, to enlarge the cell. Leave only a small space between it and the cells containing the foghorn images.

You want to enlarge the cell, not move it. Your page should now look similar to the example shown here.

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