“Do not use Dreamweaver. It will make a mess of your code.”
We have all heard this warning. You may have heard it just now for the first time, but you are sure to hear it again. And in fact, there is some truth to it. If you use Dreamweaver’s visual editor, it will write HTML its way. Often the result can be strangely indented code blocks or text on the wrong side of a tag.
Today I am going to give a few pointers on making Dreamweaver obey your commands without biting you (ambiguity intended.) I use Dreamweaver for 90% of my page and CSS editing. I have used it for nine years, and I can say it is reliable if used properly. Here is what works for me:
1. Start seeing code. If you don’t want Dreamweaver to put odd bits into your html, you need to be able to see the html. The first thing you should do when you open a file in Dreamweaver is select the split view:
View menu -> Code and Design
You get a visual preview at the bottom of your screen, and a nice, pure code pane on the top. Dreamweaver shows how smart and nice it is by remembering your view preferences for each file.
2. Edit the code, not the output. When you edit the code, you will not see changes in Design View until you refresh. Hit the F5 key to refresh. But before you type, edit, or delete anything, make sure the code pane is active. Not sure? If you have line numbers turned on, the left margin turns blue when the pane is active. But if you want to be sure, just click on the code pane before editing. I have gotten in the habit of clicking the scroll bar rather than the code itself. You’ll see why in a moment…
3. Make selections visually, edit textually. The Design View helps you navigate your document. This is one of the biggest time savers in Dreamweaver. You don’t have to pick through all those nested div tags (or worse, tables.) Go to the Design pane, and click the thing you want to edit. The tags representing this item are highlighted in the code. Now click on the scroll bar up in the code view, and you are ready to edit what you clicked. If you click the text of the code it will place the cursor where you clicked, and lose your selection. If you click the scroll bar, it keeps your selection.
4. Nesting instinct. One of the most tedious tasks in html editing is finding the proper start and end tags of nested containers. Even free of tables, a complex layout of divs can be confusing. Again, click inside an object in the Design View. At the bottom of the pane you will get a breadcrumb trail like this:
<div.pageNavColumn> <ul.leftCol> <li> <a>
You can read this right to left, from inner to outer container. This means you clicked on an anchor tag inside a list item inside an unordered list which is nestled in a div. Plus it tells you what class is applied to each element. To top it off, you can click any of these nested items to select it. And yes, if you then click on the scrollbar on the Code Pane, the html code representing the same element remains selected for you.
5. Make some personal space. Dreamweaver can seem cluttered, with palettes and toolbars crowding in from all sides. If all you are doing is typing code, you can make room by hiding all that extra stuff with a touch of your F4 key. Or:
View -> Hide Panels
Hit F4 again to bring it all back.
Now Dreamweaver is tame and docile. You can enjoy its many nice features, such as code completion as you type, a robust, multi-file find and replace, instant browser preview (F12), and of course, that contented purring sound it makes when happy. Or maybe only I can hear that.
Photos
Surveys
Video
September 2nd, 2008 at 7:41 pm
The only thing I would add here is a reminder about
the III tokens. Make sure your tokens are the first
and only thing on each line.
For example:
You can check this in the ‘code’ pane or by hitting
F10 if the code pane is not open yet.
September 2nd, 2008 at 7:42 pm
… for example:
<div id=”mattype”>
<!–{mattype}–>
</div>
September 4th, 2008 at 8:20 am
That’s a great point. Also note that if you wish to inactivate a token, you have two choices.
Use spaces to ignore the token completely:
<div id=”mattype”>
<!–{mattype}–>
</div>
Use comment tags to hide from users but keep the token in the page source. In this case Material Type will be expanded but hidden:
<!– <div id=”mattype”>
<!–{mattype}–>
</div> –>