Presentation is loading. Please wait.

Presentation is loading. Please wait.

Project Objectives Lay out Web pages Create layers

Published byRoland Dorsey Modified over 6 years ago

Similar presentations

Presentation on theme: "Project Objectives Lay out Web pages Create layers"— Presentation transcript:

1

2 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

3 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

4 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

5 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

6 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

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

8 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

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

10 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

11 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

12 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

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

14 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

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

16 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

17 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

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

19 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

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

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

22 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

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

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

25 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

26 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

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

28 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

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

30 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

31 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

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

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

34 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

35 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

36 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

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

38 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

39 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

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

41 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

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

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

44 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

Download ppt "Project Objectives Lay out Web pages Create layers"

Similar presentations

Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.

Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1

Learning the Basics – Lesson 1
Creating Animations – Lesson 71 Creating Animations Lesson 7.

Creating Animations – Lesson 71 Creating Animations Lesson 7.
© 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.

© 2010 Delmar, Cengage Learning Chapter 12 Working with Library Items and Snippets.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.

Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.

Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.

Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Exploring Other FreeHand Features – Lesson 31 Exploring Other FreeHand Features Lesson 3.

Exploring Other FreeHand Features – Lesson 31 Exploring Other FreeHand Features Lesson 3.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Lesson 21 Getting Started with PowerPoint Essentials

Lesson 21 Getting Started with PowerPoint Essentials
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.

Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Chapter 3 Working with Symbols and Interactivity.

Chapter 3 Working with Symbols and Interactivity.
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.

Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.
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.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX 2004 2 Buttons Interactive means that the user has some level.

XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
Designing a Home Page – Lesson 4 1 Designing a Home Page Lesson 4.

Designing a Home Page – Lesson 4 1 Designing a Home Page Lesson 4.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.

Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.

Similar presentations

Ads by Google