Color. Color Guidelines Use appropriate colors for the audience and site goals Avoid unnecessary busyness through the overuse of color.

Slides:



Advertisements
Similar presentations
Create a Web Site with Publisher 2000 for Marilyn Seguins Class.
Advertisements

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Working with Images and HTML
Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
Iframes & Images Using HTML.
1 Web Design ITM 2010 Tutorial 3 Prepared by Wang Shiyu.
Section 9.1 Identify multimedia design guidelines Identify sources of multimedia files Explain the ethical use of multimedia files Describe multimedia.
Add Images to Improve Your Presentation Day 8. You will learn to Understand Graphics Formats Find Graphics Create Your Own Images Insert an Image on Your.
CIS101 Introduction to Computing HTML Project Two.
SUNY Morrisville-Norwich Campus-Week13 CITA 130 Advanced Computer Applications II Spring 2005 Prof. Tom Smith.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Web Design, 3 rd Edition 3 Planning a Successful Web Site: Part 1.
1 Introducing Macromedia Flash MX – Lesson 1 Flash MX adds content and animation to Web pages Flash MX movies use vector graphics to reduce size and download.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
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.
Web Design, 4 th Edition 5 Typography and Images.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
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.
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
Web Design, 5 th Edition 5 Typography and Images.
Web Technologies Website Development Trade & Industrial Education
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
4 HTML Basics 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.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
IT Introduction to Website Development Welcome!
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.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
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.
An Introduction To Websites With a little of help from “WebPages That Suck.
Microsoft FrontPage 2003 Illustrated Complete Working with Pictures.
HTML Project 4 Creating an Image Map.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
Website Editing From Gingerweb. Re-size your image first Before you start with adding an image to your site it must be resized to suit your page. An image.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Web Design, 3 rd Edition 3 Planning a Successful Web Site: Part 1.
Web Design. Keep a Consistent Appearance Visually show that the site is the same Always use the same background Same graphic style Same type formatting.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.
Notes Chapter 10—Adding Graphics. There are two kinds of graphics on the Internet: those you can use on your own Web pages, and those you cannot.  Many.
Things to Remember When working with digital images.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
4 HTML Basics 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.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
Web Design, 3 rd Edition 3 Planning a Successful Web Site: Part 1.
© 2011 Delmar, Cengage Learning Chapter 4 Adding Images.
Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.
Web Site Development - Process of planning and creating a website.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Imaging and Design for Online Environment
Images.
Images.
DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW
Chapter 4 Adding Images.
Adding Images.
Images.
Images.
Images.
ICT Communications Lesson 4: Creating Content for the Web
Adding Images.
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
Adding Images.
Presentation transcript:

Color

Color Guidelines Use appropriate colors for the audience and site goals Avoid unnecessary busyness through the overuse of color.

Appropriate Colors Take advantage of some common divisions in the use of color throughout our culture  Primary colors  Business colors  Energy colors  Earth Tones

Avoid Busyness Do not add color for color’s sake. Should have a justifiable rationale for how it will help the user better understand a message

What colors to use There are only 22 colors that will always display correctly on the web Others are only consistent part of the time

Web-safe Colors Web-safe colors – 216 colors a/complete_websafe_216/test.html a/complete_websafe_216/test.html Really-Safe Pallet – 22 colors a/complete_websafe_216/reallysafe_palette.html a/complete_websafe_216/reallysafe_palette.html

Color Harmony A color scheme based on analogous colors A color scheme based on complementary colors Information courtesy of:

Graphic Formats The three most widely used file formats for graphics are GIF, JPEG, and PNG:  GIF files are small and load fast  JPEG files are usually larger than GIF, but are best- suited for photographs  PNG was created as a license-free alternative to GIF When you save a Web page in which you have inserted a picture, you must be sure to save the picture to the Web site's images folder.  Embedded file

Insert a marquee on a Web page A marquee is an eye-catching graphic that you can add to a Web page. Marquees should be used sparingly because they can easily overpower a page and distract the Web page viewer.

Inserting Pictures Same technique as in Word Keep an eye on download time in the status bar Alternative text  Short phrase that identifies or describes a picture  Identifies the picture’s contents as it is being downloaded  People using browsers that cannot display pictures will see the text instead of the picture  Identifies picture for the visually impaired