Macromedia
Studio 8 Step-by-Step
MACROMEDIA DREAMWEAVER 8
Project 2: Banking Site
Project Objectives
Create a table
Modify table properties, including the
properties of table rows and cells
Import data from a spreadsheet into a
Web page
Attach and detach external style
sheets
Macromedia Studio Step-by-Step
Project 2
2
Project Objectives
(continued)
Use div tags to lay out a Web page
Create a Dreamweaver template
Create a new Web page from a
Dreamweaver template
Update a Dreamweaver template
Macromedia Studio Step-by-Step
Project 2
3
Project Objectives
(continued)
Update an image in Fireworks from
within Dreamweaver
Insert a Flash movie on a Web page
Update a Flash movie from within
Dreamweaver
Insert Flash Video on a Web page
Macromedia Studio Step-by-Step
Project 2
4
Overview
Three challenges at the corporate level
– Updating multiple pages at once
– Creating/updating sophisticated sites
– Managing a site with development teams
Three inter-connected solutions
– Cascading style sheets (CSS), templates
– Multi-media elements; e.g., video, animation
– Reliance on the team's design document
Macromedia Studio Step-by-Step
Project 2
5
Assignment
Update Experience Bank’s Web site
Student is part of a development team
– Will help revise site’s look and feel
– Follows specifications in design documents
Scope of implementation
– Working with HTML tables to lay out data
– Using CSS and templates for consistency
– Using rich media to enhance pages
Macromedia Studio Step-by-Step
Project 2
6
FIGURE 1: Experience Bank Web site
Macromedia Studio Step-by-Step
Project 2
7
Web Site Design
Design documents are complex
– One storyboard panel for template
• Template also known as standard page layout
– Many storyboards for individual pages
• Reference standard page layout for common elements
Value of templates
– Promote consistency across site
– Simplify task of site maintenance
A portion of site's pages will be built
Macromedia Studio Step-by-Step
Project 2
8
FIGURE 4: Flowchart for the Experience Bank Web site
Macromedia Studio Step-by-Step
Project 2
9
Project 2 Lessons
Lesson 1: Working with Tables
Lesson 2: Maintaining Consistency
With Templates And CSS
Lesson 3: Enhancing A Web Page
With Rich Media
Macromedia Studio Step-by-Step
Project 2
10
Lesson 1 Objectives
Create a table
Modify table properties, including the
properties of table rows and cells
Import data from a spreadsheet into
a Web page
Macromedia Studio Step-by-Step
Project 2
11
Lesson 1 Introduction
Define a new site for Experience Bank
Open the checking account page
Set up an HTML table
Import data from a spreadsheet
Macromedia Studio Step-by-Step
Project 2
12
Creating Tables
Two ways to use HTML tables
– Present data in columns and rows
– Lay out text and graphics on the page
Two methods for creating data tables
– Create table in Standard or Layout mode
– Import a spreadsheet
Adding data to checking-products.htm
– Create table in Standard mode
– Import spreadsheet, transfer data
Macromedia Studio Step-by-Step
Project 2
13
FIGURE 1-2 Table Dialog Box
Macromedia Studio Step-by-Step
Project 2
14
Importing Tabular Data
Tabular data easily imported
– Spreadsheets
– Tables in Microsoft Word
Experience Bank spreadsheet
– Contains information for checking products
– Data imported into checking-products.htm
Macromedia Studio Step-by-Step
Project 2
15
FIGURE 1-3 Import Tabular Data Dialog Box
Macromedia Studio Step-by-Step
Project 2
16
Copying and Pasting Table
Cells
Two ways to copy and paste
– Select multiple table cells at once
• Cells’ formatting is preserved
– Select cell content only
Where cells can be pasted
– At an insertion point
– In place of a selection in a table
Task: copy cell contents into first table
Macromedia Studio Step-by-Step
Project 2
17
Deleting Cells and Content
Two tables in checking-product.htm
– Retain first table created
– Delete table that was imported
• Data has been copied into the first table
Delete options
– Remove cell content, leave cell intact
– Remove an entire row
– Remove an entire table
Macromedia Studio Step-by-Step
Project 2
18
Formatting Tables
Design goals for table
– Enable better readability
– Improve accessibility
Tasks
– Add more white space around text
• Improves readability
– Designate header rows for screen readers
• Ordered rows improve accessibility
– Create links to details and application
Macromedia Studio Step-by-Step
Project 2
19
FIGURE 1 -7 Table Cell Property Inspector
Macromedia Studio Step-by-Step
Project 2
20
Lesson 2 Objectives
Attach and detach external style sheets
Use div tags to lay out a Web page
Create a Dreamweaver template
Create a new Web page from a
Dreamweaver template
Update a Dreamweaver template
Macromedia Studio Step-by-Step
Project 2
21
Lesson 2 Introduction
Cascading Style Sheets (CSS)
– Enable quick design changes across site
Dreamweaver templates
– Enable structural changes across site
– Control edits to page elements
Lesson tasks
– Apply style sheets
– Create templates
– Create pages from templates
Macromedia Studio Step-by-Step
Project 2
22
Consistency in Design
Quality of sameness across a site
Benefits of consistent look and feel
– Pages require less time to develop
– Pages provide users with predictability
Consistency inspires confidence in a site
Macromedia Studio Step-by-Step
Project 2
23
Using Cascading Style Sheets
Experience Bank uses external CSS
How external style sheets work
– Linked to Web page with single line of code
– Browser downloads CSS when line is read
– Page displayed using rules specified in CSS
Tasks for development team
– Prepare pages representing three new looks
– Each page attaches separate CSS
Macromedia Studio Step-by-Step
Project 2
24
FIGURE 2-2: Attach Style Sheet dialog box
Macromedia Studio Step-by-Step
Project 2
25
Using a Storyboard to Lay Out
a Page
Storyboards specify consistent elements
Task: build page layout from storyboard
– New page will become a template
– Elements create consistent page structure
Work flow for building page layout
– Create a series of div tags (containers)
– Assign div tag CSS rules by giving it an ID
– Add content to div tags
Macromedia Studio Step-by-Step
Project 2
26
FIGURE 2-5 Experience Bank Layout
Macromedia Studio Step-by-Step
Project 2
27
Using a Storyboard to Lay Out
a Page (continued)
Specific content added to div tags
– Experience Bank logo
– Navigation bar
– The subnavigation bar
– Footer material
CSS rules behind div tags will be modified
Macromedia Studio Step-by-Step
Project 2
28
FIGURE 2-7 CSS Rule Definition dialog box for #wrapper
in eb-main.css
Macromedia Studio Step-by-Step
Project 2
29
Using a Storyboard to Lay Out
a Page (continued)
Two types of navigation
– By navigation bar across top of page
– By links within a particular section for site
Build navigation for Checking Products
– Create links to pages within subsection
– Divide main column and navigation elements
• Set attributes for left border of mainColumn div tag
Macromedia Studio Step-by-Step
Project 2
30
FIGURE 2-9 Checking submenu items in the Checking
Products layout
Macromedia Studio Step-by-Step
Project 2
31
FIGURE 2-10 CSS Rule Definition dialog box with left
border attributes set for the mainColumn div tag
Macromedia Studio Step-by-Step
Project 2
32
Using a Storyboard to Lay Out
a Page (continued)
Links at footer of checking-layout.htm
– Personal | Small Business | Commercial |
Brokerage | About Us | Branches | Contact Us
– Similar to those in main navigation bar
Usefulness of text links at footer
– Series of text links improves accessibility
– Enables navigation when main bar not visible
Completed layout includes copyright notice
Macromedia Studio Step-by-Step
Project 2
33
FIGURE 2-11 Footer for the Checking Products layout
Macromedia Studio Step-by-Step
Project 2
34
FIGURE : 2-13 Completed Checking Products layout
Macromedia Studio Step-by-Step
Project 2
35
Reusing Page Elements by
Adding Images to Asset
Favorites
All site images listed on Assets panel
As the site grows, image list grows
Organize images with Favorites list
Task: add common images to Favorites
– eb-logo-new.jpg, atmAd.jpg, mortgageAd.jpg
– Create Advertising Badges folder
– Drag atmAd.jpg, mortgageAd.jpg into folder
Macromedia Studio Step-by-Step
Project 2
36
FIGURE : 2-15 Assets panel showing Image Favorites
Macromedia Studio Step-by-Step
Project 2
37
Using Templates
Two important template benefits
– Ability to update multiple pages at once
– Ability to define regions that may be edited
• Protects elements, such as navigation, from damage
Creating a template
– Template author designs fixed page layout
• Example of fixed page layout: checking-layout.htm
– Fixed page layout is saved as a template
– Editable regions defined in template
Macromedia Studio Step-by-Step
Project 2
38
Creating a Template
Task: create Checking Products template
– Save checking-layout.htm as template
• New template is saved as checking-products.dwt
– Create two editable regions
• Main Heading
• Main Content
Macromedia Studio Step-by-Step
Project 2
39
FIGURE 2-18 Checking Products template
Macromedia Studio Step-by-Step
Project 2
40
Creating New Pages from
Templates
Uses for templates
– Generate new pages for site
– Generate new templates
Two ways to base document on template
– Use New Document dialog box
• Select a template from a Dreamweaver-defined sites
– Use the Assets panel
Task for Web development team
– Derive free-checking.htm from template
Macromedia Studio Step-by-Step
Project 2
41
Figure 2-19 Templates category of the Assets
panel
Macromedia Studio Step-by-Step
Project 2
42
Updating a Template
Update template with new links
– Checking links to index.htm
– Free Checking links to free-checking.htm
Save changes with Update Template Files
Macromedia Studio Step-by-Step
Project 2
43
FIGURE 2-20 Update Template Files dialog box
Macromedia Studio Step-by-Step
Project 2
44
Lesson 3 Objectives
Update an image in Fireworks from within
Dreamweaver
Insert a Flash movie on a Web page
Update a Flash movie from within
Dreamweaver
Insert Flash Video on a Web page
Macromedia Studio Step-by-Step
Project 2
45
Lesson 3 Introduction
Add sound and movies to enhance site
Interoperate with Flash and Fireworks
– Roundtrip editing for code, image, animation
• Ensures updates transfer correctly between applications
– Design notes for locating source documents
• Contains references to PNG or FLA authoring file
Tasks for Experience Bank Web team
– Edit an image in Fireworks
– Add Flash animation to page, edit animation
– Add Flash video to a page
Macromedia Studio Step-by-Step
Project 2
46
Editing Images in Fireworks
Task: update advertising badge
– Badge at lower-left of savings-products.dwt
Workflow for badge update
– Open Savings Products template
– Click badge that says “Dream Home”
– Click Edit button in Property inspector
– In Fireworks, double-click “Dream Home”
– Edit text to read “Home of Your Dreams”
– Click Done
Macromedia Studio Step-by-Step
Project 2
47
FIGURE 3-2 Fireworks Document Window
Macromedia Studio Step-by-Step
Project 2
48
Inserting Flash Movies
Task: Load animation into new page
Workflow for inserting Flash movie
– Derive basic-savings.htm from template
– Insert basic-savings.doc into Main Content
– Open Select File dialog box
– Navigate to movies folder
– Select savings-movie.swf
– Modify attributes
– Play/Stop movie from Property inspector
Macromedia Studio Step-by-Step
Project 2
49
FIGURE 3-4 Select File dialog box for inserting a Flash movie
Macromedia Studio Step-by-Step
Project 2
50
Editing Flash Movies from
Dreamweaver
Task: correct typo in Savings movie
Workflow to correct typographical error
– Open Locate Macromedia Flash Document
File Dialog box
– Locate and open /_flash/savingsmovie.fla
– Double-click “Saving ofr a Home”
– Change “ofr” to “for”
– Click Done
Macromedia Studio Step-by-Step
Project 2
51
Inserting Flash Video
Video from president of Experience Bank
– Describes the mission of the company
Task: display video clip in new page
Basic workflow for inserting video clip
– Derive our-mission.htm from template
– Insert mission-statement.doc in Main Content
– Open Insert Flash Video dialog box
– Locate and select ebMissionStatement.flv
– Click Halo Skin2, click Detect size
Macromedia Studio Step-by-Step
Project 2
52
FIGURE 3-7 Mission statement page for Experience Bank
Macromedia Studio Step-by-Step
Project 2
53
Summarizing Project 2
Experience Bank Web site is updated
HTML tables have been manipulated
Layouts implemented with CSS and
templates
Web site enhanced with rich media
Team building skills developed
Macromedia Studio Step-by-Step
Project 2
54