Graphics in HTML. Graphics  Question: How does a web page include graphics?  Are the graphics included in the HTML file or separate files?

Slides:

Advertisements

Similar presentations

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.

Advertisements

A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.

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.

ETT 429 Spring 2007 Digital Photography/Scanners.

Internet Publishing / Dreamweaver Luke E. Reese CARRS

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.

Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Acadia Institute for Teaching and Technology Basic Web Page Design for Courses.

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.

Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image file types – Evaluate the purpose of alternative text –

Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.

MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.

Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language.

Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.

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.

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.

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.

Chapter 1 Review Images Links Images II Pictures and Extensions.

HOW TO SAVE FILES FOR WEB. Back up all your original files (make copies) so you don’t end up accidentally ruining your originals. Remember, web files.

1 Essential HTML coding By Fadi Safieddine (Week 2)

Graphics and Hyperlinks b Graphics on the web are what make a web page interesting b Hyperlinks are what make it a “web”

Chapter 6 Images in Dreamweaver & Fireworks Mrs. Johnson Web Design.

 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.

CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.

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 in web pages. Images Why do we use images? They add interest, and keep the user from being bored They convey information –Charts are easier to.

HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia.

Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the.

Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web.

Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.

8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.

University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images.

Section 8.1 Create a custom theme Design a color scheme Use shared borders Section 8.2 Identify types of graphics Identify and compare graphic formats.

Introduction to Photoshop Altering photos 1 pixel at a time.

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.

Chapter 2 Designing Web Pages With HTML JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin,

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

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.

Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.

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

Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,

Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 

Information Technology Images: Types, Resolution and Techniques.

The Web. Web Servers and File Transfer Protocol (FTP)

Digital Image Editing Presented by John Hohn. File Formats JPEG – Joint Photographic Experts Group PNP – Portable Network Graphics GIF – Graphic Interchange.

WRA 210: 10/7/13 IMAGES. TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web.

Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS

Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.

WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.

Review session for Web development. Today’s class Review the web designing. Filling out instructor evaluation form.

Understanding Images. Pixels pixels Every image is made up of very small squares called pixels, and each pixel represents a color or shade. Pixels within.

Editing images using Microsoft Photo Editor and Paint

Section 8.1 Section 8.2 Create a custom theme Design a color scheme

Understanding Web Graphics

Exploring Computer Science - Lesson 3-4

Exploring Computer Science - Lesson 3-4

With Microsoft FrontPage 2000

Where to Start When Re-Designing a Webpage

DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW

Chapter 4 Adding Images.

Exploring Computer Science - Lesson 3-4

Create and edit web pages 2

DREAMWEAVER MX 2004 Chapter 4 Working with Images

Creating Images for the Web

Color and Images.

Presentation transcript:

Graphics in HTML

Graphics  Question: How does a web page include graphics?  Are the graphics included in the HTML file or separate files?

In today’s class  Types of Graphics Files  Graphics in HTML  How graphics appear  Different usage of graphics

Graphics: JPGs  JPG (JPEG) is a file format standing for Joint Photographic Experts Group  Use.jpg ending on files  JPGs are the best for color photos and high-color images  Scanned photos should be saved as JPGs  Photoshop, Fireworks or other image editor is good for editing JPGs

Graphics: GIFs  GIF stands for Graphic Image Format .gif ending on GIF files  GIFs are perfect for graphical images with only a few colors (e.g. text headers, banners etc.)  Very bad for photographs  GIF image can have a transparent background.

Graphics in HTML  First step: Copy the graphics into your web folder, because graphics is NOT embedded in HTML.   or  Can include size parameters  Note: No closing tag!

Image File Names  Spaces in file names are trouble for the WWW  Internet Explorer is fine with spaces, Netscape sometimes does not work with spaces in file names.  cASe SenSitiViTY  Inserting Graphics: MVC-003S.JPG vs. Mvc-003s.jpg  Many people have problems with their websites because of this

Pixels  A pixel is a colored square dot.  Many of these dots make up an image.  Computer monitor resolution is measured in pixels e.g. 800x600 is 800 pixels wide by 600 pixels tall 1024x x480 These settings can be changed in control panels

The curse of the 5 megapixel camera  5 MP = 2500 x 2000 pixels  2500 x 2000 on an 800x600 monitor gives you this 

Graphics and Resolution  Determine how much of the screen an image will cover: You have an image that is 750 pixels wide and 500 pixels tall How will it look at 800x600 monitor resolution? How will it look at 1600x1200? Draw monitor box and draw image inside it ?

Resolution and Pixels Settings: 800x600 Same monitor, Settings: 1600x

Resolution and Pixels Same page, two different resolutions Which monitor is at 800x600 and which is at 1024x768?

How big should your pictures be?  Assume that people have a monitor resolution of 800x600  How big should you make your images?

Scanning Images  Scanners scan in DPI - dots per inch  Each dot becomes a pixel  300 DPI means 300 Pixels/inch of image  If you scan a 6” x 4” photo at 300 DPI, how big will the picture be?

A 1800x1200 image on an 800x600 monitor

Re-sizing Images  You should design your web page so that everything will fit on the screen or fall below.  Nobody likes to scroll to the right!  Generally, an image should not exceed 2/3 of the width of the screen.

Three ways to resize  Resize the image in Dreamweaver by grabbing a corner and dragging (hold down shift key to keep it proportional)  Resize the image in a graphics program (e.g. Photoshop) and then re-save it. This makes a smaller file, good for faster downloads  Cropping the image in dreamweaver.

A few words about Web Page Fonts  Web pages load fonts from the system fonts  Each computer has different system fonts  If a computer doesn’t have the font you specify, the page won’t look right –Times New Roman font is substituted  Times New Roman and Arial Font are the most safe font for web pages.  If you want to use other artistic font, make it an image.

Image as hyper link  Images can also be set as hyper links.  HTML code  Making image links in Dreamweaver High light the image Set the link property

Image Maps  An Image map is a BIG image that serves as navigation device.  You can create several hot spot (clickable area) in the image, and associate each spot with different URL.  Example of creating image map in Dreamweaver.  Read Dreamweaver tutorial chapter 3 for more information about image map.

Rollover Image  Rollover images are a set of images placed at the same position in the web page. When mouse move in and out the position, different images will be displayed.  Using rollover images can create a dynamic effect for your web page.  Using Dreamweaver to create rollover images.  What is under beneath?

JavaScript  JavaScript is an aid to HTML in doing cool, interactive things  JavaScript originated as a baby version of the popular programming language Java  EventHandlers – onMouseOver, onMouseOut  Hard coding Javescript is out of scope of this class. Dreamweaver can do many JS for you.

Fridays lab  Using Photoshop to create rollover images.  Learning a few more features of web page design.  Create our personal web site with features we have learned so far.