Section 58. Add Pictures to Tables


58. Add Pictures to Tables

BEFORE YOU BEGIN

25 Add Text and Graphics to the Page


SEE ALSO

52 Insert a Table

55 Edit a Table

57 Add a Picture to Your Page


After you have added a picture in Composer , you run into the same problems some have with the Yahoo! PageBuilder , a tool we cover in another chapter. The images added to the page are going to align with the text as though they are big letters in the flow of the paragraph. For some applications such as a newspaper or a magazine with text and pictures, images in these applications are going to be fine. However, if you want to create an album of photos or you want to present a number of images with captions, you probably will want to have absolute alignment over your images.

1.
Insert a Table

Got a table handy for this task? If so, great. If not, let's add one. On the new line, insert a table with three columns and three rows. Make sure the border is set to and the width of the table to 100% .

Inserting a table gives you a way to create a grid for your page so that you can lay out anything you want, including pictures.

2.
Drag an Image into the Table

Drag an image to the first cell of the table. By now, you should have a handy toolkit of images. If not, copy an image from a website.

The table resizes to fit the picture a little better.

3.
Enter a Caption

Click in a cell next to the image and enter a caption for your image.

The table resizes as you type in the cell. If you want to lock down the table, you can do so with the table properties.

58. Add Pictures to Tables


4.
Finish Populating the Table

Add images to other cells in the table and add captions for each image.

As you add the images and text to the page, the table is going to keep resizing. If you have added an image that is larger than the first one, the table will resize to fit that image even if you have used the table attributes to set the width of the cells or the table.

5.
Resize the Images

Click on each image and, while holding down the Shift key, click on the resize handle in the corner of each image and resize them until they take up much of the width of the table.

As you resize the images, you should see the table redraw again to fit the images. Now the text takes up most of the width of the table in response. Continue trying this and see how tables resize to fit your ideas for what is good placement and sizing.

6.
Change your Table's Spacing

Redo the table so that the images and captions are separated by a column. Click in the column between the pictures and the captionsand press the spacebar several times.

As you add spaces to the center cell, the captions and the images are separated by a gutter to give the page a more open feel.



Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net