Adobe Dreamweaver mixes visual design and code, and its keyboard shortcuts reflect both halves: preview keys, insert commands, code commenting and indenting, site file transfers and the famous tag editor. This complete list of Adobe Dreamweaver keyboard shortcut keys (Windows; on Mac replace Ctrl with Command) covers Code view, Design view, site management and previewing — explained in plain words.
Preview and View Shortcuts
| Shortcut Key | Function |
|---|---|
| F12 | Preview the page in the primary browser |
| Shift + F12 | Preview the page in the secondary browser |
| F5 | Refresh Design view after code changes |
| F8 | Show or hide the Files panel |
| Ctrl + Shift + F | Find and Replace in Files (whole site search) |
| Ctrl + F | Find and Replace in the current document |
| Ctrl + G | Go to a line number (Code view) |
| Ctrl + ` (accent) | Toggle between Code and Design focus in Split view |
| Ctrl + J | Open Page Properties |
| Ctrl + U | Open Preferences |
Insert Shortcuts (Design and Code)
| Shortcut Key | Function |
|---|---|
| Ctrl + Alt + I | Insert an image |
| Ctrl + Alt + T | Insert a table |
| Ctrl + Alt + A | Insert a named anchor / anchor element |
| Ctrl + E | Open the Quick Tag Editor for the selected tag |
| Ctrl + Alt + Space | Insert a non-breaking space in Design view |
| Shift + Enter | Insert a line break <br> in Design view |
| Ctrl + Enter | Add a property in the CSS panel (CSS Designer) |
Code Editing Shortcuts
| Shortcut Key | Function |
|---|---|
| Ctrl + / (slash) | Apply/remove a code comment on the selection (language aware) |
| Ctrl + . (period) | Indent the selected code |
| Ctrl + , (comma) | Outdent the selected code |
| Ctrl + ] / Ctrl + [ | Indent / outdent (alternate) |
| Ctrl + Space | Show code hints |
| Ctrl + Alt + [ | Collapse the selected code block |
| Ctrl + Alt + ] | Expand the selected code block |
| Ctrl + ' (apostrophe) | Balance braces (select the code between matching braces) |
| Tab / Shift + Tab (on a selection) | Indent / outdent the selected lines |
Site and File Shortcuts
| Shortcut Key | Function |
|---|---|
| Ctrl + Shift + U | Put (upload) the current file to the server |
| Ctrl + Shift + D | Get (download) the current file from the server |
| Ctrl + Alt + Shift + U | Check out the file |
| Ctrl + Alt + Shift + D | Check in the file |
| Ctrl + N | New document |
| Ctrl + O | Open a file |
| Ctrl + S | Save the document |
| Ctrl + Shift + S | Save all open documents |
| Ctrl + W | Close the current document |
| Ctrl + Z / Ctrl + Y | Undo / redo |
| Ctrl + P | Print the code (Code view) |
Tips for Dreamweaver Users
The code-view pair Ctrl + . and Ctrl + , (indent/outdent) plus Ctrl + / for comments will clean up pasted code in seconds, and Balance Braces (Ctrl + ') is the fastest way to select a whole block before moving it. Design users should live on F12 — preview in the primary browser without saving dialogs breaking flow — and on the site-transfer pair: Ctrl + Shift + U puts the page live, Ctrl + Shift + D pulls the server copy down. The Quick Tag Editor (Ctrl + E) quietly replaces half of all Design-view clicking: select any element, press it, and edit the tag and attributes as text.
Frequently Asked Questions
How do I preview a page in the browser in Dreamweaver?
Press F12 for the primary browser or Shift + F12 for the secondary browser. Dreamweaver serves or opens the current page exactly as visitors will see it.
How do I comment out code in Dreamweaver?
Select the code in Code view and press Ctrl + / — Dreamweaver wraps it in the correct comment syntax for HTML, CSS, JavaScript or PHP. Press it again to remove the comment.
How do I upload a file to the server in Dreamweaver?
Press Ctrl + Shift + U to Put (upload) the current file. Ctrl + Shift + D Gets (downloads) the server copy instead.
What does the Quick Tag Editor (Ctrl + E) do?
It opens a small editor for the selected element's tag, letting you change the tag itself or its attributes directly — much faster than hunting through panels.
By Umar Farooq, Tech Know.
0 Comments