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

You can copy and paste images into this template by choosing File

After you paste an image, like this photo, you can click anywhere within the image and drag to adjust its placement. You can also click and drag a corner to adjust the size of the image. And here's an advanced Photoshop tip (that also works in Elements): If you hold your cursor just outside the corner of an image, the arrow becomes curved like the one in this figure, indicating that you can rotate the image, to set it off at an angle, as I've done to position this photo in its frame. You can also rotate an image by choosing Edit

Tip

If the image you're adding to a template is significantly larger than the template file, resize the new image before you copy and paste it into the template image. The image size for each image is displayed in the template. You can change the resolution and dimensions of an image by choosing Image

To edit the text, select the Text tool from the Toolbox. Then click and drag to select the text and type to replace it. Use the options at the top of the workspace to change the font, size, and color. In this example, I clicked the color well at the top of the page to change the text color. Tip: To reposition text on the page, click to select the Move tool from the Toolbox. (In Photoshop, 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.

When you're done customizing the banner image for your Web page, choose File

You can insert images of many different sizes into the templates in this business site and align them to the left or right so that text can wrap around them. To dress up your images, you can use a background as a frame. I've included a starter image called Photo-Frame-Template.tif in the images folder for you.

Because this site is for an actor, I thought it would be fun to use a frame around the photos that makes them look like they're stills in a film strip. I start by adding the filmstrip image to serve as the background.

When you layer images like this, make sure the right image is on top in the Layers panel, because that controls how the final image looks. In this case, I need to make sure the image with the photo is above the background image with the filmstrip.

With a photo like this positioned above a background image, like this filmstrip, you can use the Move tool to click and drag the image into position, change the size, and adjust the alignment until you get it framed just the way you want it.

When you have everything set the way you want it, choose File

You can create images as large as you want. Just beware that the more you put on a Web page, the longer it takes to download. If you're going to create a page like the home page design my friend Davi Cheng created for Yuval's acting site, you need to limit what else you put on the page. If you're going to use a large image on a page, that's probably all you should put on that page. In this case, I created one, big layered image by copying in each image (and cropping out the main photo).

Even large, layered images like this one can be optimized for the Web so that they load fairly quickly. Because this is the only image I'm placing on the home page of his site, it should load quickly at only 84K in size.

In Dreamweaver, choose Site

When you complete the site setup process, the files and folders in the template are displayed in the Files panel in Dreamweaver, at the side of the workspace. Double-click the index.html file in the Files panel to open the home page in Dreamweaver.

At the top of the home page, you can change the page title, as I'm doing here, by replacing the text in the Title field. Enter your name or business name or a brief description to identify your site, such as I did in this example, with the words Official Site of Actor Yuval David. The page title is the text that appears in the title bar at the top of the browser window when someone views a page online; this text is saved in a list of sites if someone bookmarks the page.

You can replace any of the image placeholders with images you prepared for your site. To insert an image, double-click any image, such as the banner at the top to open the Select Image Source dialog box. Navigate on your hard drive to find the image you want to insert and then double-click the image filename to select it. As you see in this example, I'm inserting the home page image I created and optimized in the previous task. If the image you select isn't already located in your root site, Dreamweaver offers to copy the file into the root folder after you select it.

The way this template is made, the design expands to fit images of any height, but the width should not exceed the overall width of this design, which is set to 970 pixels wide. Because this home page is just one big image, it's one of the easiest pages to create in Dreamweaver. Simply delete any text you don't want in the template and save the page. (Remember, the home page should always be named index.html.)

On the rest of the pages in this site, I use a smaller banner image at the top of the template to leave room for text and images I want to include on these pages. This template is set up to let you use a different banner on each page, which enabled me to use different photos of Yuval throughout the site, but you can use just one banner if you prefer.

You can add text by typing it into any part of the page, but be careful not to delete the formatting when you delete the Latin (Lorem ipsum) text, which is included as filler in the template. If you have trouble adding text without altering the format, use Undo (Ctrl+Z on Windows, or

You can insert images anywhere in the main area of the template by clicking to place your cursor where you want the image to appear and then choosing Insert

To change the text size or color in these templates, you need to edit the style that controls the elements. To do so, open the CSS Styles panel (if it's not open already) by choosing Window

To apply the heading styles to text in the page, select the text and then use the Format drop-down list in the Property Inspector to choose a Heading size.

To change the layout of the page, you need to change other styles, such as the width of the style named #container, which controls the overall width of the page in this template. You can double-click the name of a style in the CSS Styles panel to open the style in the CSS Rule Definition dialog box and edit it there. Or make changes in the lower half of the CSS Styles panel as you see in this figure.

You can change the layout dramatically from page to page using the same template in a Web site simply by using images in different sizes and aligning them differently on the page. In this example, I'm adding a big image with three separate photos to fill most of the width of the page.

To test your work in a Web browser, choose File

To give you a head start on this Web site design, the Business template folder has several pages that are already linked together. You can edit any of these pages, such as the work.html page, by simply double-clicking the name in the Files panel to open it. It's common practice to include a page on your Web site that showcases what you do, like you see in this figure, and it's easy to add images, text, and even video files to this page that was created from the template.

If you try to click the links or the copyright information on the work.html page or any of the other HTML pages that were created from this template, your cursor turns into a circle with a line through it, and you can't make any changes in the HTML file. To edit this part of the page, you need to open the template.

To edit the template itself, double-click the name in the Files panel. In this Business template site, the template is called Business-Template.dwt and it's in the Templates folder.

You can edit anything in the template file, but you should do it carefully so as not to disturb the formatting and links that surround the text. For example, to change the name of a section (at the top or bottom of the page), click to select the section of text, such as About Us, and replace it by typing the text you want to in its place. In this example, I changed About Us to Biography. As you can see in the Property Inspector at the bottom of the screen, when the text is selected, the link is displayed in the Link field. To change or reset the link, click the Browse button (it looks like a little yellow folder) next to the Link field in the Property Inspector.

To apply a change in the template to all the pages created from the template, just save the template file and Dreamweaver prompts you with a dialog box that lists all the pages that will be updated. Click Update to complete the changes.

Changing the text links doesn't alter the filenames, but you can change those as well by clicking to select the name of a file in the Files panel and typing to replace the name. Change file or folder names only in the Files panel to ensure that Dreamweaver updates any links that go to that page. As you see here, when I changed the about.html page to bio.html, Dreamweaver prompted me with another update dialog box listing all the pages that link to the about.html page. Remember: Folder and filenames used in Web sites shouldn't include spaces or special characters except the dash (—).

To add a new page to this Web site by using the template, choose File

Before you do anything else, always save the new page by choosing File

Like all the other pages created from this template, you can replace the text and image placeholders with your own text, images, and even multimedia files. In this example, I've added code from the Vimeo video hosting service to insert a video into this page. You find out more about how to use video services, such as YouTube and Vimeo, in Chapter 13.

To play multimedia, such as this video file, you need to preview your page in a Web browser by choosing File

Stock image Web sites, like www.istockphoto.com shown here, offer rights to photographs, illustrations, flash videos, and animations. You can search among many different keywords and when you find an image, you simply click to download. Most reputable sites that offer good quality images do charge for the service, but sites like iStockphoto offer images for as little as $1 each.

After you've created or downloaded an image to serve as the background of your Web page, you can combine it with other images and text in a program like Photoshop Elements, shown here. In this example, by placing the big image behind the text I was able to create a layered effect. You should edit and resize your background image and then use the Save for Web dialog box to save an optimized version for your Web site.

You can add any image to the background of the entire page by choosing Modify

Another way to use background images is in the background of a <div> tag in your page layout. In all the templates featured in this book, the designs are centered and they float on the screen so that they appear in the middle of the browser window no matter how big or small the monitor. If you use one of my templates, or create your own centered design like the one featured in this example, your best bet is to add the background image to the main div, in this case the <div> tag named #container that surrounds all the other content on this page. To do so, double-click the #container style in the CSS Styles panel; in the CSS Rule Definition dialog box that appears, choose the Background category and then click Browse button to the right of the Background field and select your desired background image file.

To view the full impact of your background image, preview your page in different Web browsers and try out the design on large and smalls screens to make sure it displays well on a variety of computers. Chapter 10 explains site testing in more detail.

After you've set up a background image for one page, it's easy to use the same design for any or all of the other pages in your site as well. When you add an image to the background of the page, you can add other images, text, or even multimedia files above the background to create a layered effect that can create a rich, full design effect.