View
220
Download
0
Category
Preview:
Citation preview
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 1© 2010, Mike Murach & Associates, Inc. Slide 1
Chapter 8
How to work with images
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 2
Objectives
Applied 1. Use HTML to include images on a web page and CSS to align and
float images. 2. Use HTML to create an image map that can be used to link to
more than one web page.
Knowledge 1. List and describe the three types of images that are used with web
sites. 2. Describe the proper use of the img element and its related CSS. 3. Describe the use of an image editor for sizing an image and
changing its image type. 4. Describe the use of an image editor for animating images. 5. Describe the use of thumbnails, favicons, and image maps.
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 3
Image types JPEG
GIF
PNG
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 4
Typical JPEG images
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 5
Typical GIF images
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 6
Attributes of the <img> tag src
alt
longdesc
height
width
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 7
Properties for sizing an image height
width
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 8
The HTML for two images <p><img src="images/lilies.jpg" alt="lilies" height="150px" width="200px" /> <img id="small" src="images/lilies.jpg" alt="lilies" /></p>
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 9
CSS for resizing the second image #small { height: 75px; width: 100px; }
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 10
The images in a web browser
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 11
The property for aligning images vertically vertical-align
Common keywords for the vertical-align property bottom
middle
top
text-bottom
text-top
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 12
The HTML for a web page with three images <h2>To order now:</h2> <p><img src="images/computer.gif" alt="computer" /> <b>Web:</b> www.murach.com</p> <p><img src="images/telephone.gif" alt="phone" /><b>Phone:</b> 1-800-221-5528</p> <p><img src="images/fax.gif" alt="fax" /> <b>Fax:</b> 1-559-440-0963</p>
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 13
CSS that aligns the images img { vertical-align: middle; margin-right: 10px; }
The images in a web browser before and after they’re aligned
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 14
The properties for floating images float
clear
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 15
Some of the HTML for a web page <img src="images/students.jpg" alt="students" width="256px" height="171px" /> <ul> <li>in college and university MIS programs that focus on providing students with practical, real-world experience</li> <li>by technical institutes and community colleges that focus on the skills that employers are looking for</li> <li>in Continuing Ed and Extension programs where the students are professionals who are expanding their skills</li> </ul> <p id="last">So if your program fits one of those profiles, please take a look at our books. I’m confident you’ll discover a new level of structure, clarity, and relevance that will benefit both you and your students.</p>
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 16
CSS that floats the image and clears the last paragraph
img { float: left; margin-top: 15px; margin-bottom: 10px; } #last { clear: left; }
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 17
The HTML in a web browser
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 18
The main Photoshop Elements screen for editing
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 19
The controls for working with the size of an image
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 20
Changing the image type and quality of JPEG file
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 21
The controls for GIF, PNG-8, and PNG-24 files
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 22
The controls for working with an animated image
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 23
An image with a transparent color and a matte
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 24
An image without transparency and with transparency and a matte
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 25
Creative Commons license conditions for images and icons
Attribution
Share Alike
Non-Commercial
No Derivative Works
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 26
Creative Commons licenses Attribution Attribution Share Alike Attribution No Derivatives Attribution Non-Commercial Attribution Non-Commercial Share Alike Attribution Non-Commercial No Derivatives
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 27
Popular web sites for images www.freefoto.com openphoto.net www.sxc.hu
Popular web sites for stock photos www.istockphoto.com us.fotolia.com www.gettyimages.com
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 28
Popular search engines for stock photos search.creativecommons.org everystockphoto.com
Popular web site for finding icons www.smashingmagazine.com
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 29
Thumbnails in a web page
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 30
Photo displayed when fifth thumbnail is clicked
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 31
The HTML for the thumbnails <h3>Ram Tap Combined Test</h3> <p> <a href="p1.html"><img src="thumbnails/t1.jpg" alt="Photo 1" /></a> <a href="p2.html"><img src="thumbnails/t2.jpg" alt="Photo 2" /></a> <a href="p3.html"><img src="thumbnails/t3.jpg" alt="Photo 3" /></a> <a href="p4.html"><img src="thumbnails/t4.jpg" alt="Photo 4" /></a> <a href="p5.html"><img src="thumbnails/t5.jpg" alt="Photo 5" /></a> <a href="p6.html"><img src="thumbnails/t6.jpg" alt="Photo 6" /></a> </p>
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 32
A web page with a favicon displayed
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 33
Popular programs and tools for creating favicons Axialis Icon Workshop
Photoshop plug-in
IrfanView
FavIcon from Pics
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 34
The attribute of the map element for creating image maps
name
The attributes of the area element for creating image maps
href
shape
coords
alt
The attribute of the img element for creating image maps
usemap
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 35
An image that consists of two overlapping books
HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 36
HTML for an image map that uses the image <img src="images/new_books_2009.jpg" alt="New books" usemap="#books" /> <map name="books"> <area href="pls8.html" shape="poly" alt="C++ 2008" title="C++ 2008" coords="1, 19, 114, 0, 122, 53, 106, 143, 26, 158, 24, 149" /> <area href="mdom.html" shape="poly" alt="JavaScript" title="JavaScript" coords="128, 21, 241, 42, 218, 178, 103, 159" /> </map>
Recommended