Graphics and Hyperlinks

1
Graphics and Hyperlinks

• Graphics on the web are what make a web page
  interesting
• Hyperlinks are what make it a web

2
(No Transcript)
3
Lecture Thursday Night

• Pamela Davis Kivelson
• Artist
• Thursday, April 1, 730-900 p.m.Radiology
  Building AuditoriumMs. Kivelson, a nationally
  known artist, is the creator of the NSF-sponsored
  Poster Project, Women in Science, Mathematics,
  and Engineering.

4
Cool Web Pages

• What is the coolest thing on a web page?
• What makes a web page special?

5
Web Page 2 Assignment

• Due Friday at 5 pm
• Print out code of index.html page
• In code, circle ALL the HTML tags for images,
  hyperlinks, and title and explain what each is
  doing

6
Graphics

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

7
Graphics on WWW

• Types of Graphics Files
• Graphics in HTML
• How graphics appear
• Making Cool Graphics in Photoshop

8
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

9
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)
• Very bad for photographs
• Photoshop, Fireworks, PowerPoint and others good
  for GIFs

10
Graphics 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!

11
File Names

• Spaces in file names are no-nos for the WWW
• Internet Explorer is fine with spaces, Netscape
  does not work with spaces in file names
• cASe SenSitiViTY

12
Folders (Directories)
Web Directory
AFS Space or P Drive
13
Hierarchy

• A hierarchy is a layered system with some levels
  being higher and some lower
• AFS/P Drive is a higher level directory than its
  sub-directory, web
• Web directory has sub-folders, e.g. images
• Path to images from web is images/filename
• Good news Dreamweaver takes care of this for
  you!

14
Case Sensitivity

• Index.html and index.html are the same file to MS
  Windows, but not to a web server
• Inserting Graphics
• MVC-003S.JPG vs. Mvc-003s.jpg
• Many people have problems with their websites
  because of this

15
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 Roman is
  substituted

16
Types of Graphics Files

• JPGs (.jpg) - Photographs
• GIFs (.gif) - Graphics - non photographic images

17
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

18
Monitor Resolution

• Most monitors are set to 800x600 or 1024x768
• 800x600 is 50 of monitors currently
• 1024x768 is 30
• If you have an image 750 pixels wide, it will
  fill almost the whole screen
• Question If your monitor is set to 1600x1200
  resolution, how much of the screen will that
  image fill?

19
High Resolution

• The larger the number, the higher the resolution
• 1024x768 is higher than 800x600
• I use 1024x768 resolution usually

20
The curse of the 5 megapixel camera

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

21
(No Transcript)
22
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

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

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

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

27
Scanning

• 300 DPI x 6 inches 1800 pixels
• 300 DPI x 4 inches 1200 pixels
• Answer 1800 x 1200 pixels
• Is this too big for a web page?

28
A 1800x1200 image on an 800x600 monitor
29
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!
• A picture of your family wouldnt be any good if
  all you could fit on the screen is one family
  member at a time

30
Two 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 and then
  re-save it.
• This makes a smaller file, good for faster
  downloads

31
Making Graphics in Photoshop

• Photoshop allows very cool graphics
• Hard to use, but worth the effort

32
Key Concepts

• Photoshop uses Layers for different elements
• Type is editable
• Arrow Tool allows you to move the current layer
• Paint bucket
• Eye Dropper
• Magic Wand
• Save for Web JPG or GIF

33
(No Transcript)