Transcript Powerpoint

Pictures
 Page backgrounds
 Element backgrounds (list items!)
 Link displays (arrows)
 List markers

Formats and Fidelity
jpeg or jpg, png, tif, gif, …
 Different encodings, different sizes but
they all will work

› Actually different ways to COMPRESS them
 Why compression?
1000 red pixels in a row…
› That’s why they are different sizes

But you MUST use the correct extension
name and capitalization

Big difference in size is how many pixels
were used (dpi)
› Isis WILL run out of space

Don’t use more than you need!
› Common dpi: 96, 300, Dimensions in pixels (700,
2000, 4000, …)
› Little pictures don’t need that much detail
› Don’t always need HD!

Tools to change the fidelity
› Use any program
› Can do it on the web

Changing
› Fidelity
› Formats
› Cropping

Tools
› Programs
› Web: Phixr
Remember that HTML is just text
 Need to point to pictures
 Use the img tag
<img src=“where” alt=“what”>
 alt:

› screen reader
› REQUIRED for this class and to validate

Your own
› Reduce fidelity!

Publicly available
› Flickr and the Creative Commons
› Google and labeled for reuse

IMPORTANT TO ASSURE NO COPYRIGHT
INFRINGEMENT
All the box-related characteristics in CSS
 Add class in HTML

Resize and crop before you put it in the
folder
 Why?

› Size on page
› Size of file
› More control
HTML permits you to put size on an img, but
NOT in this class.
 ALWAYS do it in css.


Only size ONE dimension. Deductions for
using both: funny house effect

Why not always resize picture to wanted size?
› May want to use image multiple times
› Simpler to make multiple pictures consistent
in CSS
<figure>
<img …>
<figcaption>caption</figcaption>
</figure>
Default: window size
› Advantage: grows and shrinks easily
› Disadvantage: harder to design
 Making body fixed width
› Advantage: easier to control
› Disadvantage: scroll bars and unused space
 Using fixed width section in default body
› Combines advantage of fixed width without scroll bar
› Allows complex backgrounds


Body background
› Need to assure readability
› Simple images (see resources)
› For busier images: use overlay
 Use div or section or …
 Opacity (0 to 1) to let it show through
› Background-image: url(“file name”);
 Background-size
 Background-repeat
1 is fully opaque :
can’t see through
 0 is fully transparent:
background disappears
 Biggest issue:
Everything inside inherits the opacity
Figures problematic

Any place that you have a background
 Lots of different types
 Google it!
 Not supported consistently on browsers


Can be any where on the web
› src has full url
<img src=“http://www.cs.unc.edu/cms/aboutus/sittersonsmall.jpg” alt=“Sitterson”>

Problems
› Pictures change or disappear
› You’re poaching on their resources

NOT PERMITTED FOR THIS CLASS

If you only have one or two, just another
file
› src just needs the file name
› <img src=“sittersonsmall.jpg” alt=“Sitterson”>
› REMEMBER: case matters

If you have a lot, keep them in their own
folder
› src needs the path
› <img src=“images/sittersonsmall.jpg”
alt=“Sitterson”>

Either is specific to this website

Examples
› Company logo
› Your picture

Put it in the top level
› e.g., comp101 for this class
› (same place as your course page)

Reference as
› <img src=“../sittersonsmall.jpg”
alt=“Sitterson”>
 In
my folder
file.ext
 In a subfolder
subfolder/file.ext
 In a higher folder
../file.ext
 On the web
http://www. …