1 / 24

Graphics in HTML

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.

tierra
Download Presentation

Graphics in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 today’s 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. • <img src=“URL”> • or <img src=“file.name”> • Can include size parameters • <img src=“URL” height=80 width=240> • <img src=“dru.gif” height=25 width=100> • 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. 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 ?

  11. Resolution and Pixels Same monitor, Settings: 1600x1200 Settings: 800x600 600 1200 750 750 800 1600

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

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

  14. 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?

  15. A 1800x1200 image on an 800x600 monitor

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

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

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

  19. Image as hyper link • Images can also be set as hyper links. • HTML code • <a href=“URL"><img src=“image.jpg“></a> • Making image links in Dreamweaver • High light the image • Set the link property

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

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

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

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

More Related