Adobe®

Dreamweaver CS3 Training Share this Dreamweaver Cheat Sheet with

Dreamweaver Quick Reference Card others or post it on your Website!
Dreamweaver CS3 Workspace Keyboard Shortcuts
Title bar Menu bar Panel group Expander arrow General
Insert Named <Ctrl>+<Alt>+<A>
Insert Anchor
toolbar Add to Library <Ctrl>+<Shift>+<B>
Document
toolbar Duplicate <Ctrl> + <D>
Edit Style Sheet <Ctrl>+<Shift>+<E>
Replace <Ctrl> + <H>
Document Show/Hide Grids <Ctrl> + <G>
window
Panels Show Invisibles <Ctrl>+<Shift>+<I>
Insert Image <Ctrl> + <Alt> + <I>
Page Properties <Ctrl> + <J>
Status bar
Property Create Link <Ctrl> + <L>
Inspector Remove Link <Ctrl>+<Shift>+<L>
Insert Table Row <Ctrl> + <M>
Delete Table Row <Ctrl>+<Alt>+<M>
Quick Tag Editor <Ctrl> + <T>
Document Toolbar View Head <Ctrl>+<Shift>+<W>
Content
Code View: View or edit the page in HTML. Refresh: Click to update changes made to the Show/Hide Link <Ctrl>+<Shift>+<Y>
page after working on the HTML code. Switch Views <Ctrl> + < ` >
Split View: View the page in HTML code and
Design view (WYSIWYG) at the same time. View options: In Design view, apply a grid or
ruler to the page. In Code view, change how the HTML Function Key Shortcuts
Design View: View or edit the page in the code is displayed. Reference <Shift> + <F1>
WYSIWYG (What You See Is What You Get) editor.
Visual Aids: Choose from different aids to Reference Panel <Ctrl>+<Shift>+<F1>
Title: Type the Web page title you want help you design your pages. Layers <F2>
to appear in the title bar of the browser.
Validate markup: Validate current document Frames <Ctrl> + <F2>
File Management: Access already-published or tag. Object Panel <Ctrl> + <F2>
files or upload files directly from the document window.
Check Browser Compatibility: Check the Behaviors Panel <Shift> + <F3>
Preview: Choose from a list of browsers compatibility of your document with different Web Property Inspector <Ctrl> + <F3>
installed on the computer to preview the page. browsers.
Hide/Show All <F4>
Insert Toolbar Floating Windows
Site Files <F5>
Named Insert Server-Side
Hyperlink
Anchor Div Tag Media Include Head Templates Refresh Local <Shift> + <F5>
Click a tab Switch to Layout <Ctrl> + <F6>
to view the View
category
Switch to <Ctrl>+<Shift>+<F6>
Email link Insert Table Images Date Comment Script Tag Chooser
Standard View
Code Inspector <F10>
Common: includes objects commonly inserted in Spry: includes Spry objects and widgets for History Panel <Shift> + <F10>
a Web page (ex. tables, images) making Spry pages.
Assets Panel <F11>
Layout: insert layout tables and frames on the Text: apply formatting to text (ex. bold, italic, list
CSS Styles Panel <Shift> + <F11>
page item)
Preview in <F12>
Forms: insert elements often found in a Web Favorites: allows you to group the buttons you Primary Browser
form (ex. text fields, option buttons, check boxes) use most often.
Preview in <Ctrl> + <F12>
Data: insert Spry data objects and other dynamic Secondary Browser
items like update forms.
Customizable Computer Training Dreamweaver Quick Reference © 2008 CustomGuide
9 Courseware 9 Online Learning 9 Skills Assessments www.customguide.com | Phone 888.903.2432
Property Inspector Image Properties
Location of
the image
General Commands Image
Allotted space
Image
editing
name Image hyperlink tools Alternate text
• Select an item to view its properties. for the image

• To Get Help: Click the Help button for more information on options.
• Format Text in HTML Code: Click the Quick Tag Editor button to
apply an HTML tag to selected text or object.
• To Expand/Contract the Property Inspector: Click the Pointer
Polygon Allotted Low Align text Align
Image with image
Expander arrow in the lower right corner to view or hide all the options in Oval
Rectangular
space resolution Hyperlink Border
Image
surrounding preview of target
the Property Inspector. the image the main window
Width
Hotspot image
Tools
Text Properties Open talic Center
CSS RightJustify
Left Align Hyperlink Point-
• To Add a Hyperlink to an Image: Select the text and type the URL in
Panel
the Link textbox; or drag the Point-to-File icon to the file in the Site panel; or
Text Format CSS Style Bold
Align URL to-File

Help click the Folder icon to browse for a file in the Web site.
Quick • To Create an Image Map: Select the Rectangular, Oval, or
Font Size
Text Indent
Target
Browse
Tag
Editor
Polygon command, draw a shape and set the link location.
Text Text Outdent Frame for
Font Text File • To Edit an Image: Use the image editing buttons.
Color Ordered
Expander
• To Align an Image: Click the Align button arrow and align the image
List
Unordered arrow
List relative to text nearby; or click the Left, Center or Right Align button in the
• To Format Text: Select the text and apply formatting from the Property Inspector.
Inspector. • To Insert an Image: Press <Ctrl> + <Alt> + <I>, or select Insert →
• To Create a Hyperlink: Select the text and type the URL in the Link Image from the menu.
textbox; or drag the Point-to-File icon to the file in the Site panel; or click
the Folder icon to browse for a file in the Web site.
Panels
• Specify Link Target Frame: Specify in which frame the hyperlink
should appear.
Panel groups
Table Properties Cell
Spacing
Number of Row Width Align Panel tabs
Apply Table Rows and Cell Table
Table Border
Button Name Columns Padding Width

• To View or Hide a Panel: Select Window from the menu bar and
select the panel you want to view or hide. Or, click the panel group and select
the panel tab you want to view.
Clear Background
Convert Convert Table
Heights Table Table to Background
Image Table Border Color • To View or Hide Panel Groups: Click the Panel group Expander
or Widths to Pixels Percent color
arrow between the document window and the panel groups.
• There are four panel groups available in Dreamweaver:
• To View Table Properties: Click a table border.
• To Add or Delete Rows or Columns: Type the number of rows or CSS
columns you want to add or delete in the Rows and Cols text boxes. CSS Styles: Apply CSS styles to the current selection
AP Elements: Manage the AP (absolutely positioned) elements in your
• To Change Table Width: Type a number in the W text box. document
• To Display the Table in Pixels or Percent: Click the pixels or Application
percent button arrow and select the display option. Databases: Create and inspect database connections, insert database
• To Add Cell Padding or Cell Spacing: Enter the amount in the code
CellPad or CellSpace text boxes. Bindings: Locate and insert dynamic content
Server Behaviors: Create, insert and edit server behaviors into the page
• To Add a Background Color: Click the Bg Color list arrow and Components: Create, inspect, and insert components or component code
select a color from the palette.
Tag Inspector
• To Add a Border Color: Click the Brdr Color list arrow and select a Attributes: Edit or add attributes and their values
color from the palette. Behaviors: Attach or modify behaviors to page elements such as tags
• To Add a Background Image: Type the location in the Bg text box, or
Files
drag the Point-to-File icon to the file in the Site panel; or click the Folder File: Track local and remote files, and upload files on the Web
icon to browse for a file. Assets: View and insert site assets such as images, HTML colors, links,
• To Add a Table Border: Enter the width in the Border text box. Flash movies, scripts, templates, and library items
Snippets: Create, delete, edit, or insert code snippets in the document
Customizable Computer Training Dreamweaver Quick Reference © 2008 CustomGuide
9 Courseware 9 Online Learning 9 Skills Assessments www.customguide.com | Phone 888.903.2432