1. Chapter A - Getting Started with Dreamweaver MX 2004

2. Chapter A - Getting Started with Dreamweaver MX 2004
OVERVIEW
Chapter Lessons
Explore the Dreamweaver workspace
View a Web page and use Help
Plan and define a Web site
Add a folder and pages, and set the home page
Create and view a site map

3. Getting Started with Dreamweaver
Chapter A - Getting Started with Dreamweaver MX 2004
INTRODUCTION
Getting Started with Dreamweaver
What is Dreamweaver?
Web design software for creating a Web page or a complex Web site
What is a Web site?
A group of related Web pages that are linked together and share a common interface and design

4. Using Dreamweaver Tools
Chapter A - Getting Started with Dreamweaver MX 2004
INTRODUCTION
Using Dreamweaver Tools
What does Dreamweaver offer?
Design tools that can create dynamic and interactive web page without writing HTML code
Organizational tools
Site management tools
Graphic site maps

5. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 1 Dreamweaver 8 workspace
Select tool
Hand tool
Title bar
Menu bar
Insert bar
Zoom tool
Document window
Status bar
Property inspector

6. Working with Dreamweaver Views
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Working with Dreamweaver Views
Design view
Code view
Code and Design view

7. Starting Dreamweaver (Windows)
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Starting Dreamweaver (Windows)
Click the Start button on the taskbar
Click (All) Programs  Macromedia  Macromedia Dreamweaver 8

8. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Dreamweaver 8
FIGURE 3 Starting Dreamweaver 8 (Windows)

9. Starting Dreamweaver (Macintosh)
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Starting Dreamweaver (Macintosh)
Click Finder in the Dock, then click Applications
Click the Macromedia Dreamweaver 8 folder, then double-click the Dreamweaver application
Dreamweaver 8
FIGURE 4 Starting Dreamweaver 8 (Macintosh)

10. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Changing Views
Click the Show Code View button
Click the Show Code and Design Views button
Click the Show Design View button

11. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 5 Code view for new document
Show Code View button
Show Code and Design View button
Show Design View button
Coding toolbar

12. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Viewing Panels
Expand the Application panel
Click each panel tab
Collapse the Application panel
Study the CSS and Files panel groups
Collapse the CSS panel group

13. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Opening a Web Page
Create new or open existing
Web site
Web page
Homepage
First Web page that appears when viewers go to a Web site
Sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site

14. Basic Web Page Elements
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics
Banners
Navigation bars
Image map
Flash button objects

15. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE 7 Common Web page elements
Navigation bar
Graphic
Form

16. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE 8 Striped Umbrella Web page elements
Text
Graphic
Banner
Table
Flash button object
Text links

17. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Getting Help
Keywords …
… in results
Contents
Index
Search
Favorites
Topics found
FIGURE Dreamweaver 8 Help window

18. Web Site Creation Process
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Web Site Creation Process
FIGURE Phases of a Web site development project

19. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Planning a Web Site
Audience needs
Site goals
Gathering content
Budget
Schedule
Team
Updates

20. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Creating Storyboards
FIGURE The Striped Umbrella Web site storyboard

21. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Testing the Pages
Browsers and browser versions
Screen sizes
Speed on different connections
Testing is a continuous process

22. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Modifying the Pages
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process

23. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Publishing the Site
Transfer all the files to a Web server
Web server: a computer that is connected to the Internet with an IP address
A Web site must be published to the Web server before it can be viewed by others

24. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Publishing the Site
IP: Internet Protocol
IP address
Example:
ISP: Internet Service Provider
Hosts Web site
FTP: File Transfer Protocol
Host, host directory, login, password

25. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Publishing the Site
Create a root folder
Define the Web site
Set up Web server access

26. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Root folder
FIGURE Creating a root folder using Windows Explorer

27. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE Creating a root folder using a Macintosh

28. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Web site name
Links relative to options
Local root folder
Enable cache
Refresh local file list automatically
FIGURE Site definition for The Striped Umbrella dialog box

29. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Remote info category
Access list arrow
FIGURE Setting the remote access for The Striped Umbrella Web site

30. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
The Assets Folder
Stores all non-HTML (media) files:
Image files
Sound files
Video files
Set it as the default location to store the Web site images
You might want to create subfolders for each type of file

31. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Setting the Home Page
Usually index.html (.htm), or default.html (.htm)
Starting point for a site map
Tell Dreamweaver which page you have designated to be your home page
Add folders to the Web site
Set the default images folder

32. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

33. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Browse for file icon
Default images folder
FIGURE Site definition for The Striped Umbrella Web site with assets folder set as the default images folder

34. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Page title and path
Index.html
FIGURE index.html placed in the striped_umbrella root folder

35. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
The Site Map
Graphical representation of pages
Displays folder structure
Page link type/status
Checked out pages
Map view in the Files panel
Tree structure

36. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Verifying Page Titles
Search engine keywords
Title in browser window
Bookmark in browser

37. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Uses of a Site Map
In the Web site as an informational tool
PNG or JPEG
Print for report or meeting
BMP or PICT

38. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Site Map Layout category
Path for home page
Page titles option button
FIGURE Options for the site map layout

39. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Site list arrow
View list arrow
Click to hide all panels
FIGURE Expanding the site map

40. Chapter A - Getting Started with Dreamweaver MX 2004
SUMMARY
Chapter 1 Tasks
Explore the Dreamweaver workspace
View a Web page and use Help
Plan and define a Web site
Add a Folder and Pages, and set the home page
Create and view a Site Map