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 Dreamewaver'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:
* HTML attributes
* Class and ID names
* CSS properties
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.
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.
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.
I use the collapse and expand feature all the time on pages where I don't want to edit the external template. I just select the content area I want to edit and collapse outside. Then I write my 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. I also use it when I'm working on a series of items. When I've finished one, I collapse it. I know I'm done when there is no code showing.
- Code: Select all
Source: http://webdesign.about.com/od/dreamweavertips/a/aa061907.htm
