Quit Dreamweaver.
- 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
Use Dreamweaver's code hinting and code completion features to minimize coding time.
Dreamweaver’s intelligent code completion or code hinting features allow you to insert and edit code quickly by reducing typos and other common mistakes.
You can also use this feature to see:
- Available attributes for a tag,
- Available parameters for a function, or
- Available methods for an object.
Supported languages and technologies
Dreamweaver supports code hinting for the following languages and technologies:
Read on to learn how code hints and code completion work for these languages.
Enable code hints
To enable code hints, click Edit > Preferences > Code Hints, and select Enable Code Hints. To disable code hinting, deselect Enable Code Hints.
To enable auto insertion of Braces and Quotes, select Auto-insert Braces and Auto-insert Quotes respectively.
To enable descriptions in code hints, select Enable description tooltips. You can then see the descriptions with your code hints.
HTML code hints
The following types of code hints are available for HTML:
- Tag hints
- Attribute name hints
- Attribute value hints
Tag hints
Press the < key on the keyboard to start typing your code. As you type, Dreamweaver displays valid HTML tags. If the string you are typing appears in the menu, scroll to it and press Enter or Return to complete your entry.
For example, when you type <, a pop-up menu shows a list of tag names. Instead of typing the rest of the tag name, you can select the tag from the menu to include it in your text.
These HTML tag hints also include a short description of the tag where applicable.
Attribute name hints
Dreamweaver displays appropriate attributes for tags while coding in Dreamweaver. Type in a tag name and press the spacebar to display the valid attribute names you can use.
Attribute value hints
Attribute value hint text can be static or dynamic (as in the code hints display values based on what is
present in related files).
Most attribute value hints are static. Take for example the target attribute value, which in itself is static in nature, and so the hints are static as well.
Dreamweaver displays dynamic code hints for those attribute values that require it - such as id, target, src, href, and class.
Here are a few examples of dynamically displayed code hints.
Dynamic code hints for src
In this example, when you type src, you are presented with valid attribute values, and when you select images, Dreamweaver displays actual valid images that are present in your images folder. You can then scroll down and choose the one you want.
If you have assets in CC Libraries, then these assets also show up when you type src. These CC library assets are indicated using a cloud icon.
When you choose a CC library asset, a pop-up menu appears allowing you to resample the image size, and change the image format.
Only 50 CC library assets can be displayed within the code hints. These hints appear in alphabetical order.
Inclusion of remote CC library assets in Dreamweaver code is not supported.
Dynamic code hints for href
When you type href, Dreamweaver displays a list of files in your folder, while also giving you the option to browse and select the file you want to link to.
Dynamic code hints for id and style
If you have defined ids in your CSS files, then when you type id in your HTML files, Dreamweaver displays all available ids.
Similarly, if you have defined CSS styles, then when you type style in your HTML files, Dreamweaver displays all available styles.
CSS code hints
Code hints are available for the following different types of CSS:
- @rules
- Properties
- Pseudo-selectors and pseudo-elements
- Shorthand
Apart from code hints, tips are also available for CSS properties.
Code hints for CSS @rules
Dreamweaver displays code hints for all @rules along with a description of the CSS rule as shown here.
CSS properties hints
When you type in CSS properties, when you type the colon, code hints appear to help you choose a valid value.
In the following example code, when font-family: is typed, valid font-sets appear.
You can choose one of the font sets, or you can open the Manage Fonts dialog from within these hints, and set your preferred fonts.
Another example of helpful code hints is when you work with color in CSS. When you type in any color-related property (such as border color or background color), when you press the colon, code hints displays a list of colors. You can pick a color from the list, or you can open the Color Picker from within the code hints itself, and set a preferred color.
If you have color swatches in CC libraries, code hints displays these swatches as well.
Only 50 CC library assets can be displayed within the code hints. These hints appear in alphabetical order.
Pseudo-selector and pseudo-element hints
You can add a CSS pseudo-selector to a selector to define a particular state of the element. For example, when you use :hover, the style is applied when the user hovers over the element specified by the selector.
When you type ":", Dreamweaver shows a list of valid pseudo-selectors if the cursor is in the right context.
When you type "::", Dreamweaver shows a list of valid pseudo-elements (used to style specified parts of an element) if the cursor is in the right context.
CSS shorthand hints
Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Some examples of CSS shorthand properties are background and font properties.
As seen in the below example, if you type a CSS shorthand property (such as background, for instance), after you type a space, Dreamweaver displays:
- Appropriate property values in order of relevancy
- Mandatory values that have to be used (for example, if you use font, then font-size, and font-family are mandatory)
- Browser expansion for that property
When the CSS shorthand properties are filled out, the code hints also display the property values you have typed.
CSS code tips
For some CSS properties (such as box-shadow or text-shadow), Dreamweaver displays tips that indicate what values should follow it, and also indicates which values are the mandatory values using an asterisk.
You can also see how the browser interprets the CSS.
JavaScript code hints
In JavaScript files, Dreamweaver provides code hints for variables and function parameters.
In the below example, the code snippet indicates the type.
Dreamweaver automatically refreshes the list of available code hints as you work in JavaScript files. For example, if you are working in a primary HTML file and switch to a JavaScript file to make a change. The change you make in the JavaScript file is reflected in the list of code hints when you return to the primary HTML file.
This automatic update works only if you edit your JavaScript files in Dreamweaver.
Live Object Inspection
Dreamweaver also automatically refreshes JavaScript type code hints.
For example, if you have defined a variable as a numeral, Dreamweaver retains that information. When you reference that variable later in your code, it indicates its type.
If you change the variable type (say to a string), then Dreamweaver's code hints automatically indicate that the variable is a string.
Dynamic documentation inclusion
If you have added comments for a particular function, then when that function is hinted, Dreamweaver also displays the documentation for that function.
PHP code hints
Dreamweaver supports code hinting for PHP 5.6 and 7.1 versions. These PHP code hints are site-specific and cover all core functions, classes, and constants.
For more information on PHP 5.6, and 7.1 see PHP Manual.
For more information on site-specific code hints, see Site-specific code hints.
A helpful PHP code hints feature is the auto completion of variables.
When you type a dollar sign ($), a list of all variables in your current script appears. Select the one you want, and press Enter/Return. Variables from related files are also listed, eliminating the danger of reusing the same variable for a different purpose.
When PHP 7.1 is set as the default, Dreamweaver displays PHP 7.1 specific code hints.
Edit the delay settings for PHP code hints
To improve the code typing performance in .php files, Dreamweaver 2017.5 and later has an added delay for PHP code hints. When you type PHP code, Dreamweaver displays the hints after a 400ms delay. If you want to modify the delay settings for PHP code, follow this procedure:
-
-
Open brackets.json from the following location, using a text editor:
- Win: %appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
- macOS: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
-
Click the Save Structure button in the upper right corner of the dialog box.
In the JSON file, add a comma after the last name/value pair.
Add the following line with your preferred delay time in milliseconds: "delayInPHPHint": <time in milliseconds>. For example, "delayInPHPHint": 200.
-
Save the file, and launch Dreamweaver.
Site-specific code hints
Dreamweaver lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells Dreamweaver where to look for code hints that are specific to your site.
For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_en.
Create the configuration file
Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver.
By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory.
The code hints you create are specifically for the site selected in the Dreamweaver Files panel. For the code hints to display, the page you are working on must reside in the currently selected site.
-
Select Site > Site Options > Site-Specific Code Hints.
By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress.
The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures.
Märkus.You cannot delete or rename the existing default framework structures.
-
In the subroot text box, specify the subroot folder where you store your framework’s files. You can click the folder icon next to the text box to browse to the framework files’ location.
Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and files you want to scan are all displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.
-
Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog box, you can specify particular filename extensions that you want to include.
Märkus.Specify a particular filename extension to speed up the scanning process.
-
To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the Files window.
Märkus.If your selected framework is Drupal or Joomla, the Site-Specific Code Hints dialog box displays an additional path to a file within your Dreamweaver configuration folder.
Don’t delete this—it’s required when using these frameworks.
-
To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following:
- Select Scan This Folder to include the selected folder in the scan.
- Select Recursive to include all files and folders within a selected directory.
- Click the Extensions button to open the Find Extensions dialog box, where you can specify the filename extensions you want included in your scan for a particular file or folder.
Save site structure
You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.
-
Quit Dreamweaver.
-
Step text
-
Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.
-
Specify a name for your site structure and click Save.
If the specified name is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Rename site structures
When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word “custom”.
-
Display the structure that you want to rename.
-
Click the Rename Structure icon button in the upper right corner of the dialog box.
-
Specify a new name for the structure and click Rename.
If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Add files or folders to a site structure
You can add any files or folders that are associated with your framework. After you add files or folders, you can then specify the filename extensions of the files you want to scan.
-
Click the plus (+) button above the Files window to open the Add File/Folder dialog box.
-
In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to browse to a file or folder.
-
Click the plus (+) button above the Extensions window to specify the filename extensions of files you want to scan.
Märkus.Specify a particular filename extension to speed up the scanning process.
-
Click Add.
Scan a site for filename extensions
Use the Find Extensions dialog box to view and edit filename extensions that are included in the site structure.
-
In the Site-Specific Code Hints dialog box, click the Extensions button.
The Find Extensions dialog box lists the current scannable extensions.
-
To add another extension to the list, click the plus (+) button above the Extensions window.
-
To delete an extension from the list, click the minus (-) button.