Working Graphics. Slide 2 Lecture Overview Formatting Text Understanding whitespace.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

3.02D HTML Overview 3.02 Develop webpages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 8: Image Techniques ©2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Iframes & Images Using HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
© 2011 Delmar, Cengage Learning Chapter 13 Preparing Graphics for the Web.
Image Maps and Graphics Internet Basics and Far Beyond! Mrs. Wilson.
Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
LIST- HYPERLINK- IMAGES
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
Web Page Development Identify elements of a Web Page Start Notepad
Graphics for the Web Graphic formats and other considerations.
IWebFolio Using a Template Tutorial Images in this tutorial:
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
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.
ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417 Other web pages In own website New window Same page.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
HTML Links and Anchors.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Unit 8.2 / Lesson 1 / presentation1a Web Elements.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.
Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
 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) –
HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
Making a Game Linking Slides. To link slides: 1.Prepare your storyboard 2.Complete all slides 3.Link the slides.
HTML Project 4 Creating an Image Map.
HTML presentation Graphics H format H data compression H size H creating or finding H publishing.
Digital Images Can show something that cannot be photographed Illustration- using images that represent or express to make a visual statement.
Multimedia Elements, Text and Graphics Unit B Multimedia Concepts Bob Griffin.
Lesson 8. Dividing the screen horizontally Horizontal Frames.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
Working with Images William Pegram April 1, 2013.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
Multimedia def. Many forms. Multimedia Text Hyperlinks Images Audio Animation Video Text Hyperlinks Images Audio Animation Video.
Graphic Format Factors
Internet Applications Development Lecture 4 L. Obead Alhadreti.
Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
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.
Gradients. What are Gradients? Gradients are graphics files that gradually blend from one shade of color to another. By using gradients as background.
Structured Content Philosophy. Structure 4 Meaning Content meaning is tagged: Tag application is more consistent Special browsers can act smarter Aids.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
Chapter 13 Preparing Graphics for the Web. Creating Slices When you create graphics for the web, you will need to pay attention to different considerations.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
RASTERIZING SHAPES IN PHOTOSHOP RASTERIZE: A process in Photoshop of converting a vector image into a bitmap (or raster) image VECTOR: A vector image is.
WASHINGTON STATE UNIVERSITY EXTENSION Web It!. Teasers vs leads Know your audience! Tease and link Best bits
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 2 Creating Links.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 4.
AET 545 Week 4 Individual Storyboard Resource:Designing Storyboards Create a storyboard for your web-based tutorial using a tool approved by your facilitator,
HTML III ECT 270 Robin Burke.
1.01 Investigate graphic types and file formats.
Web Development A Visual-Spatial Approach
Web Development & Design Foundations with HTML5 7th Edition
How To Use This Template
Graphics (Characteristics 1)
Creating an Image Map.
Project 4 Creating an Image Map.
What do you think is different between these two images?
Presentation transcript:

Working Graphics

Slide 2 Lecture Overview Formatting Text Understanding whitespace

Slide 3 A Graphics Primer There are several types of graphical files Some work on the Web better than others We could spend quite a bit of time talking about images and their characteristics My discussion is quite cursory

Slide 4 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several megabytes Color (bits per pixel) – The more colors, the larger the image Compression – Algorithms exist to compress images without any loss of fidelity

Slide 5 Graphics (Characteristics 2) Interlacing – loads and renders alternating lines to improve perceived performance

Slide 6 Image Maps (Introduction) Simply put, they allow you to create links to other Web pages using images Different links are visited depending on where in the image the user clicked These regions are called hot zones

Slide 7 Image Maps (Creating) Use the element The element contains the name of the image file The usemap attribute contains a bookmark The element contains multiple elements elements define the shape and the link visited when the area is clicked

Slide 8 Image Maps (Best Practices) They are a pain to create by hand You really need a tool to create these easily See ov.do?topTabIndex=CampgroundMap ov.do?topTabIndex=CampgroundMap