1. Technology

Writing HTML Code in Dreamweaver

You Don't Have to Use Only WYSIWYG


Dreamweaver CC

Opening screen of Dreamweaver CC

Screen shot by J Kyrnin courtesy Adobe
Dreamweaver code and design view

Here's a picture of Dreamweaver CC with both code and design view visible

Screen shot by J Kyrnin

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 into 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 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 formating, 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 formating 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 "</" characters, Dreamweaver will close the tag that is most recently opened. This makes sure that your code stays valid, without nesting errors. This is slightly different to how other HTML editors, like Homesite close the tags. If you would rather have Dreamweaver behave like Homesite and close the tag immediately upon opening it, go into the code hints section of the preferences and select 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.

©2014 About.com. All rights reserved.