User Guide Cancel

About coding in Dreamweaver

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn about how Dreamweaver supports the different coding languages that are used to build websites.

The most popular programming languages to design and develop fully functional websites are HTML, HTML5, and CSS for the front-end, and PHP, JavaScript, Java, and jQuery for the back-end.

You can design the appearance of a website (such as fonts, and colors for example) across a website using CSS. You can then use HTML to insert images, text, videos, forms, and other pieces of content together into a cohesive web page.

Using CSS and HTML together, you can build a static site. However, most websites require some form of interaction (such as requiring a customer to fill out a form, or make a payment) and a database to store all the website data.

To create these back-end channels of communication, you need a server-side programming language (such as PHP) that communicates with the database.

Programming languages supported by Dreamweaver

In addition to text-editing capabilities, Adobe Dreamweaver provides various features, such as code hints, to help you code in the following languages:

  • HTML
  • PHP
  • CSS
  • JavaScript

Other languages, such as Perl, are not supported by the language-specific coding features in Dreamweaver; for example, you can create and edit Perl files, but code hints don’t apply to that language.

Automatic code modification

You can set options that instruct Dreamweaver to automatically clean up your hand-written code according to criteria that you specify. However, your code is never rewritten unless the code rewriting options are enabled or you perform an action that changes the code. For example, Dreamweaver does not alter your white space or change the case of attributes unless you use the Apply Source Formatting command.

A few of these code rewriting options are enabled by default.

The Roundtrip HTML capabilities in Dreamweaver let you move your documents back and forth between a text-based HTML editor and Dreamweaver with little or no effect on the content and structure of the document’s original HTML source code. These capabilities include the following:

  • Use a third-party text editor to edit the current document.

  • By default, Dreamweaver does not make changes in code created or edited in other HTML editors, even if the code is invalid, unless you enable code-rewriting options.

  • Dreamweaver does not change tags it doesn’t recognize—including XML tags—because it has no criteria by which to judge them. If an unrecognized tag overlaps another tag (for example, <MyNewTag><em>text</MyNewTag></em>), Dreamweaver marks it as an error but doesn’t rewrite the code.

  • Optionally, you can set Dreamweaver to highlight invalid code in Code view (in yellow). When you select a highlighted section, the Property inspector displays information on how to correct the error.

XHTML code

Dreamweaver generates new XHTML code and cleans up existing XHTML code in a way that meets most of the XHTML requirements. The tools that you need to meet the few XHTML requirements that remain are also provided.

Note:

Some of the requirements also are required in various versions of HTML.

The following table describes the XHTML requirements that Dreamweaver meets automatically:

XHTML requirement

Actions Dreamweaver performs

There must be a DOCTYPE declaration in the document prior to the root element, and the declaration must reference one of the three Document Type Definition (DTD) files for XHTML (strict, transitional, or frameset).

Adds an XHTML DOCTYPE to an XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Or, if the XHTML document has a frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The root element of the document must be html, and the html element must designate the XHTML namespace.

Adds the namespace attribute to the html element, as follows:

<html xmlns="http://www.w3.org/1999/xhtml">

A standard document must have the head, title, and body structural elements. A frameset document must have the head, title, and frameset structural elements.

In a standard document, includes the head, title, and body elements. In a frameset document, includes the head, title, and frameset elements.

All elements in the document must nest properly:

<p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p>

Generates correctly nested code and, when cleaning up XHTML, corrects nesting in code that was not generated by Dreamweaver.

All element and attribute names must be lowercase.

Forces HTML element and attribute names to be lowercase in the XHTML code that it generates and when cleaning up XHTML, regardless of your tag and attribute case preferences.

Every element must have a closing tag, unless it is declared in the DTD as EMPTY.

Inserts closing tags in the code that it generates, and when cleaning up XHTML.

Empty elements must have a closing tag, or the opening tag must end with />. For example, <br> is not valid; the correct form is <br></br> or <br/>. Following are the empty elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, and param.

And for backwards-compatibility with browsers that are not XML-enabled, there must be a space before the /> (for example, <br />, not <br/>).

Inserts empty elements with a space before the closing slash in empty tags in the code that it generates, and when cleaning up XHTML.

Attributes can’t be minimized; for example, <td nowrap> is not valid; the correct form is <td nowrap="nowrap">.

This affects the following attributes: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, and selected.

Inserts full attribute-value pairs in the code that it generates, and when cleaning up XHTML.

Note: If an HTML browser does not support HTML 4, it might fail to interpret these Boolean attributes when they appear in their full form.

All attribute values must be surrounded by quotation marks.

Places quotation marks around attribute values in the code that it generates, and when cleaning up XHTML.

The following elements must have an id attribute as well as a name attribute: a, applet, form, frame, iframe, img, and map. For example, <a name="intro">Introduction</a> is not valid; the correct form is

<a id="intro">Introduction</a> or <a id="section1" name="intro"> Introduction</a>.

Sets the name and id attributes to the same value, whenever the name attribute is set by a Property inspector, in the code that Dreamweaver generates, and when cleaning up XHTML.

For attributes with values of an enumerated type, the values must be lowercase.

An enumerated type value is a value from a specified list of allowed values; for example, the align attribute has the following allowed values: center, justify, left, and right.

Forces enumerated type values to be lowercase in the code that it generates, and when cleaning up XHTML.

All script and style elements must have a type attribute.

(The type attribute of the script element has been required since HTML 4, when the language attribute was deprecated.)

Sets the type and language attributes in script elements, and the type attribute in style elements, in the code that it generates and when cleaning up XHTML.

All img and area elements must have an alt attribute.

Sets these attributes in the code that it generates and, when cleaning up XHTML, reports missing alt attributes.

Regular expressions

Regular expressions are patterns that describe character combinations in text. Use them in your code searches to help describe concepts such as lines that begin with “var” and attribute values that contain a number.

The following table lists the special characters in regular expressions, their meanings, and usage examples. To search for text containing one of the special characters in the table, escape the special character by preceding it with a backslash. For example, to search for the actual asterisk in the phrase some conditions apply*, your search pattern might look like this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of “apply” (as well as any of “appl”, “applyy”, and “applyyy”), not just the ones followed by an asterisk.

Character

Matches

Example

^

Beginning of input or line.

^T matches “T” in “This good earth” but not in “Uncle Tom’s Cabin”

$

End of input or line.

h$ matches “h” in “teach” but not in “teacher”

*

The preceding character 0 or more times.

um* matches “um” in “rum”, “umm” in “yummy”, and “u” in “huge”

+

The preceding character 1 or more times.

um+ matches “um” in “rum” and “umm” in “yummy” but nothing in “huge”

?

The preceding character at most once (that is, indicates that the preceding character is optional).

st?on matches “son” in “Johnson” and “ston” in “Johnston” but nothing in “Appleton” or “tension”

.

Any single character except newline.

.an matches “ran” and “can” in the phrase “bran muffins can be tasty”

x|y

Either x or y.

FF0000|0000FF matches “FF0000” in bgcolor=”#FF0000” and “0000FF’” in font color=”#0000FF”

{n}

Exactly n occurrences of the preceding character.

o{2} matches “oo” in “loom” and the first two o’s in “mooooo” but nothing in “money”

{n,m}

At least n, and at most m, occurrences of the preceding character.

F{2,4} matches “FF” in “#FF0000” and the first four Fs in #FFFFFF

[abc]

Any one of the characters enclosed in the brackets. Specify a range of characters with a hyphen (for example, [a-f] is equivalent to [abcdef]).

[e-g] matches “e” in “bed”, “f” in “folly”, and ”g” in “guard”

[^abc]

Any character not enclosed in the brackets. Specify a range of characters with a hyphen (for example, [^a-f] is equivalent to [^abcdef]).

[^aeiou] initially matches “r” in “orange”, “b” in “book”, and “k” in “eek!”

\b

A word boundary (such as a space or carriage return).

\bb matches “b” in “book” but nothing in “goober” or “snob”

\B

Anything other than a word boundary.

\Bb matches “b” in “goober” but nothing in “book”

\d

Any digit character. Equivalent to [0-9].

\d matches “3” in “C3PO” and “2” in “apartment 2G”

\D

Any nondigit character. Equivalent to [^0-9].

\D matches “S” in “900S” and “Q” in “Q45”

\f

Form feed.

\n

Line feed.

\r

Carriage return.

\s

Any single white-space character, including space, tab, form feed, or line feed.

\sbook matches ”book” in “blue book” but nothing in “notebook”

\S

Any single non-white-space character.

\Sbook matches “book” in “notebook” but nothing in “blue book”

\t

A tab.

\w

Any alphanumeric character, including underscore. Equivalent to [A-Za-z0-9_].

b\w* matches “barking” in “the barking dog” and both “big” and “black” in “the big black dog”

\W

Any non-alphanumeric character. Equivalent to [^A-Za-z0-9_].

\W matches “&” in “Jake&Mattie” and “%” in “100%”

Control+Enter or Shift+Enter (Windows), or Control+ Return or Shift+Return or Command+ Return (Macintosh)

Return character. Make sure that you deselect the Ignore Whitespace Differences option when searching for this, if not using regular expressions. Note that this matches a particular character, not the general notion of a line break; for instance, it doesn’t match a <br> tag or a <p> tag. Return characters appear as spaces in Design view, not as line breaks.

Use parentheses to set off groupings within the regular expression to be referred to later. Then use $1, $2, $3, and so on in the Replace With field to refer to the first, second, third, and later parenthetical groupings.

Note:

In the Search For box, to refer to a parenthetical grouping earlier in the regular expression, use \1, \2, \3, and so on instead of $1, $2, $3.

For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day and month in a date separated by slashes, thereby converting between American-style dates and European-style dates.

Server behavior code

When you develop a dynamic page and select a server behavior from the Server Behaviors panel, Dreamweaver inserts one or more code blocks into your page to make the server behavior work.

If you manually change the code within a code block, you can no longer use panels such as the Bindings and Server Behaviors panels to edit the server behavior. Dreamweaver looks for specific patterns in the page code to detect server behaviors and display them in the Server Behaviors panel. If you change a code block’s code in any way, Dreamweaver can no longer detect the server behavior and display it in the Server Behaviors panel. However, the server behavior still exists on the page, and you can edit it in the coding environment in Dreamweaver.

 Adobe

Get help faster and easier

New user?