Launch a graphics program, such as Photoshop Elements (shown here), and choose File

In this example, I'm opening the Profile-Banner.tif template image file. (You find this file in the images folder inside the Profile template folder that you download from the www.DigitalFamily.com/diy Web site.)

Open the Layers palette by choosing Window

To edit the text in any image in Photoshop or Photoshop Elements, first select the Type tool in the Toolbox.

With the Type tool active, click and drag to select a section of text and then type to replace the words. Adjust the Type tool settings on the Options bar at the top of the work area to change the color, font face, size, or other options. In this figure, I'm adjusting the font for the selected text, which I changed to read Jenny Hontz. If you don't have the font I used in this template, Photoshop may give you a warning that the font is missing, but it's easy to fix. Just select any font available on your computer.

To reposition the text on the banner, 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 a section of text to adjust it. Note that if you click and drag a corner, you change the size of the text; if you click in the middle of a text area and drag, you move the text.

If you have trouble selecting text in the image, you can click to select its layer in the Layers panel to make it active in the workspace.

To change the background color of this image, first click to select the Move tool from the Toolbox, and then click in the Layers palette on the right side of the screen to select the Background layer. Choose Edit

Each of the templates includes its own banner image, but you can mix and match them and you can add your own photos to any of them like this: First open both the photograph you want to add and the banner image from the template folder (here you see the Portfolio banner from the Portfolio template). You can open as many images at once as your computer's memory will allow by choosing File

Make sure the photo you want to add to your banner is the active image in the workspace; choose Select

After you make these changes to the banner image, choose File

In Dreamweaver, choose Site

Click the Browse icon next to the Local Root Folder field. In the Choose Local Root Folder dialog box that appears, locate the folder on your hard drive that contains the profile template you downloaded from www.DigitalFamily.com/diy. (Note: The folder is named Profile-Template, but you can rename it, if you like.) Click Open and then click Select to select the folder and return to the Site Definition dialog box. Then click the Browse icon next to the Default Images Folder field and select the Images folder inside the profile template folder. Leave the rest of the options in this dialog box alone for now, and then click OK to close the Site Definition dialog box and save your settings. 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 profile template are displayed in the Files panel in Dreamweaver, to the side of the workspace. Double-click the profile-template.html file to open the profile page design in Dreamweaver.

Choose File

To insert an image in the top of this design, click to select the graphic that reads My Profile and then click the Browse button (the yellow folder icon) for the Src field of the Property Inspector.

In the Select Image Source dialog box that appears, navigate your hard drive to find the image you want to insert and then double-click the image filename to select it. If the photo or other image you select in Step 6 isn't already located in the local root folder of your site, Dreamweaver offers to copy the file into the root folder. (You find more detailed instructions for adding images in Chapter 6.)

If the Image Tag Accessibility Attributes dialog box opens, type a brief description of the image in the Alternate Text box. (This text will appear on the page if the image isn't visible.) You can use the Long Description field to link to a longer description of the image in a separate file. Click OK when you're done.

You can add more images by clicking to select any of the placeholder images and using the Browse button (the yellow folder icon) in the Property Inspector to replace an image. You can also add images by clicking to place your cursor where you want the image to appear, and then choosing Insert

To align an image so that text wraps around next to it, click to select the image. Then, in the Property Inspector, use the Class drop-down menu to select float-right or float-left to align the image. (Note: These are styles that I created when I created this template. You find similar styles with every template because aligning images and other elements to the left or right is a common option. These styles were created using the Float left and right options in CSS You find more about CSS in Chapters 4 and 6.)

To edit the text on the page, click and drag to select a headline or other section of text, and then type to replace it. Note that you can also use copy and paste to replace this text with text from another file, such as a word processing document.

It's good practice to use CSS styles for all your formatting, especially if you use the same styling consistently, but if you just want to add a little formatting to a few words, you can use the formatting icons in the Property Inspector (at the bottom of the work area) to add bold, italic, and other formatting options. To remove bold or italic formatting, simply highlight the formatted text and then click the Bold or Italic button.

This template is designed with a set of heading styles. If you want to add more headings or change the formatting of a heading, click and drag to select the text you want in your heading and then choose one of the Heading styles.

This template includes CSS styles that control the font, color, and size of the text when you apply Heading sizes 1, 2, and 3. To change these options, in the CSS Styles panel (choose Window

To change the colored stripe down the right side of this template design, you need to remove or replace the background image that is set in the style called #mainContent. The advantage of creating this stripe of color with a background image the way I did in this design is that it automatically adjusts to fill the column whether you have a little text or a lot of text in the other two columns on the page. To change the background image, double-click the style named #mainContent in the CSS Styles panel and then choose the Background category in the CSS Rule Definition dialog box.

I included three different background images that you can choose from — background-blue.png, background-red.png, and background-grey.png — but you can create your own background image using any color. (Tip: To ensure that the background fits this design, open the file background.tif in Photoshop or Photoshop Elements and replace just the colored region in the image.)

To view how your page will appear in a Web browser, choose File

In Dreamweaver, choose Site

Click the Browse icon next to the Local Root Folder text box and locate the folder on your hard drive that contains the portfolio template files you downloaded from www.DigitalFamily.com/diy. Then click the Browse icon next to the Default Images Folder field and select the Images folder. Leave the rest of the options in this dialog box alone for now, and then click OK to close the Site Definition dialog box and save your settings. If you haven't selected the Enable Cache option, 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. (For more detailed instructions on the site setup process, see Chapter 6.)

After you complete the site setup process, the files and folders in the template are displayed in the Files panel in Dreamweaver, to the side of the workspace. To open a folder in the Files panel and display its contents, click the plus (+) sign to the left of the folder. In this figure, you can see five templates in the Templates folder. To create the first page in this template site, choose File

In the New Document dialog box that appears, choose Page from Template from the far left. Then choose main from the list of templates. A preview of the template is displayed in the far right of the dialog box window. Click Create to create a new page using the selected template.

You can replace any of the images in this page design except the banner. Just double-click the gray box that serves as an image placeholder for the image; in the Select Image Source dialog box, click to select the image you want to use in its place. (If you use this method, be sure to then click to select the image; then, in the Property Inspector at the bottom of the page, change the text in the Alt field by deleting the word Photo and typing in a text description of your image.) For the best results, insert images that are the height and width specified in the image placeholders so that they fit within this Web page design. If you want to use larger images, you may need to change the width settings in the corresponding styles. See Chapter 5 for help resizing and optimizing images for the Web.

Repeat Step 5 until you replace or delete all the images except the banner. (Don't worry: You'll get to the banner soon.) If you don't want to use images in all three boxes, you can delete any of the image placeholders by first clicking to select the image and then pressing the Delete or Backspace key on your keyboard. Then simply enter any other image or text in its place. Note that when an image is selected, the options for that image appear in the Property Inspector.

If you try to select the banner image at the top of any page created from a template like this, you may be frustrated that you can't edit it in a page created from the template, such as this index.html file. That's because it's in a locked region and can be changed only in the template file. You can tell the difference between locked and unlocked regions because when you click anything in a locked region, the cursor changes to a circle with a line through it — the universal symbol for "You can't do that." Among the many benefits of locking a region, such as this banner, in a template in Dreamweaver is that when you edit the banner in the template file, you can automatically update all the pages created from that template.

To change the banner image in the template, first open the template file named main.dwt, which is saved in the Templates folder. You can open a template file like you would open any other page in Dreamweaver, by double-clicking its name in the Files panel or by choosing File

With the template file open, you can change the banner image at the top of the page by double-clicking the banner image and then using the Select Image Source dialog box to select the image you want to use in its place. In this case, I replaced the placeholder image with the template banner that I customized in the first task in this chapter, "Customizing the Banner Graphics." (Remember that you should click to select the image after it's inserted and then enter a text description of the image in the Alt field in the Property Inspector.)

When you save the template file with the new banner, Dreamweaver launches the Update Template Files dialog box with a list of all files created with the open template. In this case, only the index page was created from this template, so it's the only one listed. To apply this change to the index page, click the Update button. If the template had been used to create many pages, this process would update all pages created from the template — a useful time-saver when you're working with many similar files, such as the gallery sections of this Web site.

Start by creating a new page from the gallery1.dwt template by choosing File

Keep each collection of gallery pages in a separate folder so you don't have to worry about duplicate file names. In this example, I created a new folder called gallery1 and saved the file with the name photo1.html. (You can create a new folder similar to how you save a file in Dreamweaver: Clicking the New folder icon in the Save As dialog box.)

To replace the image placeholder in the middle of the page with a photograph, double-click to select the placeholder image. Then, in the Select Image Source dialog box, click to select a photograph to insert into the page in its place. Click to select the image after it's inserted and enter a text description of the image in the Alt field in the Property Inspector. To add a caption, click to place your cursor beneath the photo and then type to enter text. (Don't worry about the banner image at the top of the page or the thumbnail images across the bottom. You replace those images in Step 5.)

To create additional pages for the gallery, repeat Steps 1–3, saving all the files in each gallery with a new name, such as photo2.html, photo3.html, and so on in the same gallery1 folder. In this site for Jasper, I used eight thumbnails and eight pages in each gallery. If you use eight images the same size as the ones I used, you can use this template exactly as I created it. If you delete or add images, or if you change the sizes, you may need to make adjustments to the designs in the CSS. (You learn more about editing CSS and templates in Chapters 4 and 6.)

In the gallery templates, the banner graphic is in a locked region at the top of the template, and the thumbnails and copyright information are in a locked region at the bottom. To edit these images, first open the gallery1.dwt file, located in the Templates folder. Replacing the banner at the top of all these gallery pages is easy. Double-click the placeholder image at the top and select the banner image you created for your site. (Find instructions for customizing a banner image in the first task in this chapter.) After I add the banner image to the template, I choose File

Adding and linking all the thumbnail images at the bottom of each gallery template will take a little time, but it works the same whether you're adding four thumbnail images to the home page design or eight to each of the gallery templates. Because you're adding the thumbnails images and links to the template, Dreamweaver will add them to all the pages in your galleries automatically, saving you having to set all those links multiple times, and making it easy to add or remove images to all the pages later. To replace each thumbnail, double-click the placeholder image in the template and select an image sized to fit this template design and saved in the PNG or JPEG format. (You find instructions for resizing and optimizing images before you insert them into a template in Chapter 5.)

Link each thumbnail image to its corresponding page by first clicking to select the thumbnail image in the page and then choosing Insert

To test the links, double-click to open the photo1.html page in the gallery1 folder. Choose any of the pages you created in the gallery1 folder, click the Preview in Browser icon at the top of the workspace (it looks like a globe), and then choose the browser you want to use to test the page. You can also choose File

Click each thumbnail image in turn to make sure that you set the links properly. If you find one that doesn't link to the correct page, open the template again in Dreamweaver and correct the link in the template. When you save the template, the corrected link will be updated in all related gallery pages.

To test the links on each thumbnail, preview the page in a Web browser by clicking on the Browser icon at the top of the workspace or by choosing File