Transcript DW Unit A

Macromedia Dreamweaver 8
Unit A
Getting Started with
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8-Illustrated Introductory
1
Unit Objectives
Define Web design software
Start Macromedia Dreamweaver
8
View the Dreamweaver
workspace
Work with views and panels
Open a Web page
Macromedia Dreamweaver 8--Illustrated Introductory
2
Unit Objectives
View Web page elements
Get Help
View a Web page in a browser
window
Close a Web page and exit
Dreamweaver
Macromedia Dreamweaver 8--Illustrated Introductory
3
Defining Web Design Software
Using Dreamweaver you can:
 Create Web pages or Web sites
 Add text, images, tables, multimedia
files, and JavaScript code
 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
Macromedia Dreamweaver 8--Illustrated Introductory
4
Defining Web Design Software
Macromedia Dreamweaver 8--Illustrated Introductory
5
Starting Macromedia Dreamweaver 8
Windows
 Click the Start button on the taskbar
 Point to All Programs, point to
Macromedia, then click Macromedia
Dreamweaver 8
 Under Create New, click HTML
Macromedia Dreamweaver 8--Illustrated Introductory
6
Starting Macromedia Dreamweaver 8
Macromedia Dreamweaver 8--Illustrated Introductory
7
Starting Macromedia Dreamweaver 8
Mac
 Double-click the hard drive icon
 Double-click the Macromedia
Dreamweaver 8 folder
 Double-click the Dreamweaver 8
program icon
 Click HTML on the Start page
Macromedia Dreamweaver 8--Illustrated Introductory
8
Starting Macromedia Dreamweaver 8
Macromedia Dreamweaver 8--Illustrated Introductory
9
Viewing the Dreamweaver Workspace
Macromedia Dreamweaver 8--Illustrated Introductory
10
Viewing the Dreamweaver Workspace
Macromedia Dreamweaver 8--Illustrated Introductory
11
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
Click the expander arrow on the
CSS panel group or the panel group
name
Macromedia Dreamweaver 8--Illustrated Introductory
12
Working with Views and Panels
Click each panel tab to expand it and
display the contents of each panel
Click the or the panel group name
on the CSS panel group to collapse it
if necessary
Click the expander arrows and
panel tabs to view the panels in
each of the other panel groups
Collapse all panel groups except the
Files panel group
Macromedia Dreamweaver 8--Illustrated Introductory
13
Working with Views and Panels
Macromedia Dreamweaver 8--Illustrated Introductory
14
Clues to Use
Panel groups
 Four panel groups open when you first
start Dreamweaver in Windows
• CSS, Application, Tag Inspector, 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
Macromedia Dreamweaver 8--Illustrated Introductory
15
Opening a Web Page
Click File on the menu bar, then click Open
Click the Look in list arrow (Win) or click the
arrows in the From box near the top of the
window (Mac), navigate to the drive and folder
where your Data Files are stored, then doubleclick the unit_a folder
Click dwa_1.html, then click Open
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
Macromedia Dreamweaver 8--Illustrated Introductory
16
Opening a Web Page
Macromedia Dreamweaver 8--Illustrated Introductory
17
Clues to Use
Docked 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
Macromedia Dreamweaver 8--Illustrated Introductory
18
Viewing Web Page Elements
Text
Layers
Images
Flash buttons
Hyperlinks
Flash movies
Tables
Macromedia Dreamweaver 8--Illustrated Introductory
19
Viewing Web Page Elements
Macromedia Dreamweaver 8--Illustrated Introductory
20
Viewing Web Page Elements
Macromedia Dreamweaver 8--Illustrated Introductory
21
Getting Help
Click Help on the menu bar
Click Using Dreamweaver
Click the Search tab in the Dreamweaver 8 Help
window (Win)
Type saving in the keyword text box (Win) or in
the text box at the top of the screen (Mac), click
List Topics (Win) or press [return] (Mac), then
scroll down to view the topics
Edit the search word text so it reads “save file”
(including the quotation marks, Win only) in the
keyword text box, then press [Enter] (Win) or
[return] (Mac)
Macromedia Dreamweaver 8--Illustrated Introductory
22
Getting Help
Double-click Setting Site preference
options in the topic list
Scroll down and scan the text
Click Print on the Help toolbar (Win) or
click File on the menu bar, then click Print
(Mac) to print the information, then click
OK (Win) or Print (Mac)
Click the Close button on the Help
window title bar (Win) or click the red dot
in the upper-left corner of the window
(Mac)
Macromedia Dreamweaver 8--Illustrated Introductory
23
Getting Help
Macromedia Dreamweaver 8--Illustrated Introductory
24
Viewing a Web Page
in a Browser Window
Click the Restore Down button,
click the Window Size shortcut
menu, then click 760 × 420 (800 ×
600, Maximized) (Win)
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 OK
Macromedia Dreamweaver 8--Illustrated Introductory
25
Viewing a Web Page
in a Browser Window
Macromedia Dreamweaver 8--Illustrated Introductory
26
Viewing a Web Page
in a Browser Window
Macromedia Dreamweaver 8--Illustrated Introductory
27
Closing a Web Page
and Exiting Dreamweaver
Click File on the menu bar, then click
Close (Win), or click Explorer on the
menu bar, then click Quit Explorer
(Mac)
Click File on the menu bar, then click
Exit (Win) or click Dreamweaver on
the menu bar, then click Quit
Dreamweaver (Mac)
When asked if you want to save the
untitled page, click No
Macromedia Dreamweaver 8--Illustrated Introductory
28
Closing a Web Page
and Exiting Dreamweaver
Macromedia Dreamweaver 8--Illustrated Introductory
29
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
Macromedia Dreamweaver 8--Illustrated Introductory
30
Clues to Use
Dreamweaver online support
 Macromedia provides extensive help
information on their Web site
• Dreamweaver Support Center
 http://www.macromedia.com/
support/dreamweaver
Macromedia Dreamweaver 8--Illustrated Introductory
31
Unit Summary
Define Web design software
Start Macromedia Dreamweaver
8
View the Dreamweaver
workspace
Work with views and panels
Open a Web page
Macromedia Dreamweaver 8--Illustrated Introductory
32
Unit Summary
View Web page elements
Get Help
View a Web page in a browser
window
Close a Web page and exit
Dreamweaver
Macromedia Dreamweaver 8--Illustrated Introductory
33