Launch a graphics program, such as Photoshop Elements (shown in the figure), choose File

This starter image is made up of many layers, which makes it possible to edit each piece of text and delete or replace each image independently. You can view a list of layers by opening the Layers palette. Choose Window

To edit the text in any image in Photoshop Elements, first click to select the Type tool in the Toolbox. (Look for the capital T.)

With the Type tool active, click and drag to select a section of text and then type to replace the words. (If you're prompted with the message Font substitution will occur, click OK to continue, and Photoshop automatically changes the text to a similar font on your hard drive.)

To change the font, color, size, or other text options, select the text you want to change and adjust the Type tool settings on the Options bar, at the top of the work area. In this figure, I'm adjusting the font size for the selected text.

To reposition text or images on the page, click to select the Move tool from the Toolbox. (In Photoshop Elements, the Move tool is represented by the double-headed, crossed arrow icon at the top of the Toolbox). Then click and drag any section of text. Remember: If you click and drag a corner, you change the size of the text or image; if you click in the middle of a text area or image and drag, you move the selected item.

To add a photograph to a layer, you must first open the photograph as a separate file. While the starter image is still open, choose File

Before you copy a photo into the starter image, it's helpful to resize it so that it will fit the design. I'm going to use this image in the banner at the top of the page, so I want to resize it to about 225 pixels wide. Hint: each placeholder image includes recommended dimensions. To resize an image, choose Image

To copy an image into the template, first click anywhere on the image you want to copy, to make it active in the workspace. Choose Select

As you add more images, you can adjust the layers by positioning one image in front of another, which is important when images overlap or when one image is obstructed by another. To move one layer in front of another, click and drag the layer to a higher position in the Layers panel, or right-click (Option-click on a Mac) and select an option to bring the layer forward or back. To delete an image or text, click to select it and then press the Delete key.

Continue to open photos you want to add to the design, resize them as necessary, and then copy and paste them into the starter image. In this design, I used three small images on the left, with larger versions in the main section of the design, but you'll need to crop a vertical image to get it to fit into the small space on the left. To cut a section off of an image that you've inserted into the design, select the Rectangular Marquee tool; then click and drag over the portion of the image you want to remove, creating a box around the part you want to delete, and press the Delete key.

After you make all the changes you want to the starter image, be sure to save your work by choosing File

One of the challenges when you design a page like this one in Photoshop is deciding how to save each of the images as separate files that you can insert into your Web pages in Dreamweaver. A good place to start is the banner. Banners (including this one) typically appear at the top of every page in the site, but thanks to the magic of Dreamweaver Templates, you need only one copy of the image. To prepare the banner image for the Web, first choose the Crop tool from the Toolbox, and then click and drag to fit just the top banner area inside the cropping area.

You can drag the corners of the crop outline to adjust how the banner will be cropped. To complete the crop, just double-click in the middle of the crop area or click the Crop tool again and click Crop in the confirmation dialog box that appears.

After you crop out just the banner image, choose File

In the Save for Web dialog box that appears, choose JPEG from the Optimized File Format drop-down list. JPEG format works best for images that use millions of colors, such as photographs. Adjust other settings, such as compression, and click OK. Then, in the Save Optimized As dialog box, enter a name for the new image, make sure to save the image into the images folder in the Family Web Site template folder, and click Save. (You find more detailed instructions for optimizing images with the Save for Web dialog box in Chapter 5.)

Now for the part that may seem tricky at first but will save you lots of time after you get the hang of it. After you save a new version of the banner optimized for the Web, you will see the original image you cropped still open in Photoshop. Choose Edit

Save each cropped section of the image in turn, using the Save for Web dialog box. After you save all the pieces of your design, you're ready to move on to the next task and put them all together using Dreamweaver.

In Dreamweaver, choose Site

Click the Browse icon next to the Default Images folder field. In the Choose Local Images Folder dialog box that appears, select the Images folder in the Family template site and click Open. Back in the Site Definition dialog box, leave the rest of the options alone for now, and click OK. If you haven't selected the Enable Cache check box, a message box appears, asking whether you want to create a cache for the site. Click Yes to speed up some of the Dreamweaver display features.

When you complete the site setup process, the files and folders in the Family Web Site template are displayed in the Files panel in Dreamweaver, at the side of the workspace. If the Files panel isn't visible, choose Window

Double-click the index.html file in the Files panel to open the home page. The home page of this site is designed to showcase photos and text created in an image program, as you do in the previous task using Photoshop Elements. You can replace any of the image placeholders with images you've prepared for the Web.

At the very top of the home page, change the page title by replacing the text in the Title field. Include your name or a brief title to identify your page. (The page title is the text that appears at the very top of the browser window when a page is viewed online and the text that's saved when someone bookmarks your page.)

To insert your own images, double-click to select any image placeholder. In the Select Image Source dialog box navigate your hard drive to locate the image you want to insert, click to select the image you want to add to the page, and then click OK.

To add or replace other images, repeat Step 6. To delete an image or placeholder, select it and press the Delete key.

Before you create a new page in a site, make sure you've completed the site set up process in Dreamweaver, which is covered in the previous task. To create a new page from a template, choose File

In the left side of New Document dialog box, choose Page from Template, in the Site section, make sure that the site you are working on is selected, and then choose the template you want to use to create your new page. A preview of the template is displayed in the right side of the dialog window. Click Create to create a new page and close the dialog box.

It's always good practice to save a new page as soon as it's created in Dreamweaver. It's also a good idea to include a brief description with a few key words specific to the content of each page in the Title field. In this example, I named the page news.html and I changed the title to News from The Loos Family.

You can edit or add text to any editable regions of the new page, which are identified with a light green box and an editable heading, such as the mainContent region shown here. Anything within the editable region is easy to change, such as the headline which I changed by selecting the text "H1 level heading" and replaced by typing in "New from the Loos Family." Remember, you can't change content in the locked regions of the page, such as the banner region at the top of the page or the links and copyright information at the bottom. Those areas can be changed only in the template. If you roll your cursor over a locked region, the cursor arrow changes to a circle with a line through it, indicating it can be edited only in the template itself.

To add images to an editable region of a page, simply click to place your cursor where you want to add a new image and choose Insert

If you want to make changes to all the pages created from a template, such as adding a link to your new page, you must first open the Dreamweaver template itself by choosing File

You can add a link to the bottom of this template by simply typing in the text you want to serve as the link. To make the text a link, click and drag to select the text and then click the link icon in the Common Insert menu (or choose Insert

In the Select File dialog box, navigate to find the file to which you want to link. In this example, I selected the news.html page, which I created in the first part of this task. Click to select the file and then click OK to create the link and close the dialog box.

When you save the template file, Dreamweaver automatically opens the Update Template Files dialog box and lists all the pages created from the template. Click Update to add the new link to all the pages.

To test your links, preview the page in a Web browser by choosing File