chapter5.ppt

Basics of Web Design Chapter 5 Graphics & Text Styling Basics Basics of Web Design: HTML5 & CSS, 6th Edition Copyright © 2022 Terry Ann Morris, Ed.D. https://terrymorris.net 1  Learni...

Basics of Web Design Chapter 5 Graphics & Text Styling Basics Basics of Web Design: HTML5 & CSS, 6th Edition Copyright © 2022 Terry Ann Morris, Ed.D. https://terrymorris.net 1  Learning Outcomes Describe types of graphics used on the Web Apply the img, figure, and figcaption elements to add graphics to web pages Configure images as backgrounds on web pages Configure images as hyperlinks Configure multiple background images with CSS3 Configure text typeface, size, weight, and style with CSS Align and indent text with CSS Configure list markers with CSS Configure an image map Copyright © 2022 Terry Ann Morris, Ed. D. 2 Types of Graphics Graphic types commonly sed on web pages: GIF JPG PNG WebP Copyright © 2022 Terry Ann Morris, Ed. D. 3 GI F Background Background color – no color transparenc configured y to be Graphics Interchange Format transparent Best used for line art and logos Maximum of 256 colors One color can be configured as transparent Can be animated Uses lossless compression Can be interlaced Copyright © 2022 Terry Ann Morris, Ed. D. 4  JPEG Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent Progressive JPEG – similar to interlaced display Copyright © 2022 Terry Ann Morris, Ed. D. 5 PNG Portable Network Graphic Support millions of colors Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for Web display) Support interlacing Use lossless compression Combines the best of GIF & JPEG Browser support is growing Copyright © 2022 Terry Ann Morris, Ed. D. 6  WebP https://developers.google.com/speed/web p/ Supports millions of colors Supports transparency Uses both lossy and lossless compression Intended to provide improved compression for GIF and JPG images Browser support is growing Copyright © 2022 Terry Ann Morris, Ed. D. 7  Image Optimization The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size. Photographs taken with digital cameras are not usually optimized for the Web Use a graphics application to: Reduce image dimensions Reduce size of the image file Copyright © 2022 Terry Ann Morris, Ed. D. 8 Optimize An Image for the Web Image Optimization Reduce the file size of the image Reduce the dimensions of the image to the actual width and height of the image on the web page. Image Editing Tools: GIMP (free!) Adobe Photoshop http://pixlr.com/editor (free!) Copyright © 2022 Terry Ann Morris, Ed. D. 9 Choosing Names for Image Files Use all lowercase letters Do not use punctuation symbols and spaces Do not change the file extensions (should be.gif,.jpg,.jpeg, or.png) Keep your file names short but descriptive i1.gif is probably too short myimagewithmydogonmybirthday.gif is too long dog-birthday.gif may be just about right Copyright © 2022 Terry Ann Morris, Ed. D. The Image Element Configures graphics on a web page src Attribute File name of the graphic alt Attribute Configures alternate text content (description) height Attribute Height of the graphic in pixels width Attribute Width of the graphic in pixels Copyright © 2022 Terry Ann Morris, Ed. D. 11  Accessibility & Images Required: Configure the alt attribute Alternate text content to convey the meaning/intent of the image If the image contains a text message, then the text should typically be the value of the alt attribute NOT the file name of the image Use alt=“” for purely decorative images Recommended: If your site navigation uses image links for the main navigation, provide simple text links at the bottom of the page. Copyright © 2022 Terry Ann Morris, Ed. D.  Image Links To create an image link use an anchor element to contain an image element Home Browsers automatically add a border to image links. Configure CSS to eliminate the border img {border-style: none; } Copyright © 2022 Terry Ann Morris, Ed. D. 13  Thumbnail Image A small image configured to link to a larger version of that image. Copyright © 2022 Terry Ann Morris, Ed. D. 14 CSS background-image Property Configures a background-image By default, background images tile (repeat) body { background-image: url(background1.gif); } Copyright © 2022 Terry Ann Morris, Ed. D. CSS background-repeat Property Copyright © 2022 Terry Ann Morris, Ed. D. Using background-repeat trilliumbullet.gif: h2 { background-color: #d5edb3; color: #5c743d; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; } Copyright © 2022 Terry Ann Morris, Ed. D. Multiple Background Images body { background-image: url(coffeepour.jpg) background-repeat: no-repeat; background: url(coffee.gif) no-repeat left bottom, url(coffeepour.jpg) no-repeat; } Copyright © 2022 Terry Ann Morris, Ed. D. 18 Configure Typeface with CSS font-family property Configures the font typeface of the text Include a generic family name p { font-family: Verdana, Arial, sans-serif; } Copyright © 2022 Terry Ann Morris, Ed. D.  The font-size Property Configures the size of text p { font-size: 90%; } Copyright © 2022 Terry Ann Morris, Ed. D. Align and Indent Text with CSS text-align property Configures the alignment of text h1 { text-align: center; } text-indent property Configures the indentation of the first line of text in an element p { text-indent: 5em; } Copyright © 2022 Terry Ann Morris, Ed. D.  font-weight property More CSS Text Properties Configures the boldness of text li {font-weight: bold; } font-style property Configures the style of the text #special { font-style: italic; } line-height property Modifies the height of a line of text p { line-height: 120%; } text-decoration property Modifies the display of text a { text-decoration: none; } Typically used to remove the default underline from hyperlinks text-transform property Configures the capitalization of text h3{ text-transform: uppercase; } letter-spacing property Configures the space between text characters h1 { letter-spacing: 3px; } Copyright © 2022 Terry Ann Morris, Ed. D. Configure List Markers with CSS CSS Properties list-style-type list-style-image list-style position Example: ul {list-style-image: url(marker.gif); } Copyright © 2022 Terry Ann Morris, Ed. D. 23  Favorites Icon Small icon that displays in the address bar or tab bar of some browsers Also called a favicon Copyright © 2022 Terry Ann Morris, Ed. D. 24 Image Map map element Defines the map area element Defines a specific area on a map Can be set to a rectangle, circle, or polygon href Attibute shape Attribute coords Attribute