Date post: | 11-Jan-2016 |
Category: |
Documents |
Upload: | britney-greene |
View: | 236 times |
Download: | 2 times |
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