CM143 Web Week 6 Links & Navigation CSS Styling & Mouseovers.

Slides:

Advertisements

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

Advertisements

1 Web Site Design Overview of the Internet Cookie Setton.

UI Best Practices Application Developer’s Intro School Week 1 Day 1.

CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.

CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.

Advanced Web Design Using Dreamweaver Robby Seitz 121 Powers Hall

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

Cascading Style Sheets CSS. What is it? Another file format ! its not like html Describes the looks of “selectors” in a.css file (example.css) in the.

CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,

CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

WEB DESIGN – SEC 4-11 PART OR ALL OF THIS LESSON WAS ADAPTED FROM THE UNIVERSITY OF WASHINGTON’S “ WEB DESIGN & DEVELOPMENT I ” COURSE MATERIALS PSEUDO-CLASS.

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

Chapter 3 Working with Text and Cascading Style Sheets.

Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

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.

  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements.

Web Design Basic Concepts.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

Dreamweaver CS6 Jumpstart CCSA 115 Web tools Lesson 1.

Spring Quarter 2002 De Anza College1 Chapter 10 – Rollovers Simple Rollovers Swap images  Stack two images on top of one another  When mouse over an.

Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

HTML Web Authoring Tonya L. DeZarn Janice Thompson Juana Wallace.

Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.

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. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.

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.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Website Development with Dreamweaver

CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.

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.

 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.

Windows User Interface and Web User Interface By E. Marlene Graham.

Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.

Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.

1 JavaScript 2 JavaScript. 2 Rollovers Most web page developers first use JavaScript for rollovers A rollover is a change in the appearance of an element.

JavaScript Defined JavaScript Basics Definitions JavaScript is an object-oriented programming language designed for the world wide web. JavaScript code.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

DIGITAL DESIGN Digital Design is the art and process of creating a single Web page or entire Web sites and may involve both the aesthetics and the mechanics.

Form Processing Week Four. Form Processing Concepts The principal tool used to process Web forms stored on UNIX servers is a CGI (Common Gateway Interface)

ANIMATION FOR THE WEB. WHAT ARE WEB ANIMATIONS? Web animations are often saved as GIF, CSS, SVG, WebGL or video Ranges from simple animations (hover effects)

Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.

Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.

Chapter 6 Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc.Slide 1.

Introduction to JavaScript. Introduction What is it? How does it work? What is Java? Learning JavaScript JavaScript Statements JavaScript and HTML forms.

Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

 Real world › Bimanual  Mouse and keyboard? › Unintuitive › One point  Special device? › Expensive › Still not very intuitive.

MIT 511- Web Design & Usability

Chapter 2 Developing a Web Page.

Dreamweaver B 簡至攸.

Animation for the Web.

Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum

Lecture 3 Sarsenova Zhibek.

Getting Started with Dreamweaver

The Web Wizard’s Guide To DHTML and CSS

DHTML Javascript Internet Technology.

Inserting and Working with Links

Week 6 - Presentation 2 Veronica Noone

DHTML Javascript Internet Technology.

Fluency with Information Technology

Video Player BIS1523 – Lecture 22.

An Introduction to Animation

Web Design and Development

Web Design & Development

Lecture 4 Cascading Style Sheep.

Presentation transcript:

CM143 Web Week 6 Links & Navigation CSS Styling & Mouseovers

Navigation Tips By default text links are obvious, change when hovered over and appear differently when they have been previously visited – these are useful attributes! CSS Selectors allow you to style how text links look, but never re-style links to make them unintuitive or more difficult to navigate!

Default Link

Default Visited Link

CSS Selector CSS allows you to style how a link looks in different states: a:link – the default state for a link a:hover – a link being hovered over by the mouse a:visited – a link previously visited a:active – a link in the process of loading Styling these states allows you to modify the aesthetic of your navigation, but should provide you with the scope to keep it intuitive

Mouseovers Mouseover images offer a similar visual reinforcement to hover-changing text links This feedback is crucial for good interface design by alerting users through interaction Mouseovers are usually accomplished in Javascript Dreamweaver has built-in tools for creating simple mouseover image links Mouseover image links have no visited state

Image based link

Image based link - hover