LESSON 4 Module 4: Working with Images Navigation Tools.

Slides:

Advertisements

Similar presentations

Support.ebsco.com EBSCOadmin Branding Tutorial. Welcome to the EBSCOadmin Skinning and Branding tutorial, where you will learn how to customize EBSCOhost.

Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

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.

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.

Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.

Graphic Fun with Photoshop and Dreamweaver Presented by Roger L. Runquist, WIU.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

Design factors Content –Fig.s 4-49, 5-4, 6-3 Organization –Fig.s 2-10, 2-11, 2-12, 2-14, 2-15, 5-17 Performance Aesthetic Security.

By Patricia Galien Make sure you are in slide show. Start the presentation by clicking the arrow below.

What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.

A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.

Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.

Docs, Spreadsheets, & Presentations. What Do YOU Know???

Final Project Module 4: Working with Images LESSONS 13, 14 & 15.

Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.

Unit 21 – Creating Computer Graphics. Logo Static ButtonRoll Over Button Advertising Banner Navigation Bar.

Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

ADOBE WEAVER WEB DESIGN. START THE DW 2 WORKSPACE LAYOUT Application Bar Document Toolbar Document Window Workspace Switcher Property Inspector GroupPanel.

WEBiT Adding a new page. 1. View a page like the one you wish to create a. Navigate to a page with a similar layout to the new page you wish to create.

Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.

Web Development. Presentation Design Visualizing your web site or Visual Design.

HTML Project 4 Creating an Image Map.

Logos Module 4: Working with Images LESSON 2. Module 4: Working with Images LESSON 2 In this lesson, we will:  Investigate different logo types and their.

Creating Buttons – Lesson 51 Creating Buttons Lesson 5.

FrontPage ® 2003 – Essentials Intermediate Lesson.

By: Jennifer Huff & Courtney Stenzhorn. What Do YOU Know???

Creating an External Style Sheet Module 5: Beyond the Basics with Expression Web LESSON 8.

1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.

IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.

Start Dreamweaver program From file menu click new Blank page appears.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Saving PowerPoint Presentations as Web Pages Your Logo Here Open the PowerPoint Presentation. To convert to a format compatible with web browsers, launch.

By: Caitlin McCullough, Kaitlyn Kauffman, and Alexis Bergquist.

Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.

Creating interactive web pages using Fireworks Creating a 5 page mock up.

1 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags. Plan an HTML site. Create a table with HTML.

YEAR 8 – WEB DESIGN IN HTML Lesson 3. STARTER Use the internet to find out what A hyperlink is used for? Use ‘Microsoft Word’ to write down your answer.

Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.

XP Creating Web Pages with Microsoft Office

Section 6.1 Section 6.2 Write Web text Use a mission statement

LESSON 7 Module 4: Working with Images Scanning 2.

LESSONS 13, 14 & 15 Module 4: Working with Images Final Project.

Section 7.1 Section 7.2 Identify presentation design principles

LESSON 2 Module 4: Working with Images Logos.

LESSONS 11 & 12 Module 4: Working with Images Banner Tutorial.

Project Objectives Lay out Web pages Create layers

Chapter A - Getting Started with Dreamweaver MX 2004

LESSON 3 Module 4: Working with Images Banners.

LESSON 6 Module 4: Working with Images Scanning, Part I.

Year 7 E-Me Web design.

Presentation Graphics

Section 10.1 YOU WILL LEARN TO… Define scripting

LESSON 5 Module 4: Working with Images Image File Types.

Page plans A01 Design.

Lesson Objectives Lesson Outcomes

The Elements of Design: Shape and Line

Creating Images for the Web

LESSONS 9 & 10 Module 4: Working with Images Digital Photography 2.

LESSON 1 Module 4: Working with Images Impact of Images.

How to add a page… You will need to add new pages to your website depending on the brief. You do this by: Click on the Add new page button Write the new.

For use on your feedback page

A02 Creating my website NAME ______________.

Write down 3 things you know about websites.

The Elements of Design: Shape and Line

Designing Web Site Layout Using Fireworks

4.00 Apply procedures to add content by using Dreamweaver. (22%)

Add Background Style Click the slide or slides that you want to add background style Click Design Tab Click Down arrow in the Themes group.

Presentation transcript:

LESSON 4 Module 4: Working with Images Navigation Tools

In this lesson, we will: Investigate different methods of Web page navigation . Discuss what you know, what you want to know, and finally what you learned about navigation . Create navigation tools (continuing the “your interests” theme).

Guiding Questions How does a user get around a Web site? What do they click on to get to other areas of a Web site? What prevents a user from getting to a desired location? Use the guiding questions as a class starter, allowing the students time to answer the questions in their journal. Discuss student answers to the questions.

Web sites Button Examples: http://www.crystalbutton.com/examples.php Image Map example: http://homepages.wmich.edu/~c5jones4/example%20html/imap.html KWL Chart: http://www.educationworld.com/tools_templates/ index.shtml#graphicOrganizers Use Web site to give background information and show examples. Student Worksheet KWL - Available at Education World. Choose Graphic Organizers. Choose KWL Chart. http://www.educationworld.com/tools_templates/index.shtml#graphicOrganizers

Navigation Tools

Navigation Tools What do you know about navigating on the Web? What do you want to know? Ask students to answer questions on their KWL sheet and then share with class.

Navigation Tool Design Create a navigation tool that is consistent with the logo and banner you have already created in this module. Make 3 sketches (buttons, rollovers, image maps). Choose a style and draw a final copy, using color, on the handout. Handout: KWL Chart

Lesson Review During this lesson, we discussed different types of navigational tools and their uses, and we created a navigational tool. Buttons Rollovers Image Maps Image Slicing Buttons: Buttons are key components in Web design to navigate or link to other sources (page, site, video, document, etc.). Rollovers: Rollover refers to the button a Web designer creates to interact with the user. It is the visual process of hovering over (rollover) a graphic button, text, or image causing a reaction. Image Maps: Image map is an image used, like buttons, to navigate through a Web site by clicking on different parts of the image. Image Slicing: Image slicing is the process of splitting an image into smaller rectangles called slices. Each slice is placed in a HTML table and then optimized to create the smallest file size.

Finish the “L” of your KWL sheet What did you learn about navigation tools? Can you answer all of your questions from the “W” ? The teacher will ask students to finish the KWL sheet and share as whole group.

Assessment What three components can Web users click on to navigate through a Web page? Which component is used most often? Which component would a user get most frustrated with and why? Ask students to answer questions in their journal, with a partner, or as a whole class.