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 PC Shortcut Mac Shortcut
Commands
Create a new Control+N Command+N
document
Open an Control+O Command+O
existing
document
Save an open Control+S Command+S
document
Close an Control+W Command+W
open
document
Close all Control+Shift+W Command+Shift +W
open
documents
Exit/Quit Control+Q or Alt+F4 Command+Q or Opt+F4
Dreamweaver
Undo Control+Z or Option+Delete
Alt+Backspace
Redo Control+Y or Command+Y or
Control +Shift+Z Command+Shift+Z
Cut Control+X or Command+X or
Shift+Delete 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 Control+F Command+F
replace
Open the Control+U Command+U
Preferences
panel
Show/hide Control+Alt+R Command+Option+R
rulers
Show/hide Control+; Command+;
guides
Show/hide Control+Shift+I Command+Shift+I
visual aids
Show/hide Control+Alt+G Command+Option+G
grid
Edit page Control+J Command+J
properties
Refresh F5 F5
Design view
Make Control+B Command+B
selected text
bold
Make Control+I Command+I
selected text
italic
Apply Control+Shift+P Command+Shift+P
paragraph
formatting to
selected text
Apply Control+1 through 6 Command+1 through 6
heading
formatting
(H1–H6) to
selected text
Add new Return Return
paragraph
Add a line Shift+Return Shift+Return
break <BR>
Insert a Command+Shift+Spacebar Command+Shift+Spacebar
nonbreaking
space
Move object Drag selection to new Drag selection to new
or text location location
Copy object Control-drag selection to Option-drag selection to
or text new location new location
Select a word Double-click Double-click
Select a row Triple-click Triple-click
or text block
Insert image Control+Alt+I Command+Option+I
Insert table Control+Alt+T Command+Option+T
Run a spell Shift+F7 Shift+F7
check
Open the F1 F1
Help window
Zoom in Control+= Command+=
Zoom out Control+- Command+-
Preview in F12 Option+F12
primary
browser
Preview in Shift+F12 or Control+F12 Command+F12
secondary
browser
Live View Alt+F11 Option+F11
Freeze F11 F11
JavaScript
Inspect Alt+Shift+F11 Option+Shift+F11
Code Control+Alt+N Command+Option+N
Navigator
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 Code Shortcut
Hint
Create a null # or javascript:; or javascript:void(0) as in<a
link href=" #" >link</a>
<a href=" javascript:;" >link</a>
<a href=" javascript:void(0)" >link</a>
Create named Link to Target
anchor link <a href=" #anchorname" >link</a>
Target
<a name=" anchorname" ></a>
Create link to <a
named anchor href=" [Link]#anchorname" >link</a>
in another page
Insert line <br />
break
Close window <a href=" javascript:[Link]();" >Close
JavaScript This Window</a>
Revisit after x <meta name=" revisit-after" content=" 5 days"
days meta tag />
No cache meta <meta http-equiv=" pragma" content=" no-
tag cache" >
Meta link to <link rel=" Index" href=" [Link]" />
home page
Meta link to <link rel=" Site Map" href=" [Link]" />
sitemap page
Meta link to <link rel=" Shortcut Icon" href=" [Link]"
shortcut icon />
Meta link to <link rel=" Shortcut Icon" type=" image/gif"
shortcut icon href=" [Link]" />
using GIF
instead of ICO
Link to external <script src=" [Link]"
JS file type=" text/javascript" ></script>
Link to external <link rel=" stylesheet" type=" text/css"
CSS href=" css/[Link]" media=" screen" />
Import@ link to <style media=" all" type=" text/css" >
external CSS @import " css/[Link]" ;
</style>
CSS link for IE <!--[if lt IE 7]><link rel=" stylesheet"
browsers less type=" text/css" href=" [Link]"
than IE 7 media=" all" /><![endif]
Insert an image <img src=" images/[Link]" alt=" My File"
with ALT />
attribute
Empty ALT <img src=" images/[Link]" alt=" " />
attribute for
image
Entity to add or  
blank space
Entity to add © or ©
copyright
Entity to add ™ or ™
trademark
Entity to add & or &
ampersand
Add NoScript <noscript>…
tags
Link targets _blank
_new
_self
_parent
_top
Apply CSS <span class=" stylename" >…
custom style
with SPAN tags
Comment tags <!-- Your comment here //
in HTML and
JavaScript
Comment tags /* Your comment here */
in CSS
Structure of a tag {
CSS tag attribute: value;
redefine style }
Structure of a #ID {
CSS ID style attribute: value;
}
Structure of a .stylename {
CSS custom attribute: value;
style }
CSS for link a:link {
styles attribute: value;
}
a:visited {
attribute: value;
}
a:hover {
attribute: value;
}
a:active {
attribute: value;;
}
Copyright © 2010 & Trademark by Wiley Publishing, Inc. All rights reserved.