Saturday , 3 December 2016
Breaking News
Home » WWW » Mastering Dreamweaver’s HTML Properties Inspector
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.

Mastering Dreamweaver’s HTML Properties Inspector

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 CSS Class drop-down menu displays any CSS class styles 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” ‘.

Below the Class drop-down is the link box, which allows you to convert the selected text into a hyperlink. Dreamweaver offers a variety of methods for 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.

The HTML section of the Properties tab also features buttons for Bold and Italic. These cause Dreamweaver to surround the selected text with the strong and em (short for emphasis) elements, respectively. 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 runs Adobe Dreamweaver CS4 training courses and HTML/XHTML training in London and all over the United Kingdom.

About Emma G.

Working in the marketing industry since 2002. This blog is one of my hobbies.

Leave a Reply