macromedia studio 8 step-by-step macromedia dreamweaver 8 project 2: banking site

Macromedia Studio 8 Step-by-Step

MACROMEDIA DREAMWEAVER 8 Project 2: Banking Site

Project 2 2Macromedia Studio Step-by-Step

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

Project Objectives


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

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

Project Objectives (continued)


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

Overview


Update Experience Bank’s Web siteStudent 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

Assignment


FIGURE 1: Experience Bank Web site


Design documents are complex– One storyboard panel for template

• Template also known as standard page layoutTemplate also known as standard page layout

– Many storyboards for individual pages • Reference standard page layout for common elementsReference 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

Web Site Design


FIGURE 4: Flowchart for the Experience Bank Web site


Lesson 1: Working with Tables

Lesson 2: Maintaining Consistency With Templates And CSS

Lesson 3: Enhancing A Web Page With Rich Media

Project 2 Lessons


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


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


Creating TablesTwo 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


FIGURE 1-2 Table Dialog Box


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


FIGURE 1-3 Import Tabular Data Dialog Box


Copying and Pasting Table Cells

Two ways to copy and paste– Select multiple table cells at once

• Cells’ formatting is preserved 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


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 tableData has been copied into the first table

Delete options– Remove cell content, leave cell intact – Remove an entire row– Remove an entire table


Formatting Tables

Design goals for table– Enable better readability– Improve accessibility

Tasks– Add more white space around text

• Improves readabilityImproves readability

– Designate header rows for screen readers• Ordered rows improve accessibilityOrdered rows improve accessibility

– Create links to details and application


FIGURE 1 -7 Table Cell Property Inspector


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


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


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


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


FIGURE 2-2: Attach Style Sheet dialog box


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


FIGURE 2-5 Experience Bank Layout


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


FIGURE 2-7 CSS Rule Definition dialog box for #wrapper in eb-main.css



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


FIGURE 2-9 Checking submenu items in the Checking Products layout


FIGURE 2-10 CSS Rule Definition dialog box with left border attributes set for the mainColumn div tag



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


FIGURE 2-11 Footer for the Checking Products layout


FIGURE : 2-13 Completed Checking Products layout


Reusing Page Elements by Adding Images to Asset Favorites

All site images listed on Assets panelAs the site grows, image list growsOrganize images with Favorites listTask: add common images to Favorites– eb-logo-new.jpg, atmAd.jpg, mortgageAd.jpg– Create Advertising Badges folder– Drag atmAd.jpg, mortgageAd.jpg into folder


FIGURE : 2-15 Assets panel showing Image Favorites


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 damageProtects elements, such as navigation, from damage

Creating a template– Template author designs fixed page layout

• Example of fixed page layout: checking-layout.htmExample of fixed page layout: checking-layout.htm

– Fixed page layout is saved as a template– Editable regions defined in template


Creating a Template

Task: create Checking Products template– Save checking-layout.htm as template

• New template is saved as checking-products.dwtNew template is saved as checking-products.dwt

– Create two editable regions• Main Heading Main Heading • Main ContentMain Content


FIGURE 2-18 Checking Products template


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 sitesSelect a template from a Dreamweaver-defined sites

– Use the Assets panel

Task for Web development team– Derive free-checking.htm from template


Figure 2-19 Templates category of the Assets panel


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


FIGURE 2-20 Update Template Files dialog box


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


Lesson 3 IntroductionAdd sound and movies to enhance siteInteroperate with Flash and Fireworks– Roundtrip editing for code, image, animation

• Ensures updates transfer correctly between applicationsEnsures updates transfer correctly between applications

– Design notes for locating source documents• Contains references to PNG or FLA authoring fileContains 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


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


FIGURE 3-2 Fireworks Document Window


Inserting Flash MoviesTask: Load animation into new pageWorkflow 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


FIGURE 3-4 Select File dialog box for inserting a Flash movie


Editing Flash Movies from Dreamweaver

Task: correct typo in Savings movieWorkflow 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


Inserting Flash Video

Video from president of Experience Bank – Describes the mission of the company

Task: display video clip in new pageBasic 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


FIGURE 3-7 Mission statement page for Experience Bank


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 8 step-by-step macromedia dreamweaver 8 project 2: banking site

Documents