 Key dissatisfier  Puts designer in control  Helps get your message across.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
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?
Creating Tables in a Web Site
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
CSS Menus and Rollovers. Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
 Next - Previous  Horizontal Bar  Vertical Menu.
 Today: WHAT to build  Next week: how to look GOOD.
Interface / navigation COM 366 Web Design & Production.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Designing a Classroom Web Site Using NVU Beginning Level.
Rollover Buttons UNIT 2. Purpose When you move your mouse onto a button the image on it rolls over to something else Link to example website.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Creating Tables in a Web Site
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.
Web Technologies Website Development Trade & Industrial Education
Page 1 Simple PowerPoint Menus Section 1 Section 3 Section 2 Tutorial.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Web Design-Lecture2-QN-2003 Web Design Microsoft FrontPage®
OCR Nationals ICT – Unit 2 Task 3 Task Overview In this task you will create hyperlinks to link the pages together, link to other websites on the Internet.
Website Development with Dreamweaver
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Part 3: Page Structure. Activity: Table of Contents (TOC) Create a table of contents that links to each of your previously built pages. Follow the directions.
Web Site Design & Management Class 7 March 12, 2003.
Copyright Ó Oracle Corporation, All rights reserved Working with Other Canvases.
Upon entering the site a “pre-loader” will cache the contents of the site on the user’s computer. Visually, a “Zen Circle” brush stroke will animate to.
Chapter 20 Web Design. Copyright © Houghton Mifflin Company. All rights reserved.20 | 2 Chapter overview Gives an introduction to Web design Examines.
Consistency Increases usability of your Web site..
Introduction to FrontPage and Web Page Design. Topics Logging in to your site Creating a webpage Text formatting Page backgrounds Linking webpages Links.
Page 1 Simple PowerPoint Menus Section 1 Section 3 Section 2 Tutorial.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
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.
Web Site Development - Process of planning and creating a website.
BUILDING A WEB PAGE BASIC HTML CODING. We first open notepad to start to build our web page. We enter the code at the beginning. And then we write below.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
Creating a Google Site For a Digital Portfolio Purpose.
Images were sourced from the following web sites: Slide 2:commons.wikimedia.org/wiki/File:BorromeanRing...commons.wikimedia.org/wiki/File:BorromeanRing...
Title of your site Title of your page Text and images arranged on the page in the design of your choice. Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page.
Managing the content of web pages
Web Design Principles.
Click on the HOME button to return to this page at any time
Float.
Welcome screen.
Sitemap – Web analytics
Page plans A01 Design.
Fixed Positioning.
Rollover Buttons UNIT 2.
Float.
For use on your feedback page
Chapter 4 Planning Site Navigation
Tips on good web site Design
Multipage Sites.
Advance Web Sites.
Web Design Principles.
8-3b Multiplying Polynomials Using Punnett Squares
Human and Computer Interaction (H.C.I.) &Communication Skills
Presentation transcript:

 Key dissatisfier  Puts designer in control  Helps get your message across

 Direct access to each point  Easy return to the hub  Use table or list and RETURN

 Path that you want people to follow  Preferred order  Use next and back

 Even with a direct path, users will hop around  Review, repeat, explore  Use both

Menu  Where › Top or bottom › Side  How to decide › Width of content › Number of links › Preference Back and next  Where › Top or bottom › Or both  How to decide › User behavior › Consistency of page sizes

 Horizontal: table › Example from last year’s web site (only accessible on campus) › ›  Vertical: list › Example from this year’s web site › ›  Buttons › Example from Floatutorial › › Decorations, background images, …