Creating a Website Part Two Navigation. Creating Usable Navigation Provide enough location information to let the user answer the following navigation.

Slides:



Advertisements
Similar presentations
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Advertisements

HTML Tags and Their Functions
Chapter 3 – Web Design Tables & Page Layout
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?
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Principles of Web Design 5th Edition
Web design criteria University of Stellenbosch. What is on a web page? Navigational elements Text Graphics.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 5, Day 1 (10/28)
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.
Creating an Online Portfolio Creating your Electronic Portfolio.
Designing a Classroom Web Site Using NVU Beginning Level.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Chapter 5 Creating Page Templates
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
Web Technologies Website Development Trade & Industrial Education
Chapter 2 Web Site Design Principles
Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Web Site Design Principles
Website Development with Dreamweaver
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Creating Tables in a Web Site
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
Moodle with Style Integrating new technologies to empower learning and transform leadership.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 8 HTML Frames. 2 Principles of Web Design Chapter 8 Objectives Understand the benefits and drawbacks of frames Understand and use frames syntax.
Week 5 Working with Tables. 2 Understanding Table Basics.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Web Site Design & Management Class 7 March 12, 2003.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Chapter 5 Creating Page Templates. Principles of Web Design 2nd Ed. Chapter 5 2 Principles of Web Design Chapter 5 Objectives Understand table basics.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
Microsoft FrontPage 2003 Illustrated Complete Working on the Web Site’s Hyperlinks and Appearance.
Graphics Navigation Usability Typography Content Clarity & Consistency.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
CIS101 Introduction to Computing Week 07 Spring 2004.
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
Chapter 2 Developing a Web Page.
Chapter A - Getting Started with Dreamweaver MX 2004
Dreamweaver – Setting up a Site and Page Layouts
Creating a Successful Web Presence
Web Design Tips.
HTML Links.
Chapter 4 Planning Site Navigation
Chapter 2 Web Site Design Principles
CA203 Presentation Application
Presentation transcript:

Creating a Website Part Two Navigation

Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions: Where am I? Where can I go? How do I get there? How do I get back to where I started?

Creating Usable Navigation To answer these questions, provide the following information: Let users know what page they are on, and what type of content they are viewing Let users know where they are in relation to the rest of the site

Creating Usable Navigation Provide consistent, easy-to-understand links Provide alternatives to the browser’s Back button that lets users return to their starting point

Limit Information Overload Create manageable information segments Control page length Use hypertext to connect facts, relationships, and concepts

Using Text-Based Navigation Text-based linking is often the most effective way to provide navigation on your site It can work in both text-only and graphical browsers Always provide a text-based set of links as an alternate means of navigation

Sample Text Navigation To main pages (home, table of contents, index) To the top of each chapter Within the table of contents page to chapter descriptions From table of contents page to specific topics within each chapter The following screens demonstrate a variety of text-based navigation options:

Sample Text Navigation Between the previous and next chapter Within chapter pages to each topic To related information by using contextual links The following screens demonstrate a variety of text-based navigation options:

Graphics for Navigation Standardize your navigation graphics Provide predictable navigation cues for the user Repeat graphics to minimize download time Use consistent placement and design of navigation graphics to reassure the user Use easily understandable graphics

Navigation Summary Work from the user's point of view. Think about where users want to go within your site, and make it easy for them to get there. Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options. In addition to providing links, make sure you provide plenty of location cues to let the user know where they are

Navigation Summary continued Do you have to use graphics for linking? Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time. Don't forget to provide ALT values to your tags to provide alternate navigation options for the user

Step Six Actual Building the Pages Tables Forms Graphics Typography

Using Table Elements To build effective page templates, you must be familiar with the HTML table elements and attributes The element contains the table information, which consists of table row elements, and individual table data cells. These are the three elements you will use most frequently when you are building tables.

Basic Table Code Stock Number Description List Price 3476-AB 76mm Socket AB 78mm Socket AB 80mm Socket 50.00