Choose Site

Click the Advanced tab. Note: If you prefer, you can use the basic wizard that steps you through the setup process, but I find it faster and easier to view all the options at once from the Advanced tab.

In the Category box on the left, make sure that the Local Info category is selected so that you can specify the location of the folder on your local hard drive. This category should be open by default when you click the Advanced tab. (You find instructions for setting up the options in the Remote category so that you can publish your site to a Web server in Chapter 10.)

In the Site Name text box, type a name for your site. You can call your site whatever you like; this name is used only to help you keep track of your sites. Many people work on more than one site in Dreamweaver, and this feature enables you to keep track of them by name. The name you enter here appears in the drop-down list in the Files panel and in the Manage Sites dialog box. You use this list to select the site you want to work on when you open Dreamweaver. In this example, I named the new site Pamela's Pet Services.

Click the Browse icon next to the Local Root Folder text box to locate the folder on your hard drive that you want to serve as the main folder for all files in your Web site. (Hint: The Browse icon in Dreamweaver always looks like a small, yellow file folder and is usually located at the right side of a text field.) If you're setting up a new site, create a new folder on your hard drive, using the Create New Folder icon in the Choose Local Folder dialog, and then select that folder as the local root folder. If you're setting up an existing Web site, select the folder that contains the files for that site to designate it as the Local Root Folder.

Click the Browse icon next to the Default Images folder field and then select the images folder in an existing Web site. If you're creating a new site, create a new folder inside your local root folder, name it images, and select it. Although you don't have to identify an images folder, it has some advantages. For example, if you ever insert an image that isn't located in your local root folder, Dreamweaver copies it into the images folder you identify during the site setup process. If you create an images folder, Dreamweaver copies images into the main folder. (You can also store images in other folders within your local root folder.)

For the Links Relative To radio buttons, leave the Document option selected unless you know that you want your links to be set up relative to the root level of your site. This setting controls how the path is set in links. If you're working on a site with other developers and you're not sure, check with your colleagues. If you're working alone on your own site, Links Relative to Document is the simplest option and should already be selected because it's the default option in Dreamweaver.

In the HTTP Address text box, type the URL of your Web site. The HTTP address is the URL, or Web address, that your site will have when it's published on a Web server (see Chapter 2). If you don't yet know the Web address for your site or you don't plan to publish it on a Web server, you can leave this box blank. If you do fill it in, include http:// at the beginning and / at the end.

Select the Use Case-Sensitive Link Checking check box. Unless you know for sure that you don't have to worry about the case of your filenames, selecting this box makes Dreamweaver ensure that the case matches for all your site's links (which many Web hosting services require).

Select the Enable Cache option. Dreamweaver creates a local cache of your site to quickly reference the location of files in your site. The local cache speeds up many site management features of the program and takes only a few seconds to create.

Click OK to close the Site Definition dialog box and save your settings. If the folder you selected as your local site folder already contains files or subfolders, they're automatically cached and any files or folders in your site are displayed in the Files panel. In this example, because I'm creating a new site, only the images subfolder is displayed. If you haven't checked the Enable Cache option, a message box appears, asking whether you want to create a cache for the site. Doing so is good practice because it helps Dreamweaver work more efficiently.

If you work on more than one site in Dreamweaver, be sure to define each site the first time you work on it. After that, you can easily switch among defined sites by selecting the one you want to work on in the Files panel. You can define as many sites as you like in Dreamweaver. To load a different site into the Files panel, click the drop-down arrow next to the site name and choose the name of the site you want to display. In this figure, you can see that I'm opening the site named Pamela's Pet Services by selecting it from a long list of defined sites.

To create a new page, choose File

When HTML is selected in the New Document dialog box, a list of CSS layouts appears in the Layout Column. In the close-up view of this dialog box, shown in this figure, you can see that I selected a design that creates a one-column fixed layout with a header and footer. The rest of the options in this dialog are optional, so keep things simple and just click the Create button.

Get into the (excellent) habit of saving a new page as soon as it's created. Choose File

Adding or editing text in a new page in Dreamweaver is relatively simple. For example, if you want to change the text at the top of the page, just select the word Header and type in the text you want to use to replace it. In this case, I entered Pamela's Pet Services. Because I selected the Header first, the font, style, and size of the text in the original layout are preserved. Replace the subheadings and main text in the page in the same way.

Inserting text from another program

Dreamweaver gives you many options for maintaining formatting when you copy and paste text from another program. You can change the default method for how Dreamweaver handles formatting when you choose Edit

• Text Only: Dreamweaver strips any formatting and inserts plain text.

• Text with Structure: Dreamweaver includes paragraphs, lists, tables, and other structural formatting options.

• Text with Structure Plus Basic Formatting: Dreamweaver includes structural formatting as well as basic formatting, such as bold and italic.

• Text with Structure Plus Full Formatting: In addition to the previous options, Dreamweaver includes formatting created by style sheets in programs such as Microsoft Word.

• Retain Line Breaks: Selecting this check box ensures that line breaks are preserved, even if you don't keep other formatting options.

• Clean Up Word Paragraph Spacing: This option is designed to address a common problem in the way Microsoft Word paragraph spacing is converted when content is pasted into an HTML file.

All Dreamweaver layouts include a collection of corresponding styles. As a result, to edit many of the elements, such as the background color of the header area, you must edit the corresponding style. First, open the CSS Styles panel (if it's not already open) by choosing Window

To change the color or other style options for the header, double-click the style named .oneColFixCtrHdr #header to open it in the CSS Rule Definition dialog box. Click to select the Background category, and use the color palette to change the background color. Choose the Type category to access font, size, and other text options. Click Apply to see how the settings look, and then click OK to save them and close the dialog box.

To change the width of the one-column layout, you need to edit the Div tag that surrounds all the content on the page. By following the common practice of using Div tags to "contain" elements on a page and styles, to describe how they should be displayed, Dreamweaver includes a Div identified as container in every layout. The container controls the overall width of the design area; to change the width of your design, you need to change the corresponding style. To do so, double-click the style named .oneColFixCtrHdr #container to open it in the CSS Rule Definition dialog box. (The Div is the foundation of the box model, which I explain in Chapter 4.)

In the CSS Rule Definition dialog, choose Box from the Category list (left) and then use the width field to change the width as desired. In this case, I'm changing the width from 780 pixels to 980 by replacing the number in the Width field. Limiting the width of your page to 780 pixels is good practice if you want your page to display well in an 800 × 600 resolution monitor, but most Web designers today design for a monitor resolution of 1024 × 786 and a width of 980 is well suited to that size, leaving just enough room for scrollbars and other elements of the browser that take up space on the screen. Click Apply to preview your changes, and then click OK to save your changes and close the dialog box.

You can also change the font or color of any or all text on a page by changing the corresponding styles. If you aren't familiar with HTML, you may not guess that to change the font style for the entire page, you need to alter the Body style. That's because the <body> tag controls page-wide settings, like font face and link styles. You can use multiple fonts on a page by changing the font style for a specific section of text, but to change the default font for the entire page, double-click Body in the CSS Styles panel, choose the Type category and use the Font-family drop-down list to select a font collection.

For many designs, such as the one featured in this task for Pamela's Pet Services, you may want to use a graphic instead of text in the Header. First, simply delete the text in the Header area, and then choose Insert

Although I changed the width of the layout to match the width of my banner (in the previous task), the banner didn't line up properly when I inserted it into the header. That's because the header is styled for text and includes padding to better position the text away from the sides of the layout. To make an image, such as this banner fit in the header properly, you need to remove the extra space. First, click the style named .oneColFixCtrHdr #header in the CSS Styles panel. Then expand the Styles panel to display the Properties for the #header style and delete everything in the padding field by selecting it and pressing the Delete key.

Even after deleting the padding, you're still likely to have extra space at the top and bottom of the banner; this space is caused by the H1 tag attributes that make the header text large and bold. If you deleted the H1 tag when you deleted the text, you won't have this problem, but it's easy to leave the H1 tag behind. Here's a good way to remove any unwanted HTML formatting. First, click to place your cursor in the Header area. (It doesn't matter whether you select the image). Then in the tag selector at the bottom of the workspace, right-click the H1 tag and choose Remove Tag.

To insert an image in an area of the page where you have text, click to place your cursor where you want the image to appear and then choose Insert

To align an image to the right or left and wrap the text around it, your best option is to use a CSS style. In all the templates included with this book, and in many of the CSS Layouts included with Dreamweaver, you'll find styles with the name fltrt (or float-right) for aligning images to the right, and fltlft (or float-left), for aligning images to the left. To use these styles, first click to select the image. Then, in the Property Inspector, click the Class drop-down list and choose the alignment style you want to use. In this example, I selected fltlft.

The alignment styles, such as float-right and float-left, include a margin setting of 8 pixels (px) to create a small margin between an image and any text that wraps around it when it's aligned to the left or right of a page. You can change the margin settings to increase or decrease this space by clicking to select the style in the CSS Styles panel, and then changing the number of pixels in the Properties pane. Alternatively, you can double-click the style name to open the CSS Rule definition dialog and change the margin settings in the Box category.

In Dreamweaver, open the page where you want to create a link. Select the text or image that you want to serve as the link (the text or image that a user clicks to trigger the link). Click and drag to highlight text, or click once to select an image. In this example, I select the text Learn more about our boarding services, and I want to link it to a page named boarding.html located in a folder named services. Note that all these files and folders are located inside the local root folder that I defined for this site in Dreamweaver.

To set the link, click the Link icon on the Common Insert panel to open the Hyperlink dialog box. (Alternatively, you can choose Insert

In the Hyperlink dialog box, click the Browse icon (the yellow file folder) to the right of the Link field. In the Select File dialog box that appears, navigate on your hard drive to the page to which you want to link your image or text. Click to select the filename of the page, and then click OK (in Windows) or Choose (on a Mac). The rest of the settings in this dialog box are optional. (See sidebar on "Targeting how links open".)

The link is automatically set, and the dialog box closes. If you create a link by using text, as I do in this example, the text changes to reflect the style for a link. By default, Active links appear underlined and in dark blue. To test your links, you must view the page in a Web browser. Choose File

In Dreamweaver, open the page from which you want to link and click to select an image, or click and drag to highlight the text that you want to act as a link. You can also click to select any image on the page to serve as the link. In this example, I selected the text visit www.petfinder.com., at the bottom of the page.

In the Link text box in the Property Inspector, type the URL of the page you want your text or image to link to, and then press Enter (in Windows) or Return (on the Mac). You can also copy and paste a URL from the address bar in a Web browser, which is an excellent way to ensure that you don't enter the address incorrectly. You must always use the full URL, including the http:// part, when you create an external link in HTML. Otherwise, the browser can't find the correct external site address.

The link is set automatically, and the text changes to indicate that it's an active link. To test a link to another Web site, you must view your page in a browser and be connected to the Internet. Choose File

To create an e-mail link, select the text that you want to serve as the link.

With the text selected, click the Email Link icon on the Common Insert panel. Alternatively, you can choose Insert

In the Email Link dialog box that opens, enter the e-mail address in the E-Mail field and click OK. The dialog box closes and the text automatically changes to the style for an active link.

The Email Link dialog box works only with text. If you want to use an image as an e-mail link, you must select the image and then enter the e-mail address, preceded by mailto: in the Link field in the Property Inspector. In this example, the image is selected, and the e-mail link has been created by entering mailto:[email protected].

Choose Modify

In the Size drop-down list, specify the font size you want for the text on your page. (In this example, I selected 100%, but you can choose from a variety of size settings.) Click the Text Color swatch box to reveal the color palette. Choose any color you want for the text color on the page. The color you select fills the color swatch box but doesn't change the text color on the page until you click Apply or OK.

Click the Background Color swatch box and choose a color if you want to fill the background of the page with a solid color. If you want to insert a graphic into the background of your page, as I did here, click the Browse button next to the Background Image box, and in the Select Image Source dialog box that appears, select an image and click OK to return to the Page Properties dialog box. When you insert a background image, it automatically repeats (or tiles) across and down the page unless you choose the no-repeat option from the Repeat drop-down list or use CSS to further define the display.

Use the margin options at the bottom of the dialog box to change the left, right, top, or bottom margins of your page. Entering 0 in all four fields removes the default margin settings, which automatically add margin space at the top and left side of a Web page, enabling you to create designs whose edges begin flush with the edge of a browser. Most professional designers prefer to set the margins to 0 and then use other CSS settings to control the positioning of the design within a browser window.

To alter the display of links on a page, first select the Links (CSS) category from the left side of the Page Properties dialog box. Specify the font face and size you want for the links on your page. If you don't specify a font, links appear in the same font and size that are specified for the text in your document.

To the right of the Link Font drop-down list, click the B or I icon if you want all links on your page to appear in bold or italic, respectively. Specify a color for any link option (or all link options) by clicking the color palette and selecting a color for each of the link states separately. The color you select is applied to links on your page based on the link state. All four link states can be displayed in the same or different colors:

In the Underline Style drop-down list, specify whether you want links underlined. By default, all links on a Web page appear underlined in a browser, but many designers find the underline distracting and prefer to turn it off by selecting Never Underline. You can also choose Show Underline Only on Rollover to make the underline appear when a user moves a cursor over a link. Hide Underline on Rollover causes the underline to disappear when a user moves a cursor over a link.

As you alter the different settings, you can click the Apply button to see how the changes appear on your page. After you specify all the settings, click OK to finish and close the Page Properties dialog box.

Choose Format

In the New CSS Rule dialog box, choose the type of CSS selector you want to create from the Selector Type drop-down menu. (If you need a refresher on the four selector options and choosing selector types, see Chapter 4.) In this example, I'm creating a class style that I will use to format the captions for my images. In the Selector Name field, type a name. Because class styles must begin with a period (.), I named this style .imagecaption.

In the Rule Definition area at the bottom of the New CSS Rule dialog box, select where you want to define your new style. Choose This Document Only from the drop-down menu to create an internal style sheet. In this example, I'm adding my new style to an external style sheet that's already attached to my page (design.css). To create an external style sheet, click to select the name of the style sheet, or choose New Style Sheet File to create a new style sheet file as you create the style. If you choose to create a new style sheet, enter a name in the Save Style Sheet File As dialog box and then click Save to continue. Usually, you want to add a style to an external style sheet; see Chapter 4 for details about internal versus external style sheets.

In the CSS Rule Definition dialog box, choose a category on the left. For this example, I chose the Type category to specify font options for this style because I want the font to be different from the main page font. As you can see in this figure, I chose the Georgia, Times New Roman, Times, serif font collection; set the Font size to Small; and set the Font weight to Bold. (See Chapter 4 for more information about font collections.) Click OK to save the style and close the dialog box.

The new style appears at the bottom of the CSS Styles panel. You can change the order of styles by clicking to select a style name and dragging it to another position in the panel.

To apply a new class style, like the one I created in this task, select a section of text in a Web page and then use the Class drop-down list to select and apply the style. For more information on how to apply other kinds of styles, see Chapter 4.

To create a new template, choose File

In the Save As Template dialog box, make sure that the site you're working on is displayed in the Site field. (This should happen automatically if you completed the site definition process; if you haven't, make sure to do so by following the steps in the first task in this chapter.) You can name the template anything you like as long as you don't use spaces or punctuation. When you're prompted by the Update Links dialog box, choose Yes to preserve any links to pages or images in the file.

When you create a Web Template, Dreamweaver automatically adds the .dwt extension. In this case, my file is named services.dwt. As you can see in the Files panel shown in this figure, Dreamweaver automatically stores the new template in a folder named Templates. If you don't already have a Templates folder in your local root folder, Dreamweaver creates one for you when you save your first template. If Dreamweaver prompts you to update links as you save the page as a template, click Yes.

Before you use your template to create new pages, you need to create editable regions in the template: areas of the template that can be edited in new pages created from the template. You create editable regions where you want to be able to add unique content to a new page created from the template, such as the photos and stories you will want to use in the main part of each page. To create an editable region, first select a container, such as the mainContent div, that contains the text and image in the middle of this page. To select the mainContent div, I place my cursor in the content and then clicked the mainContent tag in the tag selector at the bottom of the page.

With a container selected, such as the mainContent div, choose Insert

In the New Editable Region dialog box that opens, give the region a name (no spaces or special characters!), and then click OK. I enter the name Main in this example. If you don't have visual aids turned off, Dreamweaver will distinguish the editable region by surrounding it with a blue line and including a small tab at the top with the name you gave the region. Repeat Steps 4, 5, and 6, selecting different containers in turn to create additional editable regions.

After you define all editable regions, choose File

Always save a new page before you start editing it by choosing File

At any time, you can go back to the template to make changes to any area of the template that isn't an editable region, and those changes will automatically be applied to any pages created from the template. In this example, I included copyright information in the footer of the page. Because it's not an editable region, I can now change the year from 2009 to 2010, and the footer will automatically be updated on every page in the site created from the template.

To save your changes and update any pages created from the template at the same time, choose File

Open the page where you want to add a meta description. You can use meta descriptions on any page, or all pages, on your Web site. Choose Insert

To view or edit the Meta description after you create it, choose either the Split or Code view option by clicking the corresponding button at the top of the workspace. In this example, I selected Split so that both Code view and Design view are visible. To edit the meta description, locate it in the HTML code, and then you can delete, change, or add text as you would in Design view. The description text you enter is inserted into the Head area at the top of the page in the HTML code. Meta content doesn't appear in the body of the page.

The easiest way to add code to a page in Dreamweaver is click the Split View button in the upper-left corner of the workspace to display the code behind the page in the top part of the workspace. The advantage of using Split view is that you can see Design and Code views at the same time. Here's a tip: When you're working on code that adds a visible element to your page, click any element in Design view, such as the Copyright information in the footer at the bottom of this page, and Dreamweaver automatically highlights the corresponding code so that you can find your place more easily.

Find the exact place where you want to add the code. Google Analytics should be added just above the </body> tag at the very end of a page. Click to place the cursor in the code; then choose Edit