2. Dreamweaver MX 2004 Fundamentals
Chapter 1
Dreamweaver MX 2004 Fundamentals
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
List the advantages of using Dreamweaver MX 2004 for building Web pages and rich Internet applications.
Identify the two Dreamweaver MX 2004 workspace options, differentiate between them, and indicate recommendations for their use.
Identify the key components of the Dreamweaver MX 2004 environment.
Define, edit, and remove Dreamweaver sites.
Use the Dreamweaver MX 2004 Start Page.
Create, open, and save documents.
Copyright 2005, Paradigm Publishing Inc.

4. Performance Objectives…/2
Open, modify, and save design files.
Use the Tag selector and Quick Tag Editor to modify document content.
Use the Window Size indicator to resize the Document window.
Change the Download Time indicator default connection speed.
Select and work in different Document views.
Use the Insert bar to insert elements and objects into documents.
Copyright 2005, Paradigm Publishing Inc.

5. Performance Objectives…/3
Open, expand, collapse, undock, dock, and close panels.
Open panel Options menus.
Close and open the panel group interface.
Use the integrated file browser to access and copy desktop and local network files and folders.
Use Dreamweaver help, the Dreamweaver Support Center Web site, and Dreamweaver forums.
Access and use context-sensitive menus and help resource information.
Copyright 2005, Paradigm Publishing Inc.

6. Advantages and Key Features of Dreamweaver MX 2004
Integrated Environment
provides all of the tools to build Web pages
allows users to customize many features
Dreamweaver MX 2004 Start Page
offers a convenient method for opening recently used files and creating new files
offers users access to a quick tour as well as tutorials
Flexible Visual Environment
offers a Code view mode, a split Code view/Design view mode, or a Design view mode
allows users to develop Web pages in their preferred visual environment
Copyright 2005, Paradigm Publishing Inc.

7. Advantages and Key Features of Dreamweaver MX 2004…/2
Site Definition Dialog Box
makes it easy to set up a Dreamweaver site
offers basic and advanced modes
Target Browser Checking
checks documents for any elements or objects that are not supported
allows users to manually check browsers
Design Files
allows users to replace placeholder content with page layout and design element files
offers a starting point for further modifications
Copyright 2005, Paradigm Publishing Inc.

8. Advantages and Key Features of Dreamweaver MX 2004…/3
Templates
lets other users input content while preventing them from altering the Web page design
uses editable regions
Image Placeholders
reserves space for images
allows users to see how a layout will look before the final images are in place
Automatic Link Updating
updates links for any files that have been renamed or moved
offers a prompt or automatic updating
Copyright 2005, Paradigm Publishing Inc.

9. Advantages and Key Features of Dreamweaver MX 2004…/4
Integrated Image Editing Toolbar
allows users to perform basic image editing
uses built-in Fireworks technology
Enhanced CSS Features
facilitates working with CSS
features include CSS Properties tab, CSS layout visualization, and a CSS-based Property inspector
Panels
contains tools, menus, and libraries
allows users to arrange, collapse, and undock to suit preferences
Copyright 2005, Paradigm Publishing Inc.

10. Advantages and Key Features of Dreamweaver MX 2004…/5
Insert Bar
functions as a toolbar for adding elements and objects
allows users to configure as menu items or tabs
Context-Sensitive Menus
features the ability to bring up menus by right-clicking an object or window
displays only commands that are relevant to the item selected
Integrated File Browser
allows users to browse for assets and files
functions like other popular file browsers
Copyright 2005, Paradigm Publishing Inc.

11. Advantages and Key Features of Dreamweaver MX 2004…/6
Secure FTP
allows users to use encryption
protects transmitted files from unauthorized access
Help Features
contains a full range of features to assist users
includes online support, reference material, help topics, tutorials
provides access to online forums, where users of all levels can seek assistance and discuss issues with other users
Copyright 2005, Paradigm Publishing Inc.

12. Starting Dreamweaver MX 2004
Click Start.
Point to Programs.
Point to Macromedia.
Click Macromedia Dreamweaver MX 2004.
Alternatively, if a shortcut exists on the desktop, double-click the shortcut.
Copyright 2005, Paradigm Publishing Inc.

13. Exiting Dreamweaver MX 2004
click File 
click Exit
Copyright 2005, Paradigm Publishing Inc.

14. The Dreamweaver MX 2004 Workspace
The first time Dreamweaver MX 2004 is opened, the Workspace Setup dialog box appears.
This dialog box allows users to choose between the Designer and Coder workspaces.
Copyright 2005, Paradigm Publishing Inc.

15. The Dreamweaver MX 2004 Workspace…/2
The Designer workspace contains all Document windows and panels.
Copyright 2005, Paradigm Publishing Inc.

16. The Dreamweaver MX 2004 Workspace…/3
The Coder workspace is recommended for those who prefer to do their own coding.
Copyright 2005, Paradigm Publishing Inc.

17. The Dreamweaver MX 2004 Workspace…/4
Once a workspace has been selected, it can be changed. 
click Edit 
click Preferences
Copyright 2005, Paradigm Publishing Inc.

18. The Dreamweaver MX 2004 Workspace…/5
The Preference dialog box appears. 
click General 
click Change Workspace
Copyright 2005, Paradigm Publishing Inc.

19. The Dreamweaver MX 2004 Environment
Insert bar buttons
vertical panels
Title bar
Menu bar
Insert bar
Document window
Start Page
toggle triangle
horizontal panel
Copyright 2005, Paradigm Publishing Inc.

20. Start Page
The Start Page provides a shortcut method for opening previously used documents or for creating new documents.
It contains hyperlinks for a quick tour and for tutorials.
A list of recently used documents will appear.
Clicking a document title opens it.
New documents can be created.
Documents can be created from sample documents.
Copyright 2005, Paradigm Publishing Inc.

21. Document Window
The Document window is the workspace area where documents appear.
When documents are maximized, only one document is visible.
Each open document will be indicated by a document tab.
current document tab
document tab
Copyright 2005, Paradigm Publishing Inc.

22. Menu Bar
The Menu bar functions like a standard Windows Menu bar, with drop-down menus appearing when you click a command.
Copyright 2005, Paradigm Publishing Inc.

23. Creating a Dreamweaver Site
A local Dreamweaver site should be defined before creating and saving the first document.
A Dreamweaver site is a name used to identify a root folder on a computer or local network.
It is used for storing and organizing all of the documents associated with a Web site.
Creating a site allows you to take advantage of features such as automatic link updating, file management, and file sharing.
Copyright 2005, Paradigm Publishing Inc.

24. Creating a Dreamweaver Site…/2
All sites should be in one location.
All Web site files should be given lowercase names.
File names should not contain any spaces.
A hyphen or underscore can be used to connect words in a file name.
A local site is where users work on and test their Web site before placing it on a server.
A remote site is a copy of the local site that has been placed on a server so that it can be viewed by others.
Copyright 2005, Paradigm Publishing Inc.

25. Using the Site Menu Bar Command
click Site 
click Manage Sites 
click the New button, and then click Site
Copyright 2005, Paradigm Publishing Inc.

26. Using the Site Menu Bar Command…/2
The Site Definition dialog box opens. 
type the site name, and then click the Next button
Copyright 2005, Paradigm Publishing Inc.

27. Using the Site Menu Bar Command…/3
select No, and then click the Next button 
select Edit local copies, and then click the Browse button
Copyright 2005, Paradigm Publishing Inc.

28. Using the Site Menu Bar Command…/4
create a folder, and then double-click it to place it in the Select list box 
create a root folder, then double-click it to place it in the Select list box, and then click the Next button
Copyright 2005, Paradigm Publishing Inc.

29. Using the Site Menu Bar Command…/5
click the down-pointing arrow, then click None, and then click the Next button 
read the summary detailing the settings, and then click the Done button
Copyright 2005, Paradigm Publishing Inc.

30. Creating a New Document
click File 
click New 
select a category type 
select a document type 
click Create
Copyright 2005, Paradigm Publishing Inc.

31. Saving a New Document   click File click an option
Copyright 2005, Paradigm Publishing Inc.

32. Working with Design Files
Dreamweaver MX 2004 offers different document types sorted by category.
Category
Description
Basic page
The most commonly used document types
Dynamic page
Web pages for use with server-side scripting in databases
Template page
Templates that protect page design in a number of different languages
Other
Text-based documents
Copyright 2005, Paradigm Publishing Inc.

33. Working with Design Files…/2
Category
Description
CSS Style Sheets
A variety of preformatted style sheets that can be linked to any number of Web pages to control page formatting
Framesets
Predefined framesets; each frameset containing two or more individual documents
Page Designs (CSS)
Predesigned, customizable, CSS-linked page layouts
Page Designs
Predesigned, customizable page layouts
Page Designs (Accessible)
Same as Page Designs document type, but including accessibility features for those with disabilities
Copyright 2005, Paradigm Publishing Inc.

34. Title Bar
The Title bar displays a document’s title, folder location, and file name.
The folder location is not displayed if the document has not been saved.
indicates that the document has not been given a title
indicates that the document has not been named
Copyright 2005, Paradigm Publishing Inc.

35. Title Bar…/2
After a document is given a title and a file name and is saved, the Title bar will display the title of the document, its root folder, and its file name.
document name
title
root folder
Copyright 2005, Paradigm Publishing Inc.

36. Status Bar The Status bar is located at the bottom of the workspace.
It contains the Tag Selector, Window Size indicator, and Document Size/Estimated Download Time indicator.
Window Size indicator
Tag selector
Download Size/Estimated Download Time indicator
Copyright 2005, Paradigm Publishing Inc.

37. Tag Selector
The tags in the Tag selector are the HTML tags related to the content at the location of the insertion point.
Clicking a tag selects the page elements or objects it controls.
Deleting a tag in the Tag selector deletes any page content controlled by that tag.
Copyright 2005, Paradigm Publishing Inc.

38. Tag Selector…/2
The Quick Tag Editor allows users to edit code without leaving Design view. 
right-click a tag 
click Edit Tag 
the Quick Tag Editor displays
Copyright 2005, Paradigm Publishing Inc.

39. Window Size Indicator
The Window Size indicator displays the Document window’s dimensions in pixels.
The window size dimensions can be changed, but do not control the size of a document.
The Window Size indicator is not available in Code view.
Copyright 2005, Paradigm Publishing Inc.

40. Document Size/Estimated Download Time Indicator
The Document Size/Estimated Download Time indicator estimates the size of the current document.
It also estimates the time needed to load the document and all linked objects such as images and plug-ins.
The default setting is set at 56.0 Kilobits per second.
Copyright 2005, Paradigm Publishing Inc.

41. Document Toolbar
The Document toolbar contains buttons and drop-down menus for document-viewing options as well as other common functions.
Code button
Design button
No Browser/ Check Errors
File Management
Refresh
Split button
document title
Preview/Debug in Browser
View options
Copyright 2005, Paradigm Publishing Inc.

42. Document Views Three Document views are available.
Some document types can appear only in certain views, while others can appear in all three views.
Documents are opened in either Code view or Design view depending on the type of document.
Dreamweaver MX 2004 remembers user choices.
Copyright 2005, Paradigm Publishing Inc.

43. Code View
Code view works as if you were using a text editor to input code.
Not all features are available.
Code view is for users who prefer coding directly in HTML.
Copyright 2005, Paradigm Publishing Inc.

44. Design View
Design view approximates how a page will appear in a browser.
Documents are fully editable even though their code is hidden.
Design view allows you to build complex Web pages without having to be an expert HTML coder.
Copyright 2005, Paradigm Publishing Inc.

45. Code and Design View
Code and Design view splits the window horizontally.
This view allows you to see instantly how your code will appear in a browser.
Copyright 2005, Paradigm Publishing Inc.

46. Insert Bar
The Insert bar contains buttons for inserting various elements and objects into a document.
Related buttons are grouped into categories.
clicking the down-pointing arrow to the left of the Insert bar button opens a menu
Copyright 2005, Paradigm Publishing Inc.

47. text buttons available when the Text menu item is selected
Insert Bar…/2
Selecting a category changes the buttons that will be displayed.
text buttons available when the Text menu item is selected
Copyright 2005, Paradigm Publishing Inc.

48. Insert Bar…/3
Users can opt to display Insert bar categories as a horizontal series of tabs.
clicking a tab changes the buttons displayed on the Insert bar below the tab
Copyright 2005, Paradigm Publishing Inc.

49. Standard Toolbar
The Standard toolbar contains buttons for performing standard tasks.
The Standard toolbar is not displayed in the default workspace. 
click View 
point to Toolbars 
click Standard
Copyright 2005, Paradigm Publishing Inc.

50. Standard Toolbar…/2
The Standard toolbar can be undocked by clicking on its far left side and dragging.
Double-clicking the Standard toolbar Title bar returns the toolbar to its former location.
Save All
New
Open
Save
Cut
Copy
Paste
Undo
Redo
Copyright 2005, Paradigm Publishing Inc.

51. Vertical and Horizontal Panels
Panels provide a graphical interface for many functions.
Most panels are grouped together in panel groups positioned vertically on the right side of the workspace.
Panels located in panel groups are indicated by panel tabs.
The vertical Design, Code, Application, Tag Inspector, and Files panel groups appear in the layout by default.
Copyright 2005, Paradigm Publishing Inc.

52. Displaying Panels and Panel Groups
Other panels and panel groups can be displayed. 
click Window 
click the desired panel name
Copyright 2005, Paradigm Publishing Inc.

53. Customizing Panels and Panel Groups
Panels and panel groups can be customized to suit user preferences by:
expanding and collapsing panel groups
closing the entire panel group interface
docking and undocking panel groups
dragging floating panels
opening the Options menu
maximizing a panel
selecting a panel in a panel group
moving panels to another panel group
moving a panel to its own panel group
closing and opening a panel group
grouping a panel group with another group
renaming a panel group
Copyright 2005, Paradigm Publishing Inc.

54. Panel Features panel group name gripper collapsed panel
Expander arrow in expand mode
collapsed panel
panel Options menu button
Expander arrow in collapse mode
panel tab
expanded panel
toggle triangle
Copyright 2005, Paradigm Publishing Inc.

55. Using the Integrated File Browser
The Files panel contains an integrated file browser that provides a convenient way to locate and work with documents.
The file browser functions like most file browsers.
Files panel integrated file browser
Copyright 2005, Paradigm Publishing Inc.

56. Using the Integrated File Browser…/2
Files and folders can be managed by right-clicking the desired file or folder. 
point to Edit 
click the desired option
Copyright 2005, Paradigm Publishing Inc.

57. Using the Integrated File Browser…/3
The list box provides access to other locations on your computer, local network, and sites. 
click the down-pointing arrow
Expand/Collapse button
Copyright 2005, Paradigm Publishing Inc.

58. Using the Integrated File Browser…/4
Click the Expand/Collapse button to split into two File view panes.
The right pane displays the contents of the local site.
The left pane displays the contents of the remote site or testing server.
Copyright 2005, Paradigm Publishing Inc.

59. Using the Help System
There are a variety of different methods to learn more about Dreamweaver MX 2004.
Dreamweaver MX 2004 assistance includes:
Using Dreamweaver (Dreamweaver Help)
Dreamweaver Tutorials
Dreamweaver Support Center
Macromedia Online Forums
Context-Sensitive Help
Copyright 2005, Paradigm Publishing Inc.

60. Using Dreamweaver (Dreamweaver Help)
click Help 
click Using Dreamweaver
Copyright 2005, Paradigm Publishing Inc.

61. Using Dreamweaver (Dreamweaver Help)…/2
Use the Index tab to scroll and select topics.
Use the Contents tab to search by category.
Use the Search tab to search the system.
Use the Favorites tab to store help material.
Copyright 2005, Paradigm Publishing Inc.

62. Dreamweaver Tutorials
Dreamweaver tutorials provide step-by-step lessons on different topics. 
click Help 
click Getting Started and Tutorials
Copyright 2005, Paradigm Publishing Inc.

63. Dreamweaver Support Center
The online Support Center contains a variety of information.
A search function makes it easy to locate topics. 
click Help 
click Dreamweaver Support Center
Copyright 2005, Paradigm Publishing Inc.

64. Macromedia Online Forums
Macromedia sponsors a number of different online discussion forums.
You can determine if there is a thread on the topic you are interested in, or you can use the forum search engine. 
click Help 
click Macromedia Online Forums
Copyright 2005, Paradigm Publishing Inc.

65. Context-Sensitive Help
Context-sensitive help is available in most dialog boxes, panels, and inspectors.
dialog box help
Options menu help
inspector help
Copyright 2005, Paradigm Publishing Inc.

66. COMMANDS REVIEW     How do you change workspace preferences?
click Edit 
click Preferences 
click General 
click Change Workspace
Copyright 2005, Paradigm Publishing Inc.

67. COMMANDS REVIEW…/2   How do you close a file? click File click Close
Copyright 2005, Paradigm Publishing Inc.

68. COMMANDS REVIEW…/3    How do you create a Dreamweaver site?
click Site 
click Manage Sites 
click the New button, and then click Site
Copyright 2005, Paradigm Publishing Inc.

69. COMMANDS REVIEW…/4   How do you create a new file? click File
click New
Copyright 2005, Paradigm Publishing Inc.

70. COMMANDS REVIEW…/5   How do you display panels? click Window
click the desired panel name
Copyright 2005, Paradigm Publishing Inc.

71. COMMANDS REVIEW…/6    How do you display the Standard toolbar?
click View 
point to Toolbars 
click Standard
Copyright 2005, Paradigm Publishing Inc.

72. COMMANDS REVIEW…/7
How do you access the Dreamweaver Multimedia Forums? 
click Help 
click Macromedia Online Forums
Copyright 2005, Paradigm Publishing Inc.

73. COMMANDS REVIEW…/8     How do you edit a Dreamweaver site?
click Site 
click Manage Sites 
select the Site 
click the Edit button
Copyright 2005, Paradigm Publishing Inc.

74. COMMANDS REVIEW…/9   How do you exit Dreamweaver MX 2004? click File
click Exit
Copyright 2005, Paradigm Publishing Inc.

75. COMMANDS REVIEW…/10   How do you access help? click Help
click Using Dreamweaver
Copyright 2005, Paradigm Publishing Inc.

76. COMMANDS REVIEW…/11   How do you redo? click Edit click Redo
Copyright 2005, Paradigm Publishing Inc.

77. COMMANDS REVIEW…/12
How do you save a Dreamweaver MX 2004 document? 
click File 
click an option
Copyright 2005, Paradigm Publishing Inc.

78. COMMANDS REVIEW…/13   How do you cut, copy, or paste? click Edit
click the desired option
Copyright 2005, Paradigm Publishing Inc.

79. COMMANDS REVIEW…/14   How do you undo? click Edit click Undo
Copyright 2005, Paradigm Publishing Inc.

80. COMMANDS SUMMARY Change workspace preferences
Edit, Preferences, General category, Change Workspace
Close a file
File, Close
Create a Dreamweaver site
Site, Manage Sites, New, Site
Create a new file
File, New
Display panels
Window, click panel name
Display Standard toolbar
View, Toolbars, Standard
Dreamweaver Multimedia Forums
Help, Macromedia Online Forums
Copyright 2005, Paradigm Publishing Inc.

81. COMMANDS SUMMARY…/2 Edit a Dreamweaver site
Site, Manage Sites, select site, Edit
Exit Dreamweaver MX 2004
File, Exit
Help
Help, Using Dreamweaver
Redo
Edit, Redo
Save a Dreamweaver MX2004 document
File, Save; or File, Save As to assign a file name
Cut, copy, or paste
Edit, and Cut, Copy, or Paste
Undo
Edit, Undo
Copyright 2005, Paradigm Publishing Inc.