- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
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.
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.
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.