Project Objectives Lay out Web pages Create layers OVERVIEW Project Objectives Lay out Web pages Create layers Group and ungroup objects Create and edit buttons for navigation Macromedia Studio Step-by-Step

Project Objectives (continued) OVERVIEW Project Objectives (continued) Apply effects to buttons Copy and paste a navigation bar into a new document Optimize a navigation bar Export a navigation bar Macromedia Studio Step-by-Step

Overview Improve site with layout and navigation Create a clear, simple page layout Visitor digests site information by location Coherent layout improves readability Use navigation space efficiently Provide clear, specific words in links Link should act as preview for new page Macromedia Studio Step-by-Step

Design Document Provides client goals Contains flowchart for site INTRODUCTION Design Document Provides client goals Contains flowchart for site Specifies navigation for home page Links to other pages in the site Color and layout choices create site look Designer guided by client’s goals Macromedia Studio Step-by-Step

Assignment Develop site for Experience Bank INTRODUCTION Assignment Develop site for Experience Bank Produce page comp and navigation bar Page comp (composition) Emulates page that will appear on a site Template for other site pages Specifications in design document Layout for checking account page comp Navigation bar for Experience Bank site Optimization and export instructions Macromedia Studio Step-by-Step

FIGURE 1: Experience Bank Design Document INTRODUCTION FIGURE 1: Experience Bank Design Document Macromedia Studio Step-by-Step

Project 3 Lessons Lesson 1: Creating Page Layouts INTRODUCTION Project 3 Lessons Lesson 1: Creating Page Layouts Lesson 2: Creating Navigation Bars Lesson 3: Optimizing and Exporting for the Web Macromedia Studio Step-by-Step

Lesson 1 Objectives Lay out Web pages Create layers Group and ungroup objects Macromedia Studio Step-by-Step

Lesson 1 Introduction Create a look and feel for a site Client: Experience Bank Drivers of color and layout choices Goals and needs of the client Lesson goal: build a page comp Design is basis for checking account page Page mock-up resembles a real page Macromedia Studio Step-by-Step

Setting Up the Document LESSON 1 Setting Up the Document Dimensions of Web pages 700 pixels wide and 800 pixels high Includes space for padding and content Fits screens of 1024 x 768 and 800 x 600 Overview of tasks Open the New Document dialog box Enter the appropriate page dimensions Set the canvas color to olive green Macromedia Studio Step-by-Step

Using Layers Documents can have many layers LESSON 1 Using Layers Documents can have many layers Each layer can have many objects Examples: text, graphical, animation Two default layers: Web Layer, Layer 1 Overview of tasks Use four layers to organize page comp Adapt and create layers with Layers panel Macromedia Studio Step-by-Step

LESSON 1 FIGURE 1-5: Layers named Macromedia Studio Step-by-Step

Setting Up the Background LESSON 1 Setting Up the Background Page layouts should be consistent Unifying concepts behind page comp Color groups relate pieces of information White space breaks up dense data blocks Goal: create four color coded regions White content region, 657 x 700 Dark blue region for footer navigation Dark blue region for main navigation Khaki region for left navigation Macromedia Studio Step-by-Step

FIGURE 1-7: Background page layout LESSON 1 FIGURE 1-7: Background page layout Macromedia Studio Step-by-Step

Grouping and Naming Objects in Layers LESSON 1 Grouping and Naming Objects in Layers Rectangle and path object pairs Occur in three navigation regions Should be grouped for better organization Overview of tasks Select pairs in Layers panel Apply Group function to object pairs Names: Footer Nav, Left Nav, Main Nav Macromedia Studio Step-by-Step

FIGURE 1-13: Grouped Objects in the Layers panel LESSON 1 FIGURE 1-13: Grouped Objects in the Layers panel Macromedia Studio Step-by-Step

FIGURE 1-14: Color blocks for the background LESSON 1 FIGURE 1-14: Color blocks for the background Macromedia Studio Step-by-Step

Creating the Left Navigation LESSON 1 Creating the Left Navigation Sub-navigation has five main buttons Region below Checking is expanded Overview of tasks Add five rectangles on Left Navigation layer Dimensions and colors are identical Positions and text labels vary Add one rectangle for four Checking options Group rectangular buttons with text Macromedia Studio Step-by-Step

FIGURE 1-15: Properties for Checking Text LESSON 1 FIGURE 1-15: Properties for Checking Text Macromedia Studio Step-by-Step

FIGURE 1-18: Completed sub-navigation LESSON 1 FIGURE 1-18: Completed sub-navigation Macromedia Studio Step-by-Step

Adding Content Mock content illustrates Checking section LESSON 1 Adding Content Mock content illustrates Checking section Overview of tasks Select the Content layer Add text and images to fill page Descriptions: PERSONAL SERVICES and CHECKING Text over footer navigation and company name below Two images for placeholder text Two ad images: atm_ad.gif and mortgage_ad.gif Experience Bank logo: Exp_Bank_logo.jpg Banner text: checking_table.jpg Macromedia Studio Step-by-Step

FIGURE 1-28: Checking Page Comp LESSON 1 FIGURE 1-28: Checking Page Comp Macromedia Studio Step-by-Step

Lesson 2 Objectives Create and edit buttons for navigation Apply effects to buttons Macromedia Studio Step-by-Step

Lesson 2 Introduction Main navigation bar completes the comp Built to best match rollover effects Rollover images react to mouse events Appearance alters with click or mouse over Overview of lesson tasks Create a button symbol Use button symbol as template Macromedia Studio Step-by-Step

Creating Buttons Navigation (nav) bar Four common button states LESSON 2 Creating Buttons Navigation (nav) bar Made up of buttons with links Four common button states Up: visitor not interacting with button Over: visitor passes mouse over button Down: visitor clicks the button Over While Down: mouse over down button Button Editor is used to create buttons Macromedia Studio Step-by-Step

FIGURE 2-1: Button Editor LESSON 2 FIGURE 2-1: Button Editor Macromedia Studio Step-by-Step

Creating Buttons (continued) LESSON 2 Creating Buttons (continued) Overview of tasks Create five buttons to reach five pages Build first button with Button Editor Ensure Main Navigation layer is selected Button properties Dimensions are 131 x 20 Gradient fill ranges from blue to midnight blue Over and Down states are assigned Text label is PERSONAL Macromedia Studio Step-by-Step

FIGURE 2-5: Up state of button LESSON 2 FIGURE 2-5: Up state of button Macromedia Studio Step-by-Step

FIGURE 2-9: Change text to PERSONAL in Property inspector LESSON 2 FIGURE 2-9: Change text to PERSONAL in Property inspector Macromedia Studio Step-by-Step

Using the Library to Create the Navigation Bar LESSON 2 Using the Library to Create the Navigation Bar New button is stored as a symbol Symbol: reusable graphical template Instance: a copy of a symbol Overview of tasks Drag four instances of button to canvas Reset button dimensions Apply appropriate text and names Macromedia Studio Step-by-Step

FIGURE 2-10: Library with button symbol LESSON 2 FIGURE 2-10: Library with button symbol Macromedia Studio Step-by-Step

FIGURE 2-13: Button navigation bar completed LESSON 2 FIGURE 2-13: Button navigation bar completed Macromedia Studio Step-by-Step

LESSON 3 Lesson 3 Objectives Copy and paste a navigation bar into a new document Optimize a navigation bar Export a navigation bar Macromedia Studio Step-by-Step

Lesson 3 Introduction Save nav bar in Web friendly format Overview of lesson tasks Copy navigation bar into new document Verify visibility of button states Optimize and export navigation bar Macromedia Studio Step-by-Step

Copying the Navigation Bar LESSON 3 Copying the Navigation Bar Copy navigation bar from comp Place navigation bar in new document Convert nav bar to Web friendly format Overview of tasks Select all buttons in Main Navigation layer Copy buttons to Clipboard Set new document properties Paste buttons into new document Macromedia Studio Step-by-Step

FIGURE 3-1: Select all buttons LESSON 3 FIGURE 3-1: Select all buttons Macromedia Studio Step-by-Step

FIGURE 3-2: New Document dialog box with Clipboard dimensions LESSON 3 FIGURE 3-2: New Document dialog box with Clipboard dimensions Macromedia Studio Step-by-Step

Optimizing Navigation Bars LESSON 3 Optimizing Navigation Bars Optimization reduces image file size Use JPEG compression Rationale: nav bar has gradient in buttons Overview of tasks Open the Optimize panel Select JPEG – Better Quality Save the file Macromedia Studio Step-by-Step

FIGURE 3-3: Optimize panel saved settings LESSON 3 FIGURE 3-3: Optimize panel saved settings Macromedia Studio Step-by-Step

Exporting the Navigation Bar LESSON 3 Exporting the Navigation Bar Export HTML file with two elements: JavaScript and folder of images Overview of tasks Open the Export dialog box Navigate to where file will be saved Select option Put Images in subfolder Create "images“ folder Select "images", then click Export Macromedia Studio Step-by-Step

FIGURE 3-5: Options for export LESSON 3 FIGURE 3-5: Options for export Macromedia Studio Step-by-Step

FIGURE 3-6: Create and select subfolder LESSON 3 FIGURE 3-6: Create and select subfolder Macromedia Studio Step-by-Step

Summarizing Project 3 Page comp and nav bar were created SUMMARY Summarizing Project 3 Page comp and nav bar were created Design document guided development Nav bar made with interactive buttons Button instances derived from symbol Final document optimized and exported Macromedia Studio Step-by-Step