graphics and hyperlinks

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

Upload: amergin-hone

Post on 31-Dec-2015

38 views

Category:

Documents


2 download

DESCRIPTION

Graphics and Hyperlinks. Graphics on the web are what make a web page interesting Hyperlinks are what make it a “web”. Lecture Thursday Night. Pamela Davis Kivelson Artist - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Graphics and Hyperlinks

Graphics and HyperlinksGraphics and Hyperlinks

Graphics on the web are what Graphics on the web are what make a web page interestingmake a web page interesting

Hyperlinks are what make it a Hyperlinks are what make it a “web”“web”

Page 2: Graphics and Hyperlinks
Page 3: Graphics and Hyperlinks

Lecture Thursday NightLecture Thursday Night

Pamela Davis KivelsonPamela Davis Kivelson ArtistArtist Thursday, April 1, 7:30-9:00 p.m.Thursday, April 1, 7:30-9:00 p.m.

Radiology Building AuditoriumRadiology Building Auditorium

Ms. Kivelson, a nationally known artist, Ms. Kivelson, a nationally known artist, is the creator of the NSF-sponsored is the creator of the NSF-sponsored Poster Project, Women in Science, Poster Project, Women in Science, Mathematics, and Engineering. Mathematics, and Engineering.

Page 4: Graphics and Hyperlinks

Cool Web PagesCool Web Pages

What is the coolest thing on a web What is the coolest thing on a web page?page?

What makes a web page special?What makes a web page special?

Page 5: Graphics and Hyperlinks

Web Page 2 AssignmentWeb Page 2 Assignment

Due Friday at 5 pmDue Friday at 5 pm Print out code of index.html pagePrint out code of index.html page In code, circle ALL the HTML tags In code, circle ALL the HTML tags

for images, hyperlinks, and title for images, hyperlinks, and title and explain what each is doingand explain what each is doing

Page 6: Graphics and Hyperlinks

GraphicsGraphics

Question: How does a web page Question: How does a web page include graphics? include graphics?

Are the graphics included in the Are the graphics included in the HTML file or separate files?HTML file or separate files?

Page 7: Graphics and Hyperlinks

Graphics on WWWGraphics on WWW

Types of Graphics FilesTypes of Graphics Files Graphics in HTMLGraphics in HTML How graphics appearHow graphics appear Making Cool Graphics in PhotoshopMaking Cool Graphics in Photoshop

Page 8: Graphics and Hyperlinks

Graphics: JPGsGraphics: JPGs

JPG (JPEG) is a file format standing for JPG (JPEG) is a file format standing for Joint Photographic Experts GroupJoint Photographic Experts Group

Use .jpg ending on filesUse .jpg ending on files JPGs are the best for color photos and JPGs are the best for color photos and

high-color imageshigh-color images Scanned photos should be saved as JPGsScanned photos should be saved as JPGs Photoshop, Fireworks or other image Photoshop, Fireworks or other image

editor is good for editing JPGseditor is good for editing JPGs

Page 9: Graphics and Hyperlinks

Graphics: GIFsGraphics: GIFs

GIF stands for Graphic Image FormatGIF stands for Graphic Image Format .gif ending on GIF files.gif ending on GIF files GIFs are perfect for graphical images GIFs are perfect for graphical images

with only a few colors (e.g. text with only a few colors (e.g. text headers)headers)

Very bad for photographsVery bad for photographs Photoshop, Fireworks, PowerPoint and Photoshop, Fireworks, PowerPoint and

others good for GIFsothers good for GIFs

Page 10: Graphics and Hyperlinks

Graphics in HTMLGraphics in HTML

<img src=“URL”> or <img <img src=“URL”> or <img src=“file.name”> src=“file.name”>

Can include size parametersCan include size parameters• <img src=“URL” height=80 <img src=“URL” height=80

width=240>width=240>• <img src=“<img src=“dru.gifdru.gif” height=25 ” height=25

width=100>width=100> Note: No closing tag!Note: No closing tag!

Page 11: Graphics and Hyperlinks

File NamesFile Names

Spaces in file names are no-nos for Spaces in file names are no-nos for the WWWthe WWW

Internet Explorer is fine with Internet Explorer is fine with spaces, Netscape does not work spaces, Netscape does not work with spaces in file nameswith spaces in file names

cASe SenSitiViTYcASe SenSitiViTY

Page 12: Graphics and Hyperlinks

Folders (Directories) Folders (Directories)

AFS Space or P Drive

Web Directory

Page 13: Graphics and Hyperlinks

HierarchyHierarchy

A hierarchy is a layered system with some A hierarchy is a layered system with some levels being higher and some lowerlevels being higher and some lower

AFS/P Drive is a higher level directory than AFS/P Drive is a higher level directory than its sub-directory, its sub-directory, webweb

Web directory has sub-folders, e.g. imagesWeb directory has sub-folders, e.g. images Path to images from web isPath to images from web is

images/filenameimages/filename Good news: Dreamweaver takes care of Good news: Dreamweaver takes care of

this for you!this for you!

Page 14: Graphics and Hyperlinks

Case SensitivityCase Sensitivity

Index.html and index.html are the Index.html and index.html are the same file to MS Windows, but not same file to MS Windows, but not to a web serverto a web server

Inserting Graphics: Inserting Graphics: • MVC-003S.JPGMVC-003S.JPG vs. vs. Mvc-003s.jpgMvc-003s.jpg

Many people have problems with Many people have problems with their websites because of thistheir websites because of this

Page 15: Graphics and Hyperlinks

Web Page FontsWeb Page Fonts

Web pages load fonts from the Web pages load fonts from the system fontssystem fonts

Each computer has different Each computer has different system fontssystem fonts

If a computer doesn’t have the font If a computer doesn’t have the font you specify, the page won’t look you specify, the page won’t look right –Times Roman is substitutedright –Times Roman is substituted

Page 16: Graphics and Hyperlinks

Types of Graphics FilesTypes of Graphics Files

JPGs (.jpg) - PhotographsJPGs (.jpg) - Photographs GIFs (.gif) - “Graphics” - non GIFs (.gif) - “Graphics” - non

photographic imagesphotographic images

Page 17: Graphics and Hyperlinks

PixelsPixels

A pixel is a colored square dot. A pixel is a colored square dot. Many of these dots make up an image.Many of these dots make up an image. Computer monitor resolution is Computer monitor resolution is

measured in pixelsmeasured in pixels• e.g. 800x600 is 800 pixels wide by 600 e.g. 800x600 is 800 pixels wide by 600

pixels tallpixels tall• 1024x768 1024x768 • 640x480640x480• These settings can be changed in control These settings can be changed in control

panelspanels

Page 18: Graphics and Hyperlinks

Monitor ResolutionMonitor Resolution

Most monitors are set to 800x600 or Most monitors are set to 800x600 or 1024x7681024x768

800x600 is 50% of monitors currently800x600 is 50% of monitors currently 1024x768 is 30%1024x768 is 30% If you have an image 750 pixels wide, If you have an image 750 pixels wide,

it will fill almost the whole screenit will fill almost the whole screen Question: If your monitor is set to Question: If your monitor is set to

1600x1200 resolution, how much of 1600x1200 resolution, how much of the screen will that image fill?the screen will that image fill?

Page 19: Graphics and Hyperlinks

High ResolutionHigh Resolution

The larger the number, the higher The larger the number, the higher the resolutionthe resolution• 1024x768 is higher than 800x6001024x768 is higher than 800x600

I use 1024x768 resolution usuallyI use 1024x768 resolution usually

Page 20: Graphics and Hyperlinks

The curse of the 5 megapixel The curse of the 5 megapixel cameracamera

5 MP = 2500 x 2000 pixels5 MP = 2500 x 2000 pixels 1600 x 1200 = ?? MP ??1600 x 1200 = ?? MP ?? 2500 x 2000 on an 800x600 2500 x 2000 on an 800x600

monitor gives you thismonitor gives you this

Page 21: Graphics and Hyperlinks
Page 22: Graphics and Hyperlinks

Graphics and ResolutionGraphics and Resolution

Determine how much of the screen Determine how much of the screen an image will cover:an image will cover:• You have an image that is 750 pixels You have an image that is 750 pixels

wide and 500 pixels tallwide and 500 pixels tall• How will it look at 800x600 monitor How will it look at 800x600 monitor

resolution?resolution?• How will it look at 1600x1200?How will it look at 1600x1200?• Draw monitor box and draw image Draw monitor box and draw image

inside itinside it?

Page 23: Graphics and Hyperlinks

Resolution and PixelsResolution and Pixels

Settings: 800x600Same monitor,Settings: 1600x1200

800

600 1200

1600

750

750

Page 24: Graphics and Hyperlinks

Resolution and PixelsResolution and Pixels

Same page, two different resolutions

Which monitor is at 800x600 and which is at 1024x768?

Page 25: Graphics and Hyperlinks

How big should your How big should your pictures be?pictures be?

Assume that people have a Assume that people have a monitor resolution of 800x600monitor resolution of 800x600

How big should you make your How big should you make your images?images?

Page 26: Graphics and Hyperlinks

Scanning ImagesScanning Images

Scanners scan in Scanners scan in DPI - dots per inchDPI - dots per inch

Each dot becomes a Each dot becomes a pixelpixel

300 DPI means 300 300 DPI means 300 Pixels/inch of imagePixels/inch of image

If you scan a 6” x 4” If you scan a 6” x 4” photo at 300 DPI, photo at 300 DPI, how big will the how big will the picture be?picture be?

Page 27: Graphics and Hyperlinks

ScanningScanning

300 DPI x 6 inches = 1800 pixels 300 DPI x 6 inches = 1800 pixels 300 DPI x 4 inches = 1200 pixels300 DPI x 4 inches = 1200 pixels

Answer: 1800 x 1200 pixelsAnswer: 1800 x 1200 pixels• Is this too big for a web page?Is this too big for a web page?

Page 28: Graphics and Hyperlinks

A 1800x1200 image on an A 1800x1200 image on an 800x600 monitor800x600 monitor

Page 29: Graphics and Hyperlinks

Re-sizing ImagesRe-sizing Images

You should design your web page You should design your web page so that everything will fit on the so that everything will fit on the screen or fall below. Nobody likes screen or fall below. Nobody likes to scroll to the right!to scroll to the right!

A picture of your family wouldn’t be A picture of your family wouldn’t be any good if all you could fit on the any good if all you could fit on the screen is one family member at a screen is one family member at a timetime

Page 30: Graphics and Hyperlinks

Two ways to resizeTwo ways to resize

Resize the image in Dreamweaver Resize the image in Dreamweaver by grabbing a corner and dragging by grabbing a corner and dragging (hold down shift key to keep it (hold down shift key to keep it proportionalproportional))

Resize the image in a graphics Resize the image in a graphics program and then re-save it. program and then re-save it. • This makes a smaller file, good for This makes a smaller file, good for

faster downloadsfaster downloads

Page 31: Graphics and Hyperlinks

Making Graphics in Making Graphics in PhotoshopPhotoshop

Photoshop allows very cool Photoshop allows very cool graphicsgraphics

Hard to use, but worth the effortHard to use, but worth the effort

Page 32: Graphics and Hyperlinks

Key ConceptsKey Concepts

Photoshop uses Layers for different Photoshop uses Layers for different elementselements

Type is editableType is editable Arrow Tool allows you to move the current Arrow Tool allows you to move the current

layerlayer Paint bucketPaint bucket Eye DropperEye Dropper Magic WandMagic Wand Save for Web – JPG or GIFSave for Web – JPG or GIF

Page 33: Graphics and Hyperlinks