Twitter Facebook Google MySpace Digg

Using The HTML Properties Inspector In Dreamweaver CS4

by Dwight Davidson on March 10, 2010

in Software

Dreamweaver’s Properties Inspector is normally displayed at the bottom of the screen and is extremely versatile. It is context sensitive, in that it displays options which are relevant to the currently selected item. These options provide useful feedback and allow you to modify the attributes of the selected element.

The Properties inspector has two different sections, HTML and CSS, which are accessed by clicking on two buttons on the left of the panel. When formatting text, the HTML section contains options which allow you to assign structural attributes to your text. From the Format drop-down menu, you can specify whether the text is a heading (h1, h2, h3, etc.) or a paragraph (p). In the ID box, you have the option of assigning a unique ID to the item which could then be used in CSS or JavaScript to reference the item.

The Class drop-down menu displays any CSS classes which have been defined either within the current HTML page or in a linked external CSS file. These classes or styles can be applied to the selected text simply by choosing one of their names. If an entire paragraph or heading is selected, Dreamweaver will associate the class with the heading or paragraph tag. Thus, your code will read, for example, ‘ p class=”greenpara” ‘. If, on the other hand, only section of a paragraph is selected, Dreamweaver will surround the selected text inside a SPAN element and attach the class to it. Thus, your code will read ‘ span class=”greenpara” ‘.

Next we have the link box, which allows you to convert the selected text into a hyperlink. Dreamweaver offers a number of ways of creating the link. Thus, for example, if the link is to an external website, you can simply enter the entire URL into the link box. If you are linking to one of your own pages, one of the fastest techniques is to use the Point to File button. Simply drag the Point to File icon onto any page listed in your Files panel and Dreamweaver will create a link to it.

You will also notice buttons for Bold and Italic. These are no longer used for formatting but cause Dreamweaver to surround the selected text with the standards compliant strong and em elements, respectively. (Em is short for emphasis.) The default rendering for strong is normally bold, in modern browsers, and for em, italic.

The Unordered List button converts the selected text into a bulleted list; while Order List converts the text into a numbered list. The Text Outdent and Text Indent buttons can be used to promote and demote elements within lists, thus enabling you to create nested lists. If the selected text is not a list item, clicking the Text Indent button converts it into a blockquote element.

Author conducts Adobe Dreamweaver CS4 training courses and HTML/XHTML training in London and all over the United Kingdom.

Article Source: Free Articles

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous Free Article:

Next Free Article: