komodo edit project › helping you find your folder laptop › delete what you don’t need ›...
Post on 01-Jan-2016
219 Views
Preview:
TRANSCRIPT
Colors and Images
Logistics
Tidying Up
Komodo Edit Project› Helping you find your folder
Laptop› Delete what you don’t need› Keep class “doodles” in a single “sandbox”
folder Isis
› Delete what you don’t need
Structure and format
First page of every site is to be index.html
Works fine if you have then in different folders
Remember› Formatting of HTML and CSS› Validation of HTML and CSS
Course Page Do NOT spread items across multiple
pages. More work for us. Will send you notes about problems I
found NEW REQUIREMENT for link<li> Project 1: <a href=“” target=“_blank”>short name</a> (author names)</li>
Colors
Colors – Paint (Subtractive Color Model)
Primaries: magenta, yellow, and cyanThis color system is called subtractive because:
each primary color absorbs (subtracts) a certain part of the color spectrum.every time a color is added, less light is reflected.When you mix all three primaries together, the entire spectrum of color is absorbed, and we’re left with black.
Colors -- Computer Screen (Additive Color System)
Primaries: Red, Blue, GreenAdditive color systems start without light (black).Light sources combine to make a color.As colors are added, the resulting color is brighter.
ColorsWe’ll be working with the additive color systemMix various amounts of red, green, and blue to create a color.Colors can be represented by
namean rgb (dec, dec, dec) valuehexadecimal (# hx hx hx) value.
Colors (cont)
For RGB, each color is indicated by a number from 0-255
(0,0,0) = black(255,255,255) = white
For Hexadecimal (hex), each color is indicated by 6 values from 0 – F
#000000 = black#FFFFFF = white
Hex...
Each two letters/numbers represent red, green, or blue in that order.Examples:
#FF0000 = red#00FF00 = green#0000FF = blue
#0F6480
#ADFAA5
#E01B4C
Why Hexadecimal?
How do computers store information? Bits 1 and 0 Binary numbers are too hard to use Group them together in groups of 4 That’s hexademical!
Color Shorthand
Sometimes you will see colors as#123
This is the same as#112233
Why? Still a pretty broad range of colorshttp://www.december.com/html/spec/color3hex1.html
Helpful Color Links
A list of color namescolorpicker.com
Identifying Colors
Eyedropper for Chrome Colorzilla for Firefox Colorpic
Color Combinations
Paletton Adobe
Gradients
Any place that you have a color Lots of different types Google it!
Images
Black and White Pictures
Pictures are stored as pixelsMonochrome:
BLACK or WHITE
What is needed?
Different levels of black and white
› Shades of gray
› Percentage of black
ASCII Images
Instead of pixels, use characters
Color Pictures
What is a Color Pixel?
Red Green and Blue Each has a value from 0 to 255
Sound familiar?
Formats
Many Formats
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
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 web: phixr
Images in HTML
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 validate
Where are images used
Pictures Backgrounds Link displays List markers
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 CLASS
Preferable: IN THE FOLDER
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
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”>
References Summary(src or href)
In my folderfile.ext
In a subfoldersubfolder/file.ext
In a higher folder ../file.ext On the web
http://www. …
Picture Sources
Your own Publicly available
› Flickr and the Creative Commons› Google and labeled for reuse
IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT
Formatting and Sizing
Formatting img
All the box-related characteristics in CSS
Add class in HTML
Resizing and Cropping
Resize and crop before you put it in the folder
Why?› Size on page› Size of file› More control
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
CSS
Adding a caption
<figure><img …><figcaption>caption</figcaption>
</figure>
Images as Background
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
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 Background-size Background-repeat
top related