COLOR In Web Design. Designing with Color Use contrasting colors Using a small palette of colors helps unify and enhance a design Using a dominant color.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Chapter 8 Creating Style Sheets.
Web Site Development Test 2 Working in DreamWeaver.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 4: Horizontal Rules and Graphical Elements.
The Building Blocks of Design
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with.
Cascading Style Sheets Controlling the Display Of Web Content.
CIS101 Introduction to Computing HTML Project Two.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417 Other web pages In own website New window Same page.
Creating Tables in a Web Site Using an External Style Sheet
Ch10 QQ T F 1.The appearance of text (such as font face and style) incorporated into a Web page graphic will appear as it was when it was created, regardless.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Jane Doe PowerPoint assignment for FAM 332 April 27, 2015.
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 8.2 / Lesson 1 / presentation1a Web Elements.
Content To Date Review Course Work/Labs Assigned to Date Review HTML Image Tag Editing code for image folder Introduce HTML Color Tags Webpage Safe Colors.
Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.
Schoolwires 101 Frequently used “shortcut key” within the editor. ~Created by, Shannon Conley.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Doing L I N K S Links 1: Internal Links Links to anchors on the current page (Internal).
Web Design Rules. #1 Easy to Read Includes: Includes: Navigation Navigation Color Color Text Text Graphics Graphics Backgrounds Backgrounds Borders Borders.
Chapter 6 An Introduction to HTML Pages Tag Nesting You can put two tags together to combine the effects Bold and underlined But make sure.
LESSON 4 Formatting a Worksheet. Borders are often used to separate different groups of data. 1. True 2. False
Web Page Design Principles
Microsoft FrontPage 2003 Illustrated Complete Working with Pictures.
Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web Design and Development for E-Business Jensen J. Zhao.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.
Working With Text Web Design Section 5-9 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Introduction to Web Page Design. General Design Tips.
Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
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.
Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS.
Page Design Issues IWM 14 Information Services for the Web.
1.Click on “Start” menu 2.Click on “ 1. Choose a different layout for your slide.
Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.
ACM 262 INTRODUCTION TO WEB DESIGN Week-7 ACM 262 Course Notes.
Creating Website Using FrontPage 2003 By Heidi Lee.
Concepts Ch 2 Review. 216 Browsers on both PCs and Macs share ___ colors.
Advanced Elements & Advanced HTML Codes AGCJ 407.
CSS. What does it stand for? ___________________.
Cascading Style Sheets (CSS). Learning Objectives To develop an understanding of how CSS can enhance the design of a webpage To create and apply CSS styling.
Color Theory in Web Design
DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW
Madam Hazwani binti Rahmat
How to Add a Reading Progress Bar in WordPress Posts? Guided By: WPGLOBALSUPPORTWPGLOBALSUPPORT.
Graphics.
Embedded with tags..
Making your own PPT The how to’s of PowerPoint.
Web Design Tips.
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
CIS 205—Web Site Design and Development
Does not mean every page should have same layout
Presentation transcript:

COLOR In Web Design

Designing with Color Use contrasting colors Using a small palette of colors helps unify and enhance a design Using a dominant color theme throughout a site helps unify and enhance a design A good plan in design is to create the design without color first, then add as little color as you can to enhance the design.

Use of Color in Web Design Backgrounds Text and foregrounds Images Links Accents

Add color to Web Pages by… Changing style properties including: –Foreground colors on text (font color) –Background colors on the entire page and/or tables –Border colors around tables and images Color can also be added to Web pages with images. –JPEG images for photographs and images with millions of colors –GIF images for flat color images. Distinguish between non-visited and visited links. –Underline links to provide accessibility for those who are color blind.

Color on Web Pages can be limited by…. Browser Capabilities –Browser safe palettes include 216 colors Monitor Capabilities

The End.