How Text Works In Dreamweaver CS4

by Adam Roberts on September 30, 2009

by Adam Roberts

Given that Adobe Dreamweaver CS4 is a web development tool, 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.

Text in HTML is all about 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.

Most of the time, users edit text using Dreamweaver's Design view and those who are unfamiliar with HTML may be occasionally be 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:
Be Sociable, Share!

No related posts.

Comments on this entry are closed.