Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 2: Banking Site

Project 2 2 Macromedia 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

Project 2 3 Macromedia Studio Step-by-Step 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)

Project 2 4 Macromedia Studio Step-by-Step 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)

Project 2 5 Macromedia Studio Step-by-Step 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

Project 2 6 Macromedia Studio Step-by-Step 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 Assignment

Project 2 7 Macromedia Studio Step-by-Step FIGURE 1: Experience Bank Web site

Project 2 8 Macromedia Studio Step-by-Step 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

Project 2 9 Macromedia Studio Step-by-Step FIGURE 4: Flowchart for the Experience Bank Web site

Project 2 10 Macromedia Studio Step-by-Step 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

Project 2 11 Macromedia Studio Step-by-Step 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

Project 2 12 Macromedia Studio Step-by-Step 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

Project 2 13 Macromedia Studio Step-by-Step 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

Project 2 14 Macromedia Studio Step-by-Step FIGURE 1-2 Table Dialog Box

Project 2 15 Macromedia Studio Step-by-Step 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

Project 2 16 Macromedia Studio Step-by-Step FIGURE 1-3 Import Tabular Data Dialog Box

Project 2 17 Macromedia Studio Step-by-Step Copying and Pasting Table Cells Two ways to copy and paste –Select multiple table cells at once Cells’ formatting is preservedCells’ 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

Project 2 18 Macromedia Studio Step-by-Step 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

Project 2 19 Macromedia Studio Step-by-Step 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

Project 2 20 Macromedia Studio Step-by-Step FIGURE 1 -7 Table Cell Property Inspector

Project 2 21 Macromedia Studio Step-by-Step 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

Project 2 22 Macromedia Studio Step-by-Step 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

Project 2 23 Macromedia Studio Step-by-Step 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

Project 2 24 Macromedia Studio Step-by-Step 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

Project 2 25 Macromedia Studio Step-by-Step FIGURE 2-2: Attach Style Sheet dialog box

Project 2 26 Macromedia Studio Step-by-Step 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

Project 2 27 Macromedia Studio Step-by-Step FIGURE 2-5 Experience Bank Layout

Project 2 28 Macromedia Studio Step-by-Step 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

Project 2 29 Macromedia Studio Step-by-Step FIGURE 2-7 CSS Rule Definition dialog box for #wrapper in eb-main.css

Project 2 30 Macromedia Studio Step-by-Step 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

Project 2 31 Macromedia Studio Step-by-Step FIGURE 2-9 Checking submenu items in the Checking Products layout

Project 2 32 Macromedia Studio Step-by-Step FIGURE 2-10 CSS Rule Definition dialog box with left border attributes set for the mainColumn div tag

Project 2 33 Macromedia Studio Step-by-Step 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

Project 2 34 Macromedia Studio Step-by-Step FIGURE 2-11 Footer for the Checking Products layout

Project 2 35 Macromedia Studio Step-by-Step FIGURE : 2-13 Completed Checking Products layout

Project 2 36 Macromedia Studio Step-by-Step 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

Project 2 37 Macromedia Studio Step-by-Step FIGURE : 2-15 Assets panel showing Image Favorites

Project 2 38 Macromedia Studio Step-by-Step 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

Project 2 39 Macromedia Studio Step-by-Step 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 HeadingMain Heading Main ContentMain Content

Project 2 40 Macromedia Studio Step-by-Step FIGURE 2-18 Checking Products template

Project 2 41 Macromedia Studio Step-by-Step 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

Project 2 42 Macromedia Studio Step-by-Step Figure 2-19 Templates category of the Assets panel

Project 2 43 Macromedia Studio Step-by-Step 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

Project 2 44 Macromedia Studio Step-by-Step FIGURE 2-20 Update Template Files dialog box

Project 2 45 Macromedia Studio Step-by-Step 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

Project 2 46 Macromedia Studio Step-by-Step 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 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

Project 2 47 Macromedia Studio Step-by-Step 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

Project 2 48 Macromedia Studio Step-by-Step FIGURE 3-2 Fireworks Document Window

Project 2 49 Macromedia Studio Step-by-Step 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

Project 2 50 Macromedia Studio Step-by-Step FIGURE 3-4 Select File dialog box for inserting a Flash movie

Project 2 51 Macromedia Studio Step-by-Step 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

Project 2 52 Macromedia Studio Step-by-Step 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

Project 2 53 Macromedia Studio Step-by-Step FIGURE 3-7 Mission statement page for Experience Bank

Project 2 54 Macromedia Studio Step-by-Step 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