2. OVERVIEW
Objectives
Follow a design document to create a small personal Web site
Follow a design document to create pages in a large commercial Web site
Implement others’ designs by assembling page elements in Dreamweaver
Macromedia Studio 8 Step-by-Step

3. Objectives (continued)
OVERVIEW
Objectives (continued)
Learn collaboration techniques for working with others on a Web site
Verify that a Web site meets guidelines for best practices
Macromedia Studio 8 Step-by-Step

4. Getting to Know Macromedia Dreamweaver 8
The Dreamweaver Workspace
Insert bar
Document toolbar
Document window
Property inspector
Docked panels
Workspace objects in Window menu
Checked items are open
Macromedia Studio 8 Step-by-Step

5. FIGURE 1 The Dreamweaver Workspace
Macromedia Studio 8 Step-by-Step

6. The Document Window Location for most of your work
Dynamic representation of your page
Title bar
Document title
Filename
Document toolbar
Select document view
Enter document title
Macromedia Studio 8 Step-by-Step

7. The Insert Bar Contains objects or elements to add
Examples: images, tables, and forms
Two methods for inserting an object
Drag object icon to Document window
Click at insertion point in document
Insert bar contains several categories
Examples: Common and Layout
10 buttons in Common Category
Buttons provide common functions
Macromedia Studio 8 Step-by-Step

8. FIGURE 2 The Common Category of the Insert bar
Macromedia Studio 8 Step-by-Step

9. Table 1
Macromedia Studio 8 Step-by-Step

10. The Layout Category of the Insert Bar
Enables the insertion of tables
Three modes are available
Standard: displays tables in grid format
Expanded Tables
Adds cell padding and spacing to tables
Increases table borders
Layout: displays tables as boxes
Draw, drag, and resize as needed
Macromedia Studio 8 Step-by-Step

11. FIGURE 3 The Layout Category of the Insert bar
Macromedia Studio 8 Step-by-Step

12. Table 2
Macromedia Studio 8 Step-by-Step

13. The Property Inspector
View and change object attributes
Context based on user selection
Example: select text for text properties
How to view all properties
Click expander arrow in lower-right corner
Macromedia Studio 8 Step-by-Step

14. FIGURE 4 The Property Inspector
Macromedia Studio 8 Step-by-Step

15. Dockable Panels Default settings for Dreamweaver panels
Docked in collapsible groups
Docking area on right side of workspace
Undock a panel group or individual panel
Drag gripper on upper-left corner of panel group
Two ways to collapse or expand
Click the title of the panel group or panel
Click expander arrow in panel group or panel
Macromedia Studio 8 Step-by-Step

16. FIGURE 5 The Files panel group
Macromedia Studio 8 Step-by-Step

17. Renaming a Panel Group Click Options menu of panel group
Select Rename Panel Group
Enter new name in dialog box
Usefulness of renaming
Reorganizing panels
Setting up new panel groups
Macromedia Studio 8 Step-by-Step

18. Hiding All Panels and the Property Inspector
Purpose: reduce clutter
Two ways to close a panel group
Go to Options menu for panel group
Select Close Panel Group
Choose Hide Panels from View menu
Viewing hidden panels
Select Show Panels from View menu
Macromedia Studio 8 Step-by-Step

19. Specifying Preview Browsers
Select Preferences in Edit menu
Highlight Preview in Browser
Click plus (+) button to add a browser
When dialog box opens, find browser
Highlight primary browser in list
Select Primary Browser check box
A secondary browser may be chosen
Follow method for primary browser
Macromedia Studio 8 Step-by-Step

20. FIGURE 6 The Preferences dialog box for Preview in Browser
Macromedia Studio 8 Step-by-Step

21. Specifying Preview Browsers (continued)
Keyboard shortcuts to preview
Primary browser
Press F12 (Windows)
Press Option + F12 (Macintosh)
Secondary browser
Press Ctrl + F12 (Windows)
Press Command + F12 (Macintosh)
Preview/Debug in Browser button
Alternate path to preview
Also provides path to Edit Browser List
Macromedia Studio 8 Step-by-Step

22. Setting Project Requirements
Five phases to a successful project
Planning and analyzing
Designing
Building
Testing
Implementing or launching
Macromedia Studio 8 Step-by-Step

23. Setting Project Requirements
Major Web site design factors
Information Web sites want to share
Various kinds of content at Web site
The way information is grouped
Macromedia Studio 8 Step-by-Step

24. Setting Project Requirements (continued)
Factors affecting “look and feel”
Fonts and colors of headings
Dimensions for images
Number of expected visitors
Navigation through site
Other design factors
Target audience
Technical limitations
Macromedia Studio 8 Step-by-Step

25. Setting Project Requirements (continued)
Testing regimens
Test elements in isolation
Test elements as part of whole site
View site with different browsers
Test connection speeds
General design advice
Sketch your layout on paper
Organize content on mock Web pages
Macromedia Studio 8 Step-by-Step

26. Macromedia Dreamweaver 8 Projects
Project 1: Personal Web site
Build a site for Dangerous Frogs
Learn how to structure a basic page
Project 2: Bank Web site
Develop Experience Bank Web site
HTML tables, style sheets, templates
Project 3: Local Caterer Web site
Maintain Café Townsend Web site
Test and manage files for Web site
Macromedia Studio 8 Step-by-Step

27. Summarizing Unit 1 Use Dreamweaver to build Web sites
SUMMARY
Summarizing Unit 1
Use Dreamweaver to build Web sites
Editor: Document window, Insert bar, Property Inspector, Docked panels
Web design process has five phases
Major design factors: site purpose, usability, audience, technical limits
Build skills with three projects
Macromedia Studio 8 Step-by-Step