Cheat Sheet

Dreamweaver CS5 All-in-One For Dummies

From Dreamweaver CS5 All-in-One For Dummies by Sue Jenkins, Richard Wagner

Dreamweaver CS5 can greatly improve productivity and change the way you build Web sites. Knowing all the important Dreamweaver CS5 keyboard shortcuts and common HTML coding rules can boost your efficiency as a designer even more. Find your way around the Dreamweaver workspace with easy-to-remember keyboard shortcuts and common coding hints so you can work faster and smarter, and build your Web sites with greater ease.

Save Time with Dreamweaver CS5 Keyboard Shortcuts

Using Dreamweaver CS5 is so much faster when you know the shortcuts. Use these keyboard shortcuts in Design, Split, and Code views to quickly create documents, perform editing tasks, hide and show workspace features, apply simple formatting, edit code, make selections, access Dreamweaver help, preview pages in Live View and in a browser, and more.

Keyboard Commands PC Shortcut Mac Shortcut
Create a new document Control+N Command+N
Open an existing document Control+O Command+O
Save an open document Control+S Command+S
Close an open document Control+W Command+W
Close all open documents Control+Shift+W Command+Shift +W
Exit/Quit Dreamweaver Control+Q or Alt+F4 Command+Q or Opt+F4
Undo Control+Z or Alt+Backspace Option+Delete
Redo Control+Y or
Control +Shift+Z
Command+Y or Command+Shift+Z
Cut Control+X or
Shift+Delete
Command+X or
Shift+Delete
Copy Control+C Command+C
Paste Control+V Command+V
Paste special Control+Shift+V Command+Shift+V
Select all Control+A Command+A
Find and replace Control+F Command+F
Open the Preferences panel Control+U Command+U
Show/hide rulers Control+Alt+R Command+Option+R
Show/hide guides Control+; Command+;
Show/hide visual aids Control+Shift+I Command+Shift+I
Show/hide grid Control+Alt+G Command+Option+G
Edit page properties Control+J Command+J
Refresh Design view F5 F5
Make selected text bold Control+B Command+B
Make selected text italic Control+I Command+I
Apply paragraph formatting to selected text Control+Shift+P Command+Shift+P
Apply heading formatting (H1–H6) to selected text Control+1 through 6 Command+1 through 6
Add new paragraph Return Return
Add a line break <BR> Shift+Return Shift+Return
Insert a nonbreaking space Command+Shift+Spacebar Command+Shift+Spacebar
Move object or text Drag selection to new location Drag selection to new location
Copy object or text Control-drag selection to new location Option-drag selection to new location
Select a word Double-click Double-click
Select a row or text block Triple-click Triple-click
Insert image Control+Alt+I Command+Option+I
Insert table Control+Alt+T Command+Option+T
Run a spell check Shift+F7 Shift+F7
Open the Help window F1 F1
Zoom in Control+= Command+=
Zoom out Control+- Command+-
Preview in primary browser F12 Option+F12
Preview in secondary browser Shift+F12 or Control+F12 Command+F12
Live View Alt+F11 Option+F11
Freeze JavaScript F11 F11
Inspect Alt+Shift+F11 Option+Shift+F11
Code Navigator Control+Alt+N Command+Option+N
Get Control+Shift+D Command+Shift+D
Put Control+Shift+U Command+Shift+U
Check in Control+Alt+Shift+U Command+ Option+Shift+U
Check out Control+Alt+Shift+D Command+ Option+Shift+D

HTML, CSS, and JavaScript Code Hints

As a Web designer, you use some bits of HTML, CSS, and JavaScript code frequently but not often enough to commit to memory. The following HTML code, CSS style, and JavaScript hints are handy when you are adding special elements such as null links, meta tags, and entities to your pages. Use these HTML, CSS, and JavaScript code hints in Code view, the Properties inspector, and your CSS style sheets.

HTML Code Hint Code Shortcut
Create a null link # or javascript:; or javascript:void(0) as in<a href="#">link</a>
<a href="javascript:;">link</a>
<a href="javascript:void(0)">link</a>
Create named anchor link Link to Target
<a href="#anchorname">link</a>
Target
<a name="anchorname"></a>
Create link to named anchor in another page <a href="otherpage.html#anchorname">link</a>
Insert line break <br />
Close window JavaScript <a href="javascript:window.close();">Close This Window</a>
Revisit after x days meta tag <meta name="revisit-after" content="5 days" />
No cache meta tag <meta http-equiv="pragma" content="no-cache">
Meta link to home page <link rel="Index" href="index.html" />
Meta link to sitemap page <link rel="Site Map" href="sitemap.html" />
Meta link to shortcut icon <link rel="Shortcut Icon" href="favicon.ico" />
Meta link to shortcut icon using GIF instead of ICO <link rel="Shortcut Icon" type="image/gif" href="favicon.gif" />
Link to external JS file <script src="myjsfile.js" type="text/javascript"></script>
Link to external CSS <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/>
Import@ link to external CSS <style media="all" type="text/css">
@import "css/all.css";
</style>
CSS link for IE browsers less than IE 7 <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]→
Insert an image with ALT attribute <img src="images/myfile.png" alt="My File" />
Empty ALT attribute for image <img src="images/myfile.png" alt="" />
Entity to add blank space &nbsp; or &#160;
Entity to add copyright &copy; or &#169;
Entity to add trademark &trade; or &#153;
Entity to add ampersand &amp; or &#38;
Add NoScript tags <noscript>…
Link targets _blank
_new
_self
_parent
_top
Apply CSS custom style with SPAN tags <span class="stylename">…
Comment tags in HTML and JavaScript <!-- Your comment here //→
Comment tags in CSS /* Your comment here */
Structure of a CSS tag redefine style tag {
    attribute: value;
}
Structure of a CSS ID style #ID {
    attribute: value;
}
Structure of a CSS custom style .stylename {
    attribute: value;
}
CSS for link styles a:link {
    attribute: value;
}
a:visited {
    attribute: value;
}
a:hover {
    attribute: value;
}
a:active {
    attribute: value;;
}
blog comments powered by Disqus
Advertisement

Inside Dummies.com