Home > Articles

  • Print
  • + Share This
This chapter is from the book

Customizing the Family Pictures Page

While family/personal websites are great for sharing recent events, recipes, and important dates, the main attraction to these types of websites is the family pictures. With digital cameras and scanners, it's incredibly easy to share pictures of your family, pets, vacations, and special events with friends and extended family.

"The family/personal website template contains a Family Pictures page where you can share your family's photographs with others."

The family/personal website template contains a Family Pictures page where you can share your family's photographs with others. In order to get started posting your pictures online, you will need to have the pictures you want to share in a digital format. If you own a digital camera, the photos stored on the camera are already in the needed format. If you want to put film pictures online, you have a couple options. If the picture already exists, you will need to get your hands on a scanner.


A scanner is a piece of equipment that takes papers, pictures, or other flat documents, and makes a digital copy. Scanners are like copier machines, but rather than printing out a copy of the document being scanned, a scanner saves the image to a computer. Scanners are available at numerous stores like Best Buy, Circuit City, and so on, and can range in price from $50.00 to $500.00.

If you have taken pictures that you've yet to develop, you might be able to get the photographs developed as digital images. For an extra few bucks, you can get a CD of your pictures along with the developed photos.


The Bonus Chapter has an in-depth discussion on digital images, including important digital imaging terminology and techniques for optimizing digital images.

Figure 3.9 shows a screenshot of the Family Pictures page, when viewed through Composer. Notice that the Family Pictures page contains a collage of pictures. Each image was added by going to the Insert menu and choosing the Image menu option. This will display the Image Properties dialog box, which we saw back in Figures 3.3 through 3.6. From the Image Properties dialog box, you can select the image you want to display and scale it accordingly. (All images shown on the Family Pictures page, for instance, were scaled so that they were no greater than 200 pixels wide or 200 pixels tall.)

Figure 3.9Figure 3.9 The Family Pictures page, when viewed in Composer.

In the next section, you'll see how you can add your own images to the Family Pictures page. Before you add your own pictures, though, you'll likely want to take a minute to remove those pictures included with the template. To accomplish this, open the Family Pictures page in Composer and select the image(s) you want to delete. Delete the selected image(s) by hitting the Delete button, or by going to the Edit menu and choosing the Delete menu option.

Adding New Images

Adding a new image to the Family Pictures web page involves two steps:

  1. Copy the images from your digital camera or scanner to the same folder where you copied the template web pages.

  2. Insert the image into the page via the Insert menu's Image menu option.

Copying files from your digital camera or scanner differs on what brand of camera or scanner you have, so you'll have to refer to your camera or scanner's instructions to accomplish step 1. If you had your film developed into a CD, you'd just need to copy over the images from the CD to the appropriate folder.

Once the images have been copied over, open the Family Pictures page in Composer, if you haven't already. To insert an image, go to the Insert menu and select the Image menu option (or, optionally, click the Image icon in the toolbar). This will display the Image Properties dialog box.

From the Locations tab (refer back to Figure 3.3), click the Choose File button and pick the image file you want to display. From the Dimensions tab (refer back to Figure 3.4), you can scale the image's height and width.

As Figure 3.9 shows, you can place images either side-by-side, or beneath one another. To place images side-by-side, simply insert one image right after the other. To create some space between the images, use the spacebar to add space on the same line, or hit the Enter key to have the image appear on the following line. You can also add spacing around the top, bottom, left, and right of an image through the Appearance tab (refer back to Figure 3.5).


Make sure that the image file you add exists in the same folder as the web page. You'll see why this is important in the "Publishing Your Family/Personal Website" section, but for now realize that it is vital to having the image display properly for users visiting your website.

  • + Share This
  • 🔖 Save To Your Account