Composer: Tables and Image Layout

For this week's assignment, I would like for you to learn how to use tables for layout in Composer, and how to resize images so that they fit nicely in a row. By resizing images to be the same height and putting them in the cells of a table, you can create a very nice effect, as you can see here in this Storybook Coverpage: Clash of the Heroes.

So, to complete this assignment, you will either need to edit your existing homepage or your "About Me" page to include this new image display, or you can create a new page and add it to your website specifically for this purpose.

STEP ONE: Choose images. Decide on a set of two or three or four related images that you want to use. These can be your own images (photos), or you can use images from online sources. If you are using images from online sources, make sure you bookmark the webpages where you find the images so you will be able to write up the Image Information. Save a copy of each image file into the folder where you are keeping your Composer webpage files and images.

STEP TWO: Resize images. Resize the images so that they are all the same height. You can only make images smaller when you resize them, not larger - so the maximum height you will use needs to be equal to the height of the smallest of the images you have chosen. If you have Photoshop or some other image editing software on your computer, you can use that to resize the images - or you can complete this Picnik Tech Tip to learn how to use the free Picnik website to resize your images online.

HINT: Just so you don't get mixed up, I would suggest renaming the images as you resize them, including the number of pixels as the new image file name. For example, if you have a big picture of the Statue of Liberty in an image file named liberty.jpg, and if you resize that image so that it is 300 pixels tall, you could rename it 300liberty.jpg. That way you still have your original image file, plus you can easily identify the file containing the resized image.

STEP THREE: Create table in Composer. Either open an existing page, or create a new page, where you will insert the images (instructions for adding a new page). Then, position your cursor where you want to place the table on the page and click on the Table icon. For the Table properties, you will want just 1 row, plus as many columns you have images - and set the border to zero!

STEP FOUR: Insert images. Now you can click inside each cell of the table and insert one image in each cell. Don't worry about extra white space; you will adjust the width of the table in the next step. When you are done, each of your cells should have an image in it. 

If you decide to delete one of the columns you can click on the little "red X" at the top of each cell; to add a row or a column, use the little arrows to the right and the left of the "red X" (the arrow indicates the direction in which the row or column will be added).   

STEP FIVE: Adjust table. Now you will adjust the table width and alignment. Click anywhere inside the table and then click on the Table icon again. This will bring up a box where you can adjust the Cell properties OR the Table properties. Make sure you click on the TABLE TAB so that you are adjusting the properties for the entire table, not just for one cell. Now, to make the width of the table fit your images exactly, just leave the width box BLANK - do not put any number in there at all. Then, choose "Center" for your Table Alignment. Click OK when you are done.

STEP SIX: Image information. You now need to add image information for all of your images; you will probably want to do that in a small-sized font down at the bottom of the page so as not to clutter the presentation.

STEP SEVEN: Save and publish. Make any other additions or changes you want to the page, save, and then publish. You're now a Composer software pro!

When you are done, send the address for the page with your image table to the instructor in an email with the subject line: Week 3 Composer Images. Then, do the Gradebook Declaration. Here is the text of the Gradebook Declaration you will complete: