Operation Manual

Table Of Contents
385
Coding
Last updated 11/30/2015
When you click an icon, the code may appear in your page immediately, or a dialog box may appear requesting more
information to complete the code.
To find out what each button does, position the pointer over it until a tooltip appears. The number and type of
buttons available in the Insert panel varies depending on the current document type. It also depends on whether
youre using Code view or Design view.
Although the Insert panel provides a collection of frequently used tags, it is not comprehensive. To choose from a
more comprehensive selection of tags, use the Tag Chooser.
Insert code using Emmet
Emmet is a plug-in that allows high-speed coding and generation of HTML and CSS code. You can now use Emmet
abbreviations in Code View or Code Inspector in Dreamweaver and press the Tab key to expand these abbreviations
into HTML markups or CSS. HTML abbreviations expand in HTML and PHP pages. CSS abbreviations expand in CSS,
LESS, Sass, SCSS pages or within the style tag in an HTML page.
Video tutorial: Advanced code completion and validation(Try it, 2 min)
Learn how to autocomplete simple abbreviations into complex HTML and CSS code snippets with Emmet support and
use advanced code validation that highlights errors in real-time with Lint support.
Following are a few examples on how to use Emmet abbreviations in Code View. For detailed information and
reference, see the
Emmet documentation.
Note: Dreamweaver currently supports only Emmet 1.0 abbreviations.
Example 1: Inserting HTML code using Emmet
To quickly add HTML code for an unordered list with three elements, open the HTML file and type the following
Emmet abreviation in Code view within <body></body>:
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
Now, ensure that the cursor is placed right after the Emmet abbreviation and press Tab to expand the abbreviation.
Alternatively, select the entire abbreviation and then press Enter.
The abbreviation expands to the following code: