Writing HTML Code in Dreamweaver

You don't have to use only WYSIWYG

Adding HTML External Links. kr7ysztof / Getty Images

Dreamweaver is a great WYSIWYG editor, but if you're not interested in writing web pages in a "what you see is what you get" environment, you can still use Dreamweaver because it's also a great text editor. But there are a lot of features that slip by the wayside within the Dreamweaver code editor because the primary focus is on the "design view" or WYSIWYG editor portion of the product.

How to Get Into Dreamweaver Code View

If you've never used Dreamweaver as an HTML editor before you may have never even noticed the three buttons at the top of the page: Code, Split, and Design. Dreamweaver starts up by default in "Design view" or WYSIWYG mode. But it's easy to switch to viewing and editing the HTML code. Just click on the Code button. Or, go to the View menu and select Code.

If you're just learning how to write HTML or you want to get a sense of how your changes will impact your document, you can open code view and design view at the same time. The beauty of this method is that you can edit in both windows as well. So you can write the code for your image tag in HTML and then use the design view to move it to another location on the page with drag and drop.

To view both at once, either:

  • Click on the Split button (between Code and Design).
  • In the View menu, select Code and Design.

Once you're comfortable using Dreamweaver to edit your HTML code, you can change your preferences to open Dreamweaver in code view by default. The easiest way is to save the code view as a workspace. Dreamweaver will open in the last workspace you were using. If it doesn't, simply go to the Window menu, and choose the workspace you want.

Code View Options

Dreamweaver is so flexible because it has so many ways to customize it and make it work the way you want it to. In the options window, there are code coloring, code formatting, code hints, and code rewriting options you can adjust. But you can also change some special options within the code view itself.

Once you're in code view, there is a View Options button in the toolbar. You can also view the options by going into the View menu and choosing Code View Options. The options are:

  • Word Wrap — wraps the HTML code so that you can view it without scrolling horizontally. Note that this option does not insert any carriage returns in your code, it just displays the code so that it's easier to read.
  • Line Numbers — displays line numbers along the side of the code. It shows a line wrap symbol for lines that wrap longer than the view window.
  • Hidden Characters — displays special characters instead of whitespace that would display on a web page. Such as a dot replaces a space, a double chevron replaces each tab, and a pilcrow or paragraph marker replaces each line break.
  • Highlight Invalid Code — highlights HTML that is incorrect in yellow. If you select the yellow tag, the Property Inspector will give you hints on how to fix it.
  • Syntax Coloring — turns on or off the color coding of your code. You change the colors of your color coding in the code coloring section of the preferences.
  • Auto Indent — makes your code indent automatically after a carriage return if the code above it is indented. You can change the size of the indent by changing the tab size in the code formatting section of the preferences.

Editing HTML Code in Dreamweaver Code View

It's easy to edit HTML code in Dreamweaver's code view. Simply start typing your HTML. But Dreamweaver provides you with some extras that extend it beyond a basic HTML editor. When you start writing an HTML tag, you type <. If you pause right after that character, Dreamweaver will show you a list of HTML tags. These are called code hints. To narrow down the selection, start typing letters — Dreamweaver will narrow down the drop-down list to the tag that fits what you're typing.

If you're new to HTML, you can scroll through the list of HTML tags and choose various ones to see what they do. Dreamweaver will continue to prompt you for attributes once you've typed a tag. For example, if you type <i, Dreamweaver will drop down to the <i> HTML tag, with the other tags starting with I following. If you continue by typing the letter m, Dreamweaver will narrow it down to the <img> tag.

But code hints don't end at the tags. You can use code hints to insert:

If the code hints do not appear, you can hit Ctrl-spacebar (Windows) or Cmd-spacebar (Macintosh) to get them to display. The most common reason why a code hint might not appear is if you switched to a different window before finishing your tag. Because Dreamweaver is keying off the typing of the character <, if you leave the window and return, you'll have to re-launch the code hints.

You can turn off the code hints menu by hitting the escape key.

Once you've typed your opening HTML tag, you'll need to close it. Dreamweaver does this in a natural way. If you type the Close Tags option that best suits your needs.

If you're not quite ready to switch over to editing your pages in HTML but you'd like to watch the code as it's written, you should try the code inspector. This opens the HTML code in a separate window. It works just like code view, and, in fact, is basically a detachable code view window for the current document. To open the code inspector, go to the Window menu and choose Code Inspector or hit the F10 key on your keyboard.

Dreamweaver will format HTML code however you would like it displayed. For example, if you use 3 spaces to indent, but never indent IMG tags, you can specify that formatting information in the code rewriting options. Then you go to the Commands menu and choose Apply Source Formatting. This is a great way to get code written by someone else into a format familiar to you.

A feature that many HTML coders don't know about or don't use is the ability to collapse HTML code. This does not remove the tags from the document, but just remove them from view so that they aren't distracting to what you're working on. To collapse your code:

  1. Select the section of code you want to hide.
  2. In the Edit menu, choose Collapse Selection from the Code Collapse sub-menu

An easier way is to select the code and then click on the code collapse icons that appear in the gutter. You can also right click on the selected code and choose Collapse Selection.

If you want to hide everything except what is highlighted, choose Collapse Outside Selection in any of the above methods.

To expand collapsed code, simply double-click on it. This opens the code up and selects it. Then you can move that selection or delete it or add additional tags around it.

You can use the collapse and expand feature all the time on pages where you don't want to edit the external template. You just select the content area you want to edit and collapse outside. Then write your HTML. You can still view the page in Design view or preview it in a browser. The collapsed code is not removed from the document, simply hidden from view. You can also use it when you're working on a series of items. When you've finished one, collapse it. You know you're done when there is no code showing.