GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.

Slides:

Advertisements

Similar presentations

Working with Images and HTML

Advertisements

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.

Web Development & Design Foundations with XHTML Chapter 4 Key Concepts.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.

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.

1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.

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.

Images. Image File Formats All browsers support All browsers support –GIF (Graphic Interchange Format)  limited to 256 colors  lossless compression.

Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

BASIC HTML TUTORIAL Amber Brady. HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a.

Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.

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.

THE COLORS OF LIGHT RED, GREEN and BLUE

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.

XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.

 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.

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) –

Images in HTML PowerPoint How images are used in HTML.

Images & Image Maps 16 th February. Images & Image Maps Web authors can add icons, logos and high impact images to their pages Images enhance web pages.

CHAPTER 4 LINKS Creating links between pages Linking to other sites links.

1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.

1 Using HTML and JavaScript to Develop Websites. Using Images.

Image File Types Module 4: Working with Images LESSON 5.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.

Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.

Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.

Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.

HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.

Images Worksheet. Web template Download the template folder Unzip and save in your documents Rename the folder to “images work” without quotes.

Module 4- Build a Game Understanding Pictures Compression – Making things smaller.

Using the Sony DSC-P52 Camera Sunday, December 06, 2015.

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.

FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.

Raster Graphics 2.01 Investigate graphic image design.

Kevin Murphy Images and Web Pages Masters Project CS 490.

Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.

Image File Formats Which one is right for me?. The Only Three Image Formats Your Will Ever Need: Names Jpg “Joint Photographic Experts Group” Png “Portable.

WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.

HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.

Inserting and Working with Images

DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW

Computer Graphics Different Images File.

Chapter 4 Adding Images.

Choosing the right image format

HTML Images CS 1150 Spring 2017.

Graphics and Animation

Graphics and Animation

Web Development & Design Foundations with HTML5 7th Edition

Creating Images for the Web

HTML Images CS 1150 Fall 2016.

HTML Text editors and adding graphics

Color and Images.

Lesson 7 Graphics.

Presentation transcript:

GRAPHICS

PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest and attention Help to create visual structure for information and links on the page Communicate or explain ideas visually

GIF, JPG AND PNG – WHAT’S THE DIFFERENCE? GIF Low resolution, support transparency, animated files Logo, icons, symbols with solid areas of color JPG Small size, clear, crisp Complex images and photographs PNG supports lossless data compression Not a photo but more complex than a GIF Charts or graphs with several colors

SAVING CORRECTLY IS IMPORTANT! YourAccountNumber\Portfolio_YourName\images\ Images folder should contain 3 pictures ScreenShot - Designer ScreenShot - Blocks Pic of you working

HTML FOR GRAPHICS SRC The source of the “Code” Gives the instructions Alt Alternative text (for accessibility – can be read) Width/Height- why important to specify? To ensure there is space for the image somewhere on the webpage.

HTML EXAMPLE: