Macromedia Studio 8 Step-by-Step

MACROMEDIA DREAMWEAVER 8 Introduction

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

FIGURE 1 The Dreamweaver Workspace

Unit 1 6Macromedia Studio 8 Step-by-Step

The Document WindowLocation for most of your workDynamic representation of your pageTitle bar – Document title– Filename

Document toolbar– Select document view– Enter document title

Unit 1 7Macromedia Studio 8 Step-by-Step

The Insert BarContains 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 8Macromedia Studio 8 Step-by-Step

FIGURE 2 The Common Category of the Insert bar

Unit 1 9Macromedia Studio 8 Step-by-Step

Table 1

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

FIGURE 3 The Layout Category of the Insert bar

Unit 1 12Macromedia Studio 8 Step-by-Step

Table 2

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

FIGURE 4 The Property Inspector

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

FIGURE 5 The Files panel group

Unit 1 17Macromedia 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 18Macromedia 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 19Macromedia 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 20Macromedia Studio 8 Step-by-Step

FIGURE 6 The Preferences dialog box for Preview in Browser

Unit 1 21Macromedia 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 22Macromedia 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 23Macromedia 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 24Macromedia 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 25Macromedia 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 26Macromedia 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 27Macromedia 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