Images on the Web Pictures Page backgrounds Element backgrounds list items Link displays arrows List markers Formats and Fidelity Many Formats j peg or jpg png tif gif Different encodings different sizes but they all will work ID: 605201
Download Presentation The PPT/PDF document "Images and Backgrounds" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Images and BackgroundsSlide2
Images on the Web
Pictures
Page backgrounds
Element backgrounds (list items!)
Link displays (arrows)
List markersSlide3
Formats and FidelitySlide4
Many Formats
j
peg 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 capitalizationSlide5
How much fidelity?
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
webSlide6
Tools
Changing
Fidelity
Formats
Cropping
Tools
Programs
Web:
PhixrSlide7
Images in HTMLSlide8
Images in HTML
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 validateSlide9
Picture Sources
Your own
Reduce fidelity!
Publicly available
Flickr
and the Creative Commons
Google
and labeled for reuse
IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENTSlide10
Formatting and SizingSlide11
Formatting img
All the box-related characteristics in CSS
Add class
in HTMLSlide12
Resizing
and Cropping
Resize and crop before you put it in the folder
Why?
Size on page
Size of file
More controlSlide13
Sizing Pictures in CSS
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 CSSSlide14
Adding a caption
<figure>
<
img
…>
<
figcaption
>caption</
figcaption
>
</figure>Slide15
Images as BackgroundSlide16
Overall page design
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 Slide17
Background Image
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-repeatSlide18
Opacity
1
is fully opaque :
can’t see through
0 is fully transparent:
background disappears
Biggest issue:
Everything inside inherits the opacity
Figures problematicSlide19
Gradients
Any place that you have a background
Lots of different types
Google it!
Not supported consistently on browsersSlide20
Storing ImagesSlide21
Where are pictures stored?
Can be any where on the web
src
has full
url
<
img
src
=“http
://
www.cs.unc.edu/
cms
/about-us/sittersonsmall.jpg” alt=“
Sitterson
”>
Problems
Pictures change or disappear
You’re poaching on their resources
NOT PERMITTED FOR THIS CLASSSlide22
Preferable: IN THE FOLDER
If you only have one or two, just another file
s
rc
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 websiteSlide23
Same image on ALL your websites
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
”>Slide24
References Summary
(
src
or
href
)
In my folder
file.ext
In a subfolder
subfolder/
file.ext
In a higher folder
../
file.ext
O
n the web
http://www. …