Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction

Unit 1 2 Macromedia Studio 8 Step-by-Step 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 Objectives

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

Unit 1 4 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

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

Unit 1 6 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

Unit 1 7 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

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

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

Unit 1 10 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

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

Unit 1 12 Macromedia Studio 8 Step-by-Step Table 2

Unit 1 13 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

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

Unit 1 15 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

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

Unit 1 17 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

Unit 1 18 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

Unit 1 19 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

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

Unit 1 21 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

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

Unit 1 23 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

Unit 1 24 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

Unit 1 25 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

Unit 1 26 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

Unit 1 27 Macromedia Studio 8 Step-by-Step 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