CMP Creating Your Personal and Small Business Web Sites

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
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?
New Semantic Elements (Part 2)
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.
Government Web Template (GWT) for WordPress Updated 03/20/2015.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
DISPUTES & INVESTIGATIONS ECONOMICS FINANCIAL ADVISORY MANAGEMENT CONSULTING Joining LinkedIn How to Register, Follow Navigant & Join the Conversation.
Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Instructional Design Tips Janet Holland. Impression on First Entry Meaningful Images Small Loads Quickly Text Visible Text Steady.
Rowan County Public Library.  Learn how to register for and log into Weebly.  Set up a Weebly sub-domain.  Instill an understanding of Weebly web-
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Introduction to Moodle V2.3 Staff Guide. Access Moodle Use Google to search for: DVC Moodle Type the address: OR.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Chen Raz Requirements: 1. HTML5/CSS3 (I remind you that we have an agreement that you don't charge me extra for this) 2. Do not use the html element 3.
PowerPoint Basics “Just what are we trying to do with this software anyway?”
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
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.
HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.
Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Interface Design Web Design Professor Frank. Design Graphic design and visual graphics are equally important Both work together to create look, feel and.
Web Design I Spring 2009 Kevin Cole Gallaudet University
ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2 Define terms related to frames Describe the steps used.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
Creating Google Sites Laura Assem, Director of Technology.
Accessibility – Standards and Guidelines April 1, 2015.
By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.
Copyright 2007, EMC Paradigm Publishing Inc. INTERNET EXPLORER 7 BACKNEXTEND 1-1 LINKS TO OBJECTIVES Launching Internet Explorer Launching Internet Explorer.
The Basics of Managing Your Department Website March 8, 2012.
HINDU STYLE PORTFOLIO TEMPLATE
Web Site Development - Process of planning and creating a website.
Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Creating Web Pages with Links, Images, and Embedded Style Sheets
EKTRON QUICK START GUIDEEKTRON QUICK START GUIDE Version 1.0 Copyright 2013 WebSolutions Technology, Inc. Fuller June 7, 2013.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Creating Website Content CS Programming Languages for Web Applications
Web Page Elements Writing For the Web
Chapter A - Getting Started with Dreamweaver MX 2004
>> Header & Footer in CSS
GCE Applied ICT G053: Lesson 07 Design Tools and Techniques
Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.
ITI 133 HTML5 Desktop and Mobile Level I
HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page
Outlook work for you 5 ways to make Sign off in style
Session I Chapter 18 - How to Design a Web Site
Instructional Design Tips
Internet Explorer 6 Workshop
HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Instructional Design Tips
Links.
Type your event details here
Internet Explorer 6 Workshop
New Semantic Elements (Part 2)
Creating Website Content CS Programming Languages for Web Applications
Type your event details here
ITI 163: Web, Mobile, and Social Media Design Introduction
ITI 163: Web, Mobile, and Social Media Design Introduction
CMP Creating Your Personal and Small Business Web Sites
Creating Website Content CS Programming Languages for Web Applications
CMP Creating Your Personal and Small Business Web Sites
AssetWise Operational Analytics
ITI 133: HTML5 Desktop and Mobile Level I
Presentation transcript:

CMP 868 - Creating Your Personal and Small Business Web Sites Lesson 3 Chapter 5 - Designing Effective Navigation www.profburnett.com

Copyright © Carl M. Burnett Class Outline What is Navigation? Laying out Your Navigation Grouping Options Tabbed Navigation Dropdown Menus Using Icons The Role of the Homepage You are Here........ Encouraging Exploration Adding Search Effective Error Messages Tips for Effective Links 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett What is Navigation? 4/11/2019 Copyright © Carl M. Burnett

Laying out Your Navigation Header Site Logo Utility Links Sitewide Navigation Options Sidebar Local Navigation Page Content Sidebar Bonus Navigation Footer – Background Links And Copyright Info 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Grouping Options Before Books CD’s Posters Wallpapers MP3’s Who We Are Visiting Us Contact Us After Shop Books CD’s Posters Free Downloads Wallpapers MP3’s About Us Who We Are Visiting Us Contact US 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Tabbed Navigation 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Dropdown Menus 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Using Icons 4/11/2019 Copyright © Carl M. Burnett

The Role of the Homepage Clear Statement about Site Clear Navigation Prominent Search Box Standard Navigation Bar 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett You are Here........ Give Each Page a Title Change Color of Visited Links Change Navigation Bar Use Breadcrumbs Create a Process Map 4/11/2019 Copyright © Carl M. Burnett

Encouraging Exploration 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Adding Search 4/11/2019 Copyright © Carl M. Burnett

Effective Error Messages 4/11/2019 Copyright © Carl M. Burnett

Tips for Effective Links Be Consistent Avoid Quirky Names Keep Link Text Short Links Make Sense Do Not Share Links Link Text Descriptive Don't tell where to click Don't Draw Attention Link At a Glance Use Plain HTML Warn if Link is to Doc Email Address Link Never Open a New Page Only Hover Links 4/11/2019 Copyright © Carl M. Burnett

Copyright © Carl M. Burnett Class Review What is Navigation? Laying out Your Navigation Grouping Options Tabbed Navigation Dropdown Menus Using Icons The Role of the Homepage You are Here........ Encouraging Exploration Adding Search Effective Error Messages Tips for Effective Links Next – CSS - Adding Style to Your Pages 4/11/2019 Copyright © Carl M. Burnett