Creating a Dreamweaver Web Page and Local Site (Adobe Dreamweaver CS5) Part 6

Adding Text

Table 1-1 includes the text for the Montana Parks and Recreation Areas Web page. After typing each section of the document, you press the enter key to insert a blank line.

Table 1-1 Montana Parks and Recreation Areas Web Page Text

Section

Heading, Part 1, and Part 2 Text

Heading

Montana Parks and Recreation Areas

Part 1 – first paragraph

Montana contains a variety of national parks and recreational areas, including two national parks, a national historical park, a national historic trail, a national historic site, a national recreation area, and a national battlefield.

Part 2 – second paragraph

In addition to the national facilities, over 50 state parks are located throughout the state. Some of the greatest natural and cultural treasures on earth are located in these parks and recreational areas.

Part 3 – bulleted list

Some of the highlights of this state include the following:

Yellowstone National Park, established in 1872, was America’s first national park. This park also extends into Idaho and Wyoming.

In addition to the national parks and sites, you also can visit over 50 state parks, including natural parks, cultural parks, and recreational parks.


A variety of events are available throughout the state, including such activities as a buffalo feast, panning for gold, native friendship dances, and Indian tacos.

Part 4 – closing paragraph

Special events are posted on the park’s calendar as they are scheduled. Most of the events are free.

To Add a Heading and Introductory Paragraph Text

The following steps show how to add text to the Document window and insert blank lines between sections of text.

Figure 1-41

Figure 1-41

1

• Click in the Document window, type the heading Montana Parks and Recreation Areas as shown in Table 1-1, and then press the ENTER key to enter the heading for the Web page.

• Type the text of Part 1 as shown in Table 1-1, and then press the ENTER key (Figure 1-41).

Q&A

What should I do if I make a typing error?

Press the BACKSPACE key to delete text you typed, or select the text and then press the DELETE key. Correct your typing mistakes the way you would in a word-processing program.

Figure 1-42

Figure 1-42

2

• Type the text of Part 2 as shown in Table 1-1 on the previous page, and then press the ENTER key to insert a blank line (Figure 1-42).

Q&A

Why does my text Q wrap at different locations from those shown in Figure 1-42?

Where your text wraps depends on whether your Dreamweaver window is maximized, the screen resolution (which is 1024 x 768 in the figures in this topic), and whether your computer has a standard or wide-screen monitor.

Figure 1-43

Figure 1-43

3

• Type the first line of the Part 3 text shown in Table 1-1, and then press the ENTER key to insert a blank line (Figure 1-43).

Figure 1-44

Figure 1-44

4

• Type the three items for the bulleted list as shown in Table 1-1. Press the ENTER key after each entry to insert space between the lines (Figure 1-44).

A When do I add bullets to the list? You will add bullets when you format the text in the next section of this topic.

Figure 1-45

Figure 1-45

5

•    Type the closing paragraph shown in Table 1-1, and then press the ENTER key to insert a blank line.

•    Click the Save button on the Standard toolbar to save your work (Figure 1-45).

Deleting Web Pages

If you need to start over for any reason, you can delete a Web page file. Close the page, display the panel groups if necessary, right-click the name of the page you want to delete, point to Edit on the context menu, and then click Delete. You also can select a file and press the delete key. Dreamweaver will display a warning dialog box. If files are linked to other files, information will be displayed indicating how to update the links. To delete the file, click Yes in the dialog warning box or click No to cancel.

Formatting Features

The next step is to format the text on your Web page. Formatting means to change heading styles, insert special characters, and insert or modify other elements that enhance the appearance of the Web page. Dreamweaver provides three options for formatting text: the Format menu on the Application bar, the Insert bar Text category, and the Property inspector. To format the text for the Montana Parks index page, you use the text-related features of the Property inspector.

The Property inspector is one of the panels you use most often when creating and formatting Web pages. It displays the properties, or characteristics, of the selected object. The object can be a table, text, image, or some other item. The Property inspector is context sensitive, so its options change relative to the selected object.

Property Inspector Features

Divided into two sections, the HTML Property inspector lets you see the current properties of the selected object and alter or edit them. When the panel groups are closed, you can click the expander arrow in the lower-right corner of the Property inspector to collapse the Property inspector to show only the more commonly used properties for the selected element or to expand the Property inspector to show more options.

Collapsing/Hiding the Property Inspector

Displaying panels such as the Property inspector requires considerable window space. If you are finished working with a panel, it generally is better to collapse it or close it. Collapsing it leaves the title bar in the window. Double-clicking the horizontal bar collapses and expands the Property inspector. Pressing ctrl+F3 also collapses/expands the Property inspector. Closing the Property inspector removes it from the Document window. To close the Property inspector, display its context menu by right-clicking the Properties title bar and then selecting the Close Tab Group command. (You also can click the Options button on the Property inspector and then select Close Tab Group.) To open the Property inspector, click the Window menu and then click Properties.

By default, the Property inspector displays the properties for text in a blank document. Most changes you make to properties are applied immediately in the Document window. For some properties, however, you must apply changes by clicking outside a text box in the Properties inspector, pressing the ENTER key, or pressing the TAB key to switch to another property.The following section describes the HTML-related features of the Property inspector (Figure 1-46).

Figure 1-46

Figure 1-46

Format The Format button allows you to apply a Paragraph, Heading, or Preformatted style to the text. Clicking the Format button displays a pop-up menu from which you can select a style.

The Paragraph style is the normal default style for text on a Web page. Paragraph formatting is the process of changing the appearance of text. Heading styles are used to create divisions and separate one segment of text from another. These formats are displayed based on how different browsers interpret the tags, offering little consistency and control over layout and appearance. When you apply a heading tag to text, Dreamweaver automatically adds the next line of text as a standard paragraph. You can use the Preformatted style when you do not want a Web browser to change the line of text in any way.

Class Class displays the style that currently is applied to the selected text. If no styles have been applied to the selection, the Class text box shows None. If multiple styles have been applied to the selection, the text box is blank.

Bold and Italic The Bold button and the Italic button allow you to format text using these two common font styles. Dreamweaver also supports a variety of other font styles, which are available through the Format menu Style command. To view these styles, click Format on the Application bar and then point to Style. The Style submenu contains a list of additional styles, such as Underline, Strikethrough, and Teletype.

Unordered List Web developers often use a list to structure a page. An unordered list turns the selected paragraph or heading into an item in a bulleted list. If no text is selected before the Unordered List button is clicked, a new bulleted list is started. This command is also available through the HTML Property inspector and through the Application bar Format menu List command.

Ordered List An ordered list is similar to an unordered list. This type of list, however, turns the selected paragraph or heading into an item in a numbered list. If no text is selected before the Ordered List button is clicked, a new numbered list is started. This command also is available through the HTML Property inspector and through the Application bar Format menu List command.

Definition List A definition list is composed of items followed by an indented description, such as a glossary list. This command is available through the Application bar Format menu List command.

Indent and Outdent To set off a block quote, you can use the Indent feature. The Text Indent button will indent a line or a paragraph from both margins. In XHTML and HTML, this is the blockquote tag. The Text Outdent button removes the indentation from the selected text by removing the blockquote tag. In a list, indenting creates a nested list, and removing the indentation removes the nesting from the list. A nested list is one list inside another list and is not the same as the block quote created by the Indent feature.

Title Specifies the ScreenTip text for a hypertext link.

Link The Link (Hyperlink) box allows you to make selected text or other objects a hyperlink to a specified URL or Web page. To use the Property inspector to select the URL or Web page, you can (a) click the Point to File or Browse for File icon to the right of the Link box to browse to a page in your Web site and select the file name, (b) type the URL, or (c) drag a file from the Files panel into the Link box.The Insert menu on the Application bar also contains a Hyperlink option.

Page Properties Clicking the Page Properties button on the Property inspector or the Properties command on the Modify menu opens the Page Properties dialog box.

List Item If the selected text is part of a list, click the List Item button to set list properties for the text, such as the type of bullet or the starting number.

Target In the Target text box, you specify the frame or window in which the linked page should load. If you are using frames, the names of all the frames in the current document are displayed in the list. If the specified frame does not exist when the current document is opened in a browser, the linked page loads in a new window with the name you specified. Once this window exists, other files can be targeted to it.

Next post:

Previous post: