macromedia studio 8 step-by-step macromedia dreamweaver 8 introduction
TRANSCRIPT
![Page 1: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/1.jpg)
Macromedia Studio 8 Step-by-Step
MACROMEDIA DREAMWEAVER 8 Introduction
![Page 2: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/2.jpg)
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
![Page 3: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/3.jpg)
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)
![Page 4: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/4.jpg)
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
![Page 5: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/5.jpg)
Unit 1 5Macromedia Studio 8 Step-by-Step
FIGURE 1 The Dreamweaver Workspace
![Page 6: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/6.jpg)
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
![Page 7: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/7.jpg)
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
![Page 8: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/8.jpg)
Unit 1 8Macromedia Studio 8 Step-by-Step
FIGURE 2 The Common Category of the Insert bar
![Page 9: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/9.jpg)
Unit 1 9Macromedia Studio 8 Step-by-Step
Table 1
![Page 10: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/10.jpg)
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
![Page 11: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/11.jpg)
Unit 1 11Macromedia Studio 8 Step-by-Step
FIGURE 3 The Layout Category of the Insert bar
![Page 12: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/12.jpg)
Unit 1 12Macromedia Studio 8 Step-by-Step
Table 2
![Page 13: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/13.jpg)
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
![Page 14: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/14.jpg)
Unit 1 14Macromedia Studio 8 Step-by-Step
FIGURE 4 The Property Inspector
![Page 15: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/15.jpg)
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
![Page 16: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/16.jpg)
Unit 1 16Macromedia Studio 8 Step-by-Step
FIGURE 5 The Files panel group
![Page 17: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/17.jpg)
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
![Page 18: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/18.jpg)
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
![Page 19: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/19.jpg)
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
![Page 20: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/20.jpg)
Unit 1 20Macromedia Studio 8 Step-by-Step
FIGURE 6 The Preferences dialog box for Preview in Browser
![Page 21: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/21.jpg)
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
![Page 22: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/22.jpg)
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
![Page 23: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/23.jpg)
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
![Page 24: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/24.jpg)
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
![Page 25: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/25.jpg)
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
![Page 26: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/26.jpg)
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
![Page 27: Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction](https://reader036.vdocument.in/reader036/viewer/2022081420/56649e2a5503460f94b17ca5/html5/thumbnails/27.jpg)
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