Text Formatting Using Adobe CS5 Dreamweaver Property Inspector - dummies

Text Formatting Using Adobe CS5 Dreamweaver Property Inspector

By Jennifer Smith, Christopher Smith, Fred Gerantabee

The Adobe Creative Suite 5 (Adobe CS5) Dreamweaver Property inspector is used to apply HTML tags and build CSS classes to format text color, face, size, and other characteristics. The Property inspector is divided into two views: HTML and CSS. You can toggle them by using the buttons on the left side of the panel.

Change text attributes.
Change text attributes.

Here’s what all the buttons on the Property inspector mean:

  • Format (HTML): Use the Format drop-down list to apply HTML tags that format an entire paragraph, including heading tags (Heading 1 through Heading 6) that are generally applied to headers and titles, the paragraph tag, and the preformatted text tag. You can easily fine-tune each of these tags’ attributes later by using CSS.

    The last choice in the Format drop-down list is Preformatted, allows your browser to display text exactly the way you composed it.

  • ID (HTML): This setting applies a CSS ID style to an element. IDs are a specific type of CSS rule (or selector) that are used to store formatting information unique to a single item on the page (for instance, positioning information for a container).

  • Class (HTML): This drop-down list applies an existing class style to a selection on the page. Class styles can be created with the Property inspector or directly from the CSS styles panel.

  • Link (HTML): Type a hyperlink (such as www.wiley.com) or click the folder icon to browse and link to another page within your website.

  • Target (HTML): Choose where the linked target will appear.

  • Bold (HTML/CSS): Bold selected text.

  • Italic (HTML/CSS): Italicize selected text.

  • Alignment (CSS): You can click the alignment buttons on the toolbar to apply left, center, and right alignment. To revert to the default left alignment, click the selected alignment button again.

  • Unordered List (HTML): Automatically insert bullets in front of listed items. As you advance in the use of Cascading Style Sheets, you can apply many more attributes to lists, including customizing the bullets.

  • Ordered List (HTML): Automatically numbers each additional line of text every time you press the Enter (Windows) or Return (Mac) key.

    To force the text to another line without adding automatic numbering, press Shift+Enter (Windows) or Shift+Return (Mac).

  • Text Outdent (HTML): Undo pressing the Indent with the Text Outdent button. This option removes the <blockquote> tag that the Text Indent button creates.

  • Text Indent (HTML): Use this option to indent text. Simply put the cursor in the paragraph of text that you want to indent and press the Text Indent button. A <blockquote> tag is applied.

  • Targeted Rule (CSS): Modify an existing CSS rule or create a new one. This drop-down list makes it clear whether you are creating a new rule or modifying an existing one in the Property inspector.

  • Edit Rule / CSS Panel buttons (CSS): For the rule shown in the Targeted Rule drop-down list, you can either edit the properties and values for that rule in the CSS Rule Definition dialog box or view it in the CSS Styles panel on the right, respectively.

  • Font (CSS): The font is the typeface you choose for displaying text. Keep in mind that what font the viewer sees is based on the availability of the fonts on that user’s computer. For this reason, font sets are limited to basic system fonts that are installed on most every computer, regardless of operating system.

    The viewer may not have fonts that you load in your font sets, so try to stick to such common typefaces as the ones already included in the existing Dreamweaver font sets.