Monday, October 5, 2009

How Text Works In Adobe Dreamweaver

By Harry James

Although Adobe Dreamweaver is a visual editor it is not a word processor; and, therefore, the text it allows you to create is HTML text and HTML handles text in a different way to print-oriented environments such as word processors and DTP packages. Although adding text to your web pages feels kind of similar to working in any text editor, you will sometimes find a few quirks in the way that Dreamweaver handles text.

The first thing to grasp about HTML text is the importance of structure. Browsers assign a structural importance to text based on the HTML element which contains them. Text inside a heading element, such as h1 or h2, is given more prominence than text contained within a paragraph element. Dreamweaver uses the paragraph element as the default container for text; so, if you create a blank page in Dreamweaver and type some text, as soon as you press Return, your text will be placed inside a paragraph element.

The same thing normally happens when you paste text from another environment. Dreamweaver will recognise returns and use them to split the text into paragraphs. It will also attempt to translate any formatting to its nearest HTML equivalent. Thus, if you copy some data from an Excel spreadsheet and paste it into an HTML page in Dreamweaver, you will end up with a table containing the Excel data. Similarly, if text from Word which has been formatted using Word styles such as "Heading 1", "Heading 2" and "Normal", Word will place all "Heading 1" text inside h1 elements, "Heading 2" text inside h2 and "Normal" text inside paragraph elements.

As they edit their text in Dreamweaver, users who are unfamiliar with HTML may be occasionally confused by the fact that Dreamweaver treats text as a separate entity to the element that contains it. Thus for example, in design view, if you triple-click on a heading to select it, what Dreamweaver actually selects is the text inside the heading. The heading element itself is not selected. Once users are familiar with HTML, this behaviour becomes less confusion.

A good habit to get into when working in design view, is to keep an eye on the tag selector. This is the area on the left of the status bar at the bottom of the document window. It displays the tags representing the element which contains the currently highlighted item. These tags can also be used to select an element and its contents. Thus, to select a heading, ignore the text and just click on the tag representing the element which encloses it.

Another piece of advice I often give to newbie Dreamweaver users is to stay away from split screen view. This is where code and design views are each allocated half of the screen. Unless you creating something fairly intricate, like a complex form, split view is a bit wasteful. Just looking at the tag selector is usually enough to let you know what HTML elements you are working with.

About the Author:

No comments: