creating the pages part five graphics. file format basics you can currently use only three image...

60
Creating the pages Creating the pages Part Five Part Five Graphics Graphics

Post on 22-Dec-2015

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Creating the pagesCreating the pages

Part FivePart Five

GraphicsGraphics

Page 2: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

File Format BasicsFile Format Basics

You can currently use only three image file You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new formats on the Web: GIF, JPG, and PNG. A new format, SVG, is not yet in common use.format, SVG, is not yet in common use.

These formats all compress images to create These formats all compress images to create smaller files. Knowing which file format to use for smaller files. Knowing which file format to use for which type of image is important.which type of image is important.

If you choose the wrong file type, your image If you choose the wrong file type, your image won’t compress or display properlywon’t compress or display properly

Page 3: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

GIF FormatGIF Format

GIF uses a lossless compression GIF uses a lossless compression technique, meaning that no color technique, meaning that no color information is discarded when the image is information is discarded when the image is compressedcompressed

The color depth of GIF is 8-bit, allowing a The color depth of GIF is 8-bit, allowing a palette of no more than 256 colorspalette of no more than 256 colors

GIF excels at compressing and displaying GIF excels at compressing and displaying flat color areas, making it the logical flat color areas, making it the logical choice for line art and color graphicschoice for line art and color graphics

Page 4: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

GIF TransparencyGIF Transparency With GIF files, you can choose any one color With GIF files, you can choose any one color

in an image to appear as transparent in the in an image to appear as transparent in the browserbrowser

The background color or pattern will show The background color or pattern will show through the areas that you have designated through the areas that you have designated as transparentas transparent

Using transparent areas allows you to create Using transparent areas allows you to create graphics that appear to have an irregular graphics that appear to have an irregular outside shape, rather than being bounded by outside shape, rather than being bounded by a rectanglea rectangle

Page 5: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 6: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

GIF AnimationGIF Animation

The GIF format lets you store multiple images The GIF format lets you store multiple images and timing information about the images in a and timing information about the images in a single filesingle file

This means that you can build animations This means that you can build animations consisting of multiple static images that play consisting of multiple static images that play continuously, creating the illusion of motion continuously, creating the illusion of motion

Page 7: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 8: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 9: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

JPG FormatJPG Format

JPG is best for photographs or continuous tone JPG is best for photographs or continuous tone imagesimages

JPGs are 24-bit RGB images that allow millions JPGs are 24-bit RGB images that allow millions of colorsof colors

JPGs use a “lossy” compression routine JPGs use a “lossy” compression routine especially designed for photographic images. especially designed for photographic images. When the image is compressed, some color When the image is compressed, some color information is discarded, resulting in a loss of information is discarded, resulting in a loss of quality from the original image.quality from the original image.

Page 10: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

JPG FormatJPG Format

When you create the JPG file, you can also When you create the JPG file, you can also manually balance the amount of compression manually balance the amount of compression versus the resulting image qualityversus the resulting image quality

The higher the compression, the lower the The higher the compression, the lower the image quality. You can play with this setting image quality. You can play with this setting to create files that are as small as possible to create files that are as small as possible but still look good. but still look good.

Many photos can sustain quite a bit of Many photos can sustain quite a bit of compression while still maintaining image compression while still maintaining image integrityintegrity

Page 11: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 12: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

PNG FormatPNG Format

A royalty-free file format that is intended to A royalty-free file format that is intended to replace GIFreplace GIF

This lossless format compresses 8-bit images This lossless format compresses 8-bit images to smaller file sizes than GIFto smaller file sizes than GIF

PNG supports transparency and interlacing PNG supports transparency and interlacing but not animationbut not animation

Page 13: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

SVG FormatSVG Format

A new standard from the W3CA new standard from the W3C A language for describing two-dimensional A language for describing two-dimensional

graphics using XMLgraphics using XML SVG graphics are scalable to different display SVG graphics are scalable to different display

resolutions and are printableresolutions and are printable Not yet supported by most browsersNot yet supported by most browsers

Page 14: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Interlacing & Progressive DisplayInterlacing & Progressive Display

Most Web-capable graphics editors let you Most Web-capable graphics editors let you save images in an interlaced or progressive save images in an interlaced or progressive format format

You can choose this display option when You can choose this display option when creating GIF, PNG, and JPG filescreating GIF, PNG, and JPG files

GIF and PNG files use interlacing, while GIF and PNG files use interlacing, while JPGs use progressionJPGs use progression

Page 15: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Interlacing & Progressive DisplayInterlacing & Progressive Display

Interlacing and progressive display are Interlacing and progressive display are generally the same thing—the gradual display generally the same thing—the gradual display of a graphic in a series of passes as the data of a graphic in a series of passes as the data arrives in the browserarrives in the browser

Page 16: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 17: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Where You Can Find ImagesWhere You Can Find Images

Stock photo collectionsStock photo collections Digital camerasDigital cameras ScannerScanner Public-domain Web sitesPublic-domain Web sites Clip artClip art Create your ownCreate your own Remember to respect copyright laws!Remember to respect copyright laws!

Page 18: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Which format?Which format?

GIF: The everyday file format for all types of GIF: The everyday file format for all types of simple colored graphics and line art. Use GIF simple colored graphics and line art. Use GIF sparingly for its animation capabilities to add sparingly for its animation capabilities to add visual interest to your pages. GIF’s visual interest to your pages. GIF’s transparency feature lets you seamlessly transparency feature lets you seamlessly integrate graphics into your Web site.integrate graphics into your Web site.

JPG: Use JPG for all 24-bit full color JPG: Use JPG for all 24-bit full color photographic images, as well as more photographic images, as well as more complicated graphics that contain color complicated graphics that contain color gradients, shadows, and featheringgradients, shadows, and feathering

Page 19: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Which format?Which format?

PNG: If the browsers are supporting it, use PNG: If the browsers are supporting it, use PNG as a substitute for GIF. Because PNG PNG as a substitute for GIF. Because PNG doesn’t compress your 24-bit images as well doesn’t compress your 24-bit images as well as JPG, don’t use it for photos.as JPG, don’t use it for photos.

Page 20: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Color DepthColor Depth

The amount of data used to create color on a The amount of data used to create color on a display is called the display is called the color depthcolor depth

If your users have a 24-bit color display, they If your users have a 24-bit color display, they can appreciate the full-color depth of your can appreciate the full-color depth of your images. But many monitors cannot display 24-bit images. But many monitors cannot display 24-bit images.images.

If your monitor doesn’t support the full color If your monitor doesn’t support the full color depth of an image, the browser must resort to depth of an image, the browser must resort to mixing colors that attempt to match the original mixing colors that attempt to match the original colors in the imagecolors in the image

Page 21: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 22: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using the <img> elementUsing the <img> element

By definition, <img> is a replaced element, By definition, <img> is a replaced element, meaning that the browser replaces the <img> meaning that the browser replaces the <img> element with the image file referenced in the element with the image file referenced in the SRC attributeSRC attribute

<img> is an empty element, so never use a <img> is an empty element, so never use a closing tag with itclosing tag with it

Page 23: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using the <img> elementUsing the <img> element

The browser treats the image as it treats a The browser treats the image as it treats a character: normal image alignment is to the character: normal image alignment is to the baseline of the text. Images that are within a line baseline of the text. Images that are within a line of text must have spaces on both sides, or the of text must have spaces on both sides, or the text will touch the image.text will touch the image.

Page 24: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 25: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 26: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 27: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Specifying alt and title TextSpecifying alt and title Text

The alt text is displayed if the image does not The alt text is displayed if the image does not appear, providing a description of the image appear, providing a description of the image

The title text appears as a pop-up when the user The title text appears as a pop-up when the user places the cursor over the imageplaces the cursor over the image

Page 28: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 29: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 30: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Specifying width and heightSpecifying width and height

Every <img> element on your site should contain Every <img> element on your site should contain width and height attributes width and height attributes

These attributes provide important information to These attributes provide important information to the browser by specifying the amount of space the browser by specifying the amount of space to reserve for the imageto reserve for the image

This information dramatically affects the way This information dramatically affects the way your pages download to the user, especially at your pages download to the user, especially at slower connection speedsslower connection speeds

Page 31: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 32: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 33: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 34: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Sizing Graphics for the PageSizing Graphics for the Page

One of the easiest ways to make your graphics One of the easiest ways to make your graphics download quickly is to keep their dimensions download quickly is to keep their dimensions small and appropriate to the size of the pagesmall and appropriate to the size of the page

Page 35: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 36: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Removing the Hypertext BorderRemoving the Hypertext Border

When you create a hypertext image, the When you create a hypertext image, the browser’s default behavior is to display the browser’s default behavior is to display the hypertext border around the imagehypertext border around the image

This border is often unnecessary as users often This border is often unnecessary as users often use their mouse to point to each image to see if use their mouse to point to each image to see if the hypertext cursor displaysthe hypertext cursor displays

To remove the hypertext border, add the To remove the hypertext border, add the border=“0” attribute to your <img> tagborder=“0” attribute to your <img> tag

Page 37: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 38: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Aligning Text and ImagesAligning Text and Images

You can align text along an image border using You can align text along an image border using the align attributethe align attribute

Text and image alignment defaults to bottom Text and image alignment defaults to bottom alignment, which means the bottom of the text alignment, which means the bottom of the text aligns with the bottom edge of the imagealigns with the bottom edge of the image

Valid values are: top, middle, bottom, left, rightValid values are: top, middle, bottom, left, right

Page 39: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 40: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 41: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Adding White SpaceAdding White Space

Add white space around your images to reduce Add white space around your images to reduce clutter and improve readabilityclutter and improve readability

To increase the white space around an image, To increase the white space around an image, you can add the vspace and hspace attributes to you can add the vspace and hspace attributes to the <img> element, and set the values to a pixel the <img> element, and set the values to a pixel amountamount

Page 42: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 43: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 44: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using Single-Pixel RulesUsing Single-Pixel Rules

Single-pixel lines or rules work exactly like Single-pixel lines or rules work exactly like transparent pixel GIFs, except they are a single transparent pixel GIFs, except they are a single color rather than transparentcolor rather than transparent

You can change a single-pixel rule to any size You can change a single-pixel rule to any size by using the width and height attributes by using the width and height attributes

This creates reusable graphics of horizontal or This creates reusable graphics of horizontal or vertical lines of varying thickness that you can vertical lines of varying thickness that you can use in many ways in your Web pages to use in many ways in your Web pages to enhance your layoutenhance your layout

Page 45: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 46: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using Background ImagesUsing Background Images

You can use the background attribute to the You can use the background attribute to the <body> element to tile images across the <body> element to tile images across the background of a Web pagebackground of a Web page

You can use any image as a background You can use any image as a background graphic, though many are not appropriate for the graphic, though many are not appropriate for the task. In too many Web sites, complicated task. In too many Web sites, complicated background graphics distract the user.background graphics distract the user.

If your site includes a lot of text, avoid dark or If your site includes a lot of text, avoid dark or overly complex backgroundsoverly complex backgrounds

Page 47: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 48: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

CSS Background PropertiesCSS Background Properties

Cascading Style Sheets allow you more control Cascading Style Sheets allow you more control over background image tiling than standard over background image tiling than standard HTMLHTML

To apply a background image, use the <body> To apply a background image, use the <body> element as the selector with the background element as the selector with the background propertyproperty

The CSS background-repeat property allows you The CSS background-repeat property allows you to create a single column or row of the image, to create a single column or row of the image, rather than tiling completely across the pagerather than tiling completely across the page

Page 49: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 50: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 51: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 52: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Hexadecimal ColorsHexadecimal Colors

HTML uses hexadecimal numbers to express HTML uses hexadecimal numbers to express RGB color valuesRGB color values

Hexadecimal numbers are a base-16 numbering Hexadecimal numbers are a base-16 numbering system, so the numbers run from 0 through 9 system, so the numbers run from 0 through 9 and then A through Fand then A through F

Hexadecimal color values are six-digit numbers; Hexadecimal color values are six-digit numbers; the first two define the red value, the second two the first two define the red value, the second two define the green, and the third two define the define the green, and the third two define the blueblue

Page 53: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Hexadecimal ColorsHexadecimal Colors

Browser safe hexadecimal colors are always Browser safe hexadecimal colors are always made up of the following 2-digit color values: 00, made up of the following 2-digit color values: 00, 33, 66, 99, CC, and FF33, 66, 99, CC, and FF

Page 54: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using Background ColorsUsing Background Colors

One of the simplest ways to work with One of the simplest ways to work with hexadecimal color is to specify a background hexadecimal color is to specify a background color for your pages color for your pages

Use the bgcolor attribute in the <body> element, Use the bgcolor attribute in the <body> element, or with Cascading Style Sheets, use the or with Cascading Style Sheets, use the background-color property with body as the background-color property with body as the selectorselector

Page 55: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Using Background ColorsUsing Background Colors

You can use background color in tables for You can use background color in tables for different purposes, and all by using the bgcolor different purposes, and all by using the bgcolor attribute attribute

The table <table>, table row <tr>, table header The table <table>, table row <tr>, table header <th>, and table data <td> elements all accept <th>, and table data <td> elements all accept the bgcolor attributethe bgcolor attribute

Page 56: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 57: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Page 58: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Graphics SummaryGraphics Summary

Remember that the final destination is the Remember that the final destination is the monitor, not the printed page, so design monitor, not the printed page, so design accordinglyaccordingly

Most monitors have a resolution of 72 dpi. If Most monitors have a resolution of 72 dpi. If you are creating or scanning images, or you are creating or scanning images, or when you import images from a CD-ROM, when you import images from a CD-ROM, always change the final resolution to 72 dpi.always change the final resolution to 72 dpi.

Page 59: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Graphics Summary Continued Graphics Summary Continued

Reduce image size to the appropriate Reduce image size to the appropriate dimensions for a Web page. If you must use dimensions for a Web page. If you must use a larger image, let the user view a thumbnail a larger image, let the user view a thumbnail first, and provide the file size information.first, and provide the file size information.

Use the cache by reusing graphics as much Use the cache by reusing graphics as much as possibleas possible

Page 60: Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,

Graphics Summary continuedGraphics Summary continued

Work with a limited Web-safe palette when Work with a limited Web-safe palette when creating graphicscreating graphics

Test your work!Test your work! Browsers and computing Browsers and computing platforms render colors differently. Test at platforms render colors differently. Test at different color depths also.different color depths also.