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

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

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

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

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

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

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

Table 1 Macromedia Studio 8 Step-by-Step

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

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

Table 2 Macromedia Studio 8 Step-by-Step

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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