In design view, position the insertion point anywhere within the first paragraph, Contact a Newland Tours Agent. In the Property inspector’s Format menu, choose Heading 1.

Notice that the page heading now looks like a page heading. In code view, you’ll see that the <p> tag has been replaced with an <h1> tag for that paragraph.

In design view, position the cursor just before If you are interested, and click the Insert Image button from the Common category of the Insert bar.

Images are inserted inline with the HTML and text that surrounds them, so it is important to choose the insertion point carefully.

Notice that beside the Insert Images button is a small arrow, indicating a drop-down menu. Clicking the arrow reveals many other image-related assets that you can insert from this menu, including image placeholders, interactive Fireworks HTML/images, rollovers, hotspots, and more. You won’t use these features in this book, but be aware that they are there. Several other buttons in the Insert bar hide similar commands.

In the Select Image Source dialog, browse to fountain_versailles.jpg, in the site’s images folder. Click OK.

In addition to enabling you to browse to the image, so Dreamweaver can write the correct path to it from contact.html, this dialog contains several other features and options. These include an image preview, information about the size and dimensions of the image, and options regarding the type of link, document or site root relative (it defaults to document relative, which is what you want).

At the top of the dialog, there is an option, Select File Name From. Your choices are File system (that is, you browse to the file on your computer) or Data sources (that is, you dynamically pull the URL from a database); you’ll work extensively with both approaches throughout the book. In this step, verify that File system is selected.

After you click OK, a dialog appears requesting accessibility information.

In the Alternate text field, type the following, This photo of a fountain in Versailles was taken by a Newland Tours customer on the “Highlights of France” tour. Leave the Long description field blank, and click OK.

In order to ensure that every element in your site, including images, is accessible to people with disabilities such as visual impairments, you need to insert a description of each image. This reminder dialog, which appears whenever you insert an image, was introduced in Dreamweaver 8. We will address the other images on the site in Lesson 2.

With the image selected on the page, use the Property inspector to change the image’s Align setting to Left.

The default setting usually causes the image to render to the left of one line of text, with all other text wrapping beneath the image. The result is a considerable amount of wasted page space. By choosing Left (or its opposite, Right), the image is rendered so that text wraps around it.

Position the insertion point before the words By Mail, and click the Insert Table button from the Insert bar.

In this step, you are preparing to insert a table, which will hold information on how users can contact Newland Tours. While tables are no longer considered the best method for page layout, they are still appropriate for tabular data.

In the next steps, you will create a simple table that presents street address, email address, and phone number in a two-column format.

In the Insert Table dialog, specify 2 Rows, 2 Columns, a Table width of 400 pixels, a Border thickness of 1, Cell padding of 3, and Cell spacing of 0. In the Accessibility section, enter Newland Tours contact information as the Summary. Click OK.

These settings will result in a four-cell table that is 400 pixels wide. Cell padding measures the space between cell borders and cell contents. Cell spacing measures the distance between cells. When you fill out the Summary information, Dreamweaver adds a summary attribute to the <table> tag that screen readers use to give vision-impaired users a quick glance at what the table contains.

Triple-click the words By Mail to select the paragraph. Drag the selected paragraph (just those two words) into the top-left cell of the table. Likewise, triple-click to select and then drag the words By Email or Phone into the top-right cell. Use the same technique to move the paragraph with the mailing address into the lower-left cell, and the paragraph with the email and phone information into the lower-right cell.

Dreamweaver moves both the text blocks and all the enclosing tags into the appropriate cells.

The table is now complete. All that remains is to remove the superfluous white space below the table (if applicable), and to format the caption using italics.

Position the insertion point before Image: This photo..., and press Backspace (Windows) or Delete (Macintosh) as many times as necessary until the image caption appears just below the table.

The additional spaces are a relic of removing the original address paragraphs and placing them in the table. If you look in the code before you complete this step, you’ll see a series of <p>&nbsp;</p> blocks. This is how Dreamweaver creates empty paragraphs. Modern browsers will not recognize opening and closing <p></p> tags with nothing in them. Dreamweaver therefore enters a space character as an empty placeholder. Because HTML ignores whitespace in code, Dreamweaver enters the character entity for the space character: &nbsp;, which stands for non-breaking space.

Triple-click anywhere in the caption line, and once it’s selected, use the Property inspector to apply italics.

Italics help distinguish the caption from regular body text.

Save and close contact.html. Close contact_text.txt.

You are done designing the new page. In the real world, you would now publish the page to a Web server, but instead, you can turn your attention toward the more ambitious task of reworking the site.