Adobe Dreamweaver CC 2015 - Manual (Page 383)

376
Coding
Last updated 6/3/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
you’re 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.
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 :
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:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis
ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat
corrupti velit cupiditate eligendi tempora temporibus vel.
Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus
eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem
asperiores excepturi sapiente enim architecto esse.
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit,
voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione
eaque ad illum porro dignissimos sit eos.
Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur
ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium
consequatur provident totam vero velit nobis accusantium!
Example 2: Inserting CSS code using Emmet