Transcript Slide 1

Adobe Dreamweaver CS4 - Illustrated
Getting Started with
Adobe Dreamweaver CS4
Unit Objectives
•
•
•
•
•
•
Define Web design software
Start Adobe Dreamweaver CS4
View the Dreamweaver workspace
Work with views and panels
Open a Web page
View Web page elements
Adobe Dreamweaver CS4 - Illustrated
Unit Objectives
• Get help
• View a Web page in a browser
window
• Close a Web page and exit
Dreamweaver
Adobe Dreamweaver CS4 - Illustrated
Defining Web design software
• Using Dreamweaver you can:
•
•
•
•
Create Web pages or Web sites
Add text, images, tables, and media files
Display Web pages as they will appear to users
Use the Property inspector to view and edit page
elements
• Use Roundtrip HTML
• Manage Web sites
Adobe Dreamweaver CS4 - Illustrated
Defining Web Design Software
Adobe Dreamweaver CS4 - Illustrated
Defining Web Design Software
Adobe Dreamweaver CS4 - Illustrated
Starting Adobe Dreamweaver CS4
• Windows
• Click the Start button on the taskbar
• Point to All Programs, click Adobe
Web Premium CS4 or Adobe Design
Premium CS4, then click Adobe
Dreamweaver CS4
• Click HTML in the Create New column
on the Dreamweaver welcome Screen
Adobe Dreamweaver CS4 - Illustrated
Starting Adobe Dreamweaver CS4
Adobe Dreamweaver CS4 - Illustrated
Starting Adobe Dreamweaver CS4
• Mac
• Click Finder in the dock, then click
Applications
• Click the Adobe Dreamweaver CS3
folder, then double-click the
Dreamweaver CS4 application
• Click HTML in the Create New category
on the Dreamweaver welcome Screen
Adobe Dreamweaver CS4 - Illustrated
Starting Adobe Dreamweaver CS4
Adobe Dreamweaver CS4 - Illustrated
Viewing the Dreamweaver
Workspace
Adobe Dreamweaver CS4 - Illustrated
Viewing the Dreamweaver
Workspace
Adobe Dreamweaver CS4 - Illustrated
Working with Views and Panels
• Click the Show Code view button
on the Document toolbar
• Click the Show Code and Design
views button on the Document
toolbar
• Click the Show Design view button
on the Document toolbar
• Double-click the CSS Styles panel
tab
Adobe Dreamweaver CS4 - Illustrated
Working with Views and Panels
• Click each panel tab on the CSS
Styles panel group display the
contents of each panel
• Click the CSS Styles panel tab
• Double-click the panel tabs to view
the panels in each of the other panel
groups
• Collapse all panel groups except the
Files panel group
Adobe Dreamweaver CS4 - Illustrated
Working with Views and
Panels
• Click File on the Application bar
(Win) or Menu bar (Mac), then click
Close to close the untitled document
• If you are asked if you want to save
the untitled page, click No
Adobe Dreamweaver CS4 - Illustrated
Working with Views and Panels
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Panel groups
• Three panel groups open when you first
start Dreamweaver in Windows
• Insert, CSS Styles, and Files
• Retain arrangement from one session
to the next
• The panel group title bar is the title
bar at the top of each panel group
Adobe Dreamweaver CS4 - Illustrated
Opening a Web Page
• Click File on the Application bar
(Win) or Menu bar (Mac), then click
Open
• Click the Look in list arrow (Win) or
click the Current file location list
arrow (Mac), navigate to the drive
and folder where your Data Files are
stored, then double-click the unit_a
folder (Win) or click the unit_a
folder (Mac)
• Click dwa_1.html, then click Open
Adobe Dreamweaver CS4 - Illustrated
Opening a Web Page
• If your Document window is not
maximized, click the Maximize
button on the Document window title
bar
• Click the Show Code view button
• Scroll through the code, click the
Show Design view button to return
to Design view, then scroll to display
the top of the page if necessary
Adobe Dreamweaver CS4 - Illustrated
Opening a Web Page
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Docking panel groups
• You can move panel groups by
dragging the panel group title bar
• Dock a panel group by dragging it back
to the right side of the screen
• A heavy bar indicates the position it will
take when you release the mouse
Adobe Dreamweaver CS4 - Illustrated
Viewing Web Page Elements
•
•
•
•
Text
Images
Hyperlinks
Tables
Adobe Dreamweaver CS4 - Illustrated
• Div tags and
AP Elements
• Flash Movies
• Flash Video
Viewing Web Page Elements
Adobe Dreamweaver CS4 - Illustrated
Getting Help
• Click Help on the Application bar (Win) or
Menu bar (Mac)
• Click Dreamweaver Help
• Click the Dreamweaver help (web) link in
the top right corner of the Dreamweaver
Help and Support window
• Click the plus sign next to Workspace in
the left column, click the plus sign next to
Working in the Document window, then
click Switch between views in the
Document window
Adobe Dreamweaver CS4 - Illustrated
Getting Help
• Read the text in the content side of the
Help window, then close the Help window
• Type CSS Property inspector in the
search text box in the Dreamweaver Help
and Support window, then press [Enter]
(Win) or [Return] (Mac)
• Click one of the links to read information
about one of the topics of your choice
• Close the Dreamweaver Help and Support
window
Adobe Dreamweaver CS4 - Illustrated
Getting Help
Adobe Dreamweaver CS4 - Illustrated
Getting Help
Adobe Dreamweaver CS4 - Illustrated
Viewing a Web Page in a
Browser Window
• Click the Restore Down button
(Win), click the Window Size
shortcut menu, then click 760 × 420
(800 × 600, Maximized)
• Click the Preview/Debug in
Browser button on the Document
toolbar, then click Preview in [your
browser name]
• Click File on the browser’s menu bar,
click Print, then click Print
Adobe Dreamweaver CS4 - Illustrated
Viewing a Web Page in a
Browser Window
Adobe Dreamweaver CS4 - Illustrated
Viewing a Web Page in a
Browser Window
Adobe Dreamweaver CS4 - Illustrated
Closing a Web Page and
Exiting Dreamweaver
• Click File on the menu bar, then click
Exit(Win), or click Safari on the
Menu bar, then click Quit Safari
(Mac)
• In Dreamweaver, click File on the
Application bar, then click Exit (Win)
or click Dreamweaver on the Menu
bar, then click Quit Dreamweaver
(Mac)
Adobe Dreamweaver CS4 - Illustrated
Closing a Web Page and
Exiting Dreamweaver
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Saving and closing Dreamweaver files
• Save files frequently as you work
• Filename is “untitled” until you save
• An asterisk appears next to the file name
in Dreamweaver if you have unsaved
changes
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Using Adobe Community Help
• Online and offline help
• Adobe provides extensive help
information on their Web site
• Adobe Community Help
• Collection of materials such as tutorials,
published articles, or blogs, in addition
to regular help content
Adobe Dreamweaver CS4 - Illustrated
Unit Summary
•
•
•
•
•
•
Define Web design software
Start Adobe Dreamweaver CS4
View the Dreamweaver workspace
Work with views and panels
Open a Web page
View Web page elements
Adobe Dreamweaver CS4 - Illustrated
Unit Summary
• Get help
• View a Web page in a browser
window
• Close a Web page and exit
Dreamweaver
Adobe Dreamweaver CS4 - Illustrated