Graphics in HTML

1
Graphics in HTML
2
Graphics

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

3
In todays class

• Types of Graphics Files
• Graphics in HTML
• How graphics appear
• Different usage of graphics

4
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

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

6
Graphics in HTML

• First step Copy the graphics into your web
  folder, because graphics is NOT embedded in HTML.
• ltimg srcURLgt
• or ltimg srcfile.namegt
• Can include size parameters
• ltimg srcURL height80 width240gt
• ltimg srcdru.gif height25 width100gt
• Note No closing tag!

7
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

8
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
• 1024x768
• 640x480
• These settings can be changed in control panels

9
The curse of the 5 megapixel camera

• 5 MP 2500 x 2000 pixels
• 2500 x 2000 on an 800x600 monitor gives you this?

10
(No Transcript)
11
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

?
12
Resolution and Pixels
Same monitor, Settings 1600x1200
Settings 800x600
600
1200
750
750
800
1600
13
Resolution and Pixels
Same page, two different resolutions
Which monitor is at 800x600 and which is at
1024x768?
14
How big should your pictures be?

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

15
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?

16
A 1800x1200 image on an 800x600 monitor
17
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.

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

19
A few words about Web Page Fonts

• Web pages load fonts from the system fonts
• Each computer has different system fonts
• If a computer doesnt have the font you specify,
  the page wont 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.

20
Image as hyper link

• Images can also be set as hyper links.
• HTML code
• lta hrefURL"gtltimg srcimage.jpggtlt/agt
• Making image links in Dreamweaver
• High light the image
• Set the link property

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

22
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?

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

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